본문으로 건너뛰기

게스트 온보딩 및 Step-up UX 흐름

게스트 계정 기능이 도입됨에 따라 SleepZ 웹 프런트엔드는 등록하지 않은 사용자를 빠르게 체험 플로우로 안내해야 한다. 본 문서는 초기 진입 → 사용자 유형 선택 → 약관 동의 → 게스트 온보딩 → 제한 기능 안내 → Step-up → 장기 게스트 이용 지원에 이르는 전체 UX 흐름을 정의한다.

1. 시나리오 개요​

초기 진입 화면(신규/기존 선택)
   |                      \
   |                       \ 기존 사용자
   |                        └──> Kakao 로그인 페이지
   v
약관 동의 페이지
   |
   v
게스트 온보딩 모달 ──> 온보딩 처리 중 상태
   |                         |
   | 성공                    | 실패
   v                         v
게스트 대시보드  <── 재시도 안내 (토스트/모달)
   |
   | 게스트 제한 기능 진입
   v
Step-up 유도 배너 ──> Step-up 인증 흐름 ──> 정규 사용자 대시보드
   |
   └─(Step-up 미진행)──> 비차단형 Step-up 리마인더 → 게스트 지속 사용

2. 화면별 UX 요구사항​

2.1 초기 사용자 선택 화면​

  • 페이지 최초 진입 시 전체 화면으로 신규 사용자와 기존 사용자 두 개의 주요 CTA 버튼을 노출한다.
  • 신규 사용자 버튼: 약관 동의 페이지로 이동하여 게스트 체험 플로우를 시작한다.
  • 기존 사용자 버튼: 바로 Kakao 로그인 페이지(/auth/oauth/kakao)로 라우팅한다.
  • 상단에는 공통 계정 아이콘과 간단한 안내 문구(예: “처음이신가요? 빠르게 체험해보세요.”)를 배치한다.
  • 버튼은 동일한 비주얼 무게를 유지하되, 신규 사용자 CTA에 “무료 체험 시작” 보조 문구를 추가해 첫 방문자를 유도한다.

2.2 약관 동의 페이지​

  • 신규 사용자가 선택되면 약관 요약 페이지로 이동하며, 화면 상단에는 뒤로 가기 아이콘을 제공해 초기 선택 화면으로 복귀할 수 있게 한다.
  • 필수 약관만 노출하고, 전체 동의 체크박스와 세부 약관 모달/외부 링크를 제공한다.
  • “동의하고 계속” 버튼을 누르면 게스트 온보딩 모달이 열린다.
  • 약관 동의 내에서 Universal(공통) 약관과 SleepZ 서비스 약관을 탭 또는 아코디언으로 구분해 표시한다.

2.3 게스트 온보딩 모달​

  • 단계:
    1. 약관 요약 및 필수 동의 체크박스(선택 약관 숨김).
    2. "게스트로 시작하기" 버튼 클릭 시 로딩 스피너와 함께 API 호출.
  • API 호출 순서 (등록과 로그인 분리):
    1. 게스트 등록 (POST /v1/auth/guest/register): 계정 생성, 응답 { success: true }
    2. 게스트 로그인 (POST /v1/auth/guest/login): 토큰 발급, 응답에 토큰/프로필/권한 포함
  • 성공 시 대시보드로 이동하며, 실패 시 모달 내에서 에러 메시지와 재시도 버튼을 제공한다.
  • 에러 메시지 예시:
    • AUTH_GUEST_ONBOARDING_LIMIT_REACHED: "동일 기기에서 생성 가능한 게스트 계정을 초과했습니다. 관리자에게 문의해주세요."
    • AUTH_DEVICE_BINDING_REQUIRED: "기기 식별 정보를 불러올 수 없습니다. 새로고침 후 다시 시도해주세요."

2.4 게스트 대시보드​

  • 헤더 상단에 GuestExperienceBanner를 고정 표시:
    • 텍스트: “현재 게스트 체험 중입니다. 정식 전환 시 더 많은 기능을 사용할 수 있어요.”
    • 버튼: “계정 전환하기(무료)” → Step-up 인증 플로우 진입.
  • 제한 기능 타일에는 잠금 아이콘과 짧은 설명을 배치한다.
  • Step-up CTA 주변에 정규 사용자 전환 시 혜택을 강조하는 서브 텍스트를 배치한다.

2.5 Step-up 인증 흐름​

  • GuestExperienceBanner 또는 제한 기능 가드에서 CTA 선택 시 Step-up 모달을 오픈.
  • 모달 구성:
    1. 인증 수단 선택 (카카오/이메일).
    2. 선택한 수단에 따라 외부 인증 화면 또는 인증 코드 입력 UI 표시.
    3. 성공 시 “계정이 전환되었습니다.” 안내 후 화면 리로드.
  • Step-up 실패 시 상태를 유지하되, 사용자가 다른 인증 수단을 고를 수 있도록 한다.
  • AUTH_GUEST_LINK_CONFLICT 응답 시 안내: “이미 진행 중인 전환 요청이 있습니다. 잠시 후 다시 시도하거나 새 창에서 로그인을 진행해주세요.”

2.6 Step-up 리마인더​

  • 장기간 게스트 상태가 유지될 경우, 홈 진입 시 비차단형 리마인더 모달이나 배너를 노출한다.
  • 리마인더는 Step-up 혜택(데이터 보존, 전문 코칭 등)을 강조하고, 닫기 또는 “나중에 다시 보기” 옵션을 제공한다.
  • 리마인더를 닫은 뒤에도 게스트 대시보드와 제한 기능 가드는 기존 상태를 유지해야 한다.

3. 상태 및 접근성 고려사항​

  • 모달 전환에는 포커스 트랩을 적용해 키보드 사용자도 쉽게 이동할 수 있게 한다.
  • Step-up 성공/실패 토스트 알림은 3초 이상 유지하며, 스크린 리더가 읽을 수 있도록 aria-live="polite" 영역에 메시지를 전달한다.
  • Step-up 리마인더에서는 FAQ와 전환 혜택 설명 링크를 함께 노출한다.

4. 디자인 핸드오프 체크리스트​

  • 게스트 배너, 잠금 타일, Step-up 모달, 리마인더 UI 시안을 Figma Guest Experience 페이지에 업로드.
  • UX/콘텐츠 팀과 문구 검수 완료 후 배포.
  • QA 팀에 Step-up 리마인더 노출 조건 테스트(장기 게스트 계정 시나리오) 상호 검증 요청.

본 UX 흐름은 게스트 기능 MVP를 기준으로 하며, 이후 퍼널 개선 시 업데이트가 필요하다.