정말로 막막하고 고되고 힘든 시간이었다...
실패의 연속.
하지만 해냈죠?
오늘의 주제: 온보딩
사용자에게 서비스의 가치를 빠르게 설명할 수 있는 온보딩 화면을 디자인해 보자.
포함되어야 할 요소
- 핵심 기능 강조 일러스트 or 아이콘 (2장)
- 진행 인디케이터(점·바·숫자 중 택 1)
- “다음/건너뛰기” 버튼
타겟 설명
18~35세
일정 관리를 시작하고자 하는 MZ세대
서비스 구분
모바일 앱
레퍼런스
온보딩 화면은 크게 두 가지 종류로 나뉜다.
- 앱의 기능을 설명하는 온보딩
- 서비스 환경을 셋팅하는 온보딩
생산성/라이프스타일 앱이라면 2번으로 가도 좋겠지만(e.g. 닉네임, 루틴 등), 오늘의 목표는 빠르게 앱의 가치를 전달하는 것이니 1번과 같은 방향이 좋겠다고 생각했다.
그리고 2번은 1시간 안에 절대 못 끝낼 것 같았다
1. 리멤버
가장 집중해서 본 점은 온보딩 첫 화면, '받은 명함, 어떻게 관리하시나요?'라는 문구였다. 서비스의 실제 화면을 보여주고 기능을 간략히 설명하는 일반적인 온보딩 화면과 사뭇 달라보였기 때문이다.
바로 서비스의 기능을 설명하지 않고 사용자의 Pain Point를 질문 형태로 던지면서 자연스럽게 다음 화면으로 넘어가 서비스의 가치를 알아볼 수 있도록 유도했다는 점이 매우 흥미로웠다. 사용자의 체류 시간을 높이는 데에는 UX 라이팅도 정말 큰 역할을 할 수 있겠구나, 라고 생각하며 이 전략을 벤치마킹 해 보기로 했다.
(이미지 출처. 같이 읽어보면 좋은 아티클)
온보딩 화면, 어떻게 구성하면 좋을까?
2. 알라미
비슷한 맥락으로 UX 라이팅을 벤치마킹 요소로 삼았다. '내일 아침이 기대돼요'라는 문구를 통해 사용자로 하여금 서비스 사용에 대한 기대를 높일 수 있는 카피라고 생각했다.
디자인 초안
다소 황당한 와이어프레임 등장.
오늘은 와이어프레임 단계부터 상당히 애를 먹었는데, 지금부터 그 이유변명을 해 보겠다.
온보딩 화면의 목적은 사용자에게 서비스의 기능과 가치를 전달하는 데에 있다. 그렇기에 나는 본격적으로 작업에 들어가기 전에 이 서비스의 기능을 간단하게라도 설계해야 했고, 이 단계에서 너무 많은 고민을 했다.
'일정 관리를 시작하는 사람은 어디에서 가장 어려움을 느낄까?'라는 고민부터 시작해서, '이 문제를 해결하기 위해서는 어떤 기능이 가장 효과적일까?', '사용자도 충분히 매력적으로 느낄 수 있는 기능일까?'까지...
물론 실제 서비스를 만든다면 반드시 해야 하는 고민이지만, 오늘은 시간 내에 디자인을 완성하는 연습을 하는 시간이었다. 기획보다는 레이아웃 구성이나 라이팅에 조금 더 신경을 기울였으면 더 좋은 결과물을 만들어 낼 수 있었을 것 같다.
화면은 총 3 page를 만들었다. 1 page로는 모든 것을 담아내기 부족하고, 5 page 이상은 온보딩 치고 지나치게 많은 투자라고 생각했다. 따라서 3 page 안에 가장 중요한 핵심만 담아내고자 했고, 레퍼런스를 기반으로 Problem - Soultion - Outcome 구조로 흐름을 잡아 보았다.
여기서 다시 한 번 문제가 발생한다.
기능을 설명할 키 비주얼 화면이 없다.
사실 나는 사이드 프로젝트에서 온보딩 화면을 만들어본 적이 있어서, 그 경험을 기반으로 막연히 '그냥 있는 거 써서 하면 되겠지~'라고 생각했으나... 다시 생각해 보니 그 당시에는 MVP에 포함될 핵심적인 화면이 몇 개 있는 상태였다. 상당히 안일한 사고였다.
대략 5분 정도 벙쪄 있다가, 급하게 이미지를 넣기로 결정했다. 하지만 무료 소스 이미지, AI 이미지를 섞어 사용하다 보니 톤앤무드도 맞지 않고, 프라이머리 컬러인 블루와도 어울리지 않았다.
그런 생각을 하다가 1시간이 끝났다.
수정
여러 가지 시도를 해 보았다. 1~2page에 있던 CTA를 빼고 next/prev 버튼을 넣어보기도 하고, 이미지도 바꿔보고, 그라디언트도 바꿔보았다. 이미지 사이즈와 텍스트 공간을 명확히 분리해 보기도 했다.
하지만 여전히 마음에 들지는 않았다. UI 디자인이 아니라 카드뉴스 디자인처럼 만들어졌다는 점이 굉장히 불만족스러웠고, 고등학생이나 20대 초반도 사용하는 서비스의 첫 화면이 지나치게 무거워 보인다는 것도 별로였다.
완성
이미지가 들어가는 것이 모든 문제의 원인이라고 생각했다. 서비스 도메인이 의료, 패션, 뷰티 쪽이거나 UI 컨셉이 신중한, 고급스러운, 무거운과 같은 키워드였다면 실사 이미지가 어울릴 수도 있었겠지만, 10대 후반부터 30대 중반까지의 사용자를 타겟으로 한 생산성 어플에는 어울리지 않았다.
과감하게 실사 이미지를 빼 버리고, 가벼운 낙서 느낌의 일러스트 디자인을 넣어 보았다. 단시간 내에 3가지 그래픽을 뽑아 내기 위해 Adobe firefly로 벡터 이미지를 생성하고 마음에 들지 않는 부분은 펜툴로 조금씩 다듬었다.
그 결과, 처음과 달리 전체적으로 부담스러워 보이지 않는 화면이 완성되었다. 프라이머리 컬러가 과하게 사용되지 않으면서도 모든 요소와 조화롭게 보이고, 이전보다 시각적으로 문구가 전달하는 의미를 잘 표현하는 느낌이다.
그토록 신경을 썼던 UX 라이팅은 꾸준히 수정되었다.
-
첫 화면에서는 질문 형식으로 사용자에게 공감한다.
앞서 보았던 리멤버의 온보딩 전략을 이 화면에 사용하였다. 처음에는 '대처'라는 단어를 사용했지만, 비교적 캐주얼한 단어는 아니기에 다소 사무적으로 들릴 여지가 있었다. 어딘가 따지거나 사용자를 피면접자처럼 대하는 것처럼 보이기도 한다. 따라서 공감의 의도에 맞도록 '무엇부터 해야 할 지 막막하신가요?'라는 문구를 사용했다. -
사용자가 겪는 상황을 해결할 수 있는 핵심 솔루션을 나타낸다.
이번 디자인을 위해 임의로 'AI가 대신 계획해 주는 나의 하루 일정'을 떠올렸다. 일정 관리를 시작하고자 하는 사용자는 기본적으로 해야 할 일이 많을 것이고, 처음이기에 이 일들을 어떻게 정리해야 할지 모를 것이라고 생각했기 때문이다.
적절한 페르소나 이미지.
표현 선택에도 나름의 의미가 있다.
우선, 온보딩에서 서비스 세팅을 하지 않는 만큼 가입 후 바로 사용자가 스스로 서비스를 세팅할 수 있도록 유도하는 것이 중요하다고 생각했다. 때문에 '오늘부터'라는 표현을 넣어 사용자가 서비스에 대한 기대를 품고 24시간 내에 서비스를 사용해 볼 수 있도록 설계했다.
'매니저'라는 표현은 개인 맞춤형 서비스라는 점을 은연 중에 나타내고 싶어 사용했다. '당신의 하루'라는 표현도 같은 맥락이다. '나만의'와 같은 표현도 고려했지만, '매니저'가 훨씬 더 사용자와 서비스의 거리감을 좁혀주는 표현이라고 판단했다.
- 사용자가 서비스를 통해 얻을 수 있는 가치를 효과적으로 제시한다.
마지막 화면에도 AI 기반 서비스라는 점을 강조하고 싶었다. Outcome을 나타내는 화면인 만큼 서비스가 사용자에게 가져다 줄 수 있는 효과를 더 명확하게 드러내기 위해 '효율적인'이라는 형용사를 붙였다. 가장 강조하고 싶었던 문구는 '어제보다 더 생산적인 오늘'이라는 표현이다. 우리 서비스를 만나기 전의 모습(어제)과 서비스를 사용하게 된 이후(오늘)의 모습이 대비되는 표현으로, 서비스의 가치를 더 뚜렷하게 전달할 수 있으리라 기대했다.
이전부터 꾸준히 신경쓰고 있는 점을 한 가지 더 기록해 보자면, 버튼 영역이다. 겉으로 보기에는 단순히 텍스트로 보이지만, 사용자가 손가락으로 클릭해야 하는 부분이기에 텍스트만의 사이즈로는 사용성에 불편함이 있을 것이다. 따라서 텍스트 버튼도 오토레이아웃으로 버튼 영역의 사이즈를 최소 사이즈(48px)이상으로 잡고 있다.
추가로 오토레이아웃을 적극적으로 사용하며 이후 반응형 디자인을 할 때에도 빠르게 작업할 수 있도록 연습하고 있다.
회고
온보딩 화면을 너무 만만하게 봤다.
'그냥 화면 목업 넣고 글 넣으면 되는 거 아니야?'라고 생각한 처음과 달리, '서비스의 가치를 빠르게 전달한다'라는 목표를 달성하기 위해서는 메인 기능이 들어갈 화면들만큼 많은 고민과 시도를 해야 했다.
앞으로 내가 어떤 프로젝트에 참여할 지는 모르겠지만, 어떤 서비스를 만들게 되든 사용자와 서비스의 첫 만남이 긍정적이고 기대감에 찰 수 있도록 UX 라이팅부터 그래픽까지(혹은 키 비주얼 화면, 이미지 등) 꼼꼼히 설계해야 겠다고 반성하는 하루였다.
