brunch

매거진 UI 톺아보기 시리즈

라이킷 136 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 유저해빗 Aug 30. 2019

10대들이 쓰는 메신저, 뭐가 다른데?

[UI 톺아보기 시리즈] Messenger 2편

[주의] 본 글은 앱을 하나씩 선정해서 화면 인터페이스를 톺아보기(=샅샅이 훑어 가며 살피기) 위해 기획한 "UI 톺아보기 시리즈"입니다. 독자들의 관심을 끌기 위해 제목을 다소 자극적으로 선정했지만 글 내용은 UI 분석에 초점이 맞춰져 있음을 미리 밝혀 드립니다.

이전 글인 국민 앱 카카오톡, 10대들은 왜 이탈할까? 에서는 카카오톡의 메뉴 UI를 간단히 살펴보았습니다.

(혹시 못 보셨다면 한 번 읽어보세요. 마지막 부분에 짧게 요약이 되어 있으니 결론만 보셔도 됩니다.)

국민 앱 카카오톡, 10대들은 왜 이탈할까?

[UI 톺아보기 시리즈] Messenger 1편 | [주의] 본 글은 앱을 하나씩 선정해서 화면 인터페이스를 샅샅이 훑어 가며 살펴보기 위해 기획한 [UI 톺아보기 시리즈]의 첫 번째 글입니다. 독자들의 관심을 끌기 위해 제목을 다소 자극적으로 선정했지만 UI 분석에 관한 글임을 미리 밝혀 드립니다. :) 전 세계적으로 앱 시장은 어느 정도 성숙했고 포화 상태에 이르렀습니다. 하지만 앱 시장의 매출 하락세를

brunch.co.kr/@userhabit/59

계속 이어서 Z세대로 불리는 1020 사용자들이 활발하게 사용하는 글로벌 메신저 앱 (Facebook) Messenger, Snapchat 그리고 Zenly의 특징을 비교해보겠습니다. 세 앱은 모바일 앱 인텔리전스 플랫폼 App Annie 랭킹과 뉴스 리서치를 통해 선정하였으며 실제 연령별 앱 사용 정보와 다소 차이가 있을 수 있습니다. UI 분석과 함께 개인적으로 앱을 사용해보면서 흥미로웠던 기능도 함께 소개할 테니 재미있게 읽어주세요!

App annie 카테고리별 TOP10 (2019.08 한국 기준) 왼쪽: Android (Communication/Social ), 오른쪽: iOS (Social Network)

최근 대통령 추천 책으로 화제에 올랐던 <90년대생이 온다(임홍택 저)>에서는 신세대의 특징을 간단함, 병맛, 솔직함이라는 세 가지 키워드로 정리했습니다. 흥미롭게도 그들이 즐겨 쓰는 메신저에서도 유사한 특징을 찾아볼 수 있습니다. 이 키워드를 중심으로 Z세대들이 사용하는 메신저 앱을 살펴봅시다.

먼저, 위에서 언급한 세 가지 앱의 메뉴별 화면을 관찰해보세요. 어떤 앱인지 감이 오시나요?

클릭하시면 자세히 살펴볼 수 있습니다.

1. 간단함

단순한 메뉴 선택지

일단 세 가지 앱 UI의 눈에 띄는 공통점은 메뉴가 단순하다는 것입니다. 카카오톡의 경우 최소 4개, 최대 5개까지 메뉴를 제공하지만 세 앱은 모두 메뉴가 3개로 단순하게 구성되어 있네요. 왜 그럴까요?

앱을 사용해보니 가입 과정부터 익숙지 않은 요란한 UI를 꽤 맞닥뜨리게 되지만, 메인 메뉴에 진입하고 나서 각 메뉴를 서너 번 왔다 갔다 하면서 자연스럽게 앱의 구조를 익힐 수 있었습니다. 탐색해야 할 메뉴가 많았다면 원하는 기능을 찾기 위해 더 많은 시간을 소비했을 테고, 목적지에 도달하지 못하거나 피로도가 쌓여 사용자는 앱을 이탈하겠죠.

