🙌온보딩 화면, 어떻게 구성하면 좋을까?

🙌 온보딩 화면, 어떻게 구성하면 좋을까?

온보딩, 왜 중요할까요?

(에디터 🐳🐥) 4명 중 1명이 앱을 다운로드, 첫 실행 후 다시 들어오지 않는다는 사실을 알고 계신가요? 다운로드 후 90%가 첫 실행 후 앱을 삭제한다는 더 극단적인 통계 자료도 있습니다. 스마트폰을 여러 번 사용하면서 사용자들은 이제 자기에게 맞는 서비스가 무엇인지 판단할 수 있는 기준이 생겼기 때문입니다. 그래서 '온보딩'이 더 중요하게 다가오는데요!

온보딩이란 원래 서비스에 쓰이던 표현은 아닙니다. 신입 사원이 새로운 직장에 적응하도록 돕는 것을 의미하는 HR분야에서 시작 되었죠. 이를 서비스에 적용하면, 앱을 포함한 서비스를 처음 사용하는 유저들이 앱을 계속해서 사용할 수 있는 ‘명확한 이유와 가치’를 보여주는 것이라고 정의 할 수 있습니다. 스플래시 화면과 함께 서비스의 '첫 인상'을 좌우 할 수 있는 중요한 장치가 된다는 것도 온보딩이 중요한 이유 중 하나라고 할 수 있죠.

온보딩, 어떻게 구성할까요?

모바일 앱에서의 온보딩은 앱을 다운로드 받을 수 있는 공간에서 시작 되어야 합니다. 스토어 등록 정보에 포함된 내용들과 앱 실행 시 온보딩 과정이 서로 다를 경우 기대가 실망으로, 설치가 삭제로 이어질 수 있기 때문이죠. 오늘은 온보딩 화면을 어떤식으로 구성해야 하는지 사례를 중심으로 정리해볼까 합니다.

1. 핵심만 간추리기

사용자의 목적만큼 우리에게 중요한 사실은 없습니다. 우리 앱을 사용해야 하는 출발점이 되기 때문이죠. 중요한 것은 우선 순위에 따라 핵심적인 가치를 먼저 파악해야 한다는 점입니다. 카카오톡의 처음과 지금은 많이 달라졌지만, '커뮤니케이션'을 중심으로 한다는 점은 여전히 높은 우선 순위에 있습니다. '카카오톡에서는 이것도, 이것도, 이것도 할 수 있어요!'가 아니라 '카카오톡에서는 다양한 방법으로 커뮤니케이션이 가능합니다. 추가로 이런 것도 할 수 있죠!' 라는 관점에서 시작 되어야 한다는 것입니다.

카카오페이 온보딩 화면

카카오페이 역시 핵심 기능에 초점을 맞추고 있습니다. 쓸 수 있는, 편의 기능이 꽤 많음에도 불구하고 쉽게 결제하고, 송금하고 자금 흐름 파악해 투자까지 하라는 메시지를 전달하고 있습니다. 또 한 가지 주목할 점은 '마음 놓고'라는 '공통된 표현'을 활용했다는 점인데요. 금융 서비스라는 것이 사실 스마트폰이 활성화 된 후로도 답답하고 어렵게 느껴졌기에 우리는 그렇지 않아! 라는 점을 강조한 것이 아닐까 싶습니다. 사용자에게 서비스의 핵심 가치를 각인 시킬 수 있는 방법으로 활용 될 수 있고요.

2. 기존의 불편함 파고들기

일상 생활에서 느낀 불편함을 토대로 창업한 이야기를 우리는 자주 접하게 됩니다. 우리 동네 배달 가능한 맛집을 한 곳에 모아 두고, 쉽게 주문 할 수 있다면? 이란 질문으로 배달의 민족이 탄생했고 모바일 환경에서 더 빠르고 간편하게 송금 할 수 없을까? 라는 질문으로 토스가 나온 것처럼 말이죠.

리멤버 온보딩 화면

리멤버 역시, 명함 관리의 어려움을 쉽게 해결해 줄 수 없을까? 라는 질문에서 시작되었습니다. 질문에 대한 답은, 곧 사용자의 불편을 해결해주는 방법이 되고, 이는 온보딩 화면에도 잘 드러나 있습니다. 명함을 받아서 찍기만 하면 우리가 알아서 등록하고 관리할 수 있게 해줄게! 라는 내용이 일러스트레이션과 애니메이션을 활용해 잘 표현 되어 있죠. 직접 등록하며 느꼈던 불편함이 하나 이상 존재하는 사용자라면 한 장의 명함을 촬영, 등록되는 과정을 본 순간 앱을 떠나기 어렵지 않을까요?

