냠냠픽업 — 화면 명세서 (Screen Specs)

사용자 앱 (User App) 기준 — Figma 파일 Final 페이지의 모든 화면

전제 조건

모든 화면은 390 × 844 (iOS portrait, iPhone 13 클래스) 기준
iOS Safe Area: 상단 Status Bar 54px + 하단 Home Indicator 21px
디자인 파일: Figma — YumYum-v1

0. 전체 플로우 맵

[Splash/Start] → [Onboarding 1·2·3] → [Onboarding/로그인]
                                          ├─ 카카오 소셜 로그인
                                          ├─ Apple 로그인
                                          └─ 이메일 로그인 → [본인인증]
                                                          → [이메일 회원가입]
                                                          → [약관동의 (Bottom Sheet)]
                                                          → [가입완료]
                                          ↑
                          [아이디 찾기] / [비밀번호 변경] / [FAQ]

[로그인 완료]
   ↓
[Home (List/Map/Mixed)] ──┬─ [위치 선택 BottomSheet]
                          ├─ [카테고리 Focus (전체/김밥/햄버거/커피)]
                          ├─ [전체보기]
                          ├─ [매장없음 Empty]
                          ├─ [Push 리스트] / [Push 설정] / [Alert Center]
                          └─ [Store 상세] ──┬─ [Min / Max 컨텐츠]
                                            ├─ [영업준비중 - 담기 불가]
                                            ├─ [인기메뉴 없음]
                                            ├─ [포장 / 담기]
                                            ├─ [매장식사 / 담기]
                                            └─ [Map 확대 / 내 위치]

[즐겨찾기] ─ [정렬 옵션 BottomSheet]
[마이 페이지] ─ [FAQ → Answer] / [회원탈퇴]

1. 온보딩 / 접근권한 (Onboarding)

화면	Node ID	설명
Start	`5839:16774`	앱 실행 / 스플래시 게이트웨이
Onboarding / 1	`5839:16878`	온보딩 슬라이드 1
Onboarding / 2	`5839:16943`	온보딩 슬라이드 2
Onboarding / 3	`5839:17013`	온보딩 슬라이드 3
Onboarding / 로그인 / 1	`6243:18429`	로그인 랜딩 — Apple / Email / Kakao 버튼

Onboarding/로그인 핵심 요소

로고 (160 × 45)
카카오 3초 로그인 버튼 (Large, 295 × 55)
Apple 로그인 버튼 (Large, 295 × 55)
이메일로 로그인 버튼 (Large, 295 × 55)
"이메일 회원가입" 텍스트 링크
"마지막 로그인 2026-01-26" 알림 (조건부 노출)

2. 인증 — 이메일 회원가입 / 로그인

2-1. 이메일 로그인

화면	Node ID	설명
Login / email / 1	`5839:17834`	이메일 입력 단계
Login / email / 2	`5839:17851`	비밀번호 입력 단계
Login / email / 1-2	`5839:17867`	입력 검증 상태
Login / email / 3	`5839:18167`	최종 로그인 상태

2-2. 이메일 회원가입

화면	Node ID	설명
Signup / 본인인증	`5839:17781`	본인인증 단계
Signup / 이메일로 회원가입	`5839:17891`	회원가입 폼 (기본)
Signup / 이메일로 회원가입 (variant)	`5839:18100`	폼 변형
Signup / 이메일로 회원가입 (variant)	`5839:18116`	폼 변형
Signup / Bottomsheet / 약관동의 3	`5839:17923`	약관동의 (390 × 549)
Signup / Bottomsheet / 약관동의 4	`5839:17994`	약관동의 (390 × 549)
Signup / 가입완료	`5839:18186`	가입 완료 화면
My profile - 회원탈퇴	`5839:18139`	회원탈퇴 (390 × 862)

2-3. 소셜 로그인 (카카오)

화면	Node ID	설명
카카오 가입 1	`5839:16178`	카카오 소셜 회원가입
카카오 가입 2	`5839:16198`	카카오 소셜 회원가입

3. 계정 복구 — 아이디 / 비밀번호 찾기

3-1. 아이디 찾기

화면	Node ID	설명
Signup / 본인인증	`5839:16251`	본인인증 (아이디 찾기용)
Signup / 비밀번호 찾기	`5839:16317`	비밀번호 찾기 진입
약관동의 5 (BottomSheet)	`5839:16277`	약관 (390 × 205)
약관동의 6 (BottomSheet)	`5839:16298`	약관 (390 × 205)
FAQ 리스트	`5839:16354`	자주 묻는 질문
FAQ 답변 상세	`5839:16375`	FAQ 답변 화면

