mirror of
https://github.com/ktds-dg0501/kt-event-marketing.git
synced 2025-12-06 13:26:23 +00:00
architecture pattern
This commit is contained in:
cherry2250
parent
27904c3c94
commit
54914bf81a
1097
design/pattern/architecture-pattern.md
Normal file
1097
design/pattern/architecture-pattern.md
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,6 +1,7 @@
|
||||
# KT AI 기반 소상공인 이벤트 자동 생성 서비스 - 스타일 가이드
|
||||
|
||||
## 문서 정보
|
||||
|
||||
- 작성일: 2025-10-17
|
||||
- 버전: 1.0
|
||||
- 기반 설계: UI/UX 설계서 v1.0
|
||||
@ -11,6 +12,7 @@
|
||||
## 1. 브랜드 아이덴티티
|
||||
|
||||
### 1.1 브랜드 비전
|
||||
|
||||
**"AI로 간편하게, 성공으로 확실하게"**
|
||||
|
||||
소상공인이 전문 마케터 없이도 AI의 도움으로 효과적인 이벤트를 기획하고 실행할 수 있도록 돕는 혁신적인 서비스
|
||||
@ -18,16 +20,19 @@
|
||||
### 1.2 디자인 철학
|
||||
|
||||
#### 혁신성 (Innovation)
|
||||
|
||||
- 최신 AI 기술을 활용한 자동화된 이벤트 생성
|
||||
- 복잡한 마케팅 프로세스를 단순화
|
||||
- 3분 만에 완성되는 이벤트 콘텐츠
|
||||
|
||||
#### 신뢰성 (Trust)
|
||||
|
||||
- KT 브랜드의 안정성과 신뢰감
|
||||
- 명확한 프로세스와 투명한 결과 제공
|
||||
- 실시간 성과 모니터링
|
||||
|
||||
#### 친근함 (Approachability)
|
||||
|
||||
- 소상공인 눈높이에 맞춘 쉬운 인터페이스
|
||||
- 초보자도 이해할 수 있는 명확한 안내
|
||||
- 따뜻하고 친근한 톤앤매너
|
||||
@ -35,11 +40,13 @@
|
||||
### 1.3 브랜드 컬러
|
||||
|
||||
**Primary Color: KT Red**
|
||||
|
||||
- 정체성, 브랜드 대표 색상
|
||||
- 행동 유도(CTA), 강조 요소
|
||||
- KT 브랜드 헤리티지 계승
|
||||
|
||||
**Secondary Color: AI Blue**
|
||||
|
||||
- AI 기능, 기술적 신뢰감
|
||||
- 정보 전달, 안내 요소
|
||||
- 혁신과 미래지향성
|
||||
@ -49,6 +56,7 @@
|
||||
## 2. 디자인 원칙
|
||||
|
||||
### 2.1 명확성 (Clarity)
|
||||
|
||||
**사용자가 무엇을 해야 하는지 항상 명확해야 합니다**
|
||||
|
||||
- 직관적인 아이콘과 레이블 사용
|
||||
@ -56,12 +64,14 @@
|
||||
- 현재 위치와 다음 단계를 항상 표시
|
||||
|
||||
예시:
|
||||
|
||||
```
|
||||
✓ 좋은 예: "새 이벤트 만들기" + 큰 CTA 버튼
|
||||
✗ 나쁜 예: "시작하기" (무엇을 시작하는지 불분명)
|
||||
```
|
||||
|
||||
### 2.2 효율성 (Efficiency)
|
||||
|
||||
**최소한의 단계로 목표를 달성할 수 있어야 합니다**
|
||||
|
||||
- 불필요한 스텝 제거
|
||||
@ -69,11 +79,13 @@
|
||||
- AI가 대부분의 작업 자동화
|
||||
|
||||
목표:
|
||||
|
||||
- 이벤트 기획: 10초 이내
|
||||
- 콘텐츠 생성: 3분 이내
|
||||
- 배포 설정: 1분 이내
|
||||
|
||||
### 2.3 신뢰성 (Trust)
|
||||
|
||||
**AI 처리 과정과 결과를 투명하게 보여줍니다**
|
||||
|
||||
- AI 처리 시간 명시 (예: "AI가 분석중입니다 약 3초 소요")
|
||||
@ -81,6 +93,7 @@
|
||||
- 언제든 이전 단계로 돌아갈 수 있음
|
||||
|
||||
### 2.4 친근함 (Approachability)
|
||||
|
||||
**초보자도 쉽게 사용할 수 있어야 합니다**
|
||||
|
||||
- 전문 용어 최소화
|
||||
@ -88,6 +101,7 @@
|
||||
- 도움말과 예시 제공
|
||||
|
||||
### 2.5 일관성 (Consistency)
|
||||
|
||||
**모든 화면에서 동일한 패턴을 유지합니다**
|
||||
|
||||
- 컴포넌트 재사용
|
||||
@ -101,6 +115,7 @@
|
||||
### 3.1 Primary Color (주 색상)
|
||||
|
||||
#### KT Red - 브랜드 정체성
|
||||
|
||||
```
|
||||
Main: #E31E24 // CTA 버튼, 주요 액션, 활성화 상태
|
||||
Light: #FF4D52 // 호버 상태, 배경 강조
|
||||
@ -114,12 +129,14 @@ Dark: #C71820 // 눌림 상태, 진한 강조
|
||||
```
|
||||
|
||||
#### 색상 접근성
|
||||
|
||||
- White 배경 대비: 7.2:1 (WCAG AAA)
|
||||
- Gray-100 배경 대비: 6.8:1 (WCAG AAA)
|
||||
|
||||
### 3.2 Secondary Color (보조 색상)
|
||||
|
||||
#### AI Blue - 혁신과 신뢰
|
||||
|
||||
```
|
||||
Main: #0066FF // AI 기능 강조, 정보 아이콘
|
||||
Light: #4D94FF // AI 로딩 배경, 안내 영역
|
||||
@ -166,6 +183,7 @@ Info (정보): #0288D1 // 안내, 팁, 추가 정보
|
||||
### 3.5 Gradient (그라데이션)
|
||||
|
||||
#### AI Feature Gradient
|
||||
|
||||
```
|
||||
Primary Gradient:
|
||||
background: linear-gradient(135deg, #E31E24 0%, #FF4D52 100%);
|
||||
@ -183,13 +201,14 @@ Secondary Gradient:
|
||||
### 4.1 Font Family
|
||||
|
||||
**Primary: Pretendard**
|
||||
|
||||
```css
|
||||
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', 'Roboto', 'Helvetica Neue',
|
||||
system-ui, sans-serif;
|
||||
font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
|
||||
"Helvetica Neue", system-ui, sans-serif;
|
||||
```
|
||||
|
||||
**선택 이유:**
|
||||
|
||||
- 한글 가독성이 뛰어남
|
||||
- 다양한 Font Weight 지원 (100~900)
|
||||
- 모던하고 깔끔한 디자인
|
||||
@ -267,6 +286,7 @@ Bold (700): 제목, 헤딩
|
||||
### 4.4 Responsive Typography
|
||||
|
||||
**Tablet (768px~)**
|
||||
|
||||
```
|
||||
Display: 32px (+4px)
|
||||
H1: 28px (+4px)
|
||||
@ -279,6 +299,7 @@ Button: 16px (유지)
|
||||
```
|
||||
|
||||
**Desktop (1024px~)**
|
||||
|
||||
```
|
||||
Display: 36px (+8px)
|
||||
H1: 32px (+8px)
|
||||
@ -295,6 +316,7 @@ Button: 16px (유지)
|
||||
## 5. 간격 시스템 (Spacing)
|
||||
|
||||
### 5.1 Base Unit
|
||||
|
||||
**4px Grid System** - 모든 간격은 4의 배수
|
||||
|
||||
### 5.2 Spacing Scale
|
||||
@ -311,6 +333,7 @@ XL (Extra Large): 32px // 섹션 간 간격
|
||||
### 5.3 Component Spacing
|
||||
|
||||
#### Button
|
||||
|
||||
```
|
||||
Padding (세로 x 가로):
|
||||
- Large: 16px x 24px (높이 48px)
|
||||
@ -321,12 +344,14 @@ Button 간 간격: 12px (S + XS)
|
||||
```
|
||||
|
||||
#### Card
|
||||
|
||||
```
|
||||
내부 패딩: 24px (L)
|
||||
카드 간 간격: 16px (M)
|
||||
```
|
||||
|
||||
#### Input Field
|
||||
|
||||
```
|
||||
내부 패딩: 16px (M)
|
||||
레이블-입력 간격: 8px (S)
|
||||
@ -334,6 +359,7 @@ Button 간 간격: 12px (S + XS)
|
||||
```
|
||||
|
||||
#### Screen Margins
|
||||
|
||||
```
|
||||
Mobile: 20px (양쪽)
|
||||
Tablet: 40px (양쪽)
|
||||
@ -343,6 +369,7 @@ Desktop: 80px (양쪽, 최대 1200px container)
|
||||
### 5.4 Touch Target
|
||||
|
||||
**WCAG 2.1 AA 준수**
|
||||
|
||||
```
|
||||
최소 터치 영역: 44 x 44px
|
||||
권장 터치 영역: 48 x 48px
|
||||
@ -361,6 +388,7 @@ Desktop: 80px (양쪽, 최대 1200px container)
|
||||
### 6.1 Button (버튼)
|
||||
|
||||
#### Primary Button
|
||||
|
||||
```
|
||||
배경: #E31E24 (KT Red)
|
||||
텍스트: #FFFFFF (White)
|
||||
@ -375,6 +403,7 @@ Desktop: 80px (양쪽, 최대 1200px container)
|
||||
```
|
||||
|
||||
#### Secondary Button
|
||||
|
||||
```
|
||||
배경: #FFFFFF (White)
|
||||
텍스트: #E31E24 (KT Red)
|
||||
@ -389,6 +418,7 @@ Desktop: 80px (양쪽, 최대 1200px container)
|
||||
```
|
||||
|
||||
#### Text Button
|
||||
|
||||
```
|
||||
배경: 없음
|
||||
텍스트: #E31E24 (KT Red)
|
||||
@ -402,6 +432,7 @@ Desktop: 80px (양쪽, 최대 1200px container)
|
||||
```
|
||||
|
||||
#### Button Sizes
|
||||
|
||||
```
|
||||
Large:
|
||||
- 높이: 48px
|
||||
@ -425,6 +456,7 @@ Small:
|
||||
### 6.2 Card (카드)
|
||||
|
||||
#### Default Card
|
||||
|
||||
```
|
||||
배경: #FFFFFF (White)
|
||||
테두리: 1px solid #E0E0E0
|
||||
@ -439,6 +471,7 @@ Small:
|
||||
```
|
||||
|
||||
#### Event Card (이벤트 카드)
|
||||
|
||||
```
|
||||
배경: #FFFFFF
|
||||
둥근 모서리: 12px
|
||||
@ -455,6 +488,7 @@ Small:
|
||||
```
|
||||
|
||||
#### Selection Card (선택형 카드)
|
||||
|
||||
```
|
||||
사용: 옵션 선택 화면 (09-콘텐츠미리보기.html)
|
||||
특징: 카드 전체가 선택 가능한 인터랙티브 영역
|
||||
@ -523,6 +557,7 @@ Radio Button:
|
||||
```
|
||||
|
||||
#### Stat Card (지표 카드)
|
||||
|
||||
```
|
||||
배경: Gradient 또는 Solid
|
||||
둥근 모서리: 16px
|
||||
@ -539,6 +574,7 @@ Radio Button:
|
||||
### 6.3 Input Field (입력 필드)
|
||||
|
||||
#### Text Input
|
||||
|
||||
```
|
||||
배경: #FFFFFF (White)
|
||||
테두리: 1px solid #D9D9D9
|
||||
@ -556,6 +592,7 @@ Radio Button:
|
||||
```
|
||||
|
||||
#### Textarea
|
||||
|
||||
```
|
||||
배경: #FFFFFF
|
||||
테두리: 1px solid #D9D9D9
|
||||
@ -569,6 +606,7 @@ Resize: vertical (세로 방향만)
|
||||
```
|
||||
|
||||
#### Editable Field (인라인 편집)
|
||||
|
||||
```
|
||||
사용: 08-AI이벤트추천.html (제목, 경품 편집)
|
||||
특징: contenteditable을 활용한 인라인 편집
|
||||
@ -610,6 +648,7 @@ Resize: vertical (세로 방향만)
|
||||
```
|
||||
|
||||
#### Placeholder
|
||||
|
||||
```
|
||||
색상: #9E9E9E (Gray-500)
|
||||
폰트: Body-L (16px Regular)
|
||||
@ -619,6 +658,7 @@ Resize: vertical (세로 방향만)
|
||||
### 6.4 Checkbox & Radio
|
||||
|
||||
#### Checkbox
|
||||
|
||||
```
|
||||
크기: 24 x 24px (터치 영역 44px)
|
||||
둥근 모서리: 4px
|
||||
@ -631,6 +671,7 @@ Resize: vertical (세로 방향만)
|
||||
```
|
||||
|
||||
#### Radio Button
|
||||
|
||||
```
|
||||
크기: 24 x 24px (터치 영역 44px)
|
||||
둥근 모서리: 50% (원형)
|
||||
@ -766,6 +807,7 @@ Editable Field:
|
||||
### 6.8 Stepper (단계 표시)
|
||||
|
||||
#### Progress Stepper (AI 이벤트 생성)
|
||||
|
||||
```
|
||||
전체 높이: 48px
|
||||
배경: #F5F5F5
|
||||
@ -783,6 +825,7 @@ Editable Field:
|
||||
```
|
||||
|
||||
#### Step Indicator (단계별 표시)
|
||||
|
||||
```
|
||||
┌────┐ ┌────┐ ┌────┐
|
||||
│ ✓ │─ │ 2 │─ │ 3 │
|
||||
@ -854,6 +897,7 @@ Desktop:
|
||||
### 7.3 Grid System
|
||||
|
||||
#### Mobile Grid (4 Columns)
|
||||
|
||||
```
|
||||
┌─────┬─────┬─────┬─────┐
|
||||
│ 1 │ 2 │ 3 │ 4 │
|
||||
@ -865,6 +909,7 @@ Desktop:
|
||||
```
|
||||
|
||||
#### Tablet Grid (8 Columns)
|
||||
|
||||
```
|
||||
┌──┬──┬──┬──┬──┬──┬──┬──┐
|
||||
│ 1│ 2│ 3│ 4│ 5│ 6│ 7│ 8│
|
||||
@ -877,6 +922,7 @@ Desktop:
|
||||
```
|
||||
|
||||
#### Desktop Grid (12 Columns)
|
||||
|
||||
```
|
||||
┌┬┬┬┬┬┬┬┬┬┬┬┬┐
|
||||
│││││││││││││
|
||||
@ -895,6 +941,7 @@ Desktop:
|
||||
### 8.1 AI 처리 상태 컴포넌트
|
||||
|
||||
#### Loading Skeleton
|
||||
|
||||
```
|
||||
배경: #F5F5F5
|
||||
애니메이션: Shimmer (좌→우 반짝임)
|
||||
@ -911,6 +958,7 @@ Duration: 1.5s infinite
|
||||
```
|
||||
|
||||
#### Progress Indicator (AI 단계별)
|
||||
|
||||
```
|
||||
┌─────────────────────────────┐
|
||||
│ 🤖 AI가 트렌드를 분석중입니다 │
|
||||
@ -927,6 +975,7 @@ Duration: 1.5s infinite
|
||||
```
|
||||
|
||||
#### Spinner (간단한 로딩)
|
||||
|
||||
```
|
||||
크기: 32px
|
||||
두께: 3px
|
||||
@ -939,6 +988,7 @@ Duration: 1.5s infinite
|
||||
### 8.2 AI 결과 카드
|
||||
|
||||
#### AI 생성 옵션 카드 (선택형)
|
||||
|
||||
```
|
||||
┌─────────────────────────────┐
|
||||
│ ◯ [이미지 미리보기] │
|
||||
@ -959,6 +1009,7 @@ Duration: 1.5s infinite
|
||||
```
|
||||
|
||||
#### AI 추천 배지
|
||||
|
||||
```
|
||||
배경: linear-gradient(135deg, #0066FF 0%, #4D94FF 100%)
|
||||
텍스트: White
|
||||
@ -973,6 +1024,7 @@ Duration: 1.5s infinite
|
||||
### 8.3 Real-time Dashboard Components
|
||||
|
||||
#### KPI Card (핵심 지표)
|
||||
|
||||
```
|
||||
┌─────────────────────────┐
|
||||
│ 📊 참여자 수 │
|
||||
@ -993,6 +1045,7 @@ Duration: 1.5s infinite
|
||||
```
|
||||
|
||||
#### Chart Container
|
||||
|
||||
```
|
||||
배경: White
|
||||
둥근 모서리: 12px
|
||||
@ -1176,6 +1229,7 @@ Linear (일정):
|
||||
### 10.3 주요 애니메이션
|
||||
|
||||
#### Page Transition
|
||||
|
||||
```
|
||||
진입:
|
||||
- opacity: 0 → 1
|
||||
@ -1191,6 +1245,7 @@ Linear (일정):
|
||||
```
|
||||
|
||||
#### Card Hover
|
||||
|
||||
```
|
||||
transform: translateY(0) → translateY(-4px)
|
||||
box-shadow: 증가 (0 2px 8px → 0 8px 16px)
|
||||
@ -1199,6 +1254,7 @@ easing: ease-out
|
||||
```
|
||||
|
||||
#### Button Press
|
||||
|
||||
```
|
||||
transform: scale(1) → scale(0.95)
|
||||
duration: 100ms
|
||||
@ -1456,6 +1512,7 @@ Secondary:
|
||||
## 15. 변경 이력
|
||||
|
||||
### Version 1.1 (2025-10-21)
|
||||
|
||||
- 프로토타입 기반 컴포넌트 업데이트
|
||||
- Editable Field 컴포넌트 추가 (인라인 편집)
|
||||
- Budget Navigation 컴포넌트 추가 (Sticky 탭 네비게이션)
|
||||
@ -1464,6 +1521,7 @@ Secondary:
|
||||
- 이벤트 버블링 방지 가이드 추가
|
||||
|
||||
### Version 1.0 (2025-10-17)
|
||||
|
||||
- 초안 작성
|
||||
- 브랜드 아이덴티티 정의
|
||||
- 디자인 원칙 5가지 수립
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
# KT AI 기반 소상공인 이벤트 자동 생성 서비스 - UI/UX 설계서
|
||||
|
||||
## 문서 정보
|
||||
|
||||
- 작성일: 2025-10-21
|
||||
- 버전: 2.0
|
||||
- 기반 문서: 유저스토리 v2.0, 프로토타입 분석
|
||||
@ -11,14 +12,17 @@
|
||||
## 1. 서비스 개요
|
||||
|
||||
### 1.1 서비스 목적
|
||||
|
||||
소상공인이 AI의 도움으로 전문 마케터 없이도 효과적인 이벤트를 기획하고 실행할 수 있도록 지원
|
||||
|
||||
### 1.2 핵심 가치
|
||||
|
||||
- **혁신성**: AI 기반 자동화로 3분 만에 이벤트 콘텐츠 생성
|
||||
- **신뢰성**: KT 브랜드 기반의 안정적인 서비스
|
||||
- **접근성**: 초보자도 쉽게 사용할 수 있는 직관적 인터페이스
|
||||
|
||||
### 1.3 타겟 사용자
|
||||
|
||||
- **Primary**: 마케팅 전문 지식이 부족한 소상공인
|
||||
- **Secondary**: 이벤트 마케팅 경험이 있는 중소기업 담당자
|
||||
|
||||
@ -29,12 +33,14 @@
|
||||
### 2.1 전체 화면 구조 (총 17개)
|
||||
|
||||
#### 인증 영역 (01~04)
|
||||
|
||||
- **01-로그인.html**: 이메일/비밀번호 로그인
|
||||
- **02-회원가입.html**: 신규 사용자 등록
|
||||
- **03-프로필.html**: 사용자 프로필 및 매장 정보 관리
|
||||
- **04-로그아웃확인.html**: 로그아웃 확인 모달
|
||||
|
||||
#### 대시보드 영역 (05~06)
|
||||
|
||||
- **05-대시보드.html**: 메인 홈 화면
|
||||
- KPI 요약 (진행 중 이벤트, 총 참여자, 평균 ROI)
|
||||
- 빠른 시작 (새 이벤트, 분석)
|
||||
@ -43,6 +49,7 @@
|
||||
- **06-이벤트목록.html**: 전체 이벤트 목록 및 필터링
|
||||
|
||||
#### 이벤트 생성 플로우 (07~12, 7단계)
|
||||
|
||||
- **07-이벤트목적선택.html**: 이벤트 목적 선택
|
||||
- **08-AI이벤트추천.html**: AI 트렌드 분석 및 이벤트 추천
|
||||
- **09-콘텐츠미리보기.html**: SNS 이미지 스타일 선택
|
||||
@ -51,6 +58,7 @@
|
||||
- **12-최종승인.html**: 이벤트 최종 검토 및 승인
|
||||
|
||||
#### 이벤트 관리 및 모니터링 (13~17)
|
||||
|
||||
- **13-이벤트상세.html**: 이벤트 상세 정보 및 실시간 KPI
|
||||
- **14-참여자목록.html**: 참여자 관리 및 필터링
|
||||
- **15-이벤트참여.html**: 사용자 이벤트 참여 화면 (고객용)
|
||||
@ -98,6 +106,7 @@
|
||||
### 3.1 Navigation
|
||||
|
||||
#### Bottom Navigation (모든 메인 화면)
|
||||
|
||||
```
|
||||
구조: 4개 탭
|
||||
- 홈: 05-대시보드.html
|
||||
@ -115,6 +124,7 @@
|
||||
```
|
||||
|
||||
#### Header
|
||||
|
||||
```
|
||||
구조: 타이틀 + 뒤로가기 + 프로필
|
||||
- 대시보드: 뒤로가기 없음
|
||||
@ -128,6 +138,7 @@
|
||||
```
|
||||
|
||||
#### FAB (Floating Action Button)
|
||||
|
||||
```
|
||||
위치: 우측 하단 고정
|
||||
기능: 새 이벤트 생성 (07-이벤트목적선택.html)
|
||||
@ -143,6 +154,7 @@
|
||||
### 3.2 Card 컴포넌트
|
||||
|
||||
#### Default Card
|
||||
|
||||
```css
|
||||
배경: #FFFFFF
|
||||
테두리: 1px solid #E0E0E0
|
||||
@ -152,6 +164,7 @@
|
||||
```
|
||||
|
||||
#### Event Card
|
||||
|
||||
```
|
||||
구조:
|
||||
- 이벤트명 (H3)
|
||||
@ -165,6 +178,7 @@
|
||||
```
|
||||
|
||||
#### Selection Card (09-콘텐츠미리보기)
|
||||
|
||||
```
|
||||
특징: 카드 전체가 선택 가능한 영역
|
||||
- Radio 버튼 숨김 (기능은 유지)
|
||||
@ -178,6 +192,7 @@
|
||||
### 3.3 Form 컴포넌트
|
||||
|
||||
#### Text Input
|
||||
|
||||
```css
|
||||
높이: 48px
|
||||
패딩: 16px
|
||||
@ -195,6 +210,7 @@ Error:
|
||||
```
|
||||
|
||||
#### Checkbox & Radio
|
||||
|
||||
```
|
||||
크기: 24 x 24px (터치 영역 44px)
|
||||
|
||||
@ -210,6 +226,7 @@ Radio:
|
||||
### 3.4 Modal 컴포넌트
|
||||
|
||||
#### Modal Dialog
|
||||
|
||||
```
|
||||
최대 너비: 400px (Mobile), 480px (Tablet+)
|
||||
패딩: 24px
|
||||
@ -224,6 +241,7 @@ Backdrop: rgba(0, 0, 0, 0.6)
|
||||
```
|
||||
|
||||
#### Bottom Sheet
|
||||
|
||||
```
|
||||
최대 높이: 80vh
|
||||
둥근 모서리: 24px 24px 0 0
|
||||
@ -235,6 +253,7 @@ Handle: 40px x 4px, #D9D9D9 (상단 중앙)
|
||||
```
|
||||
|
||||
#### Toast
|
||||
|
||||
```
|
||||
위치: 하단 중앙, Bottom Nav 위 80px
|
||||
배경: #1A1A1A (90% opacity)
|
||||
@ -256,6 +275,7 @@ Handle: 40px x 4px, #D9D9D9 (상단 중앙)
|
||||
### 4.1 인증 영역
|
||||
|
||||
#### 01-로그인.html
|
||||
|
||||
```
|
||||
레이아웃:
|
||||
- 로고 (상단 중앙)
|
||||
@ -273,6 +293,7 @@ Handle: 40px x 4px, #D9D9D9 (상단 중앙)
|
||||
```
|
||||
|
||||
#### 02-회원가입.html
|
||||
|
||||
```
|
||||
레이아웃: 세로 스크롤
|
||||
섹션:
|
||||
@ -292,6 +313,7 @@ Handle: 40px x 4px, #D9D9D9 (상단 중앙)
|
||||
```
|
||||
|
||||
#### 03-프로필.html
|
||||
|
||||
```
|
||||
레이아웃:
|
||||
- 프로필 헤더 (상단)
|
||||
@ -315,6 +337,7 @@ Bottom Nav: 프로필 탭 활성화
|
||||
```
|
||||
|
||||
#### 04-로그아웃확인.html
|
||||
|
||||
```
|
||||
유형: Modal Dialog
|
||||
|
||||
@ -329,6 +352,7 @@ Bottom Nav: 프로필 탭 활성화
|
||||
### 4.2 대시보드 영역
|
||||
|
||||
#### 05-대시보드.html
|
||||
|
||||
```
|
||||
레이아웃: 세로 스크롤
|
||||
|
||||
@ -360,6 +384,7 @@ Bottom Nav: 홈 탭 활성화
|
||||
```
|
||||
|
||||
#### 06-이벤트목록.html
|
||||
|
||||
```
|
||||
레이아웃: 세로 스크롤
|
||||
|
||||
@ -384,6 +409,7 @@ Bottom Nav: 이벤트 탭 활성화
|
||||
### 4.3 이벤트 생성 플로우
|
||||
|
||||
#### 07-이벤트목적선택.html
|
||||
|
||||
```
|
||||
레이아웃: 세로 스크롤
|
||||
|
||||
@ -409,6 +435,7 @@ Progress: 1/7 단계
|
||||
```
|
||||
|
||||
#### 08-AI이벤트추천.html
|
||||
|
||||
```
|
||||
레이아웃: 세로 스크롤
|
||||
|
||||
@ -464,6 +491,7 @@ Progress: 2/7 단계
|
||||
```
|
||||
|
||||
#### 09-콘텐츠미리보기.html
|
||||
|
||||
```
|
||||
레이아웃: 세로 스크롤
|
||||
|
||||
@ -524,6 +552,7 @@ Progress: 3/7 단계
|
||||
```
|
||||
|
||||
#### 10-콘텐츠편집.html
|
||||
|
||||
```
|
||||
레이아웃:
|
||||
- Mobile: 세로 스택 (편집폼 → 미리보기)
|
||||
@ -558,6 +587,7 @@ Progress: 4/7 단계
|
||||
```
|
||||
|
||||
#### 11-배포채널선택.html
|
||||
|
||||
```
|
||||
레이아웃: 세로 스크롤
|
||||
|
||||
@ -587,6 +617,7 @@ Progress: 5/7 단계
|
||||
```
|
||||
|
||||
#### 12-최종승인.html
|
||||
|
||||
```
|
||||
레이아웃: 세로 스크롤
|
||||
|
||||
@ -618,6 +649,7 @@ Progress: 7/7 단계
|
||||
### 4.4 이벤트 관리 및 모니터링
|
||||
|
||||
#### 13-이벤트상세.html
|
||||
|
||||
```
|
||||
레이아웃: 세로 스크롤
|
||||
|
||||
@ -651,6 +683,7 @@ Bottom Nav: 이벤트 탭 활성화
|
||||
```
|
||||
|
||||
#### 14-참여자목록.html
|
||||
|
||||
```
|
||||
레이아웃: 세로 스크롤
|
||||
|
||||
@ -676,6 +709,7 @@ Bottom Nav: 이벤트 탭 활성화
|
||||
```
|
||||
|
||||
#### 15-이벤트참여.html
|
||||
|
||||
```
|
||||
유형: 고객용 화면 (공개 URL)
|
||||
|
||||
@ -706,6 +740,7 @@ Bottom Nav: 이벤트 탭 활성화
|
||||
```
|
||||
|
||||
#### 16-당첨자추첨.html
|
||||
|
||||
```
|
||||
레이아웃: 세로 스크롤
|
||||
|
||||
@ -735,6 +770,7 @@ Bottom Nav: 이벤트 탭 활성화
|
||||
```
|
||||
|
||||
#### 17-성과분석.html
|
||||
|
||||
```
|
||||
레이아웃: 세로 스크롤
|
||||
|
||||
@ -773,6 +809,7 @@ Bottom Nav: 분석 탭 활성화
|
||||
## 5. 반응형 디자인
|
||||
|
||||
### 5.1 Breakpoints
|
||||
|
||||
```
|
||||
Mobile (기본): 320px ~ 767px
|
||||
Tablet: 768px ~ 1023px
|
||||
@ -782,6 +819,7 @@ Desktop: 1024px 이상
|
||||
### 5.2 레이아웃 변화
|
||||
|
||||
#### 대시보드 (05)
|
||||
|
||||
```
|
||||
Mobile: KPI 세로 스택
|
||||
Tablet: KPI 2x2 그리드, 이벤트 2열
|
||||
@ -789,6 +827,7 @@ Desktop: KPI 4열, 이벤트 3열 + 사이드바
|
||||
```
|
||||
|
||||
#### 이벤트 생성 (09, 10)
|
||||
|
||||
```
|
||||
Mobile: 세로 스택
|
||||
Tablet: 세로 스택 (간격 증가)
|
||||
@ -796,6 +835,7 @@ Desktop: 좌우 분할 (편집 | 미리보기)
|
||||
```
|
||||
|
||||
#### 성과 분석 (17)
|
||||
|
||||
```
|
||||
Mobile: 차트 세로 스택
|
||||
Tablet: 차트 2x1 그리드
|
||||
@ -807,26 +847,31 @@ Desktop: 차트 2x2 그리드
|
||||
## 6. 인터랙션 패턴
|
||||
|
||||
### 6.1 Navigation
|
||||
|
||||
- **Bottom Nav**: 탭 클릭 시 즉시 화면 전환
|
||||
- **Back Button**: 이전 화면으로 이동
|
||||
- **FAB**: 새 이벤트 생성 플로우 시작
|
||||
|
||||
### 6.2 Form
|
||||
|
||||
- **실시간 검증**: 입력 필드 blur 시 유효성 검사
|
||||
- **에러 메시지**: 필드 하단에 빨간색 텍스트
|
||||
- **성공 피드백**: Toast 메시지
|
||||
|
||||
### 6.3 Loading States
|
||||
|
||||
- **AI 처리**: Progress Indicator + 예상 시간
|
||||
- **데이터 로딩**: Skeleton Screen
|
||||
- **버튼 클릭**: Spinner + 비활성화
|
||||
|
||||
### 6.4 Feedback
|
||||
|
||||
- **성공**: Green Toast + 체크 아이콘
|
||||
- **에러**: Red Toast + X 아이콘
|
||||
- **정보**: Blue Toast + i 아이콘
|
||||
|
||||
### 6.5 Gestures (Mobile)
|
||||
|
||||
- **Swipe**: 이벤트 카드 좌우 스와이프 (삭제/편집)
|
||||
- **Pull to Refresh**: 대시보드, 성과 분석
|
||||
- **Long Press**: 컨텍스트 메뉴 표시
|
||||
@ -836,17 +881,20 @@ Desktop: 차트 2x2 그리드
|
||||
## 7. 접근성 고려사항
|
||||
|
||||
### 7.1 WCAG 2.1 AA 준수
|
||||
|
||||
- **색상 대비**: 최소 4.5:1 (텍스트), 3:1 (UI 요소)
|
||||
- **터치 영역**: 최소 44x44px
|
||||
- **키보드 네비게이션**: 모든 인터랙티브 요소 접근 가능
|
||||
- **Focus Indicator**: 명확한 포커스 표시
|
||||
|
||||
### 7.2 스크린 리더 지원
|
||||
|
||||
- **ARIA Labels**: 모든 버튼, 링크, 폼 필드
|
||||
- **ARIA Roles**: 적절한 역할 지정
|
||||
- **Live Regions**: 동적 콘텐츠 업데이트 알림
|
||||
|
||||
### 7.3 대안 제공
|
||||
|
||||
- **색상 외 표현**: 아이콘 + 텍스트 조합
|
||||
- **키보드 대안**: 드래그 앤 드롭 → 버튼 클릭
|
||||
- **음성 대안**: 이미지 alt 텍스트
|
||||
@ -856,16 +904,19 @@ Desktop: 차트 2x2 그리드
|
||||
## 8. 성능 최적화
|
||||
|
||||
### 8.1 이미지
|
||||
|
||||
- **포맷**: WebP (fallback: JPG)
|
||||
- **압축**: Quality 80-85%
|
||||
- **Lazy Loading**: 스크롤 시 로드
|
||||
|
||||
### 8.2 폰트
|
||||
|
||||
- **Font Display**: swap
|
||||
- **Preload**: 주요 폰트
|
||||
- **Subset**: 자주 쓰는 글자만
|
||||
|
||||
### 8.3 애니메이션
|
||||
|
||||
- **GPU 가속**: transform, opacity
|
||||
- **Will-Change**: 애니메이션 직전만 적용
|
||||
|
||||
@ -874,6 +925,7 @@ Desktop: 차트 2x2 그리드
|
||||
## 9. 에러 처리
|
||||
|
||||
### 9.1 네트워크 에러
|
||||
|
||||
```
|
||||
표시: Toast (빨간색)
|
||||
메시지: "네트워크 연결을 확인해주세요"
|
||||
@ -881,6 +933,7 @@ Desktop: 차트 2x2 그리드
|
||||
```
|
||||
|
||||
### 9.2 Validation 에러
|
||||
|
||||
```
|
||||
표시: Input 하단 메시지
|
||||
색상: Error Red (#D32F2F)
|
||||
@ -888,6 +941,7 @@ Desktop: 차트 2x2 그리드
|
||||
```
|
||||
|
||||
### 9.3 서버 에러
|
||||
|
||||
```
|
||||
표시: Modal Dialog
|
||||
메시지: "일시적인 오류가 발생했습니다. 잠시 후 다시 시도해주세요."
|
||||
@ -895,6 +949,7 @@ Desktop: 차트 2x2 그리드
|
||||
```
|
||||
|
||||
### 9.4 Empty State
|
||||
|
||||
```
|
||||
표시: 중앙 정렬 메시지 + 아이콘
|
||||
예시:
|
||||
@ -919,6 +974,7 @@ Desktop: 차트 2x2 그리드
|
||||
## 11. 변경 이력
|
||||
|
||||
### Version 2.1 (2025-10-21)
|
||||
|
||||
- 프로토타입 실제 구현 내용 반영
|
||||
- 08-AI이벤트추천: 예산별 2가지 방식(온라인/오프라인) 상세화
|
||||
- 08-AI이벤트추천: Budget Navigation (Sticky) 추가
|
||||
@ -927,6 +983,7 @@ Desktop: 차트 2x2 그리드
|
||||
- 09-콘텐츠미리보기: Fullscreen Modal, 이벤트 버블링 방지 추가
|
||||
|
||||
### Version 2.0 (2025-10-21)
|
||||
|
||||
- 프로토타입 분석 기반 전면 개정
|
||||
- 화면 번호 체계 정립 (01~17번)
|
||||
- 네비게이션 구조 변경 (햄버거 메뉴 제거, Bottom Nav 4탭)
|
||||
@ -937,6 +994,7 @@ Desktop: 차트 2x2 그리드
|
||||
- 실시간 KPI 업데이트 추가 (13-이벤트상세)
|
||||
|
||||
### Version 1.0 (2025-10-17)
|
||||
|
||||
- 초안 작성
|
||||
|
||||
---
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user