3. 사용자 리뷰 활용하기

10년 전 영화 포스터와 지금, 공통적으로 빠지지 않는 내용이 있습니다. 바로 언론, 일반 시사회 등의 반응인데요. 이 영화 재밌어! 라고 하는 것보다 사람들의 반응을 봐봐! 라고 표현하는 것이 공감을 이끌어내는 데 도움이 되기 때문입니다. 우리가 어떤 상품 구매 전, 리뷰를 찾아 보는 것도 마찬가지라고 할 수 있죠.

밀리의 서재 온보딩 화면

밀리의 서재는 월정액 기반의 e-book을 제공하는 서비스입니다. 앱 실행과 동시에 본인들이 제공해줄 수 있는 '가치'와 사용자들의 의견을 덧붙여 보여 주고 있습니다. 구글 플레이 스토어 등에서도 리뷰를 확인할 수 있지만, 설치한 사용자에게 다시 한 번 보여주는 것과는 차이가 있는데요. 설치를 하는 순간 앱에 대한 일정 수준의 기대를 하고 들어오기 때문입니다. 나와 같은 사용자들이 받았구나, 나도 이렇게 쓸 수 있겠구나 - 라는 생각을 하게 만들 수 있다면, 이후 과정에서도 꽤 많은 도움이 되지 않을까 싶네요.

4. 사용 가능한 기능 미리 보여주기

앱을 설치했다 하더라도 사용자 입장에서는 실제 기능 활용 전, 정보가 상대적으로 부족할 수 밖에 없습니다. 스크린샷은 디자인 등 신경써서 만들어 놨지만, 실제 앱 내 사용 가능한 기능이나 UI 등이 기대에 미치지 못할 경우 그대로 떠날 가능성이 높기도 하고요.

Crunchbase 온보딩 화면

'Crunchbase'는 전 세계 다양한 스타트업 정보를 확인 할 수 있는 서비스입니다. 투자 현황 등 어떤 분야에서 투자가 이뤄지는지 등에 대한 상세 정보를 얻을 수 있는 장점이 있죠.(iOS 앱만 제공, 국내에서는 thevc라는 서비스가 있음) 이들은 온보딩 화면을 통해 검색, 회사 프로필, 뉴스 등 앱 내 활용 가능한 기능을 일러스터레이션 형태로 보여주고 있습니다. 리멤버가 '설명'에 대한 일러스트레이션을 활용했다면, 'Crunchbase'는 실제 사용 시 마주하게 될 화면에 적용한 것이죠. 이러한 방법은 사용자가 실제 앱 메인 화면 접근 전, 주요 기능에 대해 자연스럽게 학습할 수 있도록 유도 할 수 있습니다.

Google Docs 온보딩 화면

구글 독스 역시 비슷한 방법을 활용하고 있는데요. 앱 내 어떤 기능을 미리 활용 할 수 있는지, 일러스트레이션을 활용해 잘 표현하고 있습니다. 또 한 가지 주목할만한 점은 'Skip' 위치인데요. 오른손 엄지 손가락이 쉽게 닿지 않는 곳에 배치하여 다음 온보딩 스크린으로 자연스럽게 넘어갈 수 있도록 유도하고 있습니다.

네이버 앱 온보딩 화면

2018년 최고의 핫(?) 이슈 였던 네이버 모바일 앱 온보딩 화면도 빼놓을 수 없는데요! 실제 화면을 바탕으로 어떻게 활용 할 수 있는지 미리 학습 할 수 있도록 구성 되어 있습니다. 대규모 개편 또는 쉽게 경험하지 못했던 서비스의 경우라면 이와 같은 방법을 활용하는 것이 사용자를 붙잡는데 더 효과적일 수 있습니다.

5. 개인화된 경험 제공하기