3-2. 비밀번호 변경

화면	Node ID	설명
Signup / 비밀번호 찾기	`5839:16403`	비밀번호 찾기
Signup / 본인인증	`5839:16482`	본인인증
Login / email / 1-2	`5839:16456`	이메일 검증
Login / email / 1-2	`5839:16468`	이메일 검증
FAQ 리스트	`5839:16429`	자주 묻는 질문
FAQ 답변 상세	`5839:16440`	FAQ 답변
약관동의 7 / 8	`5839:16508` / `5839:16529`	약관 BottomSheet

개발 노트: 아이디 찾기와 비밀번호 변경 섹션에서 동일한 본인인증/FAQ 프레임이 중복됨. 코드에서는 단일 화면 + 상태로 통합 권장.

4. 홈 / 탐색 (Home & Discovery)

4-1. 메인 홈 뷰

화면	Node ID	Size	설명
Map view / Open	`5839:18500`	390 × 844	영업중 매장 지도 뷰
Map view / Close	`5839:20856`	390 × 844	영업종료 매장 지도 뷰
Home / Open	`5837:16426`	390 × 3124	영업중 매장 리스트 (스크롤)
Home / Mixed	`5839:20255`	390 × 3118	혼합 피드 (스크롤)
Home / 매장없음	`5839:20720`	390 × 1145	매장 없음 Empty State

4-2. 카테고리별 뷰

화면	Node ID	Size	설명
Home / Category / 전체	`5839:19141`	390 × 2716	전체 카테고리
Home / Category / 김밥	`5839:19344`	390 × 860	김밥 카테고리
Home / Category / 햄버거	`5839:19397`	390 × 1086	햄버거 카테고리
Home / Category / 커피	`5839:19469`	390 × 860	커피 카테고리
Home / 전체보기	`5839:19699`	390 × 851	전체보기

4-3. 위치 / 알림 / 팝업

화면	Node ID	설명
Open location / bottom sheet	`5839:21587`	위치 선택 BottomSheet (390 × 260)
Push / list	`5839:21426`	푸시 알림 리스트
Push / setting	`5839:19091`	푸시 알림 설정
Alert Center / Empty	`5839:21539`	알림 빈 상태
Popup / 더보기 / 매장 있을 때	`5839:20783`	More 팝업 (300 × 247)
Popup / 더보기 / 매장 없을 때	`5839:20835`	More 팝업 Empty (300 × 161)

5. 매장 상세 (Store Detail)

화면	Node ID	Size	설명
Store / 상세 / Min	`5839:27405`	390 × 2023	최소 컨텐츠 매장 상세
Store / 상세 / Max	`5839:27877`	390 × 2278	최대 컨텐츠 매장 상세
Store / 영업준비중 / 담기불가	`5839:26960`	390 × 1523	영업준비중 (장바구니 비활성)
Store / 인기메뉴 없음	`5839:28423`	390 × 1209	인기메뉴 없음 상태
Store / 포장 / 담기	`5839:29601`	390 × 2362	포장 주문 카트
Store / 매장식사 / 담기	`5839:30080`	390 × 2240	매장식사 카트
Map / 지도확대	`5898:17460`	390 × 844	매장 지도 확대
Map / 지도확대 / 내위치	`5898:17561`	390 × 844	내 위치 표시

매장 상세에서 처리해야 할 주요 상태

영업 상태: Open now / Closed / Opnenig time / Receive orders at / Store call
컨텐츠 양: Min (메뉴 적음) / Max (메뉴 많음)
인기메뉴 유무
주문 모드 선택: 포장 / 매장식사
카트 활성화 여부

6. 즐겨찾기 (Favorites)

화면	Node ID	Size	설명
Fav / 정렬 / 4	`5867:35478`	390 × 226	정렬 BottomSheet 변형
Fav / 정렬 / 5	`5867:35518`	390 × 226	정렬 BottomSheet 변형

즐겨찾기 메인 리스트는 별도 화면 또는 Home의 탭으로 통합되었을 가능성. Bottom Tab Bar에 Active tab=Favorite 변형이 존재함.

7. 화면별 컴포넌트 매핑

각 화면은 아래 공통 컴포넌트로 조립됩니다.

화면 셸 (Shell)

Basic_screen / Base_screen — 모든 화면의 컨테이너
Time (54px) — iOS 상태바
Home Indicator (21px) — iOS 홈 인디케이터
Title Bar / Header style=Default·Search·Typing — 헤더
Bottom Tab Bar — 5개 탭 (Home / Search / Favorite / Orders / Profile)
Navigation bar — 일반 네비게이션

