504 lines
18 KiB
Markdown
504 lines
18 KiB
Markdown
# [서비스명] - 메인 구조
|
|
|
|
## 화면 개요
|
|
|
|
| 항목 | 내용 |
|
|
|-----|------|
|
|
| 서비스명 | [서비스명] |
|
|
| 플랫폼 | [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) | 라우팅 구조 |
|