kt-event-marketing/design/uiux/uiux-design.md

# KT AI 기반 소상공인 이벤트 자동 생성 서비스 - UI/UX 설계서

## 문서 정보

- 작성일: 2025-10-21
- 버전: 2.0
- 기반 문서: 유저스토리 v2.0, 프로토타입 분석
- 설계 원칙: Mobile First, 접근성 우선, 일관성

---

## 1. 서비스 개요

### 1.1 서비스 목적

소상공인이 AI의 도움으로 전문 마케터 없이도 효과적인 이벤트를 기획하고 실행할 수 있도록 지원

### 1.2 핵심 가치

- **혁신성**: AI 기반 자동화로 3분 만에 이벤트 콘텐츠 생성
- **신뢰성**: KT 브랜드 기반의 안정적인 서비스
- **접근성**: 초보자도 쉽게 사용할 수 있는 직관적 인터페이스

### 1.3 타겟 사용자

- **Primary**: 마케팅 전문 지식이 부족한 소상공인
- **Secondary**: 이벤트 마케팅 경험이 있는 중소기업 담당자

---

## 2. 화면 구성

### 2.1 전체 화면 구조 (총 17개)

#### 인증 영역 (01~04)

- **01-로그인.html**: 이메일/비밀번호 로그인
- **02-회원가입.html**: 신규 사용자 등록
- **03-프로필.html**: 사용자 프로필 및 매장 정보 관리
- **04-로그아웃확인.html**: 로그아웃 확인 모달

#### 대시보드 영역 (05~06)

- **05-대시보드.html**: 메인 홈 화면
  - KPI 요약 (진행 중 이벤트, 총 참여자, 평균 ROI)
  - 빠른 시작 (새 이벤트, 분석)
  - 진행 중인 이벤트 목록
  - 최근 활동 타임라인
- **06-이벤트목록.html**: 전체 이벤트 목록 및 필터링

#### 이벤트 생성 플로우 (07~12, 7단계)

- **07-이벤트목적선택.html**: 이벤트 목적 선택
- **08-AI이벤트추천.html**: AI 트렌드 분석 및 이벤트 추천
- **09-콘텐츠미리보기.html**: SNS 이미지 스타일 선택
- **10-콘텐츠편집.html**: 텍스트 및 색상 편집
- **11-배포채널선택.html**: 배포 채널 선택
- **12-최종승인.html**: 이벤트 최종 검토 및 승인

#### 이벤트 관리 및 모니터링 (13~17)

- **13-이벤트상세.html**: 이벤트 상세 정보 및 실시간 KPI
- **14-참여자목록.html**: 참여자 관리 및 필터링
- **15-이벤트참여.html**: 사용자 이벤트 참여 화면 (고객용)
- **16-당첨자추첨.html**: 당첨자 추첨 및 관리
- **17-성과분석.html**: 실시간 대시보드 및 성과 분석

### 2.2 화면 흐름도

```
[01-로그인 / 02-회원가입]
         ↓
[05-대시보드] (Bottom Nav: 홈)
    ↓
    ├─ [06-이벤트목록] (Bottom Nav: 이벤트)
    │      ↓
    │  [13-이벤트상세] → [14-참여자목록] → [16-당첨자추첨]
    │      ↓
    │  [17-성과분석] (Bottom Nav: 분석)
    │
    └─ [새 이벤트 생성 플로우] (FAB)
         ↓
       [07-목적선택]
         ↓
       [08-AI추천]
         ↓
       [09-콘텐츠미리보기]
         ↓
       [10-콘텐츠편집]
         ↓
       [11-배포채널선택]
         ↓
       [12-최종승인]
         ↓
       [13-이벤트상세]

[03-프로필] (Bottom Nav: 프로필)
    ↓
[04-로그아웃확인]
```

---

## 3. 공통 컴포넌트

### 3.1 Navigation

#### Bottom Navigation (모든 메인 화면)

```
구조: 4개 탭
- 홈: 05-대시보드.html
- 이벤트: 06-이벤트목록.html
- 분석: 17-성과분석.html
- 프로필: 03-프로필.html

디자인:
- 높이: 60px
- 배경: White
- 그림자: 0 -2px 8px rgba(0, 0, 0, 0.08)
- 아이콘: Material Icons (24px)
- 활성화: KT Red (#E31E24)
- 비활성화: Gray (#9E9E9E)
```

