전 세계적으로 앱 시장은 어느 정도 성숙했고 포화 상태에 이르렀습니다. 하지만 앱 시장의 매출 하락세를 걱정하는 리포트는 찾아보기 어렵습니다. 

모바일 앱 인텔리전스 플랫폼 App Annie 모바일 마켓 인덱스 보고서에 따르면 2019년 2분기에 모바일 다운로드와 소비자 지출 모두 최고의 실적을 기록했고 전 세계 스토어 기준으로 한 분기에 303억 회의 앱 신규 다운로드, 매출 226억 달러를 기록해 전년 동기 대비 20%의 성장을 보였다고 합니다. 

이미 앱은 우리 생활에 깊숙이 들어와 거대한 시장을 형성했고, 그 시장은 계속 성장하고 있는 겁니다.

 이미지 출처: App Annie 

그러면 이 거대한 시장에서 앱 개발사는 어떻게 파이를 차지할 수 있을까요? 

사용자가 앱을 사용할 때 접하는 화면을 좀 더 세련되게 유저 인터페이스(이하 UI)라고 부르는데, 이 UI를 통해서 사용자의 경험이 많이 좌우됩니다. 좋은 사용자 경험은 고객이 앱에 더 자주, 더 많이 머물게 하며 매출의 상승까지 자연스럽게 견인하게 마련입니다.

우리는 자주 사용하는 앱을 통해 행동 패턴을 자연스럽게 학습하고 하나의 사용자 심성 모형(Mental Model)을 형성합니다. 이 심성 모형을 벗어난 새로운 UI를 제공할 경우 사용자가 불편하다고 느낄 수 있기 때문에, 앱 시장에서는 제공하는 정보의 종류에 따라 적합한 UI의 형태가 정형화되기에 이르렀습니다.

그렇다면 우리 앱은 어떤 UI를 제공해야 할까요? 소위 시장에서 잘 나가는 앱부터 하나씩 톺아보며 해당 앱에서 사용된 UI 패턴에 대해서 살펴보고 아쉬운 점은 없는지, 어떤 식으로 UI가 진화해 나갈 것인지 살펴봅시다.

 이미지 출처: 카카오

국민 메신저, 카카오톡

첫 번째로 살펴볼 앱은 국민 메신저로 불리는 '카카오톡'입니다. TMI지만 제 아이폰 스크린 사용시간 순위 1위에서 좀처럼 내려오지 않는 앱이기도 합니다. (이젠 카톡 쓰면 아재라던데..)

카카오톡은 2018년 기준 한국에서 점유율이 94.4%로, 점유율이 매우 높은 그야말로 국민 앱입니다. 문자메시지를 보내던 시절 와이파이만 연결되어 있으면 공짜로 메시지를 날릴 수 있는 핵심 기능을 통해 국민 앱으로 떠올랐고, 스마트폰 시장까지 견인했다는 평을 받았습니다. 2014년 이후 간편 결제 서비스인 카카오페이가 붙었고, 2015년에는 카카오TV와 #검색, 채널 서비스를 출시하면서 모바일 메신저를 넘어 다양한 콘텐츠 플랫폼으로 변화하려는 움직임을 보여주고 있습니다. *참고1 (글 맨 아래 링크를 첨부했습니다.)

최근에는 채팅방에 광고창이 도입되어 유저들의 상당한 반발을 사기도 했으며, 앱 내에 점점 늘어나는 콘텐츠와 부가 기능으로 인해 길고 복잡한 것을 싫어하는 1020 사용자들의 이탈이 증가하고 있습니다. *참고2

이번 글에서 카카오톡의 비즈니스 모델에 대해 얘기하려는 것은 아니니, 다시 본론으로 돌아와서 본격적으로 카카오톡의 UI를 살펴보겠습니다.

메뉴 및 IA(Information Architecture)

