CP UX & 메뉴 트리

UX & 메뉴 트리

프로토타입의 실제 화면 구조 기준. 아래 트리의 노드를 클릭하면 해당 화면 카드로 점프해 하이라이트됩니다. 스크린샷은 사용자가 수동 캡처해 assets/screens/에 둡니다 (screen-catalog.html 안내 참조).

🗺 인터랙티브 메뉴 트리

화면 카드

스크린샷이 없으면 회색 패턴 박스로 표시 (수동 캡처 후 자동 노출됨).

P01-login.png
P01 · #login
Login
앱 첫 진입. Apple / Google / Kakao / 이메일 로그인. 햄스터 마스코트 + 슬로건 "한 입씩, 한 문장씩. 볼주머니에 담아두면 잊지 않아요".

요소

  • 마스코트 (160px, hamster-h60 프레임)
  • 슬로건 + 서브카피
  • 로그인 버튼 4개 (Apple 우선)
  • 이용약관 · 개인정보처리방침 링크

상태 변형

기본버튼 그룹 노출
로그인 중스피너, 버튼 비활성
실패토스트 + 재시도
P02-home.png
P02 · #home
Home
메인 화면. 검색바, 최근 본 씨앗 스트립, 내 주머니 그리드/리스트, 공유받은 주머니, 일일 볼주머니 위젯.

요소

  • 상단: 햄스터 아바타(→ 설정), "CheekPouch" 타이틀, + 버튼
  • 볼주머니 위젯 (오늘 N/10 슬롯)
  • 검색 바 (탭 → P07 검색)
  • 최근 본 씨앗 6개 가로 스크롤
  • 내 주머니 — 정렬·뷰 토글 (그리드/리스트)
  • 공유받은 주머니 섹션

상태 변형

첫 사용자 (씨앗 0)"안녕! 같이 첫 씨앗 담아볼까요?" + 큰 + 버튼
오프라인상단 ✈ 오프라인 배지
볼주머니 가득 (10/10)위젯 색 변화 + "오늘 가득 찼어요"
+ 탭액션 시트: 타이핑/스크린샷/음성/새 주머니
P03-allcards.png
P03 · #allcards
All Cards (전체 씨앗)
전체 씨앗을 2단 필터(언어 + 카테고리)로 탐색. Home의 "전체 씨앗" 진입.

요소

  • 뒤로가기 + 제목
  • 언어 칩 (가로 스크롤, 카운트 표시)
  • 카테고리 칩 (가로 스크롤)
  • 결과 카운트 + "전체 재생" pill
  • 씨앗 카드 리스트 (미니 재생 버튼 포함)

상태 변형

결과 0"조건에 맞는 씨앗이 없어요"
전체 재생 중pill에 진행 인덱스 (N / 총)
P04-collection-detail.png
P04 · #collection/:name
Collection Detail
한 주머니의 씨앗 목록 + 전체 재생.

요소

  • 헤더: 주머니 이름 (탭 → 인라인 편집), 색상 도트, 메타(언어·N개·날짜)
  • + (씨앗 추가) · ⋯ (액션)
  • "전체 재생" Primary 버튼
  • 씨앗 카드 컴팩트 리스트

상태 변형

전체 재생 중"▶ 전체 재생" → "■ 정지", 현재 카드 좌측 인디케이터
이름 편집헤더 → 입력 필드, 우상단 "완료"
⋯ 메뉴편집/공유/삭제 시트
받은 주머니 (읽기 전용)편집·삭제 비활성, "공유받음 · From: 친구이름" 라벨
빈"이 주머니에 씨앗이 없어요" + 추가 버튼
P05-card-detail.png
P05 · #card/:id
Card Detail
한 씨앗의 모든 정보 + 재생 + 편집.

요소

  • 언어 라벨 (작게)
  • 외국어 (가장 크게)
  • 한글 발음
  • 한국어 원문 (회색)
  • 주머니 소속 칩들 (탭 → P04 점프) + "주머니에 담기" 더하기 버튼
  • ▶ 내 표현 듣기 (Primary)
  • "이런 상황에서" 대화 맥락 (3턴, "나" 줄 시각 강조)
  • ⊳ 대화 전체 듣기 (Secondary)
  • 분류(다중) · 톤 (생성 시 확정 표시)
  • 우상단 ⋯ → Actions Sheet

