[6월 TIL #13] 아하 모먼트를 앞당기는 온보딩 📱

이 글은 growth.design의 인터랙티브 케이스 스터디 3 UX Tips To Make "Aha Moments" Click을 보고 정리한 공부 기록이다. 남는 음식을 '서프라이즈 백'으로 싸게 파는 앱 Too Good To Go의 온보딩을 뜯어보며, 유저가 제품의 가치를 처음 깨닫는 순간(Aha Moment)을 어떻게 앞당길지를 짚는다. 앞쪽은 사례가 짚는 흐름과 처방을 위키처럼 정리했고, 뒤쪽 TIL에 왜 이걸 공부했고 무엇을 느꼈는지를 덧붙였다.

"아하 모먼트를 '딱' 맞아떨어지게 만드는 3가지 UX 팁"으로 시작하는 케이스 스터디.

커피숍에서 시작된 이야기

케이스 스터디는 커피숍 장면에서 출발한다. 친구가 Too Good To Go를 추천하고, 주인공은 "새 앱이네, 한번 써볼까" 하며 앱을 깐다. 이 앱은 동네 가게의 안 팔린 음식을 '서프라이즈 백'에 담아 싸게 파는 서비스다. 음식물 쓰레기를 줄이면서 소비자는 싸게 먹는, 꽤 좋은 컨셉이다. 문제는 그 좋은 컨셉이 온보딩에서 제대로 전달되지 않는다는 데 있다.

온보딩이 먼저 알려준 건 'How'였다

앱을 열면 사용법부터 단계별로 설명한다. "서프라이즈를 준비하세요(Surprise)", "예약하세요(Reserve)", "수령하고 즐기세요(Collect)". 그런데 정작 이게 왜 좋은 건지, 무슨 가치가 있는지는 말해주지 않는다. 주인공의 반응도 "포인트를 모은다고? 하하, 뭐라고?" 하는 식이다. 동작 방법은 알겠는데 그래서 이걸 왜 써야 하는지가 안 잡힌다.

"서프라이즈를 준비하세요." 가치보다 사용법(How)을 먼저 설명하는 온보딩 화면.

설명이 끝나기 무섭게 이번엔 권한 요청이 연타로 들어온다. "알림을 놓치지 마세요(Never miss a thing)", 곧바로 이어서 "이메일로 가장 먼저 받아보세요(Be the first to know)". 아직 이 앱이 나한테 뭘 해주는지도 모르는데 알림과 이메일부터 켜라고 한다. 주인공은 "어…?" 하며 머뭇거린다. 가치를 보여주기도 전에 요구부터 하는 순서다.

가치를 보여주기 전에 먼저 들어오는 알림 권한 요청. 모호한 이유로 "놓치지 마세요"라고만 한다.

홈에 와서야 가치가 보였다

온보딩을 다 넘기고 홈 피드에 도착해서야 비로소 실체가 보인다. 동네 빵집의 서프라이즈 백이 "오늘 수령" 같은 조건과 함께 떠 있고, 가격은 18달러어치가 5.99달러다. 주인공의 반응이 그제야 "드디어!", "오, 18달러가 아니라 5.99달러라고?"로 바뀐다. 가치는 분명히 있었는데, 그게 온보딩이 아니라 홈에 와서야 드러난 것이다.

홈 피드에 와서야 보이는 실제 서프라이즈 백. 여기서 "드디어!"가 나온다.

예약 직전 모달에서 비로소 '딱' 맞아떨어졌다

백을 예약하려고 누르면 모달이 하나 뜬다. "알아두실 점: 당신의 백은 서프라이즈입니다." 가게가 그날 남은 음식으로 채우기 때문에 무엇이 들어갈지는 알 수 없고, 그래서 '서프라이즈 백'이라는 설명이다. 주인공은 여기서 "바로 이때 딱 맞아떨어졌다(that's when it finally clicked)"고 말한다. "남는 걸 못 정하니까 서프라이즈로 파는 거구나. 이 컨셉 정말 좋은데—" 하면서.

문제는 이 깨달음이 너무 늦게 왔다는 것이다. 앱을 깔고, 온보딩을 넘기고, 권한 요청을 거절하고, 홈을 거쳐 예약 직전까지 와서야 가치가 '딱' 맞아떨어졌다. 좋은 컨셉이 가장 늦은 자리에 숨어 있었던 셈이다.

예약 직전 뜨는 "당신의 백은 서프라이즈입니다" 모달. 컨셉의 핵심이 여기서야 비로소 전달된다.

아하 모먼트(Aha Moment)란

케이스 스터디는 이 지점에 'Aha Moment'라는 개념을 붙인다. 유저가 제품의 가치를 처음으로 실감하는 순간이다. 좋은 제품은 UX를 다듬어서 이 순간을 최대한 일찍 오게 만든다. Too Good To Go의 문제는 컨셉이 나빠서가 아니라, 아하 모먼트가 여정의 너무 끝에 가서야 찾아온다는 데 있다.

"The Aha Moment — 유저가 제품의 가치를 처음 깨닫는 순간. 좋은 제품은 이걸 일찍 오게 만든다."

처방의 방향: 가치를 처음부터 보여줘라

그래서 처방의 핵심은 하나로 모인다. "가치를 맨 앞에서 강조하라(Highlight the value right from the start)." 끝에 가서야 '딱' 맞아떨어지는 그 순간을, 온보딩 첫 화면으로 끌어오자는 것이다. 케이스 스터디는 이를 세 가지 구체적인 팁으로 풀어낸다.

온보딩 전체 흐름을 펼쳐놓고 "가치를 맨 앞으로 당겨라"고 짚는 장면. 여기서 3가지 처방이 나온다.

처방 1. How → Why (방법 말고 이유부터)

첫 번째는 사용법으로 시작하지 말라는 것이다. "이렇게 쓰세요"가 아니라 "이게 왜 가치 있는지"로 시작해야 한다. 케이스 스터디는 나쁜 예(가게를 둘러보는 법을 설명하는 화면)와 좋은 예를 나란히 놓는다. 좋은 예의 카피는 이렇다. "좋은 음식을 구하세요. 돈을 아끼세요. 지구를 지키세요(Save good food. Save money. Save the planet)." 사용법이 아니라 유저와 세상에 주는 가치를 첫 화면에 박는다.

왼쪽(X)은 사용법 설명, 오른쪽(체크)은 "좋은 음식·돈·지구"라는 가치 선언. 같은 첫 화면이라도 방향이 다르다.

처방 2. Tell → Show (말하지 말고 보여줘라)

두 번째는 가치를 '말로만' 모호하게 언급하지 말고 명확히 보여주라는 것이다. "서프라이즈 백" 한 마디로 뭉뚱그리는 대신, "동네 가게의 남는 음식을 서프라이즈 백에 담아 드려요"라고 명확히 적고, 받는 방법을 단계로 보여준다. ① 동네 가게를 고른다 ② 가게가 안 팔린 음식으로 백을 채운다 ③ 할인된 가격에 받는다.

"동네의 남는 음식을 서프라이즈 백에" + 받는 법 3단계. 모호한 한 마디 대신 구체적으로 보여준다.

한 걸음 더 나가서, 짧은 영상으로 전체 경험을 보여주는 방법도 제안한다. 백을 받으러 가서 픽업하는 과정을 영상 하나로 보여주면, 글로 설명하는 것보다 훨씬 빠르게 "아, 이런 거구나"가 온다.

"How it works" 영상으로 픽업 경험 전체를 보여주는 안. 말보다 한 편의 영상이 빠르다.

처방 3. Ask → Offer (요구 말고 제안해라)

세 번째는 권한 요청에 대한 것이다. "알림을 놓치지 마세요" 같은 모호한 이유로 알림을 '요구'하지 말고, 유저가 켜고 싶어질 만한 분명한 이유 하나를 '제안'하라는 것이다. 바뀐 카피는 이렇다. "서프라이즈 백은 매일 몇 개뿐이에요! 동네에 남는 음식이 생기는 순간 바로 알려드릴게요." 같은 알림 요청이라도, 거절하던 화면이 "네, 알려주세요"를 누르고 싶은 화면으로 바뀐다.

왼쪽(X) "놓치지 마세요"라는 막연한 요구, 오른쪽(체크) "매일 몇 개뿐이니 생기면 알려줄게요"라는 분명한 제안.

유혹 묶기(Temptation Bundling)

세 번째 처방 뒤에 케이스 스터디가 하나 더 붙이는 개념이 '유혹 묶기'다. 사람이 하기 싫어하는 행동('should do')을 하고 싶어하는 보상('want to do')에 묶는 것이다. 이 리디자인은 "우리 알림을 켜세요(should do)"를 "당신의 서프라이즈 백을 놓치지 마세요(want to do)"에 묶었다. 알림을 켜는 귀찮은 행동이, 갖고 싶은 보상을 지키는 행동으로 바뀐다. 유저의 동기와 새 행동을 정직하게 정렬시키면, 유저는 기꺼이 그 행동을 받아들인다.

"Temptation Bundling — 하기 싫은 행동을 갖고 싶은 보상에 묶어라." 알림 켜기를 '백 놓치지 않기'에 묶은 사례.

좋은 UX가 만드는 차이

케이스 스터디는 마지막에 심리 수준(Psych Level)과 유저 여정(Customer Journey)을 축으로 한 그래프로 정리한다. 실제 Too Good To Go의 선은 처음엔 들떴다가(excited at first) 온보딩 단계에서 뚝 떨어진다. 알림 요청이 끼어들면서 아하 모먼트가 한참 늦게, 그것도 가까스로 찾아온다. 반면 '가치부터 보여주는(value-first)' 온보딩으로 고쳤다면, 선은 처음부터 높게 유지된다. 두 선 사이의 간격, 그게 바로 좋은 UX가 만드는 차이다.

두 선의 간격이 곧 'great UX의 임팩트'다. 같은 컨셉이라도 가치를 언제 보여주느냐로 경험이 갈린다.

결국 세 처방은 한 문장으로 모인다. 좋은 컨셉을 가장 늦게 보여주지 말고, 가장 먼저 보여줘라. How보다 Why를, 말보다 보여주기를, 요구보다 제안을. 아하 모먼트를 여정의 끝이 아니라 시작으로 옮기는 일이다.

---

TIL — 왜 이걸 공부했나

기술을 앞세울까, 가치를 앞세울까

오늘은 우리 제품에 새롭게 추가되는 검색 기능의 온보딩 모달을 고민했다. 기능 자체는 기술적으로 꽤 차별점이 있다고 느꼈고, 그래서 자꾸 그 기술적인 부분을 더 그럴듯하게 보여주고 싶었다. 하지만 동시에 머리로는 알고 있었다. 유저가 궁금한 것은 “이 기술이 얼마나 대단한가”가 아니라, “그래서 내 문제가 어떻게 해결되는가”라는 점이다.

그 사이에서 한동안 저울질했다. 기술을 너무 숨기면 차별점이 약해 보일 것 같고, 기술을 앞세우면 유저 입장에서는 와닿지 않을 것 같았다. 그래서 퇴근 후에 이 고민에 대한 확신을 얻고 싶어서 관련 글을 찾아 읽었다. 그렇게 찾아 읽은 게 바로 이 케이스 스터디였고, 첫 번째 처방 How → Why가 정확히 내 상황이었다.

읽고 나서 방향이 선명해졌다

케이스 스터디의 핵심은 결국 하나였다. 유저가 제품의 가치를 처음 실감하는 순간(아하 모먼트)을 여정의 끝이 아니라 맨 앞으로 당기라는 것이다. Too Good To Go가 좋은 컨셉을 가지고도 헤맨 이유는, 온보딩이 “어떻게 쓰는지”와 “알림을 켜달라”를 먼저 들이밀고 정작 “왜 좋은지”는 가장 늦게 보여줬기 때문이다. 세 처방(How→Why, Tell→Show, Ask→Offer)도 표현만 다를 뿐 전부 같은 곳을 가리킨다. 가치를 맨 앞으로.

내 고민이 정확히 그 자리에 있었다. 나는 기술이라는 ‘어떻게’를 앞세우고 싶었는데, 유저가 첫 화면에서 알고 싶은 건 “그래서 내 문제가 어떻게 풀리는가”라는 가치다. 그러니 온보딩에서 먼저 보여줘야 할 것은 기술 설명이 아니라 유저가 느낄 가치가 맞았다. 막연하게 “기술이 차별점이니까 보여주고 싶다”였던 마음이, 케이스 스터디를 거치니 “가치가 먼저, 기술은 그다음”이라는 순서로 정리됐다.

다만 기술을 아예 빼야 한다는 뜻은 아니었다. 기술은 첫 문장이 아니라, 유저가 가치를 이해한 뒤 “왜 이게 가능한지”를 납득시키는 근거로 뒤에 들어가야 한다. 케이스 스터디의 Tell→Show처럼, 가치를 먼저 분명히 보여준 다음 그걸 뒷받침하는 자리에 기술을 놓는 것이다.

이게 막연한 원칙이 아니라는 건 다른 제품들에서도 보인다. 같은 제품을 ‘기술·기능’으로 말할 때와 ‘유저 가치’로 말할 때를 나란히 놓으면 이렇다.

제품	기술·기능으로 말하면 (How)	유저 가치로 바꾸면 (Why)
Too Good To Go	예약·수령 사용법을 단계로 설명 Surprise · Reserve · Collect	좋은 음식을 구하고, 돈을 아끼고, 지구를 지킨다 Save good food. Save money. Save the planet.
Superhuman	자체 엔진으로 끌어올린 처리 속도	역대 가장 빠른 이메일 경험 — 매주 4시간을 아껴준다
Duolingo	레슨·번역 연습 같은 학습 메커니즘	왜 배우는지(여행·일·학교)부터 묻고, 짧은 성취를 먼저 맛보게 한다

같은 제품도 ‘기술’이 아니라 ‘유저가 얻는 결과’로 말할 수 있다. 기술 차별점이 분명한 Superhuman조차 가치를 앞세운다. (참고: First Round Review)

그래서 이렇게 만들기로 했다

그래서 이번 검색 온보딩도 “OO 기반 검색” 같은 기술어를 먼저 말하기보다, “읽을 만한 논문인지 빠르게 판단하고, 읽어야 하는 논문은 놓치지 않도록 한다”는 경험을 먼저 보여주는 쪽이 맞겠다는 확신이 생겼다. 기술을 자랑하는 모달이 아니라, 유저가 “아, 이거 내가 필요했던 거다”라고 느끼게 하는 모달을 만들어야겠다. 굿!