교육 서비스의 경우 개인화가 중요합니다. 사용자 수준에 따라 각기 다른 학습 과정을 제공 할 수 있어야 하기 때문이죠. 내 영어 실력이 기초 수준인데, 중급 이상의 코스가 홈 화면에 보여진다면? 인내심 있는 사용자는 검색 등을 통해 수준에 맞는 콘텐츠에 접근 할 수 있지만, 반대의 결과는? 우리가 이미 잘 알고 있습니다.

듀오링고 온보딩 화면

온보딩 화면에 이를 잘 활용하는 서비스는 '듀오링고'입니다. 저도 아주 오랫동안 활용하고 있는 서비스로, 영어 외 다양한 언어를 모바일 환경에서 쉽게 배울 수 있습니다. 성취감을 느낄 수 있도록 중간 중간 게이미피케이션을 잘 활용하는 서비스로도 잘 알려져 있죠.

듀오링고 온보딩 화면

앱 설치 후, 듀오링고는 본인들이 제공하는 서비스의 강점이나 학습 가능한 언어 등을 소개하는 대신 사용자의 '수준'을 파악하는데 집중합니다. 배우고 싶은 언어와 이유를 확인하고, 목표를 설정할 수 있게 하며, 수준을 확인 할 수 있도록 말이죠. 사용자가 앞서 입력한 데이터를 바탕으로 수준에 맞는 코스를 바로 찾아줍니다. 설정한 목표는 이후에 푸시 등에 활용하게 되고요. 나 영어공부 할래! 라고 생각하는 사용자는 많지만, 꾸준히 실천하는 사용자는 많지 않습니다. (우리가 새해 목표를 세우는 것처럼...) 듀오링고는 이를 영리하게 온보딩 화면 내 적용, 활용하고 있죠.

결론은,

우선 순위를 설정, 사용 목적에 가장 잘 맞는 기능 중심으로 적용.
기존의 불편함을 해소 할 수 있는, 사용자 입장에서 더 편리하게 느껴질 내용을 활용.
사용자들의 긍정적인 리뷰와 제공하고자 하는 가치를 함께 활용.
활용 가능한 주요 기능들을 미리 보여주기.
사용자가 점진적으로 앱에 참여 할 수 있는 첫 단계로 활용.
스토어 (설치) → 아이콘 → 스플래시 → 온보딩으로 이어지는 과정은 모두 '일관성'을 바탕으로 진행.

또, 함께 고민 해보세요!

일러스트레이션과 애니메이션을 활용하면 더 효과적으로 메시지를 전달 할 수 있습니다.
온보딩 화면은 '강제성'이 없어야 합니다. 다만, 건너뛰기 등을 쉽게 선택 할 수 있도록 해서는 안됩니다.
사용자의 스마트폰 사용 기간 전체를 통틀어 처음이라 생각되는 경험은 사용 방법을 바탕으로 구성해야 합니다. (퍼스널 모빌리티, 간편 결제 등)
온보딩 화면 목적에 따라 'Skip' 버튼 위치는 쉽게 닿을 수 없는 곳에 배치해야 합니다.

온보딩 설계에 도움이 되는 서비스는 없나요?

1.Uplabs

(지금써보러가기)

OS에 따른 주요 모바일 앱 컨셉 디자인을 확인해볼 수 있는 곳이에요. 'Onboarding'에 대한 1,000개 이상의 사례를 확인해 볼 수 있는 곳. 그 외에도 무료 디자인 리소스를 확인하고 다운로드 받을 수 있어 정말 매력적인 서비스!

2. Really Good UX

(지금써보러가기)

Modals, Redesign, Tooltips, Mobile 등 주요 카테고리에 따른 사용자 경험 디자인 사례를 상세히 들여다 볼 수 있는 곳이에요. 'User Onboarding' 카테고리가 별도로 마련되어 있으며, 스크린샷 중심의 사례가 아닌 상세 분석 내용을 함께 확인 할 수 있어요!

3. Principle Templates

(지금써보러가기)

프로토타이핑 제작에 필요한 템플릿이 모여있어요. 템플릿을 활용하면, 에프터이펙트로 작업하던 애니메이션도 쉽게 구현 가능해요! 'Priciple'을 쓰시는 구독자분들에게 강력하게 추천하는 공간입니다!

Written by 🐳재그마스터, 🐥동동

오늘 뉴스레터는 어떠셨어요?

메일을 원하지 않은 분들은 수신거부를 해주시면 감사하겠습니다.
수신거부 Unsubscribe

이 메일은 스티비로 만들었습니다