핵심 기능을 돋보이게

메뉴를 3개만 넣을 수 있다면 제한된 슬롯에 어떤 메뉴를 넣을 것인지 꽤 신중하게 선택해야 합니다. 세 앱의 메뉴 부분을 좀 더 자세히 살펴봅시다.

Messenger: 채팅 / 사람 / 둘러보기

Snapchat: 채팅 / 카메라 / 둘러보기

Zenly: 채팅 / 지도 / 프로필

첫 번째 메뉴

우선, 세 앱 모두 채팅 메뉴가 가장 왼쪽에 있습니다. 앱을 켰을 때 메뉴에서 가장 먼저 누르기 쉬운 첫 번째 영역에 앱의 주요 기능인 "채팅"을 배치했습니다. 채팅방 UI는 카카오톡에도 쓰인 일반적인 카드 리스트 타입이 사용되네요. 이미 채팅방에 대한 사용자 심성 모형이 형성되었기에 이를 거스르기는 쉽지 않을 겁니다.

비교! 카카오톡은 친구 리스트가 첫 번째, 채팅이 두 번째 메뉴에 있습니다. 앱 최초 사용 시에는 "친구 선택 → 채팅 시작"의 흐름으로 사용하겠지만, 점점 새로운 채팅보다 "기존의 채팅방"을 들어가기 위해 앱을 켜는 빈도가 높아지는 것을 생각하면 메뉴 순서를 재고해볼 필요가 있습니다.

Thumb zone(이미지 출처: oreilly.com)과 두 번째 메뉴

다음으로 가운데 메뉴는 각 앱의 특징이 잘 드러나는 기능을 담고 있습니다. 가운데 영역은 Thumb zone에서 가장 손이 닿기 쉬운 영역이기도 하죠. 시간제한이 있는 사진 콘텐츠와 익살스러운 사진 필터로 유명한 Snapchat은 카메라 메뉴를, 친구들과 위치를 공유하는 앱인 Zenly는 지도에서 친구들의 위치를 보여주는 지도 메뉴가 놓여있습니다. 친구 리스트를 지도 형태로 새롭게 선보였습니다. Messenger의 경우 Facebook에서 메신저 기능만 별도로 빼낸 것이라 특별한 기능은 아니지만, 친구 리스트 상단에 인스타그램에서 흡수한 스토리 기능을 보여줍니다. 모두 앱의 특징을 잘 드러내는 기능이네요!

콘텐츠를 제공하는 UI 패턴

세 번째 메뉴

세 번째 메뉴는 앱의 핵심 기능과 관련은 낮지만 사용자가 오래 머무를 수 있도록 다양한 콘텐츠를 제공하는 둘러보기 기능이 있습니다. 둘러보기에서는 페이지를 접속할 때마다 새로운 광고나 추천 콘텐츠를 제공해서 지루하지 않게 콘텐츠를 소비하도록 합니다. Zenly의 경우 프로필뿐 아니라 자주 사용하는 액션, 조회된 횟수, 친구 랭킹 등 다양한 재미 요소를 제공하여 리텐션을 높이고 있습니다.

비교! 카카오톡에서도 # 메뉴에서 기사를 비롯해 다양한 콘텐츠를 제공하고 있습니다. 각 앱에서 제공하는 콘텐츠 내용도 한 번 비교해서 살펴보세요.

각 앱에서 콘텐츠를 제공하는 UI 패턴

세 번째 메뉴의 UI 구조가 유사한 것이 눈에 띕니다. 상단의 2/5 영역 정도를 차지하는 공간에는 프로필과 각종 버튼이 큼직하게 배치되어 있고 하단의 나머지 영역에는 추천 콘텐츠를 반복해서 제공합니다.