#### Header

```
구조: 타이틀 + 뒤로가기 + 프로필
- 대시보드: 뒤로가기 없음
- 이벤트 생성 플로우: 프로필 버튼 숨김

디자인:
- 높이: 56px
- 배경: White
- 제목: H1 (24px Bold)
- 아이콘: Material Icons (24px)
```

#### FAB (Floating Action Button)

```
위치: 우측 하단 고정
기능: 새 이벤트 생성 (07-이벤트목적선택.html)

디자인:
- 크기: 56 x 56px
- 배경: KT Red (#E31E24)
- 아이콘: add (White, 24px)
- 그림자: 0 4px 12px rgba(227, 30, 36, 0.3)
- Bottom Navigation 위 80px
```

### 3.2 Card 컴포넌트

#### Default Card

```css
배경: #FFFFFF
테두리: 1px solid #E0E0E0
둥근 모서리: 12px
그림자: 0 2px 8px rgba(0, 0, 0, 0.08)
패딩: 24px
```

#### Event Card

```
구조:
- 이벤트명 (H3)
- 상태 배지 (진행중/예정/종료)
- 기간 정보 (Body-S)
- 통계 정보 (참여자, ROI 등)

상태:
- Hover: 테두리 #E31E24, 그림자 증가
- Selected: 테두리 2px solid #E31E24
```

#### Selection Card (09-콘텐츠미리보기)

```
특징: 카드 전체가 선택 가능한 영역
- Radio 버튼 숨김 (기능은 유지)
- 선택 시 시각적 피드백:
  - 테두리: 3px solid #E31E24
  - 그림자: 0 4px 12px rgba(227, 30, 36, 0.2)
  - 우측 상단 체크 배지 표시
- Hover: transform translateY(-2px)
```

### 3.3 Form 컴포넌트

#### Text Input

```css
높이: 48px
패딩: 16px
테두리: 1px solid #D9D9D9
둥근 모서리: 8px
폰트: Body-L (16px Regular)

Focus:
- 테두리: 2px solid #0066FF
- 그림자: 0 0 0 4px rgba(0, 102, 255, 0.1)

Error:
- 테두리: 2px solid #D32F2F
- 그림자: 0 0 0 4px rgba(211, 47, 47, 0.1)
```

#### Checkbox & Radio

```
크기: 24 x 24px (터치 영역 44px)

Checkbox:
- 둥근 모서리: 4px
- Checked: 배경 #E31E24, 체크마크 White

Radio:
- 둥근 모서리: 50% (원형)
- Selected: 테두리 #E31E24, 내부 점 12px
```

### 3.4 Modal 컴포넌트

#### Modal Dialog

```
최대 너비: 400px (Mobile), 480px (Tablet+)
패딩: 24px
둥근 모서리: 16px
그림자: 0 8px 24px rgba(0, 0, 0, 0.2)

Backdrop: rgba(0, 0, 0, 0.6)

애니메이션:
- Show: opacity 0→1, scale 0.95→1, 250ms
- Hide: opacity 1→0, scale 1→0.95, 200ms
```

#### Bottom Sheet

```
최대 높이: 80vh
둥근 모서리: 24px 24px 0 0
Handle: 40px x 4px, #D9D9D9 (상단 중앙)

애니메이션:
- Open: translateY(100% → 0), 300ms
- Close: translateY(0 → 100%), 250ms
```

#### Toast

```
위치: 하단 중앙, Bottom Nav 위 80px
배경: #1A1A1A (90% opacity)
텍스트: White
패딩: 16px 24px
둥근 모서리: 8px
자동 닫힘: 3초

타입별 아이콘:
- Success: ✓ (#00C853)
- Error: ✕ (#D32F2F)
- Info: ⓘ (#0288D1)
```

---

## 4. 화면별 상세 설계

### 4.1 인증 영역

#### 01-로그인.html

```
레이아웃:
- 로고 (상단 중앙)
- 로그인 폼 (중앙 정렬)
- 회원가입/비밀번호찾기 링크 (하단)

컴포넌트:
- Email Input
- Password Input
- "로그인 유지" Checkbox
- Primary Button (로그인)
- Text Button (회원가입, 비밀번호 찾기)

유저스토리: UFR-USER-020
```

