이웃 커뮤니티 SNS 애플리케이션

한국 아파트 주민을 위한 소셜 네트워크. 한국 사회의 주요 문제 중 하나인 '이웃 간 소통의 부재'를 풀기 위해 시작한 서비스입니다.

배경 & 문제점

1. 한국에서는 인구의 48%가 다양한 규모의 아파트 단지에 살고 있다.
2. 이웃 간의 전통적인 유대감이 빠르게 약해지고 있다.
3. 그 결과 발생하는 소통의 부재가 갈등으로 이어지고, 일부는 범죄로까지 번진다.

저희는 #2와 #3을 풀기 위해, 이웃끼리 소통할 수 있는 플랫폼을 만들고자 했습니다. 한국판 "Nextdoor"인 셈입니다.

서울의 아파트 단지

아이데이션

특정 아파트 단지 안에서 활발한 플랫폼이 되려면 어떤 요소가 주민들을 움직이는지 파악해야 했습니다. 리서치를 통해 다음을 확인했습니다.

1. 지역 한정 중고 거래 — 거래는 오프라인에서 이웃 간에 일어나는데, 직접 만나야 한다는 사회적 압력이 사기 가능성을 줄여준다.
2. 이웃 한정 피드 — 같은 아파트 단지 주민만 글을 쓰고 볼 수 있도록 도달 범위를 일부러 좁힌다.
3. O2O 서비스 — 투표, 이벤트, 소형 마켓을 단지 단위로 제공해 이웃이 함께 생활 문제를 풀 수 있게 한다.

사용자

핵심 타깃은 분명했습니다. 아파트 단지에 사는 30~40대 여성. 정보, 행사, 강연, 공연을 이웃과 공유하고, 저렴한 가격에 물건을 사고팔 수 있는 환경을 만들고 싶었습니다.

이런 상호작용이 플랫폼을 활성화하고, 한국 아파트 단지 안의 이웃 유대를 다시 잇는 데 도움이 되리라고 봤습니다.

디자인 솔루션

• 익숙하고 직관적
• 쉬운 사용성
• 깔끔하고 신뢰할 수 있는 인상

빠른 프로토타이핑

리서치를 토대로 본격적인 디자인·개발에 들어가기 전, Adobe XD로 Lo-fi 프로토타입을 만들었습니다. 위 가설을 검증하기 위해 내부 사용자 테스트를 진행했습니다.

앱 개요

이 앱은 SNS이고, 타임라인으로 사용자가 이웃의 글을 훑어볼 수 있습니다. 효과적인 소통을 위해 타임라인은 다른 SNS만큼 깔끔하고 단순해야 했습니다.

위 이미지는 메인 타임라인 뷰입니다. 위에서 아래로 상단 탭바, 알림 바(선택), 피드 카드, 하단 내비게이션 바로 구성됩니다.

피드 카드는 가장 중요한 컴포넌트입니다. 텍스트, 이미지, 투표, 마켓 글 — 모든 게시물이 이 카드로 그려집니다.

피드 & 피드 카드

카드는 사용 사례에 따라 여러 변형이 있습니다.

• 텍스트
• 이미지
• 마켓 & 공동 구매
• 링크 공유
• 투표 & 청원
• 웰컴 카드 & CTA

앱 전반의 통일성을 위해 카드를 디자인했습니다. 위에서 아래로 동일한 구조 — 사용자 정보, 콘텐츠, "좋아요"와 "댓글" 같은 액션 — 를 가집니다.

회원가입

사용자가 실제로 해당 단지에 사는지 확인하려면 상세 거주지 정보가 필요합니다. 회원가입은 늘 번거로운 단계라, 가능한 한 단순하게 만들었습니다.

총 6단계입니다.

1. 이메일 주소
2. 비밀번호 생성
3. 거주 도시 선택
4. 상세 주소
5. 닉네임 생성
6. 프로필 정보 (성별, 결혼 여부)

이 단계에서 무언가 잘못되면 사용자는 금세 답답해집니다. 이때 디자이너의 역할은 오류 상황에서 올바른 다음 길을 보여주는 것입니다.

저희는 사용자 동의를 받아 위치를 자동으로 가져와 단계를 줄이려고 했습니다. 그런데 연결 상태가 좋지 않거나, 위치 권한을 거부했다면 어떻게 해야 할까요?

차가운 오류 메시지는 도움이 되지 않습니다. 친근한 일러스트와 함께 대안 경로를 제공했습니다 — GPS를 쓸 수 없다면 사용자가 직접 주소를 입력할 수 있게 했습니다.

게시물 작성

사람들은 다양한 이유로 글을 씁니다. 중고 판매, 유용한 정보 공유, 단순한 일상 자랑까지요. 그래서 정보, 나눔, 판매, 꼭 알아야 할 것, 팁 같은 카테고리를 마련했습니다.

하단 내비게이션의 플러스 버튼을 탭하면 액션 시트가 올라와 카테고리를 고를 수 있습니다. 이후 글을 쓰고 게시 버튼을 탭하면 끝입니다. 카드의 형태와 타입은 카테고리와 콘텐츠(예: 링크 미리보기, 이미지 그리드)에 따라 자동으로 정해집니다. 어느 그룹에 게시할지도 고를 수 있습니다.

액션 시트

여러 형태의 액션 시트를 디자인해 내비게이션 깊이를 줄였습니다. 사용자는 현재 화면을 떠나지 않고도 작업을 마칠 수 있습니다.

예를 들어 액션 시트는 "카테고리 선택", "프로필 이미지 삭제", "그룹 필터"에 사용됩니다.

프로토타입 사용해보기

MarvelApp 클릭 프로토타입

마치며

이 앱이 우리 사회의 문제를 — 특히 한국 아파트 단지의 갈등을 부추기는 소통 부재를 — 줄이는 데 보탬이 되기를 바랍니다.

Interaction 갤러리에 피처드