디자인
온보딩 화면, 어떻게 구성하면 좋을까?
8분
2021.01.08.5.5K
온보딩, 왜 중요할까요?
4명 중 1명이 앱을 다운로드, 첫 실행 후 다시 들어오지 않는다는 사실을 알고 계신가요? 다운로드 후 90%가 첫 실행 후 앱을 삭제한다는 더 극단적인 통계 자료도 있습니다. 스마트폰을 여러 번 사용하면서 사용자들은 이제 자기에게 맞는 서비스가 무엇인지 판단할 수 있는 기준이 생겼기 때문입니다. 그래서 '온보딩'이 더 중요하게 다가오는데요! 온보딩이란 원래 서비스에 쓰이던 표현은 아닙니다. 신입 사원이 새로운 직장에 적응하도록 돕는 것을 의미하는 HR분야에서 시작 되었죠. 이를 서비스에 적용하면, 앱을 포함한 서비스를 처음 사용하는 유저들이 앱을 계속해서 사용할 수 있는 ‘명확한 이유와 가치’를 보여주는 것이라고 정의 할 수 있습니다. 스플래시 화면과 함께 서비스의 '첫 인상'을 좌우 할 수 있는 중요한 장치가 된다는 것도 온보딩이 중요한 이유 중 하나라고 할 수 있죠.온보딩, 어떻게 구성할까요?
모바일 앱에서의 온보딩은 앱을 다운로드 받을 수 있는 공간에서 시작 되어야 합니다. 스토어 등록 정보에 포함된 내용들과 앱 실행 시 온보딩 과정이 서로 다를 경우 기대가 실망으로, 설치가 삭제로 이어질 수 있기 때문이죠. 오늘은 온보딩 화면을 어떤식으로 구성해야 하는지 사례를 중심으로 정리해볼까 합니다.1. 핵심만 간추리기
사용자의 목적만큼 우리에게 중요한 사실은 없습니다. 우리 앱을 사용해야 하는 출발점이 되기 때문이죠. 중요한 것은 우선 순위에 따라 핵심적인 가치를 먼저 파악해야 한다는 점입니다. 카카오톡의 처음과 지금은 많이 달라졌지만, '커뮤니케이션'을 중심으로 한다는 점은 여전히 높은 우선 순위에 있습니다. '카카오톡에서는 이것도, 이것도, 이것도 할 수 있어요!'가 아니라 '카카오톡에서는 다양한 방법으로 커뮤니케이션이 가능합니다. 추가로 이런 것도 할 수 있죠!' 라는 관점에서 시작 되어야 한다는 것입니다.
카카오페이 온보딩 화면
카카오페이 역시 핵심 기능에 초점을 맞추고 있습니다. 쓸 수 있는, 편의 기능이 꽤 많음에도 불구하고 쉽게 결제하고, 송금하고 자금 흐름 파악해 투자까지 하라는 메시지를 전달하고 있습니다. 또 한 가지 주목할 점은 '마음 놓고'라는 '공통된 표현'을 활용했다는 점인데요. 금융 서비스라는 것이 사실 스마트폰이 활성화 된 후로도 답답하고 어렵게 느껴졌기에 우리는 그렇지 않아! 라는 점을 강조한 것이 아닐까 싶습니다. 사용자에게 서비스의 핵심 가치를 각인 시킬 수 있는 방법으로 활용 될 수 있고요.2. 기존의 불편함 파고들기
일상 생활에서 느낀 불편함을 토대로 창업한 이야기를 우리는 자주 접하게 됩니다. 우리 동네 배달 가능한 맛집을 한 곳에 모아 두고, 쉽게 주문 할 수 있다면? 이란 질문으로 배달의 민족이 탄생했고 모바일 환경에서 더 빠르고 간편하게 송금 할 수 없을까? 라는 질문으로 토스가 나온 것처럼 말이죠.
리멤버 온보딩 화면
3. 사용자 리뷰 활용하기
10년 전 영화 포스터와 지금, 공통적으로 빠지지 않는 내용이 있습니다. 바로 언론, 일반 시사회 등의 반응인데요. 이 영화 재밌어! 라고 하는 것보다 사람들의 반응을 봐봐! 라고 표현하는 것이 공감을 이끌어내는 데 도움이 되기 때문입니다. 우리가 어떤 상품 구매 전, 리뷰를 찾아 보는 것도 마찬가지라고 할 수 있죠.
밀리의 서재 온보딩 화면
밀리의 서재는 월정액 기반의 e-book을 제공하는 서비스입니다. 앱 실행과 동시에 본인들이 제공해줄 수 있는 '가치'와 사용자들의 의견을 덧붙여 보여 주고 있습니다. 구글 플레이 스토어 등에서도 리뷰를 확인할 수 있지만, 설치한 사용자에게 다시 한 번 보여주는 것과는 차이가 있는데요. 설치를 하는 순간 앱에 대한 일정 수준의 기대를 하고 들어오기 때문입니다. 나와 같은 사용자들이 받았구나, 나도 이렇게 쓸 수 있겠구나 - 라는 생각을 하게 만들 수 있다면, 이후 과정에서도 꽤 많은 도움이 되지 않을까 싶네요.4. 사용 가능한 기능 미리 보여주기
앱을 설치했다 하더라도 사용자 입장에서는 실제 기능 활용 전, 정보가 상대적으로 부족할 수 밖에 없습니다. 스크린샷은 디자인 등 신경써서 만들어 놨지만, 실제 앱 내 사용 가능한 기능이나 UI 등이 기대에 미치지 못할 경우 그대로 떠날 가능성이 높기도 하고요.
Crunchbase 온보딩 화면
'Crunchbase'는 전 세계 다양한 스타트업 정보를 확인 할 수 있는 서비스입니다. 투자 현황 등 어떤 분야에서 투자가 이뤄지는지 등에 대한 상세 정보를 얻을 수 있는 장점이 있죠.(iOS 앱만 제공, 국내에서는 thevc라는 서비스가 있음) 이들은 온보딩 화면을 통해 검색, 회사 프로필, 뉴스 등 앱 내 활용 가능한 기능을 일러스터레이션 형태로 보여주고 있습니다. 리멤버가 '설명'에 대한 일러스트레이션을 활용했다면, 'Crunchbase'는 실제 사용 시 마주하게 될 화면에 적용한 것이죠. 이러한 방법은 사용자가 실제 앱 메인 화면 접근 전, 주요 기능에 대해 자연스럽게 학습할 수 있도록 유도 할 수 있습니다.
Google Docs 온보딩 화면
구글 독스 역시 비슷한 방법을 활용하고 있는데요. 앱 내 어떤 기능을 미리 활용 할 수 있는지, 일러스트레이션을 활용해 잘 표현하고 있습니다. 또 한 가지 주목할만한 점은 'Skip' 위치인데요. 오른손 엄지 손가락이 쉽게 닿지 않는 곳에 배치하여 다음 온보딩 스크린으로 자연스럽게 넘어갈 수 있도록 유도하고 있습니다.
네이버 앱 온보딩 화면
2018년 최고의 핫(?) 이슈 였던 네이버 모바일 앱 온보딩 화면도 빼놓을 수 없는데요! 실제 화면을 바탕으로 어떻게 활용 할 수 있는지 미리 학습 할 수 있도록 구성 되어 있습니다. 대규모 개편 또는 쉽게 경험하지 못했던 서비스의 경우라면 이와 같은 방법을 활용하는 것이 사용자를 붙잡는데 더 효과적일 수 있습니다.5. 개인화된 경험 제공하기
교육 서비스의 경우 개인화가 중요합니다. 사용자 수준에 따라 각기 다른 학습 과정을 제공 할 수 있어야 하기 때문이죠. 내 영어 실력이 기초 수준인데, 중급 이상의 코스가 홈 화면에 보여진다면? 인내심 있는 사용자는 검색 등을 통해 수준에 맞는 콘텐츠에 접근 할 수 있지만, 반대의 결과는? 우리가 이미 잘 알고 있습니다.
듀오링고 온보딩 화면
온보딩 화면에 이를 잘 활용하는 서비스는 '듀오링고'입니다. 저도 아주 오랫동안 활용하고 있는 서비스로, 영어 외 다양한 언어를 모바일 환경에서 쉽게 배울 수 있습니다. 성취감을 느낄 수 있도록 중간 중간 게이미피케이션을 잘 활용하는 서비스로도 잘 알려져 있죠.
듀오링고 온보딩 화면
결론은,
또, 함께 고민 해보세요!
온보딩 설계에 도움이 되는 서비스는 없나요?
1.Uplabs
OS에 따른 주요 모바일 앱 컨셉 디자인을 확인해볼 수 있는 곳이에요. 'Onboarding'에 대한 1,000개 이상의 사례를 확인해 볼 수 있는 곳. 그 외에도 무료 디자인 리소스를 확인하고 다운로드 받을 수 있어 정말 매력적인 서비스!2. Really Good UX
Modals, Redesign, Tooltips, Mobile 등 주요 카테고리에 따른 사용자 경험 디자인 사례를 상세히 들여다 볼 수 있는 곳이에요. 'User Onboarding' 카테고리가 별도로 마련되어 있으며, 스크린샷 중심의 사례가 아닌 상세 분석 내용을 함께 확인 할 수 있어요!3. Principle Templates
프로토타이핑 제작에 필요한 템플릿이 모여있어요. 템플릿을 활용하면, 에프터이펙트로 작업하던 애니메이션도 쉽게 구현 가능해요! 'Priciple'을 쓰시는 구독자분들에게 강력하게 추천하는 공간입니다!로그인하고 자유롭게 의견을 남겨주세요.