#### 02-회원가입.html

```
레이아웃: 세로 스크롤
섹션:
1. 기본 정보
   - 이름, 전화번호, 이메일, 비밀번호
2. 매장 정보
   - 매장명, 업종, 주소, 영업시간
3. 사업자번호 (검증 필요)

컴포넌트:
- Text Input (각 필드)
- Select Dropdown (업종)
- Primary Button (회원가입)
- 검증 에러 메시지

유저스토리: UFR-USER-010
```

#### 03-프로필.html

```
레이아웃:
- 프로필 헤더 (상단)
- 편집 폼 (세로 스크롤)
- 저장/로그아웃 버튼 (하단 고정)

섹션:
1. 사용자 정보 (아이콘 + 이름/이메일)
2. 기본 정보 편집
3. 매장 정보 편집
4. 비밀번호 변경
5. 로그아웃 버튼

컴포넌트:
- Text Input (각 필드)
- Primary Button (저장)
- Text Button (로그아웃, Error 색상)

유저스토리: UFR-USER-030
Bottom Nav: 프로필 탭 활성화
```

#### 04-로그아웃확인.html

```
유형: Modal Dialog

구조:
- 제목: "로그아웃 하시겠습니까?"
- 본문: 안내 메시지
- 버튼: 취소 (Secondary) / 확인 (Primary)

유저스토리: UFR-USER-040
```

### 4.2 대시보드 영역

#### 05-대시보드.html

```
레이아웃: 세로 스크롤

섹션:
1. KPI 요약 (그리드)
   - 진행 중 이벤트 수
   - 총 참여자 수
   - 평균 ROI

2. 빠른 시작 (2개 카드)
   - 새 이벤트 만들기
   - 분석 보기

3. 진행 중인 이벤트 (카드 리스트)
   - 최대 5개 표시
   - "전체보기" 링크

4. 최근 활동 (타임라인)

컴포넌트:
- KPI Card (3개, 그리드)
- Action Card (2개, 그리드)
- Event Card (리스트)
- Timeline Item (리스트)
- FAB (새 이벤트)

유저스토리: UFR-EVENT-010
Bottom Nav: 홈 탭 활성화
```

#### 06-이벤트목록.html

```
레이아웃: 세로 스크롤

섹션:
1. 검색 바
2. 필터 (상태, 기간)
3. 정렬 (최신순, 참여자순, ROI순)
4. 이벤트 카드 리스트
5. 페이지네이션

컴포넌트:
- Search Input
- Filter Chips
- Dropdown (정렬)
- Event Card (리스트)
- Pagination

유저스토리: UFR-EVENT-070
Bottom Nav: 이벤트 탭 활성화
```

### 4.3 이벤트 생성 플로우

#### 07-이벤트목적선택.html

```
레이아웃: 세로 스크롤

섹션:
- 제목: "이벤트 목적을 선택하세요"
- 옵션 카드 (4개)
  1. 신규 고객 유치
  2. 재방문 유도
  3. 매출 증대
  4. 인지도 향상

컴포넌트:
- Option Card (4개, Radio 버튼 포함)
  - 아이콘 + 제목 + 설명
- Primary Button (다음)

상호작용:
- 카드 선택 시 강조 표시
- 선택 후 다음 버튼 활성화

유저스토리: UFR-EVENT-020
Progress: 1/7 단계
```

#### 08-AI이벤트추천.html