비교! 카카오톡에서는 상단에 각 채널 탭이 있고, 하단 영역 대부분을 기사와 광고가 차지했습니다. 지난 글에서 카카오톡이 다양한 카드 UI 타입을 사용해서 콘텐츠의 단조로움을 피했다고 분석했는데, 다른 세 앱에서는 콘텐츠를 제공할 때 하나의 UI 타입을 사용하고 있습니다. 왜일까요?

기사를 읽고 다시 리스트로 돌아와서 다른 기사를 볼 수 있는 카카오톡과 달리 영상을 클릭하면 스와이프해 다음 영상을 즉각 볼 수 있는 Snapchat은 굳이 리스트의 단조함을 고민할 필요가 없습니다. 어느 방식이 더 단순하고 가볍게 느껴지나요?

기능 꺼내놓기 vs 숨겨놓기

채팅 화면 UI 비교

카카오톡의 채팅 UI를 다시 살펴볼까요? UI 분야에서 단골 토론 주제였던 햄버거 메뉴 버튼과 + 버튼이 보이네요. 글 입력창 왼편의 + 버튼을 누르면 앨범, 카메라 등 자주 쓰는 기능이 숨어 있습니다. Messenger의 경우 자주 쓰이는 기능을 밖으로 꺼내놓았습니다. 자주 쓰는 기능이 밖으로 나와있으면 찾기도 쉽고, 사용단계를 줄일 수 있어 편리합니다.

채팅방 종류 가짓수

카카오톡 채팅방 종류

카카오톡의 채팅방 종류가 무려 5개(!)라는 사실, 알고 계셨나요? 비밀 채팅이나 오픈 채팅은 카카오톡을 개인용/업무용/모임용으로 모두 사용하는 경향으로 인한 한국적 특징이 반영된 듯합니다. 다른 앱의 경우 1:1 채팅, 그룹채팅 정도로만 구분되어 있습니다.

채팅방을 개설하기 위해 버튼을 누르면 카카오톡의 경우 일반(개인/그룹) / 비밀 / 오픈 총 세 가지의 선택지가 나옵니다. (*플러스 친구는 사용자 찾기를 통해 추가해서 대화창이 생성됨) 반면, 다른 채팅앱들은 개인이냐 그룹이냐 두 가지 중에서 선택하면 되니 단순함의 측면에서만 본다면 좀 더 좋은 점수를 줄 수 있습니다.

Zenly의 그룹채팅 CTA 버튼

채팅방 개설과 관련해 재밌는 기능을 하나 소개할게요. Zenly의 경우 지도상에서 같은 위치에 친구들이 모여 있는 곳을 클릭하면 채팅방을 개설할 수 있는 CTA 버튼이 나타납니다. 채팅방 개설 단계를 줄여주면서 새로운 경험을 함께 제공하는 사례입니다.

실제로 이 기능을 통해 제주도로 여행 간 친구들을 소개해줬다는 케이스도 들었고, 저도 얼마 전 같은 공유 오피스에 근무하는 두 지인을 원격으로(?) 소개해준 경험이 있습니다.

보편적으로 받아들이기에는 다소 부담스러운 기능일 수 있지만, 이어지는 '재미' 요소와 관련이 있어 살짝 소개해보았습니다.

지금까지 단순함을 기준으로 앱을 구석구석 살펴보았습니다.

무조건 메뉴 수가 작고, UI를 심플하게 하는 것이 좋다는 것이 아닙니다. 디터 람스가 Less is more라는 디자인 철학을 디자인계에 널리 전파하긴 했지만 앱 디자인에서 심플한 화면을 위해 모든 기능을 숨겨놓아 버리면 사용자가 헤매게 되니깐요. 앱의 핵심 기능이 돋보일 수 있도록 선택지를 최소화하고, 필요한 기능을 잘 사용할 수 있게 UI를 고민해서 배치해야 한다는 점을 짚고 가면 좋겠습니다.

2. 재미(병맛)

Z세대의 다른 특징은 재미를 추구한다는 점입니다. 모바일 앱에서 재미를 줄 수 있는 방법은 무엇일까요? 답은 다양한 인터랙션에 있습니다.