입력 / 폼

Input field, Login / input — 로그인·회원가입
Check box, Radio btn, Toggle — 옵션 선택
Quantity selector, Duration selector — 수량/시간 선택
Dropdown status=Open/Closed — 드롭다운

액션 / 버튼

Button - Large (295 × 55) — 메인 CTA
Button - Small — 보조 액션
Bottom bnt — 화면 하단 고정 버튼
Popup_Button — 팝업 내부 버튼

카드 / 리스트

Store card, store card - home — 매장 카드
Meal card, Meals summary, Ordered meal — 메뉴 카드
Order card, Order flow, Order status — 주문 카드
Coupon=Added/Not added — 쿠폰
Notification card — 알림

피드백 / 오버레이

Toast, Snackbar content — 토스트
Popup, Popup_2 (1-line / 2-line / 3-pic / NO-text) — 팝업
Bottom sheet — 바텀시트
Alert / 현재위치 — 위치 알림

지도 / 위치

Map_pin-open / Map_pin-close — 매장 핀
MiniMap_pin-open / MiniMap_pin-close — 미니맵
Map_view-Button-On/Off — 지도/리스트 토글
Current location, User location — 위치 표시

8. 화면 요약 통계

총 화면 수 (Final 페이지 기준): 약 50+
온보딩·인증 플로우: 16 화면
홈·탐색: 14 화면
매장 상세: 8 화면
즐겨찾기·기타: 5+ 화면
재사용 컴포넌트: 641개 (03-design-system.md 참고)

9. 미해결 / 확인 필요 항목

[ ] 즐겨찾기 메인 리스트 화면이 별도 프레임으로 존재하는지 확인 (Bottom Tab엔 있음)
[ ] 검색(Search) 탭의 화면 명세 확인 (헤더에 Search variant 존재)
[ ] 주문 내역(Orders) 탭의 화면 명세 확인 (Bottom Tab에 있음)
[ ] 마이 페이지 메인 화면 확인 (회원탈퇴 외)
[ ] 결제 플로우 화면 확인 (Figma에서 추가 탐색 필요)
[ ] Final-User-App, Working-User-App 페이지의 추가 화면이 Final에 누락되었는지 확인

냠냠픽업 — 화면 명세서 (Screen Specs) ​

0. 전체 플로우 맵 ​

1. 온보딩 / 접근권한 (Onboarding) ​

2. 인증 — 이메일 회원가입 / 로그인 ​

2-1. 이메일 로그인 ​

2-2. 이메일 회원가입 ​

2-3. 소셜 로그인 (카카오) ​

3. 계정 복구 — 아이디 / 비밀번호 찾기 ​

3-1. 아이디 찾기 ​

3-2. 비밀번호 변경 ​

4. 홈 / 탐색 (Home & Discovery) ​

4-1. 메인 홈 뷰 ​

4-2. 카테고리별 뷰 ​

4-3. 위치 / 알림 / 팝업 ​

5. 매장 상세 (Store Detail) ​

6. 즐겨찾기 (Favorites) ​

7. 화면별 컴포넌트 매핑 ​

화면 셸 (Shell) ​

입력 / 폼 ​

액션 / 버튼 ​

카드 / 리스트 ​

피드백 / 오버레이 ​

지도 / 위치 ​

8. 화면 요약 통계 ​

9. 미해결 / 확인 필요 항목 ​

냠냠픽업 — 화면 명세서 (Screen Specs)

0. 전체 플로우 맵

1. 온보딩 / 접근권한 (Onboarding)

2. 인증 — 이메일 회원가입 / 로그인

2-1. 이메일 로그인

2-2. 이메일 회원가입

2-3. 소셜 로그인 (카카오)

3. 계정 복구 — 아이디 / 비밀번호 찾기

3-1. 아이디 찾기

3-2. 비밀번호 변경

4. 홈 / 탐색 (Home & Discovery)

4-1. 메인 홈 뷰

4-2. 카테고리별 뷰

4-3. 위치 / 알림 / 팝업

5. 매장 상세 (Store Detail)

6. 즐겨찾기 (Favorites)

7. 화면별 컴포넌트 매핑

화면 셸 (Shell)

입력 / 폼

액션 / 버튼

카드 / 리스트

피드백 / 오버레이

지도 / 위치

8. 화면 요약 통계

9. 미해결 / 확인 필요 항목