1. 첫인상을 설계하는 일

온보딩(onboarding) 은 사용자가 앱을 처음 켰을 때 거치는 일련의 화면입니다. 환영 인사, 핵심 기능 소개, 가입, 첫 설정까지 — 이 짧은 여정에서 사용자는 "이 앱을 계속 쓸지" 결정합니다. 온보딩은 곧 첫인상의 설계입니다.

이번 프로젝트에서는 여러 화면이 자연스럽게 이어지는 흐름을 만듭니다. 6장에서 배운 인터랙티브 프로토타입의 실전판입니다.

예제: 8장에서 만든 "하루심기" 앱의 온보딩

2. 온보딩 흐름 설계하기

먼저 화면의 순서와 연결을 정합니다. 좋은 온보딩은 짧고, 가입을 뒤로 미룹니다(먼저 가치를 보여주고 나중에 가입 요청).

"하루심기" 앱의 온보딩 플로우를 만들어줘. 실제로 넘어가는 프로토타입으로.
1. 환영 화면 (앱 이름 + 따뜻한 일러스트 + "시작하기")
2~4. 가치 소개 4장 (한 화면당 메시지 하나, 하단에 진행 점 표시, 스와이프/다음)
5. 가입 화면 (이메일 또는 소셜 로그인, "둘러보기"로 건너뛰기 가능)
6. 첫 습관 설정 (예: "물 마시기" 선택 + 시간 정하기)
완료하면 홈 화면으로.
분위기는 8장 랜딩과 같은 초록·아이보리 톤으로.

3. 흐름을 직접 걸어보기

6장에서 강조했듯, 만든 뒤 직접 끝까지 걸어봐야 합니다.

직접 눌러보며 점검할 것들:

• 다음으로 넘어가는 버튼이 늘 같은 위치에 있는가?
• 지금 몇 단계인지 진행 표시(점·바) 로 알 수 있는가?
• 건너뛰기가 가능한가? (강제로 가두면 이탈합니다)
• 뒤로 돌아갈 수 있는가?

4. 진행 표시와 이탈 줄이기

사용자는 "얼마나 남았는지" 모르면 답답해합니다. 진행 상황을 항상 보여주세요.

모든 온보딩 화면 하단에 진행 점(●○○)을 넣어줘.
지금 단계는 채워진 점으로 표시.
오른쪽 상단에는 "건너뛰기"를 작게 항상 두고.

5. 상태와 예외 챙기기

6장에서 배운 다양한 상태를 온보딩에도 적용합니다.

가입 화면의 예외 상태들도 만들어줘.
- 이메일 형식이 틀렸을 때: 입력칸 아래 빨간 안내
- 로그인 처리 중: 버튼에 로딩 스피너
- 소셜 로그인 실패: 부드러운 오류 메시지
첫 습관 설정에서 아무것도 안 고르고 넘어가려 하면: "하나 이상 골라주세요" 안내

6. 마이크로 인터랙션으로 생동감 더하기

작은 움직임이 앱의 인상을 크게 바꿉니다.

전환에 생동감을 더해줘.
- 화면이 넘어갈 때 부드럽게 슬라이드
- 환영 화면 일러스트가 살짝 떠오르는 등장 애니메이션
- 첫 습관 설정을 마치면 식물이 자라는 짧은 축하 애니메이션

7. 점검과 내보내기

점검 목록:

• 처음부터 끝까지 막힘 없이 진행되는가?
• 진행 표시와 건너뛰기가 있는가?
• 가입을 적절히 뒤로 미뤘는가?
• 예외 상태(오류·로딩·빈 선택)가 정의됐는가?
• 8장 랜딩과 같은 브랜드 톤인가?

완성하면 공유 URL로 만들어 동료에게 실제로 써보게 하거나, Claude Code 핸드오프로 개발에 넘깁니다.

8. 직접 해보기

1. 본인 서비스의 온보딩을 5~6화면으로 설계합니다.
2. 화면이 실제로 이어지는 프로토타입으로 만듭니다.
3. 진행 표시·건너뛰기·예외 상태를 모두 넣습니다.
4. 직접 끝까지 걸어보고, 친구에게도 시켜봅니다. 막히는 지점을 두 군데 찾아 고칩니다.

9. 정리하며

• 온보딩은 첫인상의 설계이며, 여러 화면의 흐름으로 이뤄진다.
• 짧게 만들고, 가입은 가치를 보여준 뒤로 미룬다.
• 진행 표시·건너뛰기·예외 상태가 이탈을 줄인다.
• 마이크로 인터랙션이 생동감을 더한다.
• 만든 뒤 직접 끝까지 걸어보는 검증이 필수다.

마지막 프로젝트에서는 정보가 빽빽한 대시보드를 만듭니다.