화면 레이아웃

P01

홈

메인 화면. 검색바 + 최근 본 씨앗 + 내 씨앗 + 내 주머니. 하단 탭바 보임

1

2

3

4

5

6

7

1

앱바 — 햄스터 아바타 + 워드마크

아바타는 현재 볼주머니 상태를 반영 (오늘 7/10 → 70% 프레임)

2

검색바 44h r12

탭하면 P07 검색으로 이동. placeholder "표현, 단어, 주머니 검색"

3

최근 본 씨앗 — 가로 스크롤

최대 6개 카드. 한 번도 열어본 적 없으면 섹션 숨김.

4

내 씨앗 — 가로 스크롤 미리보기

필터된 씨앗을 SeedCardMini(200w)로 가로 스크롤. 4개 이상이면 끝에 dashed "전체 보기" 카드 → P03. 헤더 탭도 P03. + 버튼 → P06.

4a

필터 진입 — 헤더 우측 ⚙ 아이콘

36×36 r12. 활성 시 우상단 accent dot. 탭 → BottomSheet (필터 시트) — 언어 + 카테고리 2섹션, sticky 풋터 [초기화][N개 보기]. 활성 시 헤더 아래 RemovableChip 행 + "지우기".

5

플레이어 컨트롤 segmented pill

정지 상태: [▶ N개 재생] 단일 surface 버튼. 재생/일시정지 시: 통합 pill [⏸ N/총 │ ■](좌 toggle / 우 stop). 재생 중 = accent bg + glow halo, 일시정지 = surface bg. 자동 이동(2.4s), 끝나면 idx=0 + playing=false로 완전 초기화.

5a

카드 하이라이트 — 재생/일시정지

재생 중 카드: accent 보더 + 좌상단 wave 인디케이터. 일시정지 카드: accent 보더 + 좌상단 ⏸ 아이콘(정적). carousel이 재생 카드를 leftmost 슬롯으로 자동 스크롤.

6

내 주머니 — 가로 스크롤 미리보기

씨앗 위젯과 동일 패턴. 헤더에 [⚙ 필터][+] 액션그룹(필터 활성 시 accent dot). PouchCardMini(148w) — 컬러 블록 + 이름 + 씨앗수/언어 + 우하단 ▶ 인라인 재생. 재생 중: accent 보더 + 진행 바 + "N/M 재생 중" 라벨, 2.4s×씨앗수 후 자동 정지. 4개+ 시 끝에 dashed "전체 보기" 카드 → P04a 내 주머니 전체(언어 필터 + 정렬). 헤더 탭도 P04a. 빈 상태(noPouches): 캐러셀 자리에 온보딩 카드(placeholder pouch chips + 설명 + [+ 첫 주머니 만들기] / [자세히 알아보기]). 필터/카운트/타이틀 클릭 자동 숨김.

7

탭바 홈 · 나

blur backdrop + 0.5px hairline. 활성 색 walnut accent.

P05

씨앗 상세

한 표현의 모든 정보. 외국어·발음·한국어·대화 맥락 + 재생

1

2

3

4

5

6

7

8

9

10

1

← 뒤로

이전 화면 (P03/P04/P07 등) 으로 복귀

2

⭐ 곳간 토글 신규

탭 → 즉시 곳간 담기/빼기 + 토스트 ("곳간에 담았어요" / "곳간에서 뺐어요"). 채워진 별 = 담김. P12·P03와 세션 전역 동기화 (__cpSeedFavs).

3

⋯ 액션 메뉴

탭 → 액션 시트 (곳간 담기/빼기 · 카테고리 변경 · 삭제)

4

언어 라벨 11.5px

uppercase + letterSpacing 0.1em. 보조 정보.

5

외국어 30px / 700

가장 큰 글자. 재생 중일 때 단어별 하이라이트.

6

한글 발음 17px

외국어 글자를 한글로 읽는 법

7

한국어 원문 15px / ink3

내가 처음 입력한 한국어 — 회색 톤으로 보조 표시

8

주머니 칩 + 담기 버튼

현재 소속 주머니들 (탭 → P04). + 담기 → P05b 시트

9

내 표현 듣기 Primary

56h 풀폭 버튼. 가장 핵심 액션. 재생 중 토글.

10

대화 맥락 3턴 상대→나→상대

"나" 줄은 walnut 테두리·우측 정렬로 강조. 재생 중 파형 배지.

P12

나

프로필 + 볼주머니 마스코트 + 오늘 슬롯 + 광고 부스트 + 내 곳간

1

2

3

4

5

6

1

⚙ 설정

오른쪽 상단 — 탭하면 P13 설정 진입

2

프로필 — 햄스터 아바타 + 이름

이름 미설정 시 "여행자". 누적 씨앗 수 보조 표시.

3

볼주머니 마스코트 150px

오늘 슬롯 사용량을 시각화. 탭하면 반응 버블 5종 랜덤.

4

오늘 담은 씨앗 N/10

큰 숫자 28px / 800. 상태별 격려 카피 함께.

5

광고 보고 슬롯 추가 — 부스트 잔여

오늘 0~3회. 첫 1회 → P-ad-pre → P-ad-consent → 광고 → P-ad-reward

6

내 곳간 신규

★ 곳간에 담아둔 씨앗(__cpSeedFavs) 가로 캐러셀. "전체 보기" → P03을 곳간 필터 켠 채 진입. 비어 있으면 햄스터(count=0) + 안내 카피.

P13

설정

그룹 리스트: 소리 · 모양 · 계정 · 도움말 · 앱 정보

1

2

3

4

5

1

상단바 — ← 뒤로 + "설정"

16px / 600 / 중앙. 좌우 대칭으로 38px 빈 공간

2

소리 그룹 세그먼트

발음 속도 (느리게/보통/빠르게) · 목소리 (여성/남성). 즉시 반영.

3

모양 그룹 — 테마 세그먼트

라이트 / 다크 / 시스템 (기본). 전환 시 0.3s transition.

4

계정 그룹 — 로그아웃 / 탈퇴 위험

탈퇴는 danger 색. 탭 → 시스템 팝업 (로그아웃) / P13a 바텀시트 (탈퇴)

5

도움말 / 앱 정보

버전 (값 텍스트) · 이용약관 · 개인정보 처리방침 · 문의 · 오픈소스

로그인

햄스터 마스코트 160px

워드마크 CheekPouch

슬로건

Apple 로그인 우선

Google 로그인

Kakao 로그인 KR 필수

이메일로 시작 텍스트

약관 안내 암묵적 동의

홈