```
레이아웃: 세로 스크롤

섹션:
1. AI 트렌드 분석 결과 (상단 카드)
   - 업종 트렌드 (store 아이콘)
   - 지역 트렌드 (location_on 아이콘)
   - 시즌 트렌드 (wb_sunny 아이콘)

2. 예산별 추천 이벤트 제목 및 설명
   - "예산별 추천 이벤트"
   - "각 예산별 2가지 방식 (온라인 1개, 오프라인 1개)을 추천합니다"

3. 예산 선택 네비게이션 (Sticky)
   - 💰 저비용 / 💰💰 중비용 / 💰💰💰 고비용
   - 탭 형태, 클릭 시 해당 섹션으로 스크롤

4. 예산별 추천 이벤트 (각 예산당 2개 카드)
   - 저비용 (25~30만원): 온라인/오프라인 각 1개
   - 중비용 (60~70만원): 온라인/오프라인 각 1개
   - 고비용 (200~250만원): 온라인/오프라인 각 1개
   - 각 카드 구성:
     - 온라인/오프라인 배지
     - 이벤트 제목 (인라인 편집 가능, editable-field)
     - 경품명 (인라인 편집 가능, editable-field)
     - 참여 방법
     - 예상 통계 (참여자 수, 비용, ROI)
     - Radio 버튼 (카드 내부)

컴포넌트:
- Trend Analysis Card (3개 트렌드 항목)
- Budget Navigation (Sticky, 3개 버튼)
- Option Card (총 6개, Radio 선택)
  - 온라인/오프라인 배지
  - Editable Field (제목, 경품)
  - Radio 버튼 (visible)
- Primary Button (다음)

상호작용:
- 예산 네비게이션 클릭: 해당 섹션으로 smooth scroll
- Editable Field 클릭: 인라인 편집 활성화
- 제목/경품 hover: 편집 가능 표시 (점선 테두리)
- Radio 선택: 1개만 선택 가능
- 선택 후 다음 버튼 활성화

유저스토리: UFR-EVENT-030, UFR-AI-010
Progress: 2/7 단계

특징:
- 예산별 2가지 방식 제공 (온라인/오프라인)
- 총 6개 옵션 중 1개 선택
- 인라인 편집으로 즉시 커스터마이징
```

#### 09-콘텐츠미리보기.html

```
레이아웃: 세로 스크롤

섹션:
- 제목: "SNS 이미지 스타일을 선택하세요"
- 스타일 카드 (5개 그리드)
  1. 심플 - 깔끔하고 읽기 쉬운 디자인
  2. 모던 - 트렌디하고 세련된 디자인
  3. 귀여움 - 친근하고 따뜻한 디자인
  4. 고급스러움 - 프리미엄 느낌의 디자인
  5. 트렌디 - MZ세대 감성의 디자인

컴포넌트:
- Style Selection Card (5개, 카드 선택 UI)
  구조:
  - Selected Badge (우측 상단, 조건부)
    - 크기: 32x32px
    - 배경: KT Red (#E31E24)
    - 아이콘: check (White, 20px)
    - 둥근 모서리: 50% (원형)
  - Image Preview (1:1 비율)
    - 배경: Gray-100 (플레이스홀더)
    - 둥근 모서리: 12px
  - Style Name (H3)
  - Description (Body-S, Secondary)
  - "크게보기" 버튼 (Secondary Button, Small)
  - Radio Input (display: none)

  스타일:
  - 기본: border 3px solid transparent
  - Hover: transform translateY(-2px), 그림자 증가
  - Selected: border-color KT Red, 그림자 강조
  - Cursor: pointer

- Fullscreen Modal
  - 배경: rgba(0, 0, 0, 0.95)
  - Close 버튼 (우측 상단)
  - Image (contain, max 100%)

- Primary Button (다음)

상호작용:
- 카드 클릭: Radio 선택 토글
- Selected 시: 테두리 강조 + 체크 배지 표시
- "크게보기" 클릭: 전체화면 모달 (이벤트 버블링 방지)
- 모달 닫기: 배경 클릭 or X 버튼
- AI 생성 시간: 약 5초 (로딩 표시)

유저스토리: UFR-CONT-010
Progress: 3/7 단계

구현 특징:
- Radio 버튼 숨김 (폼 제출용으로만 사용)
- 카드 전체가 label로 작동
- 이벤트 버블링 방지 (stopPropagation)
- 키보드 접근성 지원 (Tab, Enter)
- transition: all 0.3s ease
```

#### 10-콘텐츠편집.html

```
레이아웃:
- Mobile: 세로 스택 (편집폼 → 미리보기)
- Desktop: 좌우 분할 (편집폼 | 미리보기)

섹션:
1. 텍스트 편집 (좌측)
   - 제목 입력
   - 경품 입력
   - 참여 안내 입력

2. 미리보기 (우측)
   - 실시간 업데이트

삭제된 기능:
- 로고 위치 선택 (상단/하단/중앙)
- 로고 크기 조정

컴포넌트:
- Text Input (제목)
- Text Input (경품)
- Textarea (참여 안내)
- Preview Card (실시간)
- Primary Button (다음)
- Secondary Button (저장)

상호작용:
- 입력 시 실시간 미리보기 업데이트

유저스토리: UFR-CONT-020
Progress: 4/7 단계
```

