본문 바로가기
AVA_포트폴리오

[모임숲 UI디자인] 스크린 버전 -1차 시안

by Ava의 아카이브 2023. 5. 8.

디자인 작업 기간 : 2주

 

모임숲 UI디자인에 있어서 가장 시간이 많이 들었던 부분은 나무 심볼과 동물 캐릭터 디자인이었다.

 

나무 심볼 : 모임이 활성화 될 수록 나무가 성장하고, 모임이 주기적으로 열릴수록 꽃이나 열매가 열리는 것으로 직관적으로 표현하고자 노력했다.

동물캐릭터 : 참여자들이 캐릭터를 결정하고, 모임 참여도가 높을수록 횟수나 모임 개설 횟수에 따라 캐릭터 아이템을 주고, 아이템으로 캐릭터를 꾸밀 수 있다

 

앱의 콘텐츠를 채워나가는 데 심볼과 캐릭터는 중요한 부분을 차지했고, 디자인해야 하는 심볼의 종류도 이용자의 취향을 고려해서 다양하게 만들어야 했기 때문에 2주동안 학원에서 낮에는 진도를 나가고 밤과 주말에 남는 시간에 디자인하는 것이 빠듯한 일정이었다.

 

또한, 온보딩 페이지에서는 모임숲의 서비스와 이미지를 간결하면서도 함축적으로 나타내고자 했기 때문에 어떻게 디자인할지 고민이 깊었다. 사용자들이 좋아하는 취미가 무엇일까 생각하면서 취미를 상징하는 일러스트로 온보딩 화면을 채워보았다.

 

 

 

로그인 페이지는 검색연동으로 빅데이터 서비스를 제공하기 때문에, 네이버와 구글 로그인 페이지를 넣었고, 간편한 로그인을 위해 카카오도 연동하도록 설정했다. 

 

이용자가 가입을 원치 않는 경우는 둘러보기 메뉴를 통해서 동네 지도에서 나무 아이콘의 분포도를 확인하고, 모임 종류를 필터링하며 검색할 수 있는 정도의 서비스를 체험할 수 있도록 설정했다.

 

인기있고 모임 활성이 잘 된 모임일수록 나무에 꽃과 열매가 열리는 나무 심볼을 잘 보이도록 디자인했다.

 

 

캐릭터는 옷을 입어야 하기 때문에, 기본 컬러는 아이보리톤의 차분한 색감으로 기본 컬러를 결정했다. 시간이 부족해서

동네 지도에 있는 나무 심볼을 더 단순하게 디자인하지 못해서 다음에는 나무를 형상화한 단순한 아이콘을 디자인해보고 싶다.

 

 

빅데이터 서비스로 관심사를 자동으로 추천받을 수 있는 페이지다. 홈메뉴에서 바로 빅데이터 추천 화면으로 넘어갈 수 있도록 설계했고, 검색연동을 하지 않는 경우는 스마트폰 사용 기록을 참조하여 앱 이용자가 어떤 앱을 주로 사용하는지를 근거로 관심사를 추천하도록 설정했다.

 

사용자가 검색연동을 하는 경우는 더욱 다양하고 세밀한 카테고리의 모임을 추천받을 수 있다.

 

 

모임숲 기획에서 또 한 가지 특색있는 점은, 시간대별로 모임을 검색할 수 있다는 것이다. 새벽/오후/저녁 모임으로 나뉘어서 이용자들이 자신의 라이프 스타일에 맞는 모임을 다른 시간대별 모임과 섞이지 않고 필터링해서 검색할 수 있다.

 

시간대별로 모임을 나타내는 페이지 색이 달라지는데, 밝은 하늘색, 하늘색, 짙은 하늘색으로 상단 페이지 컬러가 구분된다. 새벽 모임은 별, 저녁 모임은 반딧불로 포인트를 주려고 했다.  

 

캐릭터 옷은 이때는 시간 부족으로 준비중으로 남겨두었고, 최종 포트폴리오 작업 때 완성할 수 있었다.

 

 

단골 가게로 등록한 경우, 모임 약속을 잡을 때 바로 예약하기 편리하도록 설정했고, 생일이거나 모임 이벤트가 있는 경우 가게와 제휴 서비스를 맺어서 쿠폰을 지급하는 등의 서비스를 제공할 수 있도록 동네 가게 페이지를 디자인했다.

단골 가게 소개 페이지에서 리뷰메뉴 옆에는 좌석수를 표시했고, 단체 모임이 가능한지 여부도 표기했다. 

 

모임을 개설하거나 모임을 관리할 때 필요한 다양한 부가기능을 글쓰기 메뉴에 추가했다. 모임을 개설할 때 취미와 소셜클래스를 구분하도록 했고, 시간대 설정, 연령 및 인원 제한, 나무 심볼 선택 등 옵션을 다양하게 고를 수 있도록 이용자의 니즈를 고려했다.

 

 

댓글