본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
오늘은 가상의 예약 서비스 '오픈 테이블'을 기반으로, 개인화된 추천을 위한 온보딩 UX 설계 과정을 실습해보았다.
관심 지역, 선호 음식, 기본 프로필을 입력받는 구조였지만, 핵심은 이탈 없이 입력을 유도하는 흐름에 있었다.
입력 과정에선 리워드와 추천 이유를 명확히 제시하고,
선택형 UI와 프로그레스 바를 통해 심리적 부담을 최소화하는 전략을 활용했다.
결국 온보딩은 단순 정보 수집이 아니라,
사용자에게 ‘이 서비스가 나에게 맞다’는 신뢰를 주는 첫 단계라는 걸 다시금 느꼈다.
온보딩 UX 설계 및 와이어프레임 구성 실습
1. 과제 개요
- 가상의 서비스: 레스토랑 예약 플랫폼 ‘오픈 테이블’
- 요구사항:
- 회원가입 시 사용자 맞춤형 정보를 받는 온보딩 설계
- 관심 지역 3곳, 선호 음식 종류, 기본 프로필 정보(닉네임, 성별, 생년월일) 입력
- 이탈률은 최소화하며, 가입 완료율은 높여야 함
- 수집된 정보는 개인화된 추천 콘텐츠 및 알림에 활용 예정
2. 문제 정의 & 가설 수립
- 문제: 사용자는 자신에게 최적화된 정보를 받지 못하고 있음
- 가설: 맞춤 정보를 입력한 사용자는 홈 피드에서 더 나은 추천을 받고, 탐색 없이도 서비스 가치를 체감할 수 있음
3. UX 기획 방향성
① 입력 유도 & 이탈 방지
- 혜택 강조 문구 활용 → 사용자 입력 유도
- 리워드 안내 팝업 및 구체적 설명 제공
- 추천 이유에 대한 맥락 전달 (예: 왓챠, 카카오, 하이브 추천 탭 등 사례 참고)
② 프로세스 간소화
- 상단 프로그레스 바 도입 → 현재 위치/문항 수 인지 가능
- 버튼 스타일, 아이콘, 이모지 등 직관적 UI 활용
- 입력 완료 후 로딩 화면에 예상 콘텐츠 예고 → 기대감 유도
4. 와이어프레임 구성
화면 1: 관심 지역 선택
- 관심 지역 3개 이상 선택 (필수 입력)
- 2단 구조:
- 좌측: 대분류 지역(서울, 경기, 부산 등)
- 우측: 하위 지역 리스트 (ex. 강남, 성수 등)
- 인기 지역을 우선 노출 → 선택 흐름 간소화
- 체크박스 UI로 다중 선택 지원
화면 2: 선호 음식 선택
- 한식, 양식, 중식, 브런치, 스시 등 칩 형태 버튼 UI 구성
- 다중 선택 지원
- 선택 시 강조 스타일 적용
화면 3: 프로필 정보 입력
- 닉네임 (텍스트 인풋)
- 생년월일 (드롭다운)
- 성별 (버튼형 선택: 여성 → 남성 → 기타)
- 프로필 이미지 업로드 (아이콘 포함)
5. 전체 플로우 설계
- 스플래시 화면
- 로그인/회원가입 화면
- (신규 유저) → 회원가입
(비로그인 유저) → 로그인 - 온보딩 단계
- 관심 지역 선택
- 선호 음식 선택
- 프로필 입력
- 로딩 화면: 콘텐츠 예고 메시지
- 홈 화면 진입
6. 툴 및 참고 사항
- 툴: Whimsical (윈지컬) 사용
- 와이어프레임 및 플로우 차트 작성에 적합
- 한글 입력 문제는 있으나 띄어쓰기 추가로 해결 가능
- 무료 플랜도 3,000 아이템까지 사용 가능
- 기타 팁:
- 텍스트, 버튼, 위치 정렬 등 러프하게 구성
- 실제 서비스라면 데이터 기반으로 항목 우선순위 정렬 필요
정리
- 온보딩에서 수집되는 맞춤 정보는 사용자 경험 전체에 영향을 미치는 핵심 자원
- 입력 과정에서 이탈률을 최소화하고, 리워드와 추천의 맥락을 명확히 전달하는 것이 중요
- 플로우는 단순하면서도 직관적으로 설계해야 하며, 와이어프레임 단계에서 다양한 케이스를 미리 고려하는 것이 중요하다
학습 인증샷
패스트캠퍼스, 환급챌린지, 패스트캠퍼스후기, 습관형성, 직장인자기계발, 오공완