아이폰은 버튼으로 조작하던 기존의 핸드폰 인터랙션을 손가락으로 화면을 조작하는 터치 방식으로 바꾸어 가히 혁명적인 변화를 이끌어냈습니다. 하지만 아직도 많은 앱들이 딱딱하게 탭으로만 조작이 가능하죠. 다른 메신저 앱에서는 스와이프, 롱 프레스 등의 액션을 어떻게 활용하고 있는지 볼까요? 이해하기 쉽게 이미지를 많이 사용하겠습니다.

부드러운 넘김 모션

카카오톡에서 채팅방을 들어가지 않고 읽음으로 처리하기 위해 스와이프를 해볼까요?

페이스북에도 유사한 인터랙션이 있습니다. 인터랙션의 차이감이 느껴지시나요?

카카오톡 vs Messenger 슬라이드 모션 비교

Snapchat과 Zenly의 메뉴 변화는 또 어떻고요?

메뉴를 바꿀 때마다 가만히 있질 않고 버튼이 여기저기 움직입니다. (Snapchat, Zenly)

이렇게 자연스러운 인터랙션은 사용자의 앱 몰입 경험을 강화시킵니다.

모션으로 사용성을 개선하는 자세한 방법에 대해서는 아래 블로그를 보시면 상세히 소개되어 있습니다.

Creating Usability with Motion: The UX in Motion Manifesto

The following manifesto represents my answer to the question — “As a UX or UI, designer, how do I know when and where to implement motion…

medium.com

잠시도 쉬지 않는 이미지들

Messenger, Snapchat, 그리고 Zenly에서 가만히 있는 화면은 잘 없어요. 어떻게든 사용자의 관심을 끌기 위해 움직이고 있습니다.

움직이는 화면들, 마치 앱이 살아있는 것 같네요.

Zenly에서는 특정 이모티콘을 꾹 누르면 연속 콤보로 메시지가 날아갑니다. 누르는 동안 손에 느껴지는 햅틱 또한 재밌어서 자꾸만 누르게 됩니다. 이걸 왜 이렇게 보내야 하냐고요? 그냥 재밌으니깐요! (10대처럼 외쳐봅니다..)

Snapchat의 얼굴 필터는 하루가 멀다 하고 업데이트됩니다. 바뀐 필터를 적용하면서 옆으로 스와이프를 하다 보면 순식간에 시간이 흘러갑니다. 10대들을 끌어들이려면 화면을 잠시라도 가만히 두면 안됩니다.

3. 정직함

Z세대를 나타내는 마지막 키워드는 정직함입니다. 메신저에서 이 특징을 찾아볼 수 있는 기능은 "위치 공유"였습니다. 9년 전쯤 화제가 되었던 "오빠 믿지" 어플을 기억하시나요? 아이폰을 쓰는 연인끼리 번호를 등록하면 GPS를 통해 위치를 추적하도록 되었는데요. 당시 이용자 동의 없이 위치 정보를 제공했다는 혐의로 대표가 불구속되기도 했었죠.

하지만 요즘 신세대들은 자신의 정보를 공유하는데 거리낌이 없습니다. (모두가 그렇다는 것은 아니지만 세대적 특징으로 볼 때 말이죠.) 오히려 자신을 표현하는데 관심이 많고 콘텐츠도 많이 생성하고 있습니다.

위치 공유

Zenly는 서비스 컨셉부터 Best Friends Only라는 슬로건을 가진 위치기반 SNS입니다. 친구를 맺으면 동의 하에 서로의 위치를 알려주고 같이 만나면 핸드폰끼리 부딪혀서 만났다는 소식을 친구들에게 알리기도 합니다.

각 앱의 "실시간" 위치공유 기능

