본문으로 건너뛰기

온보딩 정책

1. 목적​

사용자가 앱을 처음 실행했을 때 펜타의 핵심 가치와 기능을 효과적으로 전달하고, 자연스럽게 회원가입 또는 로그인으로 유도합니다. 스플래시부터 지역 선택까지의 전체 초기 진입 플로우를 정의합니다.

2. 스플래시 화면​

2-1. 별 로고 애니메이션​

  • 앱 실행 시 펜타의 별(Star) 로고가 애니메이션으로 표시됩니다.
  • 애니메이션 시퀀스 (총 1,050ms):
    1. 축소 (300ms): 1.10 → 0.85 배율로 축소
    2. 머무름 (250ms): 0.85 배율 유지
    3. 확대 (500ms): 0.85 → 6.84 배율로 확대 (화면 전체 채움)
  • 배경색: #3A0081 (보라색), 별 색상: 흰색
  • iOS 앱 실행 대기를 위해 애니메이션 전 500ms 딜레이

2-2. 앱 업데이트 체크​

  • 스플래시 중 애니메이션과 데이터 로딩이 병렬로 실행됩니다.
  • 서버에서 minRequiredVersion을 확인하여 강제/선택 업데이트를 판단합니다.
업데이트 유형동작
강제 업데이트다이얼로그 닫기 불가, "지금 업데이트" 버튼만 표시, 뒤로가기 차단
선택 업데이트"나중에" + "지금 업데이트" 버튼 표시, 닫기 가능
업데이트 없음다이얼로그 미표시, 다음 단계로 자동 진행

2-3. 네비게이션 로직​

스플래시 완료 후 다음 조건에 따라 이동합니다:

조건이동 화면
JWT 토큰 유효 (hasToken=true)홈 화면 (TabCoordinatorService)
온보딩 완료 + 토큰 없음 (hasSeenOnboarding=true)로그인 화면
온보딩 미완료온보딩 화면
  • 딥링크가 존재하는 경우, 홈 진입 후 딥링크 대상 화면으로 추가 이동합니다.
  • 푸시 알림으로 앱이 열린 경우, 해당 화면으로 네비게이션합니다.

3. 온보딩 화면​

3-1. 구성​

  • 4페이지 PageView 형태로 좌우 스와이프하며 탐색합니다.
  • 각 페이지는 언어별 전용 이미지로 구성됩니다.
    • 이미지 경로: assets/images/onboarding_images/{LANG}/onboarding_{lang}_{n}.webp
    • 지원 언어: ko, en, jp, es (일본어 ja는 jp로 매핑)
  • 이미지가 화면 상단을 가득 채우고, 하단에 타이틀/서브타이틀 영역이 배치됩니다.

3-2. UI 요소​

요소위치동작
건너뛰기 버튼우상단 (1~3페이지에서만 표시)클릭 시 온보딩 완료 → 로그인 화면
페이지 인디케이터하단 중앙 (4개 점)현재 페이지를 보라색(#660FD1)으로 표시
다음 버튼최하단1~3페이지: "다음", 4페이지: "3일 무료 시작"

3-3. 온보딩 완료 처리​

  • 마지막 페이지에서 "3일 무료 시작" 버튼 클릭 또는 건너뛰기 시:
    • hasSeenOnboarding = true를 SharedPreferences에 저장
    • 로그인 화면(Routes.login)으로 이동
  • 이후 앱 재실행 시 온보딩은 표시되지 않습니다.

4. 연령인증 화면 (Age Gate)​

4-1. 진입 조건​

  • 신규 사용자가 로그인 화면에서 소셜 로그인 버튼 클릭 시 진입합니다.
  • 기존 사용자(lastLoginMethod가 존재)는 연령인증을 건너뜁니다.

4-2. 입력 방식​

  • 4자리 출생연도를 커스텀 숫자 키패드로 입력합니다.
  • 키패드 구성: 0~9 숫자 버튼 + 백스페이스 + 확인 버튼
  • 4자리 입력 완료 시 확인 버튼이 활성화됩니다.

4-3. 판정 로직​

조건결과
현재연도 - 입력연도 >= 14인증 통과 → 약관 동의 → 소셜 로그인 진행
현재연도 - 입력연도 < 14인증 실패 → 로그인 화면으로 복귀, 에러 토스트 표시
취소(뒤로가기)로그인 화면으로 복귀

4-4. 부가 안내​

  • 헤더에 "태어난 해를 알려주세요"(info_birthyear) 제목 표시
  • "입력하신 출생연도는 공유되지 않아요"(info_noshare) 안내 문구 표시

5. 지역 선택 화면 (Select Map)​

5-1. 진입 조건​

  • 로그인 완료 후 또는 게스트 모드 진입 시 지역 선택 화면으로 이동합니다.

5-2. 레이아웃​

모바일 레이아웃​

  • 상단: 펜타 로고 (아이콘 + 텍스트)
  • 중앙: 세계 지도 이미지 (상단/하단 2분할)
    • K-그림책 버튼 (Coming Soon)
    • J-그림책 버튼 (Coming Soon)
    • 각 버튼은 커넥터 라인으로 지도와 연결
  • 하단: Disney/Pixar 배너 (로고 + "지금 읽기" 버튼)

태블릿 레이아웃​

  • 세로 모드: 모바일과 유사하되 중앙 정렬, 비례 스케일 적용
  • 가로 모드: 좌측에 지도(3:2 비율), 우측에 배너를 수평 배치
  • 태블릿 감지 후 LayoutBuilder를 통해 반응형으로 전환됩니다.

5-3. Disney/Pixar 배너​

  • Disney 로고 + Pixar 로고 + "지금 읽기" 텍스트 + 화살표 아이콘
  • 클릭 시 메인 홈 화면으로 이동합니다.
  • 스케일 애니메이션(0.95배) 터치 피드백 적용

6. 온보딩 정보 화면 (Onboarding Info)​

6-1. 목적​

  • 신규 사용자에게 독서 대상 연령 정보를 수집하여 맞춤 콘텐츠를 제공합니다.

6-2. 구성​

  • 헤더: "누가 읽나요?"(onboarding_who_reads) 제목
  • 출생연도 선택: 드롭다운 피커를 통해 연도를 선택
  • 하단 버튼:
    • "괜찮아요" (건너뛰기): 연령 정보 없이 메인으로 이동
    • "확인": 연령 정보 저장 후 메인으로 이동 (연도 선택 시에만 활성화)

6-3. 건너뛰기 가능​

  • 독서 대상 연령 입력은 선택 사항이며, 건너뛰기를 통해 즉시 메인 화면으로 진입할 수 있습니다.

7. 전체 온보딩 플로우 요약​

앱 실행
  → 스플래시 (별 애니메이션 + 업데이트 체크)
    → [토큰 유효] → 홈
    → [토큰 없음 + 온보딩 완료] → 로그인
    → [온보딩 미완료] → 온보딩 (4페이지)
      → 로그인
        → [신규] → 연령인증 → 약관 동의 → 소셜 로그인 → 지역 선택 → 홈
        → [기존] → 소셜 로그인 → 지역 선택 → 홈
        → [게스트] → 지역 선택 → 홈 (기능 제한)