#### 11-배포채널선택.html

```
레이아웃: 세로 스크롤

섹션:
1. 채널 선택 (복수 선택)
   - 우리동네TV (Checkbox)
   - 링고비즈 (Checkbox)
   - SNS (Checkbox)
   - QR코드 (Checkbox)

2. 채널별 옵션 (조건부 표시)
   - 우리동네TV: 지역 선택
   - SNS: 플랫폼 선택 (Instagram, Naver, Facebook)
   - QR코드: 생성 옵션

컴포넌트:
- Checkbox List (채널)
- Conditional Options (각 채널)
- Primary Button (다음)

상호작용:
- 채널 선택 시 해당 옵션 표시
- 최소 1개 선택 필수

유저스토리: UFR-DIST-010
Progress: 5/7 단계
```

#### 12-최종승인.html

```
레이아웃: 세로 스크롤

섹션:
1. 이벤트 요약
   - 제목, 경품, 참여 방법
2. 이미지 미리보기
3. 배포 채널
4. 일정 설정
   - 시작일: 즉시 or 예약
   - 종료일: 선택

컴포넌트:
- Summary Card (요약 정보)
- Image Preview
- Channel Badges
- Date Picker (일정)
- Primary Button (승인 및 배포)
- Secondary Button (수정)

상호작용:
- 수정: 이전 단계로 이동
- 승인: 이벤트 생성 및 배포

유저스토리: UFR-DIST-020
Progress: 7/7 단계
```

### 4.4 이벤트 관리 및 모니터링

#### 13-이벤트상세.html

```
레이아웃: 세로 스크롤

섹션:
1. 이벤트 헤더
   - 이미지 썸네일
   - 제목, 상태, 기간

2. 실시간 KPI (4개 카드)
   - 참여자 수
   - 조회수
   - ROI
   - 전환율

3. 빠른 액션
   - 참여자 목록
   - 당첨자 관리
   - 성과 분석
   - 이벤트 수정

4. 참여 추이 차트

컴포넌트:
- Event Header (이미지 + 정보)
- KPI Card (4개, 그리드)
- Action Button (4개, 그리드)
- Chart (참여 추이)

유저스토리: UFR-EVENT-060
Bottom Nav: 이벤트 탭 활성화
```

#### 14-참여자목록.html

```
레이아웃: 세로 스크롤

섹션:
1. 검색 바
2. 필터 (채널, 상태)
3. 참여자 카드 리스트
4. 페이지네이션
5. 엑셀 다운로드 (Desktop)

컴포넌트:
- Search Input
- Filter Dropdowns
- Participant Card (리스트)
  - 이름, 전화번호, 참여 경로, 일시, 당첨 여부
- Pagination
- Download Button (Desktop)

상호작용:
- 카드 클릭: 참여자 상세 모달

유저스토리: UFR-PART-020
```

#### 15-이벤트참여.html

```
유형: 고객용 화면 (공개 URL)

레이아웃: 세로 스크롤

섹션:
1. 이벤트 이미지
2. 이벤트 정보
   - 제목, 경품, 참여 방법
3. 참여 폼
   - 이름, 전화번호 입력
4. 개인정보 동의
5. 참여하기 버튼

컴포넌트:
- Event Banner (이미지)
- Info Card (정보)
- Text Input (이름, 전화번호)
- Checkbox (동의)
- Primary Button (참여하기)

상호작용:
- 유효성 검증
- 중복 참여 방지
- 참여 완료 모달

유저스토리: UFR-PART-010
```

#### 16-당첨자추첨.html

```
레이아웃: 세로 스크롤

섹션:
1. 추첨 설정
   - 당첨자 수 입력
   - 자동 추첨 버튼

2. 당첨자 목록 (추첨 후)
   - 이름, 전화번호, 당첨 경품

3. 액션
   - 문자 발송
   - 엑셀 다운로드

컴포넌트:
- Number Input (당첨자 수)
- Primary Button (추첨)
- Winner Card (리스트)
- Action Buttons (문자, 다운로드)

상호작용:
- 추첨: 애니메이션 효과
- 결과: 즉시 표시

유저스토리: UFR-PART-030
```