상태 변형

내 표현 재생 중"▶" → "■", 단어별 시각 하이라이트
대화 재생 중"⊳" → "■", 현재 줄 강조 + 재생 중 배지 (파형 SVG)
P05a-actions-sheet.png
P05a · #card/:id?sheet=actions
Card Detail — Actions Sheet
씨앗 ⋯ 탭. 씨앗 정보 미리보기 + 액션 그룹.

요소

  • 씨앗 외국어 + 한국어 + 언어 칩 (상단)
  • 주머니 · 분류 메타 행
  • "주머니에 담기" · "씨앗 공유" 카드 그룹
  • "씨앗 삭제" 위험 액션 (별도 카드)
P05b-move-sheet.png
P05b · #card/:id?sheet=move
Move Sheet (주머니에 담기)
다대다 체크박스. "여러 주머니에 동시에 담을 수 있어요" 안내.
P05c-categories-sheet.png
P05c · #card/:id?sheet=categories
Categories Sheet
8개 카테고리 다중 토글. "여러 분류에 동시에 담을 수 있어요" 안내.
P05d-share-sheet.png
P05d · #card/:id?sheet=share
Share Sheet
친구/카톡/링크 옵션. 씨앗 렌더링 이미지 + mp3 페이로드.
P05e-delete-confirm.png
P05e · #card/:id?sheet=delete
Delete Confirm
"이 씨앗을 삭제할까요? 볼주머니 자리 한 칸이 다시 비워져요."
P06-input-action-sheet.png
P06 · #input
Input Action Sheet
홈 + 탭 시 등장. 타이핑 / 스크린샷 / 음성 / 새 주머니 옵션.
P06a-input-typing.png
P06a · #input/typing
Input — Typing
멀티라인 텍스트 필드 + 언어/톤 셀렉터.

상태 변형

placeholder"한국어로 적어주세요…"
helper"여러 문장도 괜찮아요. 자동으로 나누어 씨앗으로 담아드려요."
오프라인완료 비활성 + "오프라인이라 새 씨앗은 못 만들어요"
P06b-input-voice.png
P06b · #input/voice
Input — Voice
큰 마이크 버튼 + 변환된 텍스트 (편집 가능).

상태 변형

첫 사용마이크 권한 요청
녹음 중마이크 빨강/펄스 + "듣고 있어요…"
변환 후텍스트 필드 노출, 편집 가능, 완료 활성
권한 거부"마이크 권한이 필요해요" + [설정 열기]
P06c-input-screenshot.png
P06c · #input/screenshot
Input — Screenshot (3단계 플로우)
소스 선택 → OCR Detect → Confirm 세 단계.
P06c1-screenshot-source.png
P06c1 · #input/screenshot/source
Screenshot — Source Sheet
바텀 시트. 최근 스크린샷 그리드 (텍스트 감지 배지) + 사진 보관함 / 카메라 / 클립보드.
P06c2-screenshot-detect.png
P06c2 · #input/screenshot/detect
Screenshot — Detect (OCR 오버레이)
어두운 뷰어 + 영역별 점선 박스 + "스캐닝" 애니메이션. 영역 탭으로 선택/해제. 전체 선택·해제.
P06c3-screenshot-confirm.png
P06c3 · #input/screenshot/confirm
Screenshot — Confirm
담을 씨앗 미리보기. 공통 옵션(언어·톤·카테고리) 일괄 설정. 항목별 삭제. 완료로 처리 시작.
P07-search.png
P07 · #search
Search
외국어/발음/한국어/주머니명 검색.

상태 변형