우선 제가 보유한 핸드폰(Apple iPhone X, iOS12.4)으로 살펴본 카카오톡(8.5.0 버전, 2019년 8월 14일 기준 최신 버전)의 메뉴는 다음 그림과 같습니다.

 참고로, 게임별 메뉴의 경우 설정에서 보이기 옵션을 선택할 수 있습니다.

메신저라는 기본 기능에 충실한 친구(연락처 리스트)와 채팅(채팅방 리스트) 메뉴가 먼저 배치되어 있습니다.

하지만, 리텐션을 높이기 위해 뉴스, 콘텐츠 등을 제공하는 #채널과 게임별, 그리고 카카오페이, 헤어숍, 선물하기 등 카카오가 제공하는 다른 서비스로의 링크 성격을 띠는 더보기 메뉴를 추가로 제공합니다.

각 메뉴마다 상당히 많은 콘텐츠와 기능이 숨어있지만, 주로 접하게 되는 1단계 메뉴의 UI만 살펴보겠습니다.

메뉴별 UI 톺아보기

1. [친구], [채팅] 메뉴: 유사한 형태의 리스트 UI 제공

사용자가 주로 사용하는 두 메뉴 모두 유사한 UI를 보여주고 있습니다. 왼쪽에는 프로필 또는 채팅방 이미지가 표시되고 오른쪽에는 타이틀을 배치한 형태의 카드가 리스트처럼 쌓여 아래로 쭉 스크롤하게 되는 형태입니다.

친구 메뉴와 채팅 메뉴 UI 비교

이미지를 통해 각각의 카드를 구분할 수 있어 친구 목록, 대화방 목록 등을 표시할 때 주로 사용하는 UI를 사용하고 있습니다. 

[친구] 메뉴의 경우 A. 이름 B. 상태 메시지, [채팅] 메뉴의 경우 A. 채팅방 이름 B. 최근 대화 내용 일부를 보여주고 있는데 A와 B의 폰트 크기와 색깔로 Hierarchy를 주어 중요한 이름 정보가 먼저 눈에 보이도록 했습니다.

단, 친구와 채팅 화면의 UI가 매우 유사하여 혼동을 줄 수 있습니다. 친구 목록인 줄 알고 한참 스크롤하며 검색했는데 알고 보니 채팅방이었던 경험, 여러분들은 없으신가요?

 저자는 올리브영과 아무 관계가 있고 싶지만 1도 없습니다.

그리고 종종 표시되는 채팅방의 광고 배너입니다. 가장 상단에 채팅방과 비슷한 크기로 노출됩니다. 초기의 조잡한 광고 배너와 달리 최근에는 광고 디자인이 한 번 다듬어져서 깔끔한 인상을 받았고, 눈에도 크게 거슬리지 않습니다. 동일한 광고 배너라 해도 디자인의 수준이 사용자 경험에도 영향을 주고 있네요.

