18 KiB
18 KiB
[서비스명] - 메인 구조
화면 개요
| 항목 | 내용 |
|---|---|
| 서비스명 | [서비스명] |
| 플랫폼 | [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
2탭: [탭명] ([아이콘] [역할])
[레퍼런스 앱] [탭명] 탭과 동일한 UX
┌─────────────────────────────────────┐
│ [헤더 영역] │
├─────────────────────────────────────┤
│ │
│ [리스트 아이템 1] │
│ [마지막 메시지/상태] [시간] │
│ │
│ [리스트 아이템 2] │
│ [마지막 메시지/상태] [시간] │
│ │
│ [시스템 아이템] │
│ [시스템 메시지] │
│ │
├─────────────────────────────────────┤
│ [탭바] │
│ ● │
└─────────────────────────────────────┘
상세 문서: [문서명].md
3탭: [탭명] ([아이콘] [역할]) - 센터
핵심 액션 탭: [메인 버튼 설명]
┌─────────────────────────────────────┐
│ [헤더 영역] │
├─────────────────────────────────────┤
│ │
│ [메인 비주얼 영역] │
│ [캐릭터/콘텐츠 표시] │
│ │
├─────────────────────────────────────┤
│ [상태 카드] │
│ [주요 스탯/정보 표시] │
│ │
├─────────────────────────────────────┤
│ [액션 선택 영역] │
│ [옵션 드롭다운/버튼] │
├─────────────────────────────────────┤
│ ╭━━━━━━━━━━━━━━╮ │
│ ┃ ▶ [버튼명] ┃ ← 펄스 │
│ ╰━━━━━━━━━━━━━━╯ 애니 │
├─────────────────────────────────────┤
│ [탭바] │
│ ● │
└─────────────────────────────────────┘
상세 문서: [문서명].md
4탭: [탭명] ([아이콘] [역할])
[역할 설명]
┌─────────────────────────────────────┐
│ [헤더 영역] │
├─────────────────────────────────────┤
│ [현재 상태 표시] │
├─────────────────────────────────────┤
│ [섹션 1] │
│ │
│ [상품/아이템 1] │
│ [상품/아이템 2] BEST │
│ [상품/아이템 3] │
│ │
├─────────────────────────────────────┤
│ [섹션 2] │
│ │
│ [상품/아이템] │
│ [설명] │
├─────────────────────────────────────┤
│ [탭바] │
│ ● │
└─────────────────────────────────────┘
상세 문서: [문서명].md
5탭: [탭명] ([아이콘] [역할])
[역할 설명]
┌─────────────────────────────────────┐
│ [프로필 카드] │
│ [이름/정보] │
│ │
│ [스탯/상태 요약] │
├─────────────────────────────────────┤
│ [메뉴 1] │
│ [메뉴 2] │
│ [메뉴 3] │
│ [메뉴 4] │
│ [메뉴 5] │
├─────────────────────────────────────┤
│ [탭바] │
│ ● │
└─────────────────────────────────────┘
상세 문서: [문서명].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] → [관련 화면]
미확인 알림 처리
[앱 실행]
│
├─ 미확인 항목 있음?
│ └─ [탭] 뱃지 표시
│
└─ 자동으로 해당 탭 이동? ❌
└─ 유저가 직접 확인
테마 및 스타일
컬러 테마
| 모드 | 배경 | 텍스트 | 포인트 |
|---|---|---|---|
| 기본 | #[색상] (다크) | #FFFFFF | #[색상] |
| [모드1] | #[색상] | #FFFFFF | #[색상] |
| [모드2] | #[색상] | #FFFFFF | #[색상] |
탭바 스타일
.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
interface BadgeResponse {
[tab1]: number; // [탭1] 뱃지 수
[tab2]: number; // [탭2] 뱃지 수
[tab4]: boolean; // [탭4] 뱃지 여부
[tab5]: number; // [탭5] 뱃지 수
}
전역 상태
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 | 서비스 컨셉 |
| [tab1_doc].md | [탭1] 상세 |
| [tab2_doc].md | [탭2] 상세 |
| [tab3_doc].md | [탭3] 상세 |
| router.md | 라우팅 구조 |