스터디 : 모임 앱은 어떤 모습이어야 할까? - 앱 개선(1)

원문: https://brunch.co.kr/@jung1elove89/1

모임 앱은 어떤 모습이어야 할까? - 앱 개선(1)

 

이번 과제를 진행하기 전, 참고 자료를 찾다가 우연히 이 아티클을 보게 되었다. 개선 전후 화면이 눈에 띄게 다르고 나름의 논리대로 개선한 과정이 적혀있어 참고해보면 좋을 것 같았다. 문제점, 개선방향, 개선점 등 과정별로 분류가 잘 되어있다.

---

개선 전 메인 화면(좌) / 개선 후 메인 화면(우)

1. 문제점

브랜드의 정체성과 제공하는 핵심 기능이 잘 드러나야 한다.

 

1) 핵심 기능이 잘 드러났는가?

기존 서비스에서는 제공하는 핵심 기능이 무엇인지 알아보기 힘들게 메뉴 구성이 되어 있었다.

서비스 이름이자 핵심 기능은 '소모임'인데 비슷한 수준의 사람들이 모인 보통의 무료 모임이 아니라, 선생님이 따로 있는 '유료 클래스'를 첫번째 자리, 일반적으로 홈 화면을 의미하는 집 모양 아이콘과 함께 배치했다. 여기서부터 오류가 발생한다. 앱을 켜면 소모임 탭이 먼저 노출되기 때문이다.

각 아이콘과 쉽게 매치되지 않는 각 메뉴의 설명도 문제다. 

• 홈 아이콘 - 유료
• 검색 아이콘 - 소모임
• 말풍선 아이콘 - 내 모임
• 톱니바퀴 아이콘 - 설정

가장 중요한 홈 아이콘을 누르면 소모임 목록이 나오게 하고, 유료 클래스는 별도의 아이콘을 추가하고, 내 모임에는 사용자 프로필 아이콘이나 썸네일을 사용하는 것이 옳다.

 

2) 브랜드 정체성이 잘 드러났는가?

앱 로고에 들어간 파란색, 민트색, 핑크색과 전혀 관계 없는 다홍색이 UI의 프라이머리 컬러로 사용되고 있었다. 컬러는 곧 서비스와 브랜드의 상징이다. 일관된 인상을 주고 싶고 하나의 이미지를 심어주고 싶다면 로고에 쓰인 컬러를 사용하는 것이 좋다.

또한, 배경과 적절한 대비를 주어 누구나 쉽게 중요한 것을 찾을 수 있도록 해야 한다. (다홍색은 색 대비 테스트를 통과하지 못했다)
* 색 대비 테스트: https://webaim.org/resources/contrastchecker/

 

3) 편리하게 탐색할 수 있는가?

• 페이지 타이틀 위치에 자리잡은 알림 버튼은 혼란을 야기한다.
• 목록(카드) 타이포그래피 계층이 제대로 잡혀있지 않아 한눈에 들어오지 않는다.

---

2. 개선 방향

비슷한 도메인인 Class 101과 Frip 앱을 리서치하고 모임을 조금 더 매력적으로 보여주고 가입을 유도하는 방식을 차용했다. 상단 히어로 영역에 클래스를 광고하고, 첫 화면에서 카테고리별로 모임을 찾기 좋게 되어있는 점을 참고했다.

---

3. 개선점

아이콘과 레이블이 어울리도록 바꿔주고 필요한 기능(저장)을 추가하였다.

 

대비 높은 색상을 활용했다. 
메인 컬러의 색상 대비는 4.5:1이 넘도록 하고, 서브 컬러는 3:1 이상으로 조정했다.

 

상단 커다란 영역에 큰 주제를 던지고, 아래에 관련된 모임 목록을 배치했다. 주제 영역에는 브랜드 아이덴티티 컬러를 활용했다.

 

 

서치와 알림 버튼은 우측 상단에 배치해 화면 균형을 맞추고 선택하기 용이하도록 했다.

 

19가지나 노출되었던 관심분야를 제한해 선택지를 줄였다.

 

모임의 정보를 정리해 한눈에 들어오도록 했다.

---

🤔 나의 생각

• 강조 없이 밋밋하게 목록만을 제공했던 기존 앱과는 다르게, 큰 영역에 테마(주제)를 제시하고 아래에 해당하는 모임 목록을 추천하는 방식이 보기 좋았다. 주제의 타이틀, 서브타이틀도 사용자의 기분을 전환하고 모임 참여를 독려해 좋은 UX 라이팅이라고 생각했다.
  
  
• 인기 관심분야 Top 6, 이번주 클래스 모임/인기 모임/신규 모임 등 카테고리별로 목록을 분류해 사용자가 관심 있을 만한 정보를 제공하는 것은 좋은 방향이라고 생각했다.
  
  
• 목록(카드)의 정보 개편은 반드시 필요해보였는데, 개선 후 전보다 많이 보기 좋아졌다. 하지만 중요도가 높은 카테고리를 이미지 안쪽에 배치하고, 각각 구분이 다른 클래스(/모임)와 프리미엄(/일반)을 같은 영역에 배치하는 등 아쉬운 점이 있었다. 나라면 아래처럼 개선했을 것 같다.
  
  • 프리미엄 모임 태그(이미지 안에 포함)
  • 이미지
  • 카테고리: 운동/스포츠, 요리/베이킹 등 분야가 눈에 띌 수 있도록
  • 모임 이름
  • (유료인 경우에만) nn,000원
  • 인원은 전체의 정원인지, 현재 모인 인원인지를 나타내기 위해 3/10과 같은 형태로 표기
• 브랜드 정체성 부분은 특히 아쉬웠는데, 로고에서 파생된 색상을 사용했지만 일관된 브랜드 이미지를 주는 데에는 실패했다고 생각한다. 나라면 로고의 파란색, 민트색, 핑크색 3색을 최대한 살리고, 임의로 넣은 노랑, 주황색 등 따뜻한 계열의 색은 사용하지 않았을 것 같다.