toss_journey
SKILL.md
TaillogToss 사용자 여정 와이어프레임
화면 간 전환 흐름(사용자 여정)과 신규 6개 화면 와이어프레임을 정의한다.
개별 화면의 기본 와이어프레임은 /toss_wireframes, TDS 컴포넌트 상세는 /toss_apps 참조.
11. 사용자 여정 와이어프레임 (User Journey Wireframes)
Section 9의 개별 화면 와이어프레임을 보완하여, **화면 간 전환 흐름(사용자 여정)**과 누락 화면 6개를 정의한다.
11.0 설계 원칙
- Hook Model: Trigger → Action → Variable Reward → Investment (매 화면 전환에 적용)
- Aha Moment < 3분: 설문 완료 → AI 분석 결과까지 138초 (Cold Start 여정 A 기준)
- Sticky Loop: Quick Log 30초 → 트렌드 뱃지 갱신 (Daily Loop 여정 B 기준)
- Progressive Disclosure: 무료 티저(Skeleton 블러) → 보상형 광고 1회 잠금 해제 → PRO 전환
- Toss Native: TDS 전용 컴포넌트, 바텀시트 중심 UX, 키보드 입력 최소화
11.1 전체 화면 인벤토리 (19개)
기존 Section 9의 10개 + 신규 6개 화면 + 재사용 컴포넌트 2개 + PRO 업셀 바텀시트 1개.
| # | 화면 | 파일 경로 | 레이아웃 패턴 | 신규/기존 |
|---|---|---|---|---|
| 1 | login | src/pages/login.tsx |
Standalone | 기존 9-1 |
| 2 | welcome | src/pages/onboarding/welcome.tsx |
B (상세형) | NEW |
| 3 | survey | src/pages/onboarding/survey.tsx |
C (입력폼형) | 기존 9-2 |
| 4 | survey-result | src/pages/onboarding/survey-result.tsx |
B (상세형) | NEW |
| 5 | dashboard | src/pages/dashboard/index.tsx |
D+A (탭+목록) | 기존 9-3 보강 |
| 6 | quick-log | src/pages/dashboard/quick-log.tsx |
E (모달형) | 기존 9-4 보강 |
| 7 | analysis | src/pages/dashboard/analysis.tsx |
D (탭형) | 기존 9-5 |
| 8 | coaching-result | src/pages/coaching/result.tsx |
B (상세형) | 기존 9-6 보강 |
| 9 | training-academy | src/pages/training/academy.tsx |
A 변형 (GridList) | 기존 9-7 |
| 10 | training-detail | src/pages/training/detail.tsx |
B (상세형) | NEW |
| 11 | dog-profile | src/pages/dog/profile.tsx |
C (입력폼형) | 기존 9-8 |
| 12 | dog-switcher | src/pages/dog/switcher.tsx |
E (모달형) | NEW |
| 13 | dog-add | src/pages/dog/add.tsx |
C (입력폼형) | NEW |
| 14 | settings | src/pages/settings/index.tsx |
A (목록형) | 기존 9-9 |
| 15 | subscription | src/pages/settings/subscription.tsx |
B (상세형) | NEW |
| 16 | notification | src/pages/onboarding/notification.tsx |
B (상세형) | NEW |
| 17 | ops-today | src/pages/ops/today.tsx |
D+A (탭+목록) | 기존 9-10 |
| 18 | EmptyState | components/EmptyState.tsx |
Result 기반 | NEW |
| 19 | ErrorState | components/ErrorState.tsx |
ErrorPage 기반 | NEW |
11.2 여정 플로우 다이어그램 (6개 여정)
여정 요약
| 여정 | 대상 | 핵심 경로 | 목표 소요시간 |
|---|---|---|---|
| A: Cold Start | 첫 방문자 | login → welcome → survey(7) → survey-result → notification → dashboard | < 3분 |
| B: Daily Loop | 기존 사용자 | dashboard → quick-log → dashboard(갱신) | < 35초 |
| C: Upgrade | 무료 사용자 | (트리거) → PRO 업셀 시트 → subscription → Toss IAP → dashboard(PRO) | < 2분 |
| D: Deep-Dive | 기록 10건+ | dashboard → analysis → coaching-result → training-academy → training-detail | 5-10분 |
| E: B2B Ops | 트레이너/관리자 | subscription(B2B) → role 전환 → dashboard(운영탭) → ops-today → 기록 → 리포트 | 10-30분 |
| F: Multi-Dog | 다견 보호자 | dashboard → dog-switcher → 선택/추가 → dashboard(전환) | < 10초 |
Journey A: Cold Start (첫 방문 < 3분)
[Toss 앱]
│
▼
┌─────────┐ ┌──────────┐ ┌──────────────┐ ┌───────────────┐
│ login │────▶│ welcome │────▶│ survey (7단계)│────▶│ survey-result │
│ (9-1) │ │ (11.3-1) │ │ (9-2) │ │ (11.3-2) │
│ │ │ │ │ │ │ │
│토스 OAuth │ │단일 카드 │ │이름→품종→나이 │ │AI 요약 + 티저 │
│브릿지 │ │Lottie │ │→체중→중성화 │ │Skeleton 블러 │
│ │ │"90초 시작"│ │→문제행동→목표 │ │광고/기록 CTA │
└─────────┘ └──────────┘ └──────────────┘ └───────┬───────┘
│
▼
┌───────────────┐
│ notification │
│ (11.3-3) │
│ │
│벨 Lottie │
│체크박스 ×3 │
│"허용"/"나중에" │
└───────┬───────┘
│
▼
┌───────────────┐
│ dashboard │
│ (9-3 보강) │
│ │
│EmptyState │
│"첫 기록 남기기"│
└───────────────┘
핵심 지표: 설문 시작→대시보드 도착 138초 이내 (Aha Moment) 이탈 방지: welcome에서 "90초면 충분해요" 카피, survey에서 ProgressBar로 진행감
Journey B: Daily Loop (일상 기록 < 35초)
┌───────────────┐ ┌───────────────────────┐ ┌───────────────┐
│ dashboard │────▶│ quick-log │────▶│ dashboard │
│ │ │ (9-4 보강) │ │ (갱신) │
│ │ │ │ │ │
│"+ 빠른 기록" │ │ [빠른] [상세] ← 탭 │ │ Toast 확인 │
│BottomCTA 탭 │ │ │ │ 목록 갱신 │
│ │ │ 빠른: 12칩 원탭 저장 │ │ 스트릭 갱신 │
│ │ │ 상세: ABC 접이식 │ │ │
└───────────────┘ └───────────────────────┘ └───────────────┘
2초 최대 30초 3초
핵심 지표: 빠른 탭 원탭 = 2초, 상세 ABC = 30초 이내 Sticky: 저장 후 "🔥 N일 연속 기록 중!" 스트릭 뱃지 즉시 갱신
Journey C: Upgrade (PRO 전환 < 2분)
┌─ 트리거 ──────────────────────────────────────────┐
│ │
│ R1: survey-result → "광고 보고 전체 분석 보기" │
│ R2: dashboard 코칭 → "광고 보고 코칭 열기" │
│ R3: coaching-result → "광고 보고 열기" │
│ C1~C5: 자연 전환 포인트 (Skeleton 블러 노출) │
│ │
└────────────────┬───────────────────────────────────┘
│
▼
┌─ useBottomSheet ─┐ ┌───────────────┐
│ PRO 업셀 시트 │────▶│ subscription │
│ │ │ (11.3-4) │
│ "PRO로 업그레이드" │ │ │
│ 핵심 혜택 3줄 │ │무료 vs PRO 비교│
│ [자세히 보기] │ │월간/토큰팩 │
└───────────────────┘ │Toss IAP 결제 │
└───────┬───────┘
│ 결제 성공
▼
┌───────────────┐
│ dashboard │
│ (PRO 활성화) │
│ │
│ Skeleton 해제 │
│ PRO Badge 표시 │
│ 전체 기능 활성 │
└───────────────┘
보상형 광고 퍼널: Skeleton 블러 → TextButton("광고 보고 열기") → 토스 Ads SDK 2.0 Rewarded (토스 SDK 공식 지원 폴백만 허용) → 1회 해제 → "매번 광고 귀찮다 → PRO 구독" 자연 전환 터치포인트: survey-result(R1), dashboard(R2), coaching-result(R3)
Journey D: Deep-Dive (심층 분석 5-10분)
┌───────────────┐ ┌───────────────┐ ┌────────────────┐
│ dashboard │────▶│ analysis │────▶│coaching-result │
│ │ │ (9-5) │ │ (9-6 보강) │
│ [분석] 탭 탭 │ │ │ │ │
│ │ │주간/월간 차트 │ │진단: insight │
│ │ │행동별 빈도 │ │프로토콜 3단계 │
│ │ │"AI 코칭 보기" │ │dog_voice 말풍선 │
└───────────────┘ └───────────────┘ │7일 훈련 계획 │
│위험 신호/상담 │
└───────┬────────┘
│
▼
┌──────────────────┐
│training-academy │
│ (9-7) │
│ │
│GridList 커리큘럼 │
│진행률 ProgressBar │
└───────┬──────────┘
│ 미션 선택
▼
┌──────────────────┐
│training-detail │
│ (11.3-6) │
│ │
│가이드 Asset │
│체크리스트 │
│메모 + "미션 완료" │
└──────────────────┘
핵심 지표: 분석→코칭→훈련 전환율, 훈련 완료율 PRO 잠금: coaching-result 심층 분석 영역 Skeleton 블러 (무료 유저)
Journey E: B2B Ops (트레이너/관리자 10-30분)
┌───────────────┐ ┌─────────────────┐ ┌───────────────┐
│ subscription │────▶│ role 자동전환 │────▶│ dashboard │
│ (11.3-4) │ │ │ │ (운영 탭 활성) │
│ │ │IAP 결제 완료 │ │ │
│B2B 플랜 선택 │ │verify-iap-order │ │[기록][분석] │
│트레이너/센터 │ │→ role='trainer' │ │[훈련][운영] ← │
│ │ │ or 'org_owner' │ │ 4탭 활성화 │
└───────────────┘ └─────────────────┘ └───────┬───────┘
│ [운영] 탭
▼
┌───────────────┐
│ ops-today │
│ (9-10 보강) │
│ │
│[대기][진행][완료]
│반려견 목록 │
│개별/벌크 기록 │
└───────┬───────┘
│
┌─────────┴─────────┐
▼ ▼
┌──────────────┐ ┌──────────────┐
│ 개별 기록 모달 │ │ 벌크 모드 │
│ │ │ │
│[프리셋][ABC] │ │다견 선택 │
│프리셋: 원탭 │ │카테고리 일괄 │
│ABC: 다중태그 │ │[일괄 저장] │
└──────────────┘ └──────────────┘
역할 전환: IAP 결제 → Edge Function verify-iap-order → users.role 자동 변경
센터 플로우: 센터 플랜 결제 → organizations 생성 → 직원 초대(코드/링크) → org_members 등록
구독 만료: role 유지, 기록/리포트 생성 차단, 기존 데이터 열람 30일 유예
Journey F: Multi-Dog (다견 전환 < 10초)
┌───────────────┐ ┌─ useBottomSheet ──┐ ┌───────────────┐
│ dashboard │────▶│ dog-switcher │────▶│ dashboard │
│ │ │ (11.3-5) │ │ (전환 완료) │
│반려견 카드 탭 │ │ │ │ │
│또는 헤더 탭 │ │ListRow(반려견 ×N) │ │선택된 반려견 │
│ │ │Badge("선택") │ │데이터 갱신 │
│ │ │"+ 반려견 추가" │ │ │
└───────────────┘ └────────┬──────────┘ └───────────────┘
│ "+ 반려견 추가" 탭
▼
┌───────────────┐
│ dog-add │
│ (11.1 #13) │
│ │
│survey 축소판 │
│이름+품종+나이 │
│→ 저장 → 전환 │
└───────────────┘
핵심 UX: 바텀시트로 즉시 전환, 추가 시 survey 축소판(3필드)
데이터: 전환 시 active_dog_id 업데이트 → 대시보드 전체 갱신
11.3 신규 화면 와이어프레임 (6개 + 기존 3개 보강)
11.3-1. welcome.tsx — 첫 방문 가치 제안 (온보딩 후크)
┌─────────────────────────┐
│ │ ← Navbar 없음 (단일 카드)
├─────────────────────────┤
│ │
│ ┌───────────────────┐ │
│ │ [Asset: Lottie] │ │ ← Asset(type="lottie")
│ │ 강아지 애니메이션 │ │ 단일 가치 제안 카드
│ └───────────────────┘ │
│ │
│ "반려견 행동, │ ← Text(heading)
│ 90초면 기록 끝" │
│ │
│ "AI가 분석하고, │ ← Text(subtitle, muted)
│ 맞춤 훈련까지" │
│ │
├─────────────────────────┤
│ ┌───────────────────┐ │
│ │ 시작하기 (90초) │ │ ← BottomCTA > Button(primary)
│ └───────────────────┘ │
└─────────────────────────┘
사용 컴포넌트: Asset(Lottie), BottomCTA, Button, Text
전환: "시작하기" → survey(Step 1)
카피 원칙: 숫자 강조("90초"), 결과 중심, 부담 최소화
참고: 최초 1회만 표시 (AsyncStorage 플래그), Navbar.CloseButton 삭제, "이미 계정이 있어요" 삭제
11.3-2. survey-result.tsx — AI 분석 티저 + PRO 전환 후크
┌─────────────────────────┐
│ 분석 결과 │ ← Navbar(.Title)
├─────────────────────────┤
│ ScrollView │
│ │
│ ┌───────────────────┐ │
│ │ [Asset: AI 아이콘] │ │ ← Asset
│ │ │ │
│ │ "뽀삐의 행동 분석 │ │ ← Text(heading)
│ │ 결과입니다" │ │
│ └───────────────────┘ │
│ │
│ ┌───────────────────┐ │
│ │ 행동 유형 │ │ ← ListHeader
│ │ Badge: "불안형" │ │ ← Badge(variant="warning")
│ │ │ │
│ │ 위험도: ■■■□□ 중간 │ │ ← ProgressBar(value=0.6)
│ │ │ │
│ │ "설문 기반 초기 │ │ ← Text(paragraph)
│ │ 분석입니다. │ │
│ │ 기록이 쌓이면 더 │ │
│ │ 정확한 분석이 │ │
│ │ 가능해요." │ │
│ └───────────────────┘ │
│ │
│ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │ ← Border
│ │
│ ┌───────────────────┐ │
│ │ 📋 상세 리포트 │ │ ← ListHeader
│ │ ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ │ │ ← Skeleton(블러 처리)
│ │ ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ │ │ 잠금된 상세 분석 영역
│ │ ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ │ │
│ │ ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ │ │
│ │ │ │
│ │ TextButton: │ │ ← TextButton("광고 보고 전체 분석 보기")
│ │ "광고 보고 전체 │ │ → Rewarded Ad → 1회 잠금 해제
│ │ 분석 보기" │ │
│ └───────────────────┘ │
│ │
├─────────────────────────┤
│ ┌───────────────────┐ │
│ │ 기록 시작하기 │ │ ← BottomCTA > Button(primary)
│ └───────────────────┘ │ → dashboard
└─────────────────────────┘
사용 컴포넌트: Navbar(.Title), Asset, Badge, ProgressBar, Border, ListHeader, Skeleton(블러), TextButton, BottomCTA, Button
보상형 광고(R1): "광고 보고 전체 분석 보기" → Rewarded Ad 시청 → Skeleton 해제 → 1회 열기
이탈 안전망: "기록 시작하기" → dashboard (무료 진입 보장)
행동 유형 Badge 규칙: 프론트엔드 규칙 엔진 (Step 6 응답 기반)
- 짖음+공포 → 불안형, 공격성+마운팅 → 지배형, 과잉흥분+파괴 → 에너지형
- 분리불안 포함 → 분리불안형, 배변만 → 환경적응형, 3개+ → 복합형
11.3-3. notification.tsx — Smart Message 알림 동의
┌─────────────────────────┐
│ [✕] │ ← Navbar.CloseButton ("나중에")
├─────────────────────────┤
│ │
│ ┌─────────┐ │
│ │ 🔔 │ │ ← Asset(type="lottie", 벨 애니메이션)
│ │ (Lottie)│ │
│ └─────────┘ │
│ │
│ "반려견의 변화를 │ ← Text(heading)
│ 놓치지 마세요" │
│ │
│ "중요한 알림만 보내 │ ← Text(subtitle, muted)
│ 드릴게요" │
│ │
│ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │ ← Border
│ │
│ ┌───────────────────┐ │
│ │ ☑ 훈련 리마인더 │ │ ← Checkbox(checked=true)
│ │ 매일 설정한 시간 │ │ "매일 훈련 시간 알림"
│ │ [오전 9시 ▾] │ │ ← Dropdown(options=시간, default="오전 9시")
│ ├───────────────────┤ │
│ │ ☑ 행동 급증 알림 │ │ ← Checkbox(checked=true)
│ │ 평소보다 문제행동 │ │ "문제행동 급증 시 알림"
│ │ 이 많을 때 │ │
│ ├───────────────────┤ │
│ │ ☐ 프로모션/팁 │ │ ← Checkbox(checked=false)
│ │ 할인·이벤트 소식 │ │ "프로모션 알림 (선택)"
│ └───────────────────┘ │
│ │
├─────────────────────────┤
│ ┌───────────────────┐ │
│ │ 허용하기 │ │ ← BottomCTA > Button(primary)
│ └───────────────────┘ │
│ TextButton("나중에") │ ← TextButton → dashboard (건너뛰기)
└─────────────────────────┘
사용 컴포넌트: Navbar(.CloseButton), Asset(Lottie), Checkbox × 3, Dropdown, Border, BottomCTA, Button, TextButton
로직: "허용" → OS 푸시 권한 요청 + Smart Message 등록 API → dashboard
기본값: 리마인더/급증 ON, 프로모션 OFF (옵트인 원칙)
Smart Message: Title 13자, Body 20자 제한 (Toss S2S API 규격)
11.3-4. subscription.tsx — PRO 구독 / Toss IAP 결제
┌─────────────────────────┐
│ ← TailLog PRO │ ← Navbar(.BackButton, .Title)
├─────────────────────────┤
│ ScrollView │
│ │
│ ┌───────────────────┐ │
│ │ Top │ │ ← Top(title, subtitle)
│ │ "더 정확한 AI 코칭, │ │
│ │ 더 빠른 변화" │ │
│ └───────────────────┘ │
│ │
│ ┌───────────────────┐ │
│ │ 무료 vs PRO 비교 │ │ ← ListHeader
│ ├───────────────────┤ │
│ │ AI 코칭 3회/월 │ │ ← TableRow(label, value)
│ │ 무제한 ✓ │ │ PRO 쪽 Badge("무제한")
│ ├───────────────────┤ │
│ │ 행동 분석 기본 │ │ ← TableRow
│ │ 심층 ✓ │ │
│ ├───────────────────┤ │
│ │ 훈련 커리큘럼 기본 │ │ ← TableRow
│ │ 전체 ✓ │ │
│ ├───────────────────┤ │
│ │ PDF 리포트 ✕ │ │ ← TableRow
│ │ ✓ │ │
│ ├───────────────────┤ │
│ │ 광고 없음 ✕ │ │ ← TableRow
│ │ ✓ │ │
│ └───────────────────┘ │
│ │
│ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │ ← Border
│ │
│ ┌───────────────────┐ │
│ │ [월간] [토큰팩] │ │ ← SegmentedControl(2 segments)
│ └───────────────────┘ │
│ │
│ ┌───────────────────┐ │
│ │ 개인 PRO 월간 │ │ ← BoardRow + Badge("인기")
│ │ ₩4,900/월 │ │
│ │ Badge: "인기" │ │
│ ├───────────────────┤ │
│ │ 토큰팩 30회 │ │ ← BoardRow
│ │ ₩4,900 (1회=₩163) │ │
│ └───────────────────┘ │
│ │ (B2B 플랜: v1 숨김, Wave 3 게이트 이후) │
│ │
│ ListFooter: │ ← ListFooter
│ "구독은 언제든 해지 가 │
│ 능합니다. 토스 앱 내 │
│ 결제로 안전합니다." │
│ │
│ TextButton("이전 구매 복원") │ ← 복원구매
│ │
│ [기존 구독자 시] │
│ 현재 플랜 Badge + "해지" │ ← Badge + TextButton
│ │
├─────────────────────────┤
│ ┌───────────────────┐ │
│ │ 구독하기 │ │ ← BottomCTA > Button(primary)
│ └───────────────────┘ │ → Toss IAP 결제 플로우
└─────────────────────────┘
사용 컴포넌트: Navbar(.BackButton, .Title), Top, ListHeader, TableRow × 5, Border, SegmentedControl, BoardRow × 2, Badge("인기"), ListFooter, TextButton(복원구매, 해지), BottomCTA, Button
IAP 로직: "구독하기" → Toss IAP SDK → 결제 성공 → Edge Function verify-iap-order → 권한 갱신
복원구매: "이전 구매 복원" → Toss IAP restorePurchases() → 기존 구독 복원
기존 구독자: 현재 플랜 Badge 표시 + "해지" TextButton (→ Toss IAP 해지 플로우)
B2B 자동 전환: v1 기본 숨김. Wave 3(B2B Expansion) 게이트 통과 후 B2B 플랜(훈련사 PRO ₩19,900/월, 센터 PRO ₩49,900/월) 별도 릴리즈
구독 만료: role 유지, 기록/리포트 생성 차단, 기존 데이터 열람 30일 유예
11.3-5. dog-switcher.tsx — 멀티독 선택 바텀시트
┌─ useBottomSheet ────────┐
│ │
│ ┌───────────────────┐ │
│ │ 반려견 선택 │ │ ← ListHeader
│ └───────────────────┘ │
│ │
│ ┌───────────────────┐ │
│ │ 🐕 뽀삐 │ │ ← ListRow(.Icon, .Texts)
│ │ 비숑 · 3살 │ │ Badge("선택", variant="success")
│ │ Badge: "선택" ✓ │ │
│ ├───────────────────┤ │
│ │ 🐕 초코 │ │ ← ListRow(.Icon, .Texts)
│ │ 푸들 · 5살 │ │
│ ├───────────────────┤ │
│ │ 🐕 루비 │ │ ← ListRow(.Icon, .Texts)
│ │ 골든 · 2살 │ │
│ └───────────────────┘ │
│ │
│ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │ ← Border
│ │
│ ┌───────────────────┐ │
│ │ + 반려견 추가 │ │ ← ListRow → dog-add 화면
│ └───────────────────┘ │
│ │
└─────────────────────────┘
사용 컴포넌트: useBottomSheet, ListHeader, ListRow(.Icon, .Texts) × N, Badge(variant="success"), Border, ListRow(추가 버튼)
로직: 반려견 선택 → active_dog_id 업데이트 → 바텀시트 닫기 → 대시보드 갱신
추가: "+ 반려견 추가" → dog-add 화면 (survey 축소판: 이름+품종+나이)
최대: 무료 1마리, PRO 최대 5마리
삭제: dog-profile 내 "반려견 삭제" 버튼으로 처리 (switcher에서는 삭제 없음)
11.3-6. training/detail.tsx — 훈련 미션 상세 (체크리스트+메모)
┌─────────────────────────┐
│ ← 산책 훈련 Day 3 │ ← Navbar(.BackButton, .Title)
├─────────────────────────┤
│ ■■■■■■□□□□ 60% │ ← ProgressBar(value=0.6)
├─────────────────────────┤
│ ScrollView │
│ │
│ ┌───────────────────┐ │
│ │ [Asset: 가이드] │ │ ← Asset(type="image" 또는 "video")
│ │ │ │ 훈련 가이드 영상/이미지
│ │ ▶ 영상 보기 │ │
│ └───────────────────┘ │
│ │
│ ┌───────────────────┐ │
│ │ 📋 오늘의 미션 │ │ ← ListHeader
│ ├───────────────────┤ │
│ │ ☑ 리드 길이 조절 │ │ ← Checkbox(checked=true)
│ │ 산책 시작 시 │ │
│ ├───────────────────┤ │
│ │ ☑ 앉아 5초 유지 │ │ ← Checkbox(checked=true)
│ │ 교차로에서 │ │
│ ├───────────────────┤ │
│ │ ☐ 다른 강아지 반응 │ │ ← Checkbox(checked=false)
│ │ 관찰 기록 │ │
│ ├───────────────────┤ │
│ │ ☐ 보상 타이밍 연습 │ │ ← Checkbox(checked=false)
│ │ 1초 이내 간식 │ │
│ └───────────────────┘ │
│ │
│ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │ ← Border
│ │
│ TextButton: │ ← "이 훈련이 어려워요"
│ "이 훈련이 어려워요" │ → 바텀시트(Plan B/C 교체)
│ │
│ ┌─ Plan B/C 바텀시트 ─┐│ ← useBottomSheet
│ │ "대체 미션 제안" ││ Plan B: 정적 데이터
│ │ ││ Plan C: AI 동적 생성(PRO)
│ │ ○ Plan A (현재) ││
│ │ ● Plan B (쉬운 버전) ││ ← Radio selection
│ │ ○ Plan C (AI 맞춤) ││ PRO Badge
│ │ ││
│ │ [적용하기] ││ ← Button
│ └─────────────────────┘│
│ │
│ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │ ← Border
│ │
│ ┌───────────────────┐ │
│ │ 📝 메모 │ │ ← ListHeader
│ │ ┌─────────────────┐│ │
│ │ │오늘 산책 중에... ││ │ ← TextField(multiline, placeholder=
│ │ │ ││ │ "오늘 훈련 소감을 남겨주세요")
│ │ │ ││ │
│ │ └─────────────────┘│ │
│ └───────────────────┘ │
│ │
├─────────────────────────┤
│ ┌───────────────────┐ │
│ │ 미션 완료 ✓ │ │ ← BottomCTA > Button(primary)
│ └───────────────────┘ │ → training_progress 업데이트
└─────────────────────────┘
사용 컴포넌트: Navbar(.BackButton, .Title), ProgressBar, Asset(image/video), ListHeader × 2, Checkbox × N, Border, TextButton, useBottomSheet, Radio, TextField(multiline), BottomCTA, Button
로직: 체크리스트 체크 → 로컬 상태 관리, "미션 완료" → training_progress 업데이트 + 다음 Day 잠금 해제
알림장 사진: Asset 자리 확보 (서버 아키텍처 결정 후 이미지 업로드 추가)
11.3-7. dashboard/index.tsx 보강 — 4대 콘텐츠 블록 명세
기존 9-3 와이어프레임에 아래 콘텐츠 블록 명세를 추가한다.
┌─────────────────────────┐
│ 테일로그 [🐕▾] [🔔][⚙️] │ ← Navbar + 반려견 선택(→dog-switcher)
├─────────────────────────┤
│ [기록] [분석] [훈련●] │ ← Tab(3탭, B2B는 +[운영])
├─────────────────────────┤
│ │
│ ┌───────────────────┐ │ ← ① 오늘의 AI 코칭
│ │ 🤖 오늘의 코칭 │ │ ListHeader + Asset
│ │ │ │
│ │ [무료] ┄┄┄┄┄┄┄┄┄ │ │ 무료: Skeleton 블러
│ │ TextButton: │ │ + TextButton("광고 보고 코칭 열기")
│ │ "광고 보고 코칭 │ │ → 토스 Rewarded 시청 → 1회 해제
│ │ 열기" │ │
│ │ ─── 또는 ─── │ │
│ │ [PRO] "오늘은 산책 │ │ PRO: 전체 텍스트 표시
│ │ 시 리드 길이를..." │ │
│ └───────────────────┘ │
│ │
│ ┌───────────────────┐ │ ← ② 연속 기록 스트릭
│ │ 🔥 7일 연속 기록! │ │ Badge(variant="success")
│ │ Badge: "7일 연속" │ │
│ └───────────────────┘ │
│ │
│ ┌───────────────────┐ │ ← ③ 최근 ABC 기록
│ │ 📋 최근 기록 │ │ ListHeader
│ ├───────────────────┤ │
│ │ 짖음 · 산책 중 │ │ ListRow × 5 (최대)
│ │ 14:30 Badge:높음 │ │ Badge(variant="danger"/"info"/"warning")
│ ├───────────────────┤ │
│ │ 점프 · 손님 방문 │ │
│ │ 10:15 Badge:보통 │ │
│ ├───────────────────┤ │
│ │ ... (최대 5건) │ │
│ └───────────────────┘ │
│ │
│ [0건 시: EmptyState] │ ← EmptyState("첫 기록을 남겨보세요")
│ │
├─────────────────────────┤
│ ┌───────────────────┐ │ ← ④ 빠른 기록 CTA
│ │ + 빠른 기록 │ │ BottomCTA > Button(primary)
│ └───────────────────┘ │ → quick-log 바텀시트
└─────────────────────────┘
상태 분기:
| 상태 | 조건 | UI |
|---|---|---|
| 로딩 | 데이터 패칭 중 | Skeleton(pattern="topList") 전체 |
| 0건 | 기록 없음 | EmptyState("첫 기록을 남겨보세요", icon="pencil") |
| 1-2건 | 기록 부족 | 기록 목록 + "3건 이상 기록하면 AI 분석 시작!" 안내 |
| 3건+ | AI 활성 | 전체 4블록 표시 |
| 에러 | API 실패 | ErrorState(retryButton) |
멀티독: 헤더 반려견 이름 탭 → dog-switcher 바텀시트 → 선택 → 대시보드 전체 갱신 [훈련] 탭 Badge: dot ● = 미완료 미션 표시 (오늘의 미션 남아있을 때 활성)
11.3-8. quick-log.tsx 보강 — 빠른+상세 2탭 통합 바텀시트
기존 9-4 와이어프레임을 2탭 통합 구조로 보강한다.
┌─ useBottomSheet ────────────────────┐
│ │
│ ┌─────────────────────────────┐ │
│ │ 빠른 기록 │ │ ← ListHeader
│ └─────────────────────────────┘ │
│ │
│ ┌──────────┬──────────┐ │
│ │ [빠른] │ [상세] │ │ ← SegmentedControl(2 segments)
│ └──────────┴──────────┘ │
│ │
│ ═══ 빠른 탭 (기본) ═══ │
│ │
│ ┌─────────────────────────────┐ │
│ │ 🚨 행동 문제 │ │ ← ListHeader
│ │ │ │
│ │ [짖음/울음] [공격성] │ │ ← Chip × 8 (원탭 = 즉시 저장)
│ │ [분리불안] [파괴행동] │ │ intensity=3 고정
│ │ [마운팅] [과잉흥분] │ │ 서베이 카테고리 동일
│ │ [배변문제] [공포/회피] │ │
│ │ [+ 기타] │ │
│ └─────────────────────────────┘ │
│ │
│ ┌─────────────────────────────┐ │
│ │ 📋 일상 활동 │ │ ← ListHeader
│ │ │ │
│ │ [산책] [놀이] [식사] │ │ ← Chip × 6 (탭 시 서브옵션 확장)
│ │ [컨디션] [이상징후] [사회성] │ │
│ │ │ │
│ │ ┌ 산책 서브옵션 (확장) ──┐ │ │ ← 인라인 서브칩 (선택 시 표시)
│ │ │ [10분] [20분] [30분] │ │ │ 서브칩 선택 = 저장
│ │ │ [60분+] │ │ │
│ │ └──────────────────────┘ │ │
│ └─────────────────────────────┘ │
│ │
│ ═══ 상세 탭 ═══ │
│ │
│ ┌─────────────────────────────┐ │
│ │ 행동(B) *필수 │ │ ← TextField(label="행동", required)
│ │ ┌─────────────────────┐ │ │ 항상 표시 (접이식 아님)
│ │ │ 어떤 행동을 했나요? │ │ │
│ │ └─────────────────────┘ │ │
│ └─────────────────────────────┘ │
│ │
│ ┌─────────────────────────────┐ │
│ │ ▶ 선행(A) [펼치기] │ │ ← 접이식(Accordion)
│ │ ┌─────────────────────┐ │ │ 칩 프리셋(설문 기반 동적 로드)
│ │ │ [산책중] [손님방문] │ │ │ + 기타 TextField
│ │ │ [혼자있을때] [기타] │ │ │
│ │ └─────────────────────┘ │ │
│ └─────────────────────────────┘ │
│ │
│ ┌─────────────────────────────┐ │
│ │ ▶ 결과(C) [펼치기] │ │ ← 접이식(Accordion)
│ │ ┌─────────────────────┐ │ │ 칩 프리셋 + 기타 TextField
│ │ │ [진정됨] [계속함] │ │ │
│ │ │ [악화] [기타] │ │ │
│ │ └─────────────────────┘ │ │
│ └─────────────────────────────┘ │
│ │
│ ┌─────────────────────────────┐ │
│ │ ▶ 강도/시간 [펼치기] │ │ ← 접이식(Accordion)
│ │ 강도: ────●──── 7/10 │ │ Slider(min=1, max=10)
│ │ 날짜: 오늘 · 시간: 지금 │ │ ← 자동 기본값
│ │ TextButton("변경") │ │ ← 확장 시:
│ │ [오늘/어제/날짜선택] │ │ SegmentedControl
│ │ 시간 [오전/오후] + 시 │ │ Dropdown + NumericSpinner
│ └─────────────────────────────┘ │
│ │
│ ┌─────────────────────────────┐ │
│ │ 저장 │ │ ← Button(primary)
│ └─────────────────────────────┘ │
│ │
└─────────────────────────────────────┘
사용 컴포넌트: useBottomSheet, ListHeader, SegmentedControl, Badge(Chip 역할), TextField, Slider, Button
빠른 탭 UX:
- 행동 문제 8칩 (서베이 카테고리 동일: 짖음/울음, 공격성, 분리불안, 파괴행동, 마운팅, 과잉흥분, 배변문제, 공포/회피 + 기타): 원탭 = 즉시 저장 (2초), intensity=3 고정
- 일상 활동 6칩: 탭 시 인라인 서브옵션 확장 (산책→[10분/20분/30분], 식사→[완식/반식/거부] 등) → 서브칩 선택 = 저장 상세 탭 UX:
- 행동(B) 항상 표시, 선행(A)/결과(C)/강도·시간은 접이식
- 칩 프리셋은 설문 데이터 기반 동적 로드 (예: 설문에서 "짖음" 선택 → 선행 프리셋에 "초인종", "산책 중" 자동 추가)
스키마: 변경 불필요.
behavior="산책 20분"자유 텍스트.type_id(미사용)를 카테고리 구분자로 활용 가능
11.3-9. coaching/result.tsx 보강 — 진단 중심 구조
기존 9-6 와이어프레임을 **진단 중심(A 타입)**으로 재정의한다.
┌─────────────────────────┐
│ ← AI 행동 진단 │ ← Navbar(.BackButton, .Title)
├─────────────────────────┤
│ ScrollView │
│ │
│ ┌───────────────────┐ │ ← [상단] 패턴 요약 (insight)
│ │ [Asset: AI 아이콘] │ │ Asset + Text
│ │ │ │
│ │ "뽀삐의 짖음은 │ │
│ │ 분리불안 패턴과 │ │
│ │ 일치합니다. │ │
│ │ 혼자 있을 때 │ │
│ │ 불안이 높아지는 │ │
│ │ 전형적 양상입니다."│ │
│ └───────────────────┘ │
│ │
│ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │ ← Border
│ │
│ ┌───────────────────┐ │ ← [중단] 교정 프로토콜 (action_plan)
│ │ 📋 3단계 교정 │ │ ListHeader
│ │ 프로토콜 │ │
│ ├───────────────────┤ │
│ │ Step 1 │ │ ListRow + Badge("1단계")
│ │ 탈감작 훈련 │ │ "매일 5분 혼자 있기 연습"
│ │ Badge: "1단계" │ │
│ ├───────────────────┤ │
│ │ Step 2 │ │ ListRow + Badge("2단계")
│ │ 안전 공간 만들기 │ │
│ │ Badge: "2단계" │ │
│ ├───────────────────┤ │
│ │ Step 3 │ │ ListRow + Badge("3단계")
│ │ 보상 체계 확립 │ │
│ │ Badge: "3단계" │ │
│ └───────────────────┘ │
│ │
│ ┌───────────────────┐ │ ← [중단] 반려견 시점 (dog_voice)
│ │ 🐕 뽀삐의 마음 │ │ ListHeader + 말풍선 스타일
│ │ │ │
│ │ ┌─ 말풍선 ──────┐ │ │ Shadow + Border(radius)
│ │ │"혼자 있으면 │ │ │
│ │ │ 불안해요. │ │ │
│ │ │ 보호자가 돌아 │ │ │
│ │ │ 올 거라는 걸 │ │ │
│ │ │ 알려주세요." │ │ │
│ │ └───────────────┘ │ │
│ └───────────────────┘ │
│ │
│ ═══ 잠금 영역 (PRO/광고) ═══ │
│ │
│ ┌───────────────────┐ │ ← ④ [중단] 7일 훈련 계획 (next_7_days_plan)
│ │ 📅 7일 훈련 계획 │ │ ListHeader
│ ├───────────────────┤ │
│ │ Day 1: 5분 혼자 │ │ ListRow × 7
│ │ Day 2: 10분 혼자 │ │
│ │ Day 3: 산책 훈련 │ │
│ │ ... │ │
│ │ Day 7: 종합 테스트 │ │
│ │ ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ │ │ ← Skeleton 블러 (무료 유저)
│ └───────────────────┘ │
│ │
│ │ TextButton: │ │ ← "다른 접근 방식 보기"
│ │ "다른 접근 방식 │ │ → Plan B/C 바텀시트
│ │ 보기" │ │ (현재/대안1/대안2)
│ │
│ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │ ← Border
│ │
│ ┌───────────────────┐ │ ← ⑤ [하단] 위험 신호 (risk_signals)
│ │ ⚠️ 위험 신호 │ │ ListHeader
│ │ │ │
│ │ Badge:"자해 행동" │ │ Badge(variant="danger") × N
│ │ Badge:"공격성 증가"│ │
│ │ │ │
│ │ "아래 신호가 보이면 │ │ Text(muted)
│ │ 즉시 전문가 상담을 │ │
│ │ 권합니다." │ │
│ │ ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ │ │ ← Skeleton 블러 (무료 유저)
│ └───────────────────┘ │
│ │
│ ┌───────────────────┐ │ ← ⑥ [하단] 전문가 상담 질문 (consultation_questions)
│ │ 💬 전문가에게 │ │ ListHeader
│ │ 물어보세요 │ │
│ ├───────────────────┤ │
│ │ "분리불안 탈감작 │ │ ListRow × 3
│ │ 속도를 어떻게 │ │
│ │ 조절하나요?" │ │
│ ├───────────────────┤ │
│ │ "약물 치료 병행이 │ │
│ │ 필요한 수준 │ │
│ │ 인가요?" │ │
│ │ ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ │ │ ← Skeleton 블러 (무료 유저)
│ └───────────────────┘ │
│ │
│ ┌───────────────────┐ │ ← [무료 유저 전용] 잠금 해제 CTA
│ │ TextButton: │ │ TextButton("광고 보고 오늘의 코칭 열기")
│ │ "광고 보고 오늘의 │ │ → Rewarded Ad → 1회 잠금 해제
│ │ 코칭 열기" │ │
│ └───────────────────┘ │
│ │
├─────────────────────────┤
│ ┌───────────────────┐ │
│ │ 훈련 시작하기 │ │ ← BottomCTA > Button(primary)
│ └───────────────────┘ │ → training-academy
│ TextButton("PDF 리포트 │ ← TextButton → PRO 전용 (무료: subscription)
│ 다운로드(PRO)") │
└─────────────────────────┘
사용 컴포넌트: Navbar(.BackButton, .Title), ScrollView, Asset, ListHeader × 6, ListRow × N, Badge(1단계/2단계/3단계/danger), Shadow, Border, Skeleton(블러), TextButton, BottomCTA, Button
데이터 구조 (Edge Function generate-coaching 응답):
insight: 패턴 요약 텍스트action_plan: 3단계 교정 프로토콜 배열dog_voice: 반려견 시점 메시지next_7_days_plan: 7일 훈련 계획 배열risk_signals: 위험 신호 태그 배열consultation_questions: 전문가 상담 질문 배열
잠금 영역: ①insight, ②action_plan, ③dog_voice = 무료 공개 / ④next_7_days_plan, ⑤risk_signals, ⑥consultation_questions = 잠금(Skeleton 블러). 광고 1회 또는 PRO로 해제 Plan B/C: "다른 접근 방식 보기" → 바텀시트(현재 Plan A / 대안1 Plan B / 대안2 Plan C). Plan C = PRO 전용 AI 동적 생성 보상형 광고(R3): "광고 보고 오늘의 코칭 열기" → Rewarded Ad → Skeleton 해제 → 1회 열기 PDF 리포트: PRO 전용. 무료 유저는 TextButton 탭 시 subscription 화면으로 이동
11.3-10. ops/today.tsx 보강 — B2B 빠른 기록 UX
기존 9-10 와이어프레임에 B2B 기록 UX 상세를 추가한다.
┌─────────────────────────┐
│ Ops 대시보드 [👤 역할] │ ← Navbar(.Title) + Badge(role)
├─────────────────────────┤
│ [미기록] [주의필요] │ ← Tab(4개 탭, B2B PRD)
│ [리포트미발송] [내담당] │
├─────────────────────────┤
│ ┌───────────────────┐ │
│ │ 🐕 뽀삐 / 김지영 │ │ ← ListRow(.Icon, .Texts)
│ │ "짖음 문제" │ │ Badge("긴급", variant="danger")
│ │ 14:30 접수 │ │ 탭 → 개별 기록 모달
│ └───────────────────┘ │
│ ┌───────────────────┐ │
│ │ 🐕 초코 / 박민수 │ │
│ │ ... │ │
│ └───────────────────┘ │
│ │
│ FlatList (무한 스크롤) │ ← Loader
│ │
│ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │ ← Border
│ │
│ [일괄 기록 모드] │ ← TextButton → 벌크 모드 활성화
│ │
│ 총 12건 / 오늘 완료 5건 │ ← BottomInfo
└─────────────────────────┘
═══ 개별 기록 모달 (useBottomSheet) ═══
┌─ useBottomSheet ────────────────────┐
│ │
│ 🐕 뽀삐 · 김지영 │ ← ListRow
│ │
│ ┌──────────┬──────────┐ │
│ │ [프리셋] │ [ABC기록] │ │ ← SegmentedControl
│ └──────────┴──────────┘ │
│ │
│ ═══ 프리셋 탭 ═══ │
│ │
│ [산책] [놀이] [컨디션] │ ← Chip × 5 (원탭 = 즉시 저장)
│ [식사] [투약] │ 키보드 불필요, 3초 완료
│ │
│ ═══ ABC 기록 탭 ═══ │
│ │
│ 선행(A): ┌───────────────┐ │ ← TextField
│ │ │ │
│ └───────────────┘ │
│ 행동(B): ┌───────────────┐ │ ← TextField
│ │ │ │
│ └───────────────┘ │
│ 결과(C): ┌───────────────┐ │ ← TextField
│ │ │ │
│ └───────────────┘ │
│ │
│ 강도: [낮음] [보통] [높음] │ ← SegmentedControl
│ │
│ 행동 이슈 태그 (복수 선택): │ ← Checkbox × N
│ ☑ 짖음 ☐ 점프 ☑ 파괴 │ 문제행동 다중 태깅
│ ☐ 물기 ☐ 배변 ☐ 기타 │
│ │
│ ┌─────────────────────────────┐ │
│ │ 저장 │ │ ← Button(primary)
│ └─────────────────────────────┘ │
└─────────────────────────────────────┘
═══ 벌크 모드 ═══
┌─ useBottomSheet ────────────────────┐
│ │
│ 일괄 기록 │ ← ListHeader
│ │
│ 반려견 선택: │
│ ☑ 뽀삐 ☑ 초코 ☐ 루비 │ ← Checkbox × N (다견 선택)
│ ☑ 몽이 ☐ 하니 │
│ │
│ 카테고리: │
│ [산책] [식사] [컨디션] │ ← Chip (일괄 적용)
│ │
│ ┌─────────────────────────────┐ │
│ │ 일괄 저장 │ │ ← Button(primary)
│ └─────────────────────────────┘ │
│ │
│ 선택 3마리 × 산책 일괄 저장 │ ← BottomInfo
└─────────────────────────────────────┘
사용 컴포넌트: Navbar(.Title), Badge(role), Tab, ListRow, FlatList, Loader, Border, TextButton, BottomInfo, useBottomSheet, SegmentedControl, Badge(Chip), TextField, Checkbox, Button
기록 UX 목표:
- 프리셋 원탭: 3초 (산책/놀이/컨디션/식사/투약 칩 → 탭 = 즉시 저장, 키보드 불필요)
- ABC 기록: 30초 이내 (TextField + 행동 이슈 다중 태그)
- 벌크 모드: 다견 선택 → 카테고리 칩 일괄 적용 → [일괄 저장]
B2B 역할:
role IN ('trainer', 'org_owner', 'org_staff')RLS 정책 필수
11.4 재사용 상태 컴포넌트 (2개)
EmptyState — Result 컴포넌트 기반
┌───────────────────────────┐
│ │
│ [Asset] │ ← Asset(icon/lottie)
│ │
│ "아직 기록이 없어요" │ ← Result(title)
│ │
│ "첫 기록을 남기면 │ ← Result(description)
│ AI 분석이 시작돼요" │
│ │
│ ┌───────────────────┐ │
│ │ 기록 시작하기 │ │ ← Button(primary) — 선택적 CTA
│ └───────────────────┘ │
│ │
└───────────────────────────┘
4가지 컨텍스트:
| 컨텍스트 | title | description | CTA |
|---|---|---|---|
| 기록 없음 | "아직 기록이 없어요" | "첫 기록을 남기면 AI 분석이 시작돼요" | "기록 시작하기" → quick-log |
| 분석 부족 | "데이터가 부족해요" | "3건 이상 기록하면 분석이 가능해요" | "기록하러 가기" → quick-log |
| 코칭 없음 | "아직 AI 코칭이 없어요" | "행동 기록을 쌓으면 맞춤 코칭을 받을 수 있어요" | "기록 남기기" → quick-log |
| 훈련 미시작 | "훈련을 시작해보세요" | "AI 코칭 기반 맞춤 훈련 커리큘럼이에요" | "코칭 먼저 받기" → analysis |
사용 컴포넌트: Result(icon, title, description), Button(선택적)
ErrorState — ErrorPage 컴포넌트 기반
┌───────────────────────────┐
│ │
│ [Asset] │ ← Asset(error icon)
│ │
│ "연결에 실패했어요" │ ← ErrorPage(title)
│ │
│ "네트워크 상태를 │ ← ErrorPage(description)
│ 확인해주세요" │
│ │
│ ┌───────────────────┐ │
│ │ 다시 시도 │ │ ← ErrorPage(retryButton)
│ └───────────────────┘ │
│ │
└───────────────────────────┘
4가지 에러 타입:
| 에러 | title | description | 액션 |
|---|---|---|---|
| 네트워크 오류 | "연결에 실패했어요" | "네트워크 상태를 확인해주세요" | retryButton("다시 시도") |
| 인증 만료 | "로그인이 필요해요" | "세션이 만료되었습니다" | Button("다시 로그인") → login |
| API 실패 | "일시적인 오류예요" | "잠시 후 다시 시도해주세요" | retryButton("다시 시도") |
| mTLS 장애 | "서비스 점검 중이에요" | "빠르게 복구하겠습니다" | 없음 (자동 재시도) |
사용 컴포넌트: ErrorPage(title, description, retryButton)
11.5 상태 전환 규칙
Navigation Guard 체인
모든 화면 전환은 아래 Guard 체인을 순서대로 통과해야 한다:
authGuard → onboardingGuard → featureGuard → roleGuard
| Guard | 검사 대상 | 실패 시 리다이렉트 |
|---|---|---|
authGuard |
Supabase 세션 존재 여부 | → login |
onboardingGuard |
설문 완료 여부 (dogs 테이블 존재) |
→ welcome → survey |
featureGuard |
PRO 기능 접근 시 구독 상태 | → subscription (또는 Skeleton 블러) |
roleGuard |
B2B 화면 접근 시 역할 검사 | → ErrorPage("권한 없음") |
딥엔트리 라우팅 (PRD Section 9.5 정합)
Smart Message나 외부 링크로 앱에 진입할 때:
| 딥엔트리 | 대상 화면 | Guard 체인 | 설명 |
|---|---|---|---|
quick-log |
quick-log 바텀시트 | auth → onboarding | 빠른 기록 직접 진입 |
daily-coach |
coaching-result | auth → onboarding → feature | 오늘의 AI 코칭 |
training-today |
training-detail | auth → onboarding | 오늘의 훈련 미션 |
화면-to-화면 전환 테이블
| # | 출발 | 도착 | 트리거 | 애니메이션 | Guard |
|---|---|---|---|---|---|
| 1 | login | welcome | 로그인 성공 (첫 방문) | → slide right | auth |
| 2 | login | dashboard | 로그인 성공 (기존) | → slide right | auth + onboarding |
| 3 | welcome | survey | "시작하기" 탭 | → slide right | — |
| 4 | survey | survey (next step) | "다음" 탭 | → slide right | — |
| 5 | survey | survey (prev step) | BackButton | ← slide left | — |
| 6 | survey | survey-result | 7단계 완료 | → slide right | — |
| 7 | survey-result | notification | "기록 시작하기" | → slide right | — |
| 8 | notification | dashboard | "허용" 또는 "나중에" | → slide right | — |
| 9 | dashboard | quick-log | "+ 빠른 기록" CTA | ↑ bottom sheet | onboarding |
| 10 | quick-log | dashboard | 저장 완료 | ↓ close sheet | — |
| 11 | dashboard | analysis | [분석] 탭 | → tab switch | onboarding |
| 12 | dashboard | training-academy | [훈련] 탭 | → tab switch | onboarding |
| 13 | dashboard | ops-today | [운영] 탭 | → tab switch | role(trainer+) |
| 14 | dashboard | dog-switcher | 반려견 이름 탭 | ↑ bottom sheet | — |
| 15 | dashboard | settings | ⚙️ 아이콘 | → slide right | — |
| 16 | dashboard | coaching-result | "오늘의 코칭" 영역 탭 | → slide right | onboarding |
| 17 | analysis | coaching-result | "AI 코칭 보기" | → slide right | feature(3건+) |
| 18 | coaching-result | training-academy | "훈련 시작하기" | → slide right | — |
| 19 | coaching-result | subscription | "PDF 리포트(PRO)" | → slide right | — |
| 20 | training-academy | training-detail | 미션 카드 탭 | → slide right | — |
| 21 | training-detail | training-academy | "미션 완료" 또는 BackButton | ← slide left | — |
| 22 | training-detail | Plan B/C 바텀시트 | "이 훈련이 어려워요" | ↑ bottom sheet | — |
| 23 | coaching-result | Plan B/C 바텀시트 | "다른 접근 방식 보기" | ↑ bottom sheet | — |
| 24 | dog-switcher | dashboard | 반려견 선택 | ↓ close sheet | — |
| 25 | dog-switcher | dog-add | "+ 반려견 추가" | → slide right | — |
| 26 | dog-add | dashboard | 저장 완료 | ← pop to root | — |
| 27 | settings | subscription | "구독 관리" 탭 | → slide right | — |
| 28 | settings | dog-profile | "프로필 편집" 탭 | → slide right | — |
| 29 | settings | login | "로그아웃" 확인 | → replace | — |
| 30 | subscription | dashboard | IAP 결제 성공 | ← pop to root | — |
| 31 | ops-today | 개별 기록 모달 | 반려견 행 탭 | ↑ bottom sheet | role(trainer+) |
| 32 | (어디서든) | PRO 업셀 시트 | Skeleton/잠금 영역 탭 | ↑ bottom sheet | — |
| 33 | PRO 업셀 시트 | subscription | "자세히 보기" | → slide right | — |
11.6 인게이지먼트 훅 & 전환 포인트
Hook Model 4단계 구현
| 단계 | 구현 | 화면 |
|---|---|---|
| Trigger (외부/내부) | Smart Message 푸시, 스트릭 알림, 행동 급증 알림 | notification → dashboard |
| Action (최소 행동) | 빠른 탭 원탭 기록 (2초), 서브옵션 포함 5초 | quick-log |
| Variable Reward | AI 코칭 결과 변화, 스트릭 뱃지 갱신, 트렌드 차트 변동 | dashboard, coaching-result |
| Investment (자산 축적) | 기록 데이터 축적, 훈련 진행률, 커스텀 프리셋 | quick-log, training-detail |
보상형 광고 업셀 퍼널 (토스 Ads SDK 2.0 Rewarded)
배너/전면 광고 없음. 보상형 광고만 사용.
| ID | 터치포인트 | 화면 | CTA 텍스트 | 보상 |
|---|---|---|---|---|
| R1 | 설문 결과 상세 리포트 | survey-result | "광고 보고 전체 분석 보기" | 상세 리포트 1회 잠금 해제 |
| R2 | 오늘의 AI 코칭 | dashboard | "광고 보고 코칭 열기" | 오늘의 코칭 1회 열기 |
| R3 | 심층 행동 분석 | coaching-result | "광고 보고 오늘의 코칭 열기" | 심층 분석 1회 열기 |
광고 SDK: 토스 Ads SDK 2.0 Rewarded 우선. AdMob 폴백은 토스 SDK 공식 지원 범위에서만 허용(미지원 시 무광고 폴백). 테스트 ID: ait-ad-test-rewarded-id
전환 심리: "매번 광고 보기 귀찮다 → 구독하자" → 자연스러운 PRO 전환
Conversion Points (7개)
| ID | 트리거 | 위치 | 전환 대상 |
|---|---|---|---|
| C1 | 설문 완료 후 Skeleton 노출 | survey-result | PRO 또는 광고(R1) |
| C2 | AI 코칭 잠금 | dashboard | PRO 또는 광고(R2) |
| C3 | 심층 분석 잠금 | coaching-result | PRO 또는 광고(R3) |
| C4 | PDF 리포트 탭 | coaching-result | PRO (구독 전용) |
| C5 | 훈련 커리큘럼 잠금 미션 | training-academy | PRO |
| C6 | 토큰 소진 | (어디서든) | 토큰팩 구매 또는 PRO |
| C7 | 광고 3회+ 시청 후 | (어디서든) | PRO ("광고 없이 이용하세요") |
Retention Mechanics (6개)
| 메커니즘 | 설명 | 화면 | 타이밍 |
|---|---|---|---|
| Streak | "🔥 N일 연속 기록 중!" 뱃지 | dashboard | 기록 저장 시 즉시 갱신 |
| 포인트 | Toss Points 연동 (프로모션 API) | dashboard | 주간 목표 달성 시 |
| 급증 알림 | "오늘 짖음이 평소의 2배!" | Smart Message → dashboard | 일일 집계 후 |
| 훈련 리마인더 | "오늘의 훈련: 산책 Day 3" | Smart Message → training-detail | 설정 시간 |
| 비활성 재참여 | "뽀삐가 기다리고 있어요" | Smart Message → dashboard | 3일 미접속 |
| 진행 축하 | "첫 번째 훈련 과정 완료!" | Toast + 뱃지 | 마일스톤 달성 |
탭 네비게이션 구조
| 모드 | 탭 구성 | 활성화 조건 |
|---|---|---|
| B2C (일반 사용자) | [기록] [분석] [훈련] | 기본 |
| B2B (트레이너/관리자) | [기록] [분석] [훈련] [운영] | role IN ('trainer', 'org_owner', 'org_staff') |
11.7 여정별 요약 테이블
| 여정 | 화면 수 | 목표 시간 | 핵심 지표 | 성공 기준 |
|---|---|---|---|---|
| A: Cold Start | 6 | < 3분 | 설문→대시보드 도달률 | > 70% |
| B: Daily Loop | 3 | < 35초 | 일일 기록률, 스트릭 유지 | DAU 기록률 > 40% |
| C: Upgrade | 4 | < 2분 | 무료→PRO 전환율 | > 5% (30일) |
| D: Deep-Dive | 5 | 5-10분 | 분석→코칭→훈련 전환율 | > 30% |
| E: B2B Ops | 6+ | 10-30분 | 일일 기록 처리량, 리포트 발송 | > 10건/일 |
| F: Multi-Dog | 3 | < 10초 | 다견 전환 빈도 | 다견 유저 전환 > 2회/주 |
11.8 구현 우선순위 (Migration Wave 연동)
| 우선순위 | 화면 | Wave | 비고 |
|---|---|---|---|
| P0 | login, welcome, survey, survey-result, dashboard, quick-log | Wave 0-1 | Cold Start + Daily Loop 핵심 |
| P1 | analysis, coaching-result, training-academy, training-detail, notification | Wave 1 | Deep-Dive + 알림 |
| P2 | subscription, dog-profile, dog-switcher, dog-add, settings | Wave 2 | 수익화 + 프로필 관리 |
| P3 | ops-today | Wave 3 | B2B 운영 |
| P4 | EmptyState, ErrorState, 엣지 케이스 | Wave 4 | 폴리싱 + 안정화 |
Wave 간 의존성:
- Wave 0-1 (P0): 독립 실행 가능. 최소 MVP.
- Wave 1 (P1): P0 대시보드 데이터(3건+) 필요.
- Wave 2 (P2): P0 인증 + P1 코칭 데이터 필요.
- Wave 3 (P3): P2 구독/역할 시스템 필요.
- Wave 4 (P4): 전체 화면 완성 후 엣지 케이스 처리.
Weekly Installs
1
Repository
kimjuyoung1127/…llogtossFirst Seen
4 days ago
Installed on
mcpjam1
claude-code1
replit1
junie1
windsurf1
zencoder1