#### 17-성과분석.html

```
레이아웃: 세로 스크롤

섹션:
1. 요약 KPI (4개 카드)
   - 참여자 수
   - 총 비용
   - 예상 수익
   - ROI

2. 차트 (2개, 그리드)
   - 채널별 성과 (파이 차트)
   - 시간대별 참여 추이 (라인 차트)

3. 상세 분석 (2개, 그리드)
   - ROI 상세 (테이블)
   - 참여자 프로필 (바 차트)

컴포넌트:
- Summary Card (4개, 그리드)
- Chart Card (파이, 라인)
- Table (ROI 상세)
- Bar Chart (참여자 프로필)
- Refresh Indicator (실시간 업데이트)

상호작용:
- Pull to Refresh (모바일)
- 5분마다 자동 갱신

유저스토리: UFR-ANAL-010
Bottom Nav: 분석 탭 활성화
```

---

## 5. 반응형 디자인

### 5.1 Breakpoints

```
Mobile (기본): 320px ~ 767px
Tablet: 768px ~ 1023px
Desktop: 1024px 이상
```

### 5.2 레이아웃 변화

#### 대시보드 (05)

```
Mobile:  KPI 세로 스택
Tablet:  KPI 2x2 그리드, 이벤트 2열
Desktop: KPI 4열, 이벤트 3열 + 사이드바
```

#### 이벤트 생성 (09, 10)

```
Mobile:  세로 스택
Tablet:  세로 스택 (간격 증가)
Desktop: 좌우 분할 (편집 | 미리보기)
```

#### 성과 분석 (17)

```
Mobile:  차트 세로 스택
Tablet:  차트 2x1 그리드
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**: 컨텍스트 메뉴 표시

---

## 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 텍스트

---

## 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**: 애니메이션 직전만 적용

---

## 9. 에러 처리

### 9.1 네트워크 에러

```
표시: Toast (빨간색)
메시지: "네트워크 연결을 확인해주세요"
액션: 재시도 버튼
```

### 9.2 Validation 에러

```
표시: Input 하단 메시지
색상: Error Red (#D32F2F)
예시: "이메일 형식이 올바르지 않습니다"
```

### 9.3 서버 에러

```
표시: Modal Dialog
메시지: "일시적인 오류가 발생했습니다. 잠시 후 다시 시도해주세요."
액션: 확인 버튼
```

### 9.4 Empty State

```
표시: 중앙 정렬 메시지 + 아이콘
예시:
- "아직 이벤트가 없습니다"
- "참여자가 없습니다"
액션: 관련 CTA 버튼
```

---

## 10. 디자인 시스템 참조

- **스타일 가이드**: design/uiux/style-guide.md
- **색상 시스템**: KT Red (#E31E24), AI Blue (#0066FF)
- **타이포그래피**: Pretendard, 8단계 스케일
- **간격 시스템**: 4px 기반, 6단계
- **컴포넌트**: Button, Card, Input, Modal, Toast, Bottom Nav
- **아이콘**: Material Icons Outlined/Filled

---

## 11. 변경 이력

### Version 2.1 (2025-10-21)

- 프로토타입 실제 구현 내용 반영
- 08-AI이벤트추천: 예산별 2가지 방식(온라인/오프라인) 상세화
- 08-AI이벤트추천: Budget Navigation (Sticky) 추가
- 08-AI이벤트추천: Editable Field (인라인 편집) 기능 추가
- 09-콘텐츠미리보기: Selection Card 세부 구현 상세 기술
- 09-콘텐츠미리보기: Fullscreen Modal, 이벤트 버블링 방지 추가

### Version 2.0 (2025-10-21)

- 프로토타입 분석 기반 전면 개정
- 화면 번호 체계 정립 (01~17번)
- 네비게이션 구조 변경 (햄버거 메뉴 제거, Bottom Nav 4탭)
- 이벤트 생성 플로우 상세화 (7단계)
- 카드 선택 UI 패턴 추가 (09-콘텐츠미리보기)
- 로고 위치 선택 삭제 (10-콘텐츠편집)
- 성과 분석 Bottom Nav 추가 (17-성과분석)
- 실시간 KPI 업데이트 추가 (13-이벤트상세)

### Version 1.0 (2025-10-17)

- 초안 작성

---

**문서 끝**