# [서비스명] - 메인 구조 ## 화면 개요 | 항목 | 내용 | |-----|------| | 서비스명 | [서비스명] | | 플랫폼 | [Web / Mobile App / PWA / Cross-platform] | | UI 컨셉 | [UI 컨셉 - 예: Notion 스타일 워크스페이스 / 카카오톡 스타일 메신저] | | 레퍼런스 | [유사 서비스명] | | 메인 액션 | [메인 액션 설명] | --- ## 레이아웃 구조 ### 웹 애플리케이션 (해당 시) **데스크톱 (1024px+)** ``` ┌─────────────────────────────────────────────────┐ │ Logo [메뉴1] [메뉴2] [메뉴3] 👤 Profile │ ├──────┬──────────────────────────────────────────┤ │ │ │ │ 사이드│ 메인 컨텐츠 영역 │ │ 메뉴 │ │ │ │ │ └──────┴──────────────────────────────────────────┘ ``` **태블릿 (768px~1023px)** ``` ┌─────────────────────────────────────────────────┐ │ ☰ Logo [메뉴1] [메뉴2] 👤 │ ├─────────────────────────────────────────────────┤ │ │ │ 메인 컨텐츠 영역 (전체 너비) │ │ │ └─────────────────────────────────────────────────┘ ``` **모바일 (< 768px)** ``` ┌─────────────────────────────────────┐ │ ☰ Logo 👤 │ ├─────────────────────────────────────┤ │ │ │ 메인 컨텐츠 │ │ (전체 너비) │ │ │ └─────────────────────────────────────┘ ``` ### 모바일 앱 (해당 시) **기본 레이아웃** ``` ┌─────────────────────────────────────┐ │ [상단 헤더] │ ├─────────────────────────────────────┤ │ │ │ 메인 컨텐츠 영역 │ │ │ ├─────────────────────────────────────┤ │ [하단 탭바] │ └─────────────────────────────────────┘ ``` **탭바 레이아웃** ``` ┌─────────────────────────────────────────────────┐ │ [아이콘] [아이콘] [센터] [아이콘] [아이콘] │ │ 탭1 탭2 탭3 탭4 탭5 │ │ ^^^^ │ │ (센터, 강조 디자인) │ └─────────────────────────────────────────────────┘ ``` **센터 탭 강조 (해당 시)** | 요소 | 일반 탭 | 센터 탭 | |-----|--------|--------| | 크기 | 기본 | 1.2배 | | 색상 | 회색 | 브랜드 컬러 | | 배경 | 없음 | 서클/글로우 | | 아이콘 | 라인 | 필드 | --- ## 레퍼런스 비교 (모바일 앱만 해당) | 위치 | [레퍼런스 앱] | [우리 앱] | 역할 | |-----|--------------|---------|------| | 1 | [레퍼런스 탭] | [우리 탭] | [역할] | | 2 | [레퍼런스 탭] | [우리 탭] | [역할] | | 3 | [레퍼런스 탭] | **[우리 탭]** | [핵심 역할] | --- ## 헤더 구조 ### 웹 - 글로벌 헤더 (해당 시) ``` ┌─────────────────────────────────────────────────┐ │ Logo [메뉴1] [메뉴2] [메뉴3] 🔔 👤 │ │ ^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^ ^^^^^^ │ │ 로고 네비게이션 알림 프로필 │ └─────────────────────────────────────────────────┘ ``` ### 모바일 앱 - 상단 헤더 (해당 시) ``` ┌─────────────────────────────────────────────────┐ │ [로고] [상태 표시] ⚙️ │ │ ^^^^^^^^ ^^^^^^^^^^^^^ ^^ │ │ 로고 상태 정보 설정 │ └─────────────────────────────────────────────────┘ ``` ### 헤더 요소 | 요소 | 위치 | 설명 | 액션 | |-----|-----|------|-----| | 로고 | 좌측 | 서비스 로고 "[서비스명]" | 홈(메인탭) 이동 | | [상태 항목] | 우측 | [아이콘] + 수량 | 탭 → [관련 탭] | | 설정 | 우측 끝 | ⚙️ 아이콘 | 탭 → 설정 화면 | ### 상태 표시 규칙 | 수량 | 색상 | 효과 | |-----|-----|------| | 100+ | 흰색 | - | | 50~99 | 노란색 | - | | 10~49 | 주황색 | - | | 1~9 | 빨간색 | - | | 0 | 빨간색 | 깜빡임 | --- ## 탭별 개요 ### 1탭: [탭명] ([아이콘] [역할]) **[레퍼런스 앱] [탭명] 탭과 동일한 UX** ``` ┌─────────────────────────────────────┐ │ [헤더 영역] │ ├─────────────────────────────────────┤ │ [내 프로필/상태 영역] │ │ │ ├─────────────────────────────────────┤ │ [목록 라벨] │ │ │ │ [아이템 1] │ │ [부가 정보] │ │ │ │ [아이템 2] │ │ [부가 정보] │ │ │ │ [잠금 아이템] │ │ [해금 조건] │ ├─────────────────────────────────────┤ │ [탭바] │ │ ● │ └─────────────────────────────────────┘ ``` **상세 문서:** [[문서명].md]([문서명].md) --- ### 2탭: [탭명] ([아이콘] [역할]) **[레퍼런스 앱] [탭명] 탭과 동일한 UX** ``` ┌─────────────────────────────────────┐ │ [헤더 영역] │ ├─────────────────────────────────────┤ │ │ │ [리스트 아이템 1] │ │ [마지막 메시지/상태] [시간] │ │ │ │ [리스트 아이템 2] │ │ [마지막 메시지/상태] [시간] │ │ │ │ [시스템 아이템] │ │ [시스템 메시지] │ │ │ ├─────────────────────────────────────┤ │ [탭바] │ │ ● │ └─────────────────────────────────────┘ ``` **상세 문서:** [[문서명].md]([문서명].md) --- ### 3탭: [탭명] ([아이콘] [역할]) - **센터** **핵심 액션 탭: [메인 버튼 설명]** ``` ┌─────────────────────────────────────┐ │ [헤더 영역] │ ├─────────────────────────────────────┤ │ │ │ [메인 비주얼 영역] │ │ [캐릭터/콘텐츠 표시] │ │ │ ├─────────────────────────────────────┤ │ [상태 카드] │ │ [주요 스탯/정보 표시] │ │ │ ├─────────────────────────────────────┤ │ [액션 선택 영역] │ │ [옵션 드롭다운/버튼] │ ├─────────────────────────────────────┤ │ ╭━━━━━━━━━━━━━━╮ │ │ ┃ ▶ [버튼명] ┃ ← 펄스 │ │ ╰━━━━━━━━━━━━━━╯ 애니 │ ├─────────────────────────────────────┤ │ [탭바] │ │ ● │ └─────────────────────────────────────┘ ``` **상세 문서:** [[문서명].md]([문서명].md) --- ### 4탭: [탭명] ([아이콘] [역할]) **[역할 설명]** ``` ┌─────────────────────────────────────┐ │ [헤더 영역] │ ├─────────────────────────────────────┤ │ [현재 상태 표시] │ ├─────────────────────────────────────┤ │ [섹션 1] │ │ │ │ [상품/아이템 1] │ │ [상품/아이템 2] BEST │ │ [상품/아이템 3] │ │ │ ├─────────────────────────────────────┤ │ [섹션 2] │ │ │ │ [상품/아이템] │ │ [설명] │ ├─────────────────────────────────────┤ │ [탭바] │ │ ● │ └─────────────────────────────────────┘ ``` **상세 문서:** [[문서명].md]([문서명].md) --- ### 5탭: [탭명] ([아이콘] [역할]) **[역할 설명]** ``` ┌─────────────────────────────────────┐ │ [프로필 카드] │ │ [이름/정보] │ │ │ │ [스탯/상태 요약] │ ├─────────────────────────────────────┤ │ [메뉴 1] │ │ [메뉴 2] │ │ [메뉴 3] │ │ [메뉴 4] │ │ [메뉴 5] │ ├─────────────────────────────────────┤ │ [탭바] │ │ ● │ └─────────────────────────────────────┘ ``` **상세 문서:** [[문서명].md]([문서명].md) --- ## 네비게이션 구조 ### 탭 내비게이션 (Bottom Tab) ``` [앱 실행] │ ├─ [탭1] │ └─ 상세 (push) │ ├─ [탭2] │ └─ 상세 (push) │ ├─ [탭3] ← 기본 시작 탭 │ └─ 전체화면 액션 (push, 탭바 숨김) │ ├─ [탭4] │ └─ 결제 화면 (modal) │ └─ [탭5] ├─ 상세 (push) ├─ 설정 (push) └─ 서브메뉴 (push) ``` ### 메인 버튼 전체화면 전환 ``` [메인 탭] [전체화면 모드] ┌───────────────┐ 버튼 탭 ┌─────────────────────────┐ │ [상태 카드] │ ──────────> │ │ │ [메인 버튼] │ (push) │ 전체화면 연출 │ ├───────────────┤ │ (탭바 없음) │ │ [탭바] │ │ │ └───────────────┘ └─────────────────────────┘ (탭바) ↓ 완료 후 (pop back) ``` --- ## 탭 간 이동 ### 뱃지 표시 | 탭 | 뱃지 조건 | 표시 | |-----|---------|------| | [탭1] | [조건1] | 숫자 | | [탭2] | [조건2] | 숫자 | | [탭3] | - | - | | [탭4] | [조건4] | 빨간 점 | | [탭5] | [조건5] | 숫자 | ### 딥링크 지원 | 경로 | 탭 | 화면 | |-----|-----|------| | `/[tab1]` | [탭1] | 목록 | | `/[tab1]/:id` | [탭1] | 상세 | | `/[tab2]` | [탭2] | 목록 | | `/[tab2]/:id` | [탭2] | 상세 | | `/` | [탭3] | 메인 (기본) | | `/[tab4]` | [탭4] | 상점 | | `/[tab5]` | [탭5] | 메뉴 | | `/profile` | [탭5] | 프로필 상세 | | `/settings` | [탭5] | 설정 | --- ## 앱 시작 시 동작 ### 기본 시작 탭 1. **앱 최초 실행**: 튜토리얼 → [메인 탭] 2. **앱 재실행**: 마지막 탭 기억 (기본: [메인 탭]) 3. **푸시 알림 진입**: 해당 컨텐츠로 이동 - [알림 유형1] → [관련 화면] - [알림 유형2] → [관련 화면] ### 미확인 알림 처리 ``` [앱 실행] │ ├─ 미확인 항목 있음? │ └─ [탭] 뱃지 표시 │ └─ 자동으로 해당 탭 이동? ❌ └─ 유저가 직접 확인 ``` --- ## 테마 및 스타일 ### 컬러 테마 | 모드 | 배경 | 텍스트 | 포인트 | |-----|-----|-------|-------| | 기본 | #[색상] (다크) | #FFFFFF | #[색상] | | [모드1] | #[색상] | #FFFFFF | #[색상] | | [모드2] | #[색상] | #FFFFFF | #[색상] | ### 탭바 스타일 ```css .tab-bar { background: #[색상]; border-top: 1px solid #[색상]; height: 56px; padding-bottom: env(safe-area-inset-bottom); } .tab-item { color: #[비활성 색상]; font-size: 10px; } .tab-item.active { color: #FFFFFF; } .tab-item.center { /* 센터 탭 강조 */ transform: scale(1.2); color: #[포인트 색상]; } ``` --- ## 데이터 요구사항 ### 탭 뱃지 API ``` GET /api/badges ``` ```typescript interface BadgeResponse { [tab1]: number; // [탭1] 뱃지 수 [tab2]: number; // [탭2] 뱃지 수 [tab4]: boolean; // [탭4] 뱃지 여부 [tab5]: number; // [탭5] 뱃지 수 } ``` ### 전역 상태 ```typescript interface GlobalState { // [상태 항목] [stateName]: [type]; // 현재 상태 currentState: { [field]: [type]; }; // 알림 badges: BadgeResponse; } ``` --- ## 접근성 고려사항 - 탭바: `role="tablist"`, 각 탭 `role="tab"` - 현재 탭: `aria-selected="true"` - 뱃지: 스크린 리더용 `aria-label` 제공 - 터치 영역: 최소 44x44px - 색상 대비: WCAG 2.1 AA 준수 --- ## MVP 구현 범위 ### Phase 1 (필수) - [ ] N탭 구조 구현 - [ ] 센터 탭 강조 디자인 - [ ] 상단 헤더 (로고, 상태, 설정) - [ ] 뱃지 표시 시스템 - [ ] 기본 라우팅 ### Phase 2 - [ ] 딥링크 지원 - [ ] 탭 전환 애니메이션 - [ ] 푸시 알림 연동 - [ ] 테마 전환 ### Phase 3 - [ ] 탭바 숨김/표시 애니메이션 - [ ] 제스처 네비게이션 (스와이프) - [ ] iPad 대응 (탭바 → 사이드바) --- ## 관련 문서 | 문서 | 설명 | |-----|------| | [concept.md](concept.md) | 서비스 컨셉 | | [[tab1_doc].md]([tab1_doc].md) | [탭1] 상세 | | [[tab2_doc].md]([tab2_doc].md) | [탭2] 상세 | | [[tab3_doc].md]([tab3_doc].md) | [탭3] 상세 | | [router.md](router.md) | 라우팅 구조 |