입력 전"한국어 또는 외국어로 검색해보세요"
결과 0"'{검색어}'에 맞는 씨앗이 없어요"
결과 있음매칭 텍스트 강조
P08-new-collection.png
P08 · #new-collection
New Collection Sheet
새 주머니 만들기. 이름(30자) + 색상 6개 + 표지(자동/아이콘/사진) + 미리보기.
P09-processing.png
P09 · #processing
Processing
변환 중 풀스크린. 햄스터 볼주머니 채워지는 애니메이션 + "볼주머니에 담는 중…" + "보통 3초 안에 끝나요" + 5초 후 취소 버튼.

상태 변형

단건"볼주머니에 담는 중…"
여러 건"5개 씨앗을 담는 중…"
에러"씨앗을 못 만들었어요. 다시 시도해볼까요?"
P10-collections.png
P10 · #collections
Collections (목록)
내 주머니 전체 목록 + 공유받은 주머니. 정렬·뷰 토글.
P11-friends.png
P11 · #friends
Friends
두 탭: 내 친구 · 받은 주머니. 초대 시 일일 볼주머니 +1 보너스.

요소

  • 친구 카드 (햄스터 아바타, 활동시간, 공유 주머니 수, 넛지)
  • 공유 요청 카드 (수락/거절)
  • 받은 주머니 행 (탭 → P04 읽기 전용)
  • + 초대 버튼 (보너스 배너)
P12-me.png
P12 · #me
Me
프로필 + 누적 통계 + 학습 달력 + 볼주머니 위젯.

요소

  • 프로필 (햄스터, 이름, "N일 째" 스트라이크)
  • 통계 (누적 씨앗, 연속 학습일)
  • 35일 학습 달력 (학습한 날 강조)
  • 볼주머니 위젯 (탭 시 반응 버블 5종 랜덤)
  • 시드 행 (일일 + 부스트)
  • 빠른 링크 (설정/알림/도움말/정보)
P13-settings.png
P13 · #settings
Settings
학습·소리·모양·알림·데이터·계정.

요소

  • 프로필 히어로
  • 학습: 주 언어, 자주 담는 언어, 기본 톤, 자동 분류
  • 소리: 자동 재생, 발음 속도(느림/보통/빠름), 목소리(여/남)
  • 모양: 모드(라이트/다크/시스템), 글자 크기(S/M/L)
  • 알림: 복습 알림, 여행 모드
  • 데이터: iCloud 동기화, 내보내기, 가져오기
  • 계정: 로그아웃
P14-help.png
P14 · #help
Help (FAQ)
11개 FAQ + 검색. 주제별: 시작하기 / 씨앗 관리 / 주머니 / 공유·친구 / 한도·결제 / 계정·데이터. 아코디언.
P15-about.png
P15 · #info
Info (About)
마스코트 140px + "한 입씩…" 태그라인 + 크레딧 + 리소스 + 법률.
P16-tweaks.png
P16 · #tweaks
Tweaks Panel
개발용. 색상·모드·글자 크기 실시간 조정. 일반 사용자에게는 노출되지 않음 (디버그 빌드 한정).

공통 상태 가이드

빈 상태 (Empty)

위치카피
홈 (씨앗 0)"안녕! 같이 첫 씨앗 담아볼까요?"
필터 결과 0"조건에 맞는 씨앗이 없어요"
주머니 빈"이 주머니에 씨앗이 없어요"
검색 결과 0"'{검색어}'에 맞는 씨앗이 없어요"

오프라인

볼주머니 가득

특수 인터랙션

디자인 톤 가이드 (요약)

미결 결정 (디자인 단계)

  1. 볼주머니 아이콘 디자인 (SF Symbol vs 커스텀 일러스트)
  2. 카드 카테고리 칩 색상 (8개별 다른 색 vs 단일 색)
  3. 라이트/다크 컬러 팔레트 확정
  4. 마이크 녹음 중 시각 피드백 (펄스 vs 파동 vs 점)
  5. 빈 상태 일러스트 유무
  6. 씨앗 길게 누르기 vs 스와이프 (둘 다 vs 하나만)
  7. 스크린샷 다중 처리 진행률 표시
  8. "나" 줄 시각 강조 (들여쓰기 vs 배경색 vs 테두리)