목차
개요
앱 실행부터 홈 화면 진입까지의 흐름을 정의합니다.
흐름 요약
flowchart TD
A[스플래시] --> B{토큰 검증}
B -->|유효| C[홈 화면]
B -->|무효/없음| D[로그인]
D -->|신규 유저| E[약관 동의]
D -->|기존 유저| C
E --> F[회원가입 시작]
F --> G[회원가입 6단계]
G --> H[회원가입 완료]
H --> I[온보딩]
I --> C
1.1 스플래시 화면
목적
앱 로딩 중 브랜드 노출 및 백그라운드 초기화 작업 수행
UI 구성
요소 내용 배경 브랜드 컬러 로고 픽포미 로고 (중앙) 슬로건 "눈이 되어주는 쇼핑 도우미"
동작
순서 내용 1 앱 실행 시 스플래시 노출 (약 3초) 2 백그라운드: 서버 헬스체크 3 백그라운드: 앱 버전 체크 4 백그라운드: 로컬 토큰 검증 5 결과에 따라 다음 화면 분기
분기 조건
조건 이동 화면 토큰 유효 홈 화면 토큰 없음/만료 로그인 화면 강제 업데이트 필요 업데이트 안내 팝업
접근성
항목 처리 스크린리더 슬로건 자동 읽기: "픽포미, 눈이 되어주는 쇼핑 도우미"
1.2 로그인 화면
목적
소셜 로그인을 통한 간편 인증
UI 구성
요소 내용 상단 로고 중앙 "간편 로그인 후 픽포미를 시작해보세요" 하단 소셜 로그인 버튼 목록
소셜 로그인 버튼
순서 버튼 iOS Android 1 카카오로 시작하기 O O 2 애플로 시작하기 O X 3 구글로 시작하기 O O
동작
액션 결과 소셜 버튼 터치 해당 소셜 인증 SDK 실행 인증 성공 (기존 유저) 홈 화면 이동 인증 성공 (신규 유저) 약관 동의 화면 이동 인증 실패 에러 토스트 표시
1.3 약관 동의 화면
목적
서비스 이용에 필요한 법적 동의 수집
UI 구성
요소 내용 헤더 "픽포미 서비스 이용을 위해 약관에 동의해 주세요" 서브 텍스트 "픽포미는 개인정보 수집 및 데이터 보안을 위해 안전한 환경을 제공해요" 전체 동의 체크박스 + "전체동의" 개별 항목 필수/선택 구분된 체크박스 목록 하단 [다음으로] 버튼
동의 항목
순서 항목 필수 여부 1 서비스 이용약관 동의 필수 2 개인정보 처리방침 동의 필수 3 만 14세 이상입니다 필수 4 마케팅 정보 수신 동의 선택
1.4 회원가입 시작 화면
목적
회원가입 프로세스 시작 전 안내
UI 구성
요소 내용 로고 픽포미 로고 타이틀 "픽포미에 오신 것을 환영해요!" 설명 "서비스 이용을 위해 회원가입이 필요해요. 가입은 총 6단계로 이루어져요." 하단 [시작하기] 버튼
1.5 회원가입 화면
목적
서비스 이용에 필요한 사용자 정보 수집 (6단계)
공통 UI
요소 내용 헤더 "총 6단계 중 N단계입니다" (마지막은 "마지막 단계입니다") 하단 [이전] + [확인]/[완료] 버튼
Step 1: 닉네임
요소 내용 라벨 "닉네임을 알려주세요" 입력 필드 텍스트 입력 중복 확인 [중복 확인] 버튼 → API 호출 유효성 2~10자, 특수문자 불가
Step 2: 이메일
요소 내용 라벨 "이메일을 알려주세요" 입력 필드 이메일 키보드 유효성 이메일 형식 검증 (@, 도메인)
Step 3: 전화번호
요소 내용 라벨 "전화번호를 입력해주세요" 입력 필드 숫자 키보드 유효성 10자리 이상 숫자
Step 4: 생년월일 (선택)
요소 내용 라벨 "생년월일을 입력해주세요" 입력 방식 바텀시트 스피너 (년/월/일)
Step 5: 성별 (선택)
요소 내용 라벨 "성별을 알려주세요" 옵션 남자 / 여자 / 선택 안함
Step 6: 유입 경로 (선택)
요소 내용 라벨 "픽포미를 알게 된 경로를 알려주세요" 옵션 지인추천 / 우리소리 / SNS / 앱스토어 및 인터넷 검색 / 기타
1.6 회원가입 완료 화면
목적
회원가입 완료 확인 및 정보 확인 기회 제공
UI 구성
요소 내용 로고 픽포미 로고 타이틀 "픽포미를 이용할 모든 준비가 완료되었어요" 버튼 1 [회원가입 완료] (Primary) 버튼 2 [나의 정보 다시보기] (Secondary)
1.7 온보딩 화면
목적
신규 사용자에게 앱 핵심 기능 안내
페이지 구성
페이지 설명 1 "검색창을 눌러 상품을 찾거나, 링크를 붙여 넣어 보세요" 2 "상품 이미지를 텍스트로 설명하고 상세 설명도 정리해줘요" 3 "상품에 궁금한 점은 AI 포미에게 구체적 질문은 매니저에게"
1.8 세션 만료 처리
조건
마지막 접속일로부터 30일 경과
토큰 검증 실패
동작
순서 내용 1 로컬 토큰 삭제 2 로그인 화면 이동 3 토스트: "장기간 미접속으로 로그아웃되었습니다"