Messenger에도 실시간 위치 공유 기능이 있습니다. 두 기능을 모두 사용해 보았는데, 친구를 만날 때 상당히 편리합니다. 아직 집에서 출발을 못했는데 "이제 2 정거장 남았어~ 거의 도착했어~" 라는 거짓말을 할 수 없는 것은 당연지사. 정직이 특징이긴 하지만.. 부모님과 위치를 공유하고 싶어하는 10대들은 없겠죠?

콘텐츠 생산자

90년대생들은 자기 관심으로 돈을 벌고 싶어 한다고 얘기가 책에서도 언급됩니다. 그말인즉, 앱에서 컨텐츠를 소비하는데 그치지 않고 직접 콘텐츠 생산자로써 적극적으로 플랫폼에 기여한다는 얘긴데요. Snapchat과 Facebook 그리고 최근에 화제가 되는 틱톡과 같은 앱을 보면 적극적으로 영상 콘텐츠를 만들어내는 1020 크리에이터들의 모습을 쉽게 볼 수 있습니다. 또 이렇게 생산된 콘텐츠들은 그 콘텐츠를 소비하는 다른 사용자들을 앱에 불러들이는 효과가 있으니 염두에 두어야겠습니다.

정리

지금까지 Z세대가 사용하는 앱을 살펴보며 배운 교훈을 간단하게 정리해보겠습니다.

간단함:
앱의 핵심 기능이 돋보일 수 있도록 선택지를 최소화하고, 필요한 기능을 잘 사용할 수 있도록 버튼 배치와 메뉴 깊이(depth)를 고민하라.

재미:
다양한 인터랙션을 활용하고, 움직이는 이미지로 사용자의 시선을 계속 끌어라. 자연스러운 모션은 사용자의 몰입과 경험을 강화시킨다.

정직함:
감추지 말고, 오픈하고 공유하라. Z세대에게 콘텐츠를 쉽고 재밌게 생산할 환경을 제공하라.

이렇게 UI 톺아보기 첫 번째 편 "메신저"를 마무리하겠습니다. 1020세대와 나이가 점점 멀어지고 있지만(..) 조사를 하기 위해 앱을 열심히 사용해보면서 젊은 연령층의 앱 사용 패턴과 UI 트렌드가 변화해나가는 방향에 대해 이야기해볼 수 있어 유익했습니다.

이번 글은 서비스 특징에 따른 비교포인트가 많아서 UI를 더 자세히 다루지 못한 점이 아쉽지만, 위에서 제시한 내용들이 독자분들 서비스를 키워가는데 도움이 되길 바랍니다.

만약 주제로 다루었으면 하는 앱이나 카테고리가 있으시면 댓글 부탁드립니다. 그럼 다음 편에서 만나요!

*글에 대한 의견이 있으시면 댓글 자유롭게 부탁드립니다. 큰 도움이 됩니다 :)

참고 자료

글 작성에 참고한 도서 및 기사 링크를 아래 첨부합니다.

스냅챗의 Series A 투자를 리드했던 미국 벤처캐피털리스트는 자신의 딸과 딸의 친구들이 자주 사용하는 서비스여서 투자했고 또 스냅챗 성공을 계기로 그들의 일상을 면밀히 관찰한다고 여러 차례 밝히기도 했습니다. http://fast-track.asia/seed_investment_fastinvestment_heyjoice/

틱톡, 유튜브 제치고 승승장구, 15초 콘텐츠 http://it.chosun.com/site/data/html_dir/2019/01/25/2019012500531.html

페이스북과 스냅챗 즈려밟고 틱톡으로, 세계 1위 동영상 앱 틱톡 https://blog.siren24.com/69

유튜브의 메시징 기능 삭제에 대해 https://ebadak.news/2019/08/23/youtube-removing-messenging/

미국은 페이스북 → 스냅챗으로 이동 현상 진행 중 http://www.ohfun.net/?ac=article_view&entry_id=1954

와이즈 앱 리서치 https://www.zdnet.co.kr/view/?no=20180627102955

카카오의 1020 러브콜 https://news.joins.com/article/22950049

책 <90년대생이 온다> https://ridibooks.com/v2/Detail?id=2127000038