brunch

You can make anything
by writing

C.S.Lewis

by Chloe Jun 23. 2020

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

COVID-19의 도래로 많은 이들이 대다수가 한 공간에 모이게 되는 상황을 기피하게 되면서 개인적으로 소규모 단위의 모임 지원 플랫폼이 있었으면 했다.

그런데, 애플스토어에서 검색해보니 이미 사용자가 꽤 되는 비슷한 서비스를 지원하는 앱이 있었다.(소규모 특화는 아니다) 이를 접하곤 이 앱의 메인과 내 모임 화면을 개선해보며 모임을 제공하는 서비스 앱은 어떤 모습이어야 할지 고민해보며 공부를 진행했다.

Overview

개선 전 소모임 앱 화면(좌)과 개선 후 소모임 앱 화면(우)

여러분의 시간은 소중하기에 결과를 먼저 가져왔다. 좌측은 개선 전 화면이고 우측은 개선 후 화면이다.

이번 글에선 메인화면 개선에 대한 부분만 설명해보려 한다. 과정과 이유가 궁금하신 분들은 나와 함께 차근차근 살펴보자.

개선한 메인화면

1. 메인화면의 문제점

2. 개선방향

3. 개선

4. 참고자료

1. 메인화면의 문제점

앱의 메인화면은 브랜드의 정체성과 제공하는 핵심기능이 잘 드러나야 한다.*(참고 글: https://cracker.live/2019/03/27/%EC%B2%AB-%ED%99%94%EB%A9%B4%EC%9C%BC%EB%A1%9C-%EC%82%AC%EB%A1%9C%EC%9E%A1%EC%95%84%EB%9D%BC/)

소모임 앱은 크게 이 두 가지가 잘 드러나지 않아 앱이 전체적으로 매력적 이어 보이지 않게 했다.

(주)프렌즈큐브의 소모임(somoim) 앱 화면. 앱에 진입하면 두 번째 탭(좌측)부터 보인다.

문제 1. 약한 정체성

정체성이 약하게 느껴지는 원인을 두 가지로 나눠보았다.

(1) 명확하지 않은 탭 구성

우선, 이름처럼 '소모임'이 앱의 핵심 기능이라 생각이나, 앱의 탭을 살펴보니 '유료'라는 탭을 순서상 제일 앞에 두고 있었고 '유료'라는 탭에 있는 모임 리스트는 하루 단위의 유료 '클래스'를 모아 보여주고 있었다.

그런데 앱을 켜면 '소모임' 탭 화면이 먼저 나온다(상단 사진 우측). 여기서, 소모임을 강조하고 싶은 건지 유료 모임을 강조하고 싶은 건지 헷갈리기 시작한다. (소모임도 개설하려면 돈을 지불하긴 해야 한다.)

게다가 탭에 사용된 아이콘도 모습과 이름의 매칭이 어렵다.

집 아이콘 ≠ 유료

검색 아이콘 ≠ 소모임

말풍선 ≠ 내 모임

소모임 앱 탭 아이콘

(2) 드러나지 않는 브랜드 색상

앱의 로고에는 파랑, 민트, 핑크를 사용하고 있었으나, 앱 내의 주요 버튼(개설) 색상은 다홍색이었다.

아마 로고 색상들을 텍스트에 사용하거나 그 위에 화이트 텍스트를 얹기엔 대비가 약해 내린 결정이지 않을까 싶었지만 다홍색도 대비 테스트를 통과하지 못했다...(?)

대비 테스트 사이트: https://webaim.org/resources/contrastchecker/

소모임 앱 아이콘에 나타난 색상

대비 테스트를 통과하지 못한 다홍색 주요 버튼

문제 2. 어려운 모임 탐색 기능

그다음으론 모임을 찾고 알아보기 어려운 이유를 두 가지로 추려보았다.

(1) 어지러운 탐색 위계

리스트 탐색 위주의 구성을 고려한 듯 하나 리스트 자체가 너무 어지러워 탐색이 어려운데 상단의 검색과 분류 버튼은 구색만 갖춰놓은 느낌이다.

페이지의 타이틀 같은 알림 버튼은 이를 더 어렵게 한다...

상단 알림 버튼과 검색, 분류 버튼

(2) 한눈에 들어오지 않는 모임 리스트 정보

모임을 소개하는 리스트에서, 모임 제목에 사용되는 이모티콘과 구분이 어렵지만 각각의 색과 모양을 지니고 있는 분야 아이콘 그리고 모임 분류(?)(Premium, 유료, 부천시... 등등)에 들어간 색상, 빨간 모임 명수 텍스트 등 너무 많은 정보가 서로 싸우고 있었다. 나를 먼저 봐달라고. 나는 혼란에 휩싸였고 나에게 어떤 모임이 가치 있을지 결국 고르지 못했다. 게다가 모임 분류 위치에 '부천시'라는 지역 정보가 들어간 점이 더 헷갈리게 만들었다.

너희들 모두 소중한 정보야... / 구분하기 어려운 모임 리스트 정보

2. 개선방향

문제점에서 언급했듯 첫 화면에서 브랜드의 정체성과 제공하는 핵심기능이 잘 드러나야 했다.

주로 유료 클래스 모임을 제공하는 서비스를 리서치하였고, 개인적으로 클래스 소개 앱들처럼 모임을 좀 더 매력적으로 보여주고 가입을 유도하는 방식이 처음 모임을 시작하려는 사용자를 유입하기 더 적합해 보였다.

리서치

Class 101

Flip

프립 앱 첫 화면 (좌), 클래스 101 앱 첫 화면(우)

두 서비스 다 상단에 소비자를 끌어들일 수 있게 클래스를 소개하며 광고하고 있었고, 첫 화면에서 원하는 모임을 검색하거나 카테고리 별로 빠르게 찾을 수 있게 구성되어 있었다.

문제 정리와 리서치를 토대로 개선을 진행하였다.

3. 개선

(1) 탭 구성은 명확하게!

탭 별로 기능을 명확하게 구분하고 레이블과 어울리는 아이콘 모양으로 변경하였다.

첫 번째 탭에선 모임을 탐색하는 기능을 부여하고, 가입한 내 모임을 살펴볼 수 있는 '내모임'탭을 두 번째 순위로 위치했다. '개설'은 가운데에 두어 메인 버튼 역할처럼 수행할 수 있게 했고, '저장'은 없던 기능인데 '탐색'탭에서 탐색을 하다가 저장으로 관심 모임들을 등록해둬야 이후 가입률도 높아질 것이라 생각해 추가하였다.

아이콘과 레이블이 어울리도록 수정하고 필요 기능을 추가하였다.

(2) 대비 높은 색상 사용!

텍스트에도 쓰이고 색상 위에 흰 텍스트도 얹을 수 있도록 로고 컬러 외에 메인 컬러와 서브 컬러 그리고 시스템 컬러를 새로 정했다. 메인 컬러의 색상 대비는 4.5:1이 넘도록 하였고 서브 컬러는 모임 분류&정보 아이콘이나 일러스트, 큰 글씨, 부가적 정보 텍스트에 사용하기 위해 너무 어두워지거나 칙칙해지지 않도록 최소 3:1 이상으로 조정하였다.

새로 추출한 컬러

(3) 첫 화면 구성 변경

모임 큐레이션이 중심으로!

모임이 리스트로만 나열되어 있던 첫 화면을, 상단 제일 큰 자리에 주제별로 모임을 큐레이션 해서 보여주는 구성을 가져와 모임 추천 기능을 강조했다. 모임 추천 기능에 사용된 일러스트에는 위에서 추출했던 서브 색 중 로고의 컬러와 유사한 색을 사용하여 추천 기능 영역에서 브랜드의 느낌을 살리려 했다.

모임 큐레이션 섹션 (일러스트 세 가지)

알림 버튼과 검색 버튼 정리!

탭의 페이지 제목처럼 위치해 있던 말풍선 모양 알림 버튼을 의미가 맞는 종모양 아이콘으로 변경하고 서치 아이콘과 나란한 위치에 두어 메인 페이지의 큐레이션 타이틀과의 무게중심을 맞췄다. (메인화면에서 큐레이션이 보이고 나서 서치 아이콘이나 알림 아이콘이 보이길 원했다)

우측으로 옮겨진 서치와 알림 아이콘

노출 모임 분야 제한하기

모임 분야들 중 인기 있는 분야들만 메인에서 바로 탐색할 수 있게 추렸다. 분야 자체의 종류가 열아홉 가지나 되어 이를 모두 노출할 경우 사용자에게 선택을 더 어렵게 하기 때문이었다. 추가적인 탐색을 원하는 사용자만 볼 수 있도록 가로 스크롤을 하면 관심분야 6개 아이콘이 나오고 마지막에 더보기 버튼이 노출되도록 기획했다.

관심분야 가로 스크롤링

클래스도 모임과 함께 첫 화면에서 탐색되도록

소모임의 정체성을 더 강조하고자 나뉘어있던 클래스 탭을 버리고 메인 화면의 한 섹션으로 넣어 일반 모임과 함께 탐색할 수 있도록 했다. 상단의 찾기 버튼을 누르면 카테고리로 클래스와 일반 모임이 나눠지는 것을 고려했다.

메인 하단을 스크롤링하면 나타나는 클래스 소개 섹션 (가로 스크롤)

(4) 모임 정보 정리!

사용자에게 필요한 정보와 소모임 앱이 구분하고자 하는 정보는 아래와 같다고 생각하고 정리를 진행했다.

모임의 분야는 어디에 속하는지

이 모임이 클래스(1회성 유료 모임) 인지, 일반(지속적 무료) 모임인지 (모임 분류)

모임 중에서도 기능이 더 있는 프리미엄인지 일반인지

클래스(1회성 유료 모임) 라면 진행 일자는 언제인지, 정원은 몇 명인지, 가격은 얼마인지.

일반(지속적 무료) 모임이라면 가입 인원이 몇 명이나 되는 모임인지

메인에서는 총 3개의 리스트 형태를 취하고 있는데, 모든 리스트 형태에서 위에서 정리한 정보를 일관되게 전달하고자 했다. 추가로 리스트를 끊김 없이 탐색할 수 있도록 저장(하트 아이콘) 버튼을 넣고, 애매했던 클래스와 프리미엄 아이콘&텍스트를 좀 더 구별되도록 형태와 색상을 변경하였다. (Class: 학사모 / Premium: 다이아몬드) 거기에 어지럽게 색상이 들어있던 분야의 색과 이미지를 제거하여 텍스트로만 정보를 탐색하도록 정리해 이미지의 좌측 상단에 두었다.