2. [#] 메뉴: 다양한 카드형 UI 사용으로 단조로움을 탈피

[#] 메뉴의 경우, 뉴스나 스포츠 쇼핑 등의 다양한 콘텐츠를 끊임없이 제공함으로써 앱 내 머무르는 시간을 높이기 위한 목적의 페이지라고 할 수 있습니다.

맨 상단에는 카테고리별로 탭이 나눠져 있고 사용자가 순서를 지정할 수 있습니다. 스크롤을 최대한 아래까지 내려서 스크린샷을 쭉 캡처해봤더니 가로 1125px 기준 세로 길이가 장장 16000px이 넘는군요. 저는 [#] 메뉴를 클릭했을 때 내용을 쭈욱 훑어보며 눈에 들어오는 키워드나 이미지 카드를 클릭해서 정보를 소비합니다. 대부분의 사용자들 또한 2~3회 스크롤해서 원하는 콘텐츠를 찾고 다음 depth로 이동할 것으로 예상됩니다.

*각 카테고리마다 모두 다른 UI를 제공하고 있지만, 편의상 #뉴스 탭을 선택해서 분석했습니다.

#채널 스크린샷 → UI 패턴화 → 확대 이미지

UI를 뜯어보니 흥미롭게도 사용자가 주로 머무를 것으로 예상되는 영역 안에 광고 배너가 상대적으로 많이 배치되어 있고, 광고 배너 크기는 모바일 디바이스 화면의 30% 가까이 차지하고 있습니다. 이러한 UI는 시각적으로도 거슬리지만 기사를 찾으며 스크롤을 쭉쭉 내리는 사용자에게 스크롤을 몇 차례 더 하게끔 만듭니다. 물론, 카카오에게는 수익을 가져다주겠지만요.

(꿀팁! 유저해빗 같은 행동 분석 툴을 사용해서 사용자가 어디까지 스크롤하는지 알 수 있답니다.)

사용자들이 좀처럼 내려오지 않는 하단 영역에는 읽을거리를 제공하되, 동일한 카드 UI를 반복적으로 사용하였습니다. 여기서도 카드를 3~6개씩 그룹핑해서 쭉 훑어 내려 읽으면서 시각적으로 쉼표 효과를 주어 탐색의 피로도를 줄여주는 배려가 돋보입니다.

콘텐츠를 담은 카드 UI의 경우 사진과 타이틀 배합의 레이아웃을 세 종류 이상 사용해 사용자들로 하여금 단조로움을 느끼지 않게끔 구성하려고 한 흔적이 보이네요.

3. [게임별] 메뉴: 광고와 배너 위주의 볼드한 구성

[게임별] 메뉴는 선택적으로 표시되는 탭이므로 간단하게 언급하고 넘어가겠습니다.

우선, 광고 배너가 [#] 메뉴의 배너보다 훨씬 큽니다. 화면의 50%를 넘게 차지하고 있네요. 역시 사용자가 쉽게 스크롤할 수 있는 영역 내에 광고를 2개나 배치했습니다. 그리고, 게임별 핫 게임을 타일형으로 배치한 것이 눈에 띕니다. 콘텐츠를 배치할 때는 앞서 다뤘던 UI 유형 중 카드 타입 A와 유사한 UI를 사용했네요.

[게임별] 메뉴 스크린샷과 UI 패턴화 비교

이미지 위주의 볼드한 UI 구성으로 콘텐츠를 자세히 읽게 하기보다는 원하는 게임을 빠르게 선택해서 다음 단계로 넘어가도록 정거장 기능을 하는 페이지라고 할 수 있습니다. 모바일 게임을 즐기지 않는 저로써는 그냥 지나치는 메뉴인데, 게임을 좋아하시는 유저분들의 피드백이 궁금합니다.

4. [더보기] 메뉴: 다양한 메뉴를 효율적으로 배치하는 타일형 UI

카카오톡의 각종 설정 기능을 비롯해 선물하기, 헤어숍 등 다양한 확장 서비스들을 한 화면에 모두 때려 박아(?) 압축률이 상당히 높은 페이지입니다.

[더보기] 메뉴 패턴화

채팅 UI에서도 볼 수 있었던 프로필이 가장 상단에 표시되어 있고 카카오페이 화면이 있습니다. 그 아래에는 다양한 서비스들을 한 데 모아 4열의 타일형으로 배치해두었습니다. 아이콘 디자인이 여러 버전에 걸쳐 바뀐 것으로 기억하는데 현재 단색의 아웃라인 아이콘이 가장 좋은 선택이라고 생각합니다.*참고3 

좀 더 강조하고 싶은(=수익률이 좋은) 메뉴는 컬러를 넣어 눈에 더 잘 띄게 했습니다.

더보기 페이지에서도 역시, 커다란 광고 배너는 빠지지 않습니다. 카카오의 수익을 향한 대단한 집념이 UI를 통해 여실히 드러나네요.

결론

카카오톡의 첫 번째 레벨의 메뉴 UI를 살펴보니 다음과 같은 특징을 찾을 수 있었습니다.   

주로 사용되는 UI 패턴은 카드형과 List다. 친구 목록, 채팅방, 콘텐츠 페이지 등 많은 정보를 스크롤할 수 있도록 제공하기에 가장 적합한 UI라고 볼 수 있다.

타일형, 리스트형 등의 UI도 용례에 맞게 등장한다.

대부분의 페이지, 그리고 페이지 내에서도 사용자들이 주로 머무르는 구간에 광고를 가능한 많이 배치했다.

카카오톡 UI 칭찬할 점   

많은 정보가 제공되는 화면에서는 글자 크기와 색깔, 적절한 이미지 사용 등으로 적절하게 Hierarchy를 부여해 중요한 정보를 눈에 잘 띄게 제공한다.

동일한 콘텐츠 유형이라도 다양한 레이아웃의 UI를 적절히 사용해 반복되는 리스트의 단조로움을 피하고, 사용자들을 화면에 더 오래 머무르게 할 수 있다.

타일형의 UI를 통해 작은 영역에서도 많은 메뉴를 효율적으로 배치하고 강조하고 싶은 메뉴만 컬러로 강조하는 등의 강약 조절이 돋보인다.

많은 정보를 어떻게 효율적으로 배치할지 고민하는 디자이너라면 카카오톡 UI를 참고합시다!

카카오톡 UI 아쉬운 점   

서비스의 메인 기능인 채팅을 위한 UI 외에 콘텐츠, 부가 기능 등 너무 많은 정보(TMI)가 제공되어 사용자 경험을 해치고 있다. 깔끔하고 단순한 UI를 원한다면, 서비스 기획에서부터 선택과 집중이 이뤄져야 한다!

광고 배너가 사용자의 화면 주 사용 영역에 과다하게 배치되어 있다. 수익성을 위해서는 탁월한 선택인지 모르지만 장기적으로는 사용자 경험을 해치고 사용자의 이탈을 불러올 것이다. *참고 4

친구 목록과 채팅방은 다른 기능임에도 불구하고 UI의 차이가 없어서 사용자로 하여금 쉽게 혼동을 유발한다.

이어지는 다음 회차에서는 카카오의 메인 기능인 채팅 UI를 조금 더 살펴보고 요새 10대들 사이에서 많이 쓰이는 Facebook 메신저와 새로운 인터랙션과 가벼운 UI로 두터운 팬층을 확보하고 있는 Snapchat, 그리고 Snapchat이 인수한 위치 기반 메신저 Zenly의 UI를 비교해보도록 하겠습니다. 기대해주세요!

*글에 대한 의견이 있으시면 댓글과 피드백 자유롭게 부탁드립니다.

참고 링크

1. 카카오톡 시장 점유율 기사: http://m.gametoc.hankyung.com/news/articleView.html?idxno=48341

2. 1020 고객층에 대한 책: <90년대생이 온다>

 1020 세대의 카카오톡 이탈을 다룬 기사:  https://jmagazine.joins.com/economist/view/320130

3. 솔리드 아이콘 vs 아웃라인 아이콘에 대한 글: https://medium.com/@uxmovement/solid-vs-outline-icons-which-are-faster-to-recognize-9bb0fc24821f

4. 광고 수익과 사용자 참여도 사이의 Golden Point에 관한 글: https://brunch.co.kr/@leeseijin/1

저자

윤하지 | @hotzzi (Facebook, Instagram, Dribbble)

학부 시절 UX 디자인을 전공했으며, 독일 소재 IT기업과 프랑스 파리의 국제기구에서 근무하며 디자인 경력을 쌓았다. 지금은 서울에서 행동 데이터 분석 툴을 서비스하는 유저해빗에서 기획, 디자인을 맡고 있다.