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

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

## 문서 정보
- 작성일: 2025-10-17
- 버전: 1.0
- 설계 원칙: Mobile First, 유저스토리 기반, 우선순위 중심

---

## 1. 프로토타입 화면 목록 정의

### 1.1 소상공인용 앱/웹 (26개 화면)

#### User 서비스
1. **01-회원가입** - 소상공인 회원가입 (UFR-USER-010)
2. **02-매장정보등록** - 매장 정보 및 사업자번호 검증 (UFR-USER-020)

#### Event Planning 서비스
3. **03-이벤트목적선택** - 이벤트 목적 설정 (UFR-PLAN-010)
4. **04-AI트렌드분석결과** - 업종/지역 트렌드 분석 결과 (UFR-PLAN-020)
5. **05-AI경품추천** - 예산 기반 경품 추천 (UFR-PLAN-030)
6. **06-AI참여방법설계** - 참여 방법 옵션 제시 (UFR-PLAN-040)
7. **07-AI홍보문구생성** - 홍보 문구 및 해시태그 생성 (UFR-PLAN-050)
8. **08-이벤트기획안승인** - 완성된 기획안 검토 및 승인 (UFR-PLAN-060)

#### Content Generation 서비스
9. **09-AI이미지생성** - 브랜드 컬러/로고 기반 이미지 생성 (UFR-CONT-010)
10. **10-AI영상제작** - 15초 홍보 영상 제작 (UFR-CONT-020)
11. **11-SNS콘텐츠생성** - 플랫폼별 최적화 콘텐츠 (UFR-CONT-030)
12. **12-QR포스터생성** - 인쇄용 QR 포스터 (UFR-CONT-040)
13. **13-콘텐츠편집** - 생성된 콘텐츠 수정 (UFR-CONT-050)
14. **14-콘텐츠최종승인** - 콘텐츠 미리보기 및 승인 (UFR-CONT-060)

#### Distribution 서비스
15. **15-다중채널배포설정** - 배포 채널 선택 및 일정 설정 (UFR-DIST-010)
16. **16-배포진행상태** - 채널별 배포 진행 상황 (UFR-DIST-020~050)
17. **17-오프라인자료다운로드** - QR 포스터 및 인쇄물 다운로드 (UFR-DIST-060)

#### Participation 서비스
18. **18-이벤트참여신청** - 고객용 이벤트 참여 화면 (UFR-PART-010)
19. **19-참여완료** - 응모번호 발급 화면 (UFR-PART-010)
20. **20-당첨자명단관리** - 당첨자 조회 및 경품 지급 관리 (UFR-PART-050)

#### Analytics 서비스
21. **21-실시간대시보드** - 이벤트 성과 실시간 모니터링 (UFR-ANAL-010)
22. **22-채널별성과분석** - 채널별 노출/참여율 비교 (UFR-ANAL-020)
23. **23-ROI분석** - 투자 대비 수익 분석 (UFR-ANAL-030)
24. **24-분석리포트** - PDF 종합 리포트 (UFR-ANAL-040)

#### AI Learning 서비스
25. **25-AI개선안제안** - 이벤트 개선안 제시 (UFR-AIMPR-010)
26. **26-다음이벤트아이디어** - 시즌별 이벤트 아이디어 (UFR-AIMPR-020)

#### 공통
27. **00-메인대시보드** - 홈 화면 (진입점)
28. **99-마이페이지** - 사용자 설정 및 정보

---

## 2. 화면 간 사용자 플로우 정의

### 2.1 신규 가입 플로우
```
01-회원가입
  → KT 본인 인증
  → 02-매장정보등록
  → 사업자번호 검증
  → 무료 체험 쿠폰 발급
  → 00-메인대시보드
```

### 2.2 이벤트 생성 플로우 (핵심)
```
00-메인대시보드
  → 03-이벤트목적선택
  → 04-AI트렌드분석결과 (AI 처리 3초)
  → 05-AI경품추천 (AI 처리 3초)
  → 06-AI참여방법설계 (AI 처리 2초)
  → 07-AI홍보문구생성 (AI 처리 2초)
  → 08-이벤트기획안승인
  → 09-AI이미지생성 (AI 처리 90초)
  → 10-AI영상제작 (AI 처리 90초, 병렬)
  → 11-SNS콘텐츠생성 (20초)
  → 12-QR포스터생성 (10초)
  → [선택] 13-콘텐츠편집
  → 14-콘텐츠최종승인
  → 15-다중채널배포설정
  → 16-배포진행상태
  → 17-오프라인자료다운로드
  → 21-실시간대시보드
```

**총 소요 시간:** 기획 10초 + 콘텐츠 3분 + 배포 1분 = 약 4분 10초

### 2.3 이벤트 관리 플로우
```
00-메인대시보드
  → 21-실시간대시보드 (진행중 이벤트 선택)
  → [탭 전환] 22-채널별성과분석
  → [탭 전환] 23-ROI분석
  → 24-분석리포트 (PDF 다운로드)
  → 20-당첨자명단관리
  → 25-AI개선안제안
  → 26-다음이벤트아이디어
  → [순환] 03-이벤트목적선택 (새 이벤트)
```

### 2.4 고객 참여 플로우 (별도 고객용 페이지)
```
이벤트 발견 (SNS/QR/TV/Blog)
  → 18-이벤트참여신청
  → 정보 입력 (이름, 전화번호)
  → 중복 체크
  → 19-참여완료 (응모번호 발급)
  → 당첨 발표일 대기
  → SMS/알림톡 수신
```

---

## 3. 화면별 상세 설계

### 3.1 공통 화면

#### 00-메인대시보드 (홈)

**개요**
- 목적: 이벤트 현황 한눈에 파악, 빠른 액션
- 관련 유저스토리: 전체 서비스 진입점
- 비즈니스 중요도: ⭐⭐⭐⭐⭐ (최상)

**주요 기능**
- 새 이벤트 빠른 생성
- 진행중 이벤트 현황 확인
- 주요 지표 요약 (참여자 수, ROI)
- 알림 및 액션 아이템

**UI 구성요소**
```
┌─────────────────────────────┐
│ 🏪 [매장명]        🔔 ⚙️    │ ← 헤더
├─────────────────────────────┤
│                             │
│  ┌─────────────────────┐   │
│  │  ➕ 새 이벤트 만들기 │   │ ← 대형 CTA
│  └─────────────────────┘   │
│                             │
│  🎪 진행중 이벤트 (2)       │
│  ┌─────────────────────┐   │
│  │ 🎁 가을맞이 특별할인  │   │
│  │ 참여 152명 · D-7    │   │
│  │ [상세보기 →]        │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 🍕 신메뉴 이벤트     │   │
│  │ 참여 89명 · D-14    │   │
│  │ [상세보기 →]        │   │
│  └─────────────────────┘   │
│                             │
│  📊 이번 달 성과             │
│  참여자 +32% │ ROI 245%    │
│                             │
├─────────────────────────────┤
│ 🏠 홈 │ 🎪 이벤트 │ 📊 분석 │ 👤 │ ← 하단 네비게이션
└─────────────────────────────┘
```

**인터랙션**
- `새 이벤트 만들기` 버튼 → `03-이벤트목적선택` 화면
- 진행중 이벤트 카드 터치 → `21-실시간대시보드` (해당 이벤트)
- 알림 아이콘 → 알림 목록 모달
- 설정 아이콘 → `99-마이페이지`
- 하단 네비게이션 탭 → 해당 화면 전환

---

### 3.2 User 서비스

#### 01-회원가입

**개요**
- 목적: 소상공인 신규 회원 가입
- 관련 유저스토리: UFR-USER-010
- 비즈니스 중요도: ⭐⭐⭐⭐

**주요 기능**
- 기본 정보 입력
- KT 본인 인증
- 중복 가입 방지

**UI 구성요소**
```
┌─────────────────────────────┐
│ ← 회원가입                   │
├─────────────────────────────┤
│                             │
│  환영합니다! 👋              │
│  사장님의 이벤트 성공을       │
│  함께 만들어갑니다           │
│                             │
│  ┌─────────────────────┐   │
│  │ 이름 *              │   │
│  │ [_______________]   │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ 전화번호 *           │   │
│  │ [010-____-____]     │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ 이메일 *            │   │
│  │ [________@_____]    │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │  📱 KT 본인 인증      │   │
│  └─────────────────────┘   │
│                             │
├─────────────────────────────┤
│  [    다음 단계로    ]       │
└─────────────────────────────┘
```

**인터랙션**
- 입력 필드 실시간 검증 (형식 확인)
  - 이름: 2자 이상
  - 전화번호: 010-XXXX-XXXX
  - 이메일: example@domain.com
- `KT 본인 인증` 버튼 → KT 인증 시스템 연동
- 인증 완료 시 인증 토큰 저장
- `다음 단계로` → `02-매장정보등록`
- 중복 가입 시 "이미 가입된 전화번호입니다" 알림

#### 02-매장정보등록

**개요**
- 목적: 맞춤형 이벤트를 위한 매장 정보 수집
- 관련 유저스토리: UFR-USER-020
- 비즈니스 중요도: ⭐⭐⭐⭐

**주요 기능**
- 매장 기본 정보 입력
- 사업자번호 검증
- 무료 체험 쿠폰 자동 발급

**UI 구성요소**
```
┌─────────────────────────────┐
│ ← 매장정보 등록              │
├─────────────────────────────┤
│  매장명 *                    │
│  [___________________]      │
│                             │
│  업종 * ℹ️                   │
│  [드롭다운 ▼]               │
│  음식점 / 카페 / 소매업...   │
│                             │
│  주소 * 🔍                   │
│  [___________________]      │
│  [도로명 주소 검색]          │
│                             │
│  영업시간                     │
│  월 [09:00] ~ [21:00] ✓    │
│  화 [09:00] ~ [21:00] ✓    │
│  수 [09:00] ~ [21:00] ✓    │
│  ...                        │
│                             │
│  사업자번호 * ℹ️              │
│  [___-__-_____]            │
│  [검증하기]                  │
│                             │
│  ✅ 사업자번호 확인 완료       │
│  매장명: OO치킨              │
│  대표자: 홍길동              │
│                             │
├─────────────────────────────┤
│  [    등록 완료    ]         │
└─────────────────────────────┘
```

**인터랙션**
- 업종 드롭다운 → 카테고리 리스트 표시
- 주소 검색 버튼 → 도로명 주소 API 모달
- 영업시간 체크박스 → 요일별 활성화/비활성화
- `검증하기` 버튼 → 국세청 API 연동
  - 형식 검증 (XXX-XX-XXXXX)
  - 사업자번호 유효성 확인
  - 휴폐업 여부 확인
  - 매장명 일치 확인
- 검증 성공 → ✅ 표시 및 사업자 정보 자동 입력
- 검증 실패 → ❌ 오류 메시지 (유효하지 않은 번호 / 휴폐업 등)
- `등록 완료` → 무료 체험 쿠폰 발급 알림 → `00-메인대시보드`

---

### 3.3 Event Planning 서비스

#### 03-이벤트목적선택

**개요**
- 목적: 이벤트 방향성 설정
- 관련 유저스토리: UFR-PLAN-010
- 비즈니스 중요도: ⭐⭐⭐⭐⭐

**주요 기능**
- 4가지 목적 중 선택
- 목적별 설명 및 효과 제시

**UI 구성요소**
```
┌─────────────────────────────┐
│ ← 이벤트 목적 선택           │
├─────────────────────────────┤
│                             │
│  어떤 목적의 이벤트를         │
│  만드실 건가요? 🎯           │
│                             │
│  ┌─────────────────────┐   │
│  │ 👥 신규고객 유치 ℹ️  │   │
│  │ 새로운 고객을 확보하고│   │
│  │ 매장 인지도를 높입니다│   │
│  │ 예상 효과: 신규 방문  │   │
│  │ +25% ↑              │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ 🔄 재방문 유도 ℹ️     │   │
│  │ 기존 고객의 재방문을  │   │
│  │ 촉진합니다           │   │
│  │ 예상 효과: 재방문율  │   │
│  │ +40% ↑              │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ 💰 매출 증대 ℹ️       │   │
│  │ 단기 매출 향상에     │   │
│  │ 집중합니다           │   │
│  │ 예상 효과: 매출      │   │
│  │ +35% ↑              │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ 📢 인지도 향상 ℹ️     │   │
│  │ 브랜드 인지도를      │   │
│  │ 제고합니다           │   │
│  │ 예상 효과: SNS 공유  │   │
│  │ +50% ↑              │   │
│  └─────────────────────┘   │
│                             │
├─────────────────────────────┤
│  [       다음       ]       │
└─────────────────────────────┘
```

**인터랙션**
- 카드 터치 → 라디오 버튼 선택 + 카드 강조 (테두리 색상)
- ℹ️ 아이콘 터치 → 상세 설명 모달
  - 예시 이벤트
  - 성공 사례
  - 권장 경품 유형
- 선택 전: `다음` 버튼 비활성화 (회색)
- 선택 후: `다음` 버튼 활성화 (파란색)
- `다음` 버튼 → AI 트렌드 분석 시작 (로딩 3초) → `04-AI트렌드분석결과`

#### 04-AI트렌드분석결과

**개요**
- 목적: 업종/지역 트렌드 기반 성공 전략 제시
- 관련 유저스토리: UFR-PLAN-020
- 비즈니스 중요도: ⭐⭐⭐⭐

**주요 기능**
- AI 트렌드 분석 결과 표시
- 추천 이벤트 방향 제시
- 예상 성공률 표시

**UI 구성요소**
```
┌─────────────────────────────┐
│ ← AI 트렌드 분석             │
├─────────────────────────────┤
│                             │
│  🤖 AI가 분석한 결과예요     │
│                             │
│  📍 우리 매장 정보            │
│  업종: 음식점 (치킨)         │
│  지역: 수원시 영통구         │
│  시즌: 가을 (10월)          │
│                             │
│  📊 주요 트렌드 (Top 3)      │
│  ┌─────────────────────┐   │
│  │ 1️⃣ 할로윈 테마       │   │
│  │ 10월 성공률 85% ⬆️   │   │
│  │ 유사 업종 성공 사례   │   │
│  │ 12건                │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 2️⃣ 단체 할인         │   │
│  │ 영통구 인기 78% ⬆️   │   │
│  │ 평균 참여율 +42%    │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 3️⃣ SNS 친구 초대     │   │
│  │ 바이럴 효과 72% ⬆️   │   │
│  │ 공유율 평균 2.3배   │   │
│  └─────────────────────┘   │
│                             │
│  💡 추천 전략                │
│  할로윈 테마 + 단체 할인 조합│
│  예상 성공률: 89% 🎯        │
│                             │
├─────────────────────────────┤
│  [   경품 추천 받기   ]      │
└─────────────────────────────┘
```

**인터랙션**
- 트렌드 카드 터치 → 상세 설명 확장
  - 성공 사례 리스트
  - 참여율 그래프
- `경품 추천 받기` → AI 경품 추천 시작 (로딩 3초) → `05-AI경품추천`

#### 05-AI경품추천

**개요**
- 목적: 예산 대비 최적 경품 선정
- 관련 유저스토리: UFR-PLAN-030
- 비즈니스 중요도: ⭐⭐⭐⭐⭐

**주요 기능**
- 예산 설정
- AI 추천 경품 Top 5 제시
- 예상 참여율 표시

**UI 구성요소**
```
┌─────────────────────────────┐
│ ← AI 경품 추천               │
├─────────────────────────────┤
│                             │
│  💰 예산 설정                │
│  ┌─────────────────────┐   │
│  │ 500,000원           │   │
│  │ ●────────────○      │   │ ← 슬라이더
│  │ 10,000원 ~ 5,000,000원│  │
│  └─────────────────────┘   │
│                             │
│  🎁 추천 경품 Top 5          │
│                             │
│  ┌─────────────────────┐   │
│  │ ○ 1. 치킨세트 무료   │   │
│  │    └ 💰 50만원       │   │
│  │    └ 📊 예상 참여율   │   │
│  │       ████████░░ 85% │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ ○ 2. KT 멤버십 포인트│   │
│  │    └ 💰 40만원       │   │
│  │    └ 📊 예상 참여율   │   │
│  │       ███████░░░ 72% │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ ○ 3. 커피 쿠폰 10매  │   │
│  │    └ 💰 30만원       │   │
│  │    └ 📊 예상 참여율   │   │
│  │       ██████░░░░ 68% │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ ○ 4. 영화 예매권     │   │
│  │    └ 💰 25만원       │   │
│  │    └ 📊 예상 참여율   │   │
│  │       █████░░░░░ 65% │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ ○ 5. 편의점 상품권   │   │
│  │    └ 💰 20만원       │   │
│  │    └ 📊 예상 참여율   │   │
│  │       ████░░░░░░ 60% │   │
│  └─────────────────────┘   │
│                             │
├─────────────────────────────┤
│  [    선택 완료    ]         │
└─────────────────────────────┘
```

**인터랙션**
- 예산 슬라이더 조정 → 실시간 경품 목록 업데이트 (1초 디바운스)
- 경품 카드 터치 → 라디오 버튼 선택 + 상세 정보 확장
  - 경품 이미지
  - 타겟 고객층 매력도
  - 유사 이벤트 성공 사례
- `선택 완료` → AI 참여방법 설계 시작 (로딩 2초) → `06-AI참여방법설계`

#### 06-AI참여방법설계

**개요**
- 목적: 참여 난이도와 바이럴 효과를 고려한 참여 방법 선택
- 관련 유저스토리: UFR-PLAN-040
- 비즈니스 중요도: ⭐⭐⭐⭐

**주요 기능**
- 3가지 참여 방법 옵션 제시
- 난이도 및 예상 참여율 표시

**UI 구성요소**
```
┌─────────────────────────────┐
│ ← 참여 방법 설계             │
├─────────────────────────────┤
│                             │
│  🎯 참여 방법을 선택하세요    │
│                             │
│  ┌─────────────────────┐   │
│  │ ○ 옵션 1: 간편 참여  │   │
│  │                     │   │
│  │ QR 코드 스캔 →      │   │
│  │ 정보 입력 → 완료    │   │
│  │                     │   │
│  │ 난이도: ⭐ 쉬움      │   │
│  │ 예상 참여율: 75%    │   │
│  │ 바이럴 효과: 낮음   │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ ○ 옵션 2: 재방문 유도│   │
│  │                     │   │
│  │ 매장 방문 →         │   │
│  │ 리뷰 작성 → 응모    │   │
│  │                     │   │
│  │ 난이도: ⭐⭐ 보통    │   │
│  │ 예상 참여율: 58%    │   │
│  │ 바이럴 효과: 중간   │   │
│  │ 🎁 재방문 가산점    │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ ○ 옵션 3: 바이럴형   │   │
│  │                     │   │
│  │ SNS 공유 →          │   │
│  │ 친구 3명 태그 → 응모│   │
│  │                     │   │
│  │ 난이도: ⭐⭐⭐ 어려움│   │
│  │ 예상 참여율: 42%    │   │
│  │ 바이럴 효과: 높음   │   │
│  │ 🔥 확산력 3.2배     │   │
│  └─────────────────────┘   │
│                             │
├─────────────────────────────┤
│  [    선택 완료    ]         │
└─────────────────────────────┘
```

**인터랙션**
- 옵션 카드 터치 → 라디오 버튼 선택 + 상세 시나리오 확장
- 각 옵션별 예상 시나리오 애니메이션
- `선택 완료` → AI 홍보문구 생성 시작 (로딩 2초) → `07-AI홍보문구생성`

#### 07-AI홍보문구생성

**개요**
- 목적: 매력적인 홍보 문구 및 해시태그 생성
- 관련 유저스토리: UFR-PLAN-050
- 비즈니스 중요도: ⭐⭐⭐⭐

**주요 기능**
- AI 생성 홍보 문구 5가지 버전
- SNS 해시태그 자동 생성
- 플랫폼별 최적화 미리보기

**UI 구성요소**
```
┌─────────────────────────────┐
│ ← AI 홍보 문구 생성          │
├─────────────────────────────┤
│                             │
│  ✨ AI가 만든 홍보 문구       │
│                             │
│  ┌─────────────────────┐   │
│  │ ○ 버전 1 (친근함)    │   │
│  │                     │   │
│  │ "🎃 할로윈 특별 이벤트!│   │
│  │ 치킨 먹고 경품 받자~ │   │
│  │ 지금 바로 참여하세요!"│  │
│  │                     │   │
│  │ [미리보기]          │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ ○ 버전 2 (공식적)    │   │
│  │                     │   │
│  │ "왕갈비통닭의 가을   │   │
│  │ 고객 감사 이벤트.    │   │
│  │ 총 500만원 상당의    │   │
│  │ 경품을 드립니다."    │   │
│  │                     │   │
│  │ [미리보기]          │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ ○ 버전 3 (트렌디)    │   │
│  │                     │   │
│  │ "요즘 핫한 우리 매장💯│  │
│  │ 이벤트로 더 핫하게!  │   │
│  │ 놓치면 후회할걸?🔥"  │   │
│  │                     │   │
│  │ [미리보기]          │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ ○ 버전 4 (감성적)    │   │
│  │ ...                 │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ ○ 버전 5 (유머러스)  │   │
│  │ ...                 │   │
│  └─────────────────────┘   │
│                             │
│  📱 추천 해시태그            │
│  #왕갈비통닭 #수원맛집       │
│  #할로윈이벤트 #치킨이벤트   │
│  #영통구맛집               │
│                             │
├─────────────────────────────┤
│  [문구 직접 편집] [선택 완료]│
└─────────────────────────────┘
```

**인터랙션**
- 버전 카드 터치 → 라디오 버튼 선택
- `미리보기` 버튼 → 플랫폼별 미리보기 모달
  - Instagram 피드 모의 화면
  - Naver Blog 게시글 형식
  - Kakao Channel 메시지 형식
- `문구 직접 편집` → 텍스트 에디터 모달
- `선택 완료` → `08-이벤트기획안승인`

#### 08-이벤트기획안승인

**개요**
- 목적: 완성된 기획안 최종 검토 및 승인
- 관련 유저스토리: UFR-PLAN-060
- 비즈니스 중요도: ⭐⭐⭐⭐⭐

**주요 기능**
- 전체 기획 내용 요약 표시
- 수정 및 승인 기능
- 예상 효과 제시

**UI 구성요소**
```
┌─────────────────────────────┐
│ ← 기획안 최종 검토           │
├─────────────────────────────┤
│                             │
│  ✅ 이벤트 기획이 완료되었어요│
│                             │
│  📋 기획안 요약              │
│  ┌─────────────────────┐   │
│  │ 🎯 목적: 신규고객 유치│   │
│  │ [수정]              │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 🎁 경품: 치킨세트 무료│   │
│  │ 예산: 500,000원     │   │
│  │ [수정]              │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 🎯 참여방법: QR 스캔 │   │
│  │ 난이도: 쉬움        │   │
│  │ [수정]              │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ ✨ 홍보문구          │   │
│  │ "🎃 할로윈 특별..."  │   │
│  │ [수정]              │   │
│  └─────────────────────┘   │
│                             │
│  📊 예상 효과                │
│  ┌─────────────────────┐   │
│  │ 예상 참여자: 500명   │   │
│  │ 예상 ROI: 245%      │   │
│  │ 매출 증가: +35%     │   │
│  └─────────────────────┘   │
│                             │
│  ⏱️ 기획 소요 시간: 9초      │
│                             │
├─────────────────────────────┤
│  [이전 단계] [기획안 승인]   │
└─────────────────────────────┘
```

**인터랙션**
- 각 섹션 `수정` 버튼 → 해당 단계로 이동
- `이전 단계` → `07-AI홍보문구생성`
- `기획안 승인` → 기획안 DB 저장 + 이벤트 ID 생성 → `09-AI이미지생성`

---

### 3.4 Content Generation 서비스

#### 09-AI이미지생성

**개요**
- 목적: 브랜드 컬러/로고 기반 홍보 이미지 생성
- 관련 유저스토리: UFR-CONT-010
- 비즈니스 중요도: ⭐⭐⭐⭐⭐

**주요 기능**
- 브랜드 컬러 설정
- 로고 업로드
- AI 이미지 3종 생성

**UI 구성요소**
```
┌─────────────────────────────┐
│ ← AI 이미지 생성             │
├─────────────────────────────┤
│                             │
│  🎨 브랜드 설정              │
│  ┌─────────────────────┐   │
│  │ 브랜드 컬러          │   │
│  │ [🔴] #FF5733        │   │ ← 컬러 피커
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 로고 업로드          │   │
│  │ [📁 파일 선택]      │   │
│  │ PNG, JPG (최대 5MB) │   │
│  └─────────────────────┘   │
│                             │
│  🤖 AI 이미지 생성 중...     │
│  [████████████░░░] 85%      │
│  예상 소요 시간: 15초 남음   │
│                             │
│  ✅ 생성 완료!               │
│                             │
│  📸 생성된 이미지 (3종)      │
│  ┌─────────────────────┐   │
│  │ ○ 1. 심플 스타일     │   │
│  │ [        이미지      ]│  │
│  │ 미니멀 디자인        │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ ○ 2. 화려한 스타일   │   │
│  │ [        이미지      ]│  │
│  │ 풍성한 그래픽        │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ ○ 3. 트렌디 스타일   │   │
│  │ [        이미지      ]│  │
│  │ 최신 디자인 트렌드   │   │
│  └─────────────────────┘   │
│                             │
├─────────────────────────────┤
│  [재생성] [선택 완료]        │
└─────────────────────────────┘
```

**인터랙션**
- 컬러 피커 → HEX 코드 입력 또는 팔레트 선택
- `파일 선택` → 로컬 파일 업로드 (5MB 제한)
- 생성 중 프로그레스 바 표시 (90초)
- 이미지 카드 터치 → 전체 화면 미리보기
- `재생성` → 다시 AI 생성 (동일 설정)
- `선택 완료` → 선택한 이미지 저장 → `10-AI영상제작` (병렬 처리)

#### 10-AI영상제작

**개요**
- 목적: 15초 홍보 영상 자동 제작
- 관련 유저스토리: UFR-CONT-020
- 비즈니스 중요도: ⭐⭐⭐⭐⭐

**주요 기능**
- 배경 음악 선택
- 텍스트 오버레이 편집
- 15초 영상 생성

**UI 구성요소**
```
┌─────────────────────────────┐
│ ← AI 영상 제작               │
├─────────────────────────────┤
│                             │
│  🎬 영상 설정                │
│  ┌─────────────────────┐   │
│  │ 배경 음악 선택 🎵    │   │
│  │ [드롭다운 ▼]        │   │
│  │ • 경쾌한 팝          │   │
│  │ • 차분한 재즈        │   │
│  │ • 신나는 일렉        │   │
│  │ [미리듣기 ▶️]        │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ 텍스트 오버레이      │   │
│  │ [________________]  │   │
│  │ "🎃 할로윈 특별..."  │   │ ← 기획안 연동
│  │ [편집]              │   │
│  └─────────────────────┘   │
│                             │
│  🤖 AI 영상 제작 중...       │
│  [██████████░░░░] 70%       │
│  예상 소요 시간: 27초 남음   │
│                             │
│  ✅ 제작 완료!               │
│                             │
│  🎥 영상 미리보기            │
│  ┌─────────────────────┐   │
│  │                     │   │
│  │    [ ▶️ 재생 ]      │   │
│  │                     │   │
│  │  00:00 ━━●━━ 00:15  │   │
│  └─────────────────────┘   │
│                             │
│  💾 다운로드 가능            │
│  • 영상 파일 (MP4)          │
│  • 자막 파일 (SRT)          │
│                             │
├─────────────────────────────┤
│  [재제작] [다음 단계]        │
└─────────────────────────────┘
```

**인터랙션**
- 배경 음악 드롭다운 → 목록 선택
- `미리듣기` → 음악 재생 (5초 미리듣기)
- 텍스트 오버레이 `편집` → 텍스트 에디터 모달
- 생성 중 프로그레스 바 (90초, 이미지 생성과 병렬)
- 영상 재생 컨트롤 (재생/일시정지, 시크바)
- `재제작` → 설정 변경 후 다시 생성
- `다음 단계` → `11-SNS콘텐츠생성`

#### 11-SNS콘텐츠생성

**개요**
- 목적: 플랫폼별 최적화 콘텐츠 생성
- 관련 유저스토리: UFR-CONT-030
- 비즈니스 중요도: ⭐⭐⭐⭐

**주요 기능**
- 플랫폼 선택
- 자동 해상도 조정
- 게시 텍스트 생성

**UI 구성요소**
```
┌─────────────────────────────┐
│ ← SNS 콘텐츠 생성            │
├─────────────────────────────┤
│                             │
│  📱 플랫폼 선택              │
│  ┌─────────────────────┐   │
│  │ ✅ Instagram (필수)  │   │
│  │ 1080x1080 정사각형   │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ ☐ Naver Blog        │   │
│  │ 800x600 가로형      │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ ☐ Kakao Channel     │   │
│  │ 800x800 정사각형    │   │
│  └─────────────────────┘   │
│                             │
│  🎨 생성 완료! (2종)         │
│                             │
│  📸 Instagram                │
│  ┌─────────────────────┐   │
│  │   [   이미지   ]    │   │
│  │ 1080x1080px         │   │
│  └─────────────────────┘   │
│  📝 게시 텍스트              │
│  "🎃 할로윈 특별 이벤트!     │
│  #왕갈비통닭 #수원맛집..."   │
│  [미리보기]                 │
│                             │
│  📸 Naver Blog               │
│  ┌─────────────────────┐   │
│  │   [   이미지   ]    │   │
│  │ 800x600px           │   │
│  └─────────────────────┘   │
│  📝 게시 텍스트              │
│  "수원 왕갈비통닭의..."      │
│  [미리보기]                 │
│                             │
├─────────────────────────────┤
│  [💾 전체 다운로드] [다음]   │
└─────────────────────────────┘
```

**인터랙션**
- 플랫폼 체크박스 → 선택/해제
- Instagram은 필수 선택 (비활성화)
- 플랫폼 선택 변경 → 자동 재생성 (20초)
- `미리보기` → 플랫폼별 게시 화면 모의
- `전체 다운로드` → ZIP 파일 다운로드
- `다음` → `12-QR포스터생성`

#### 12-QR포스터생성

**개요**
- 목적: 오프라인 홍보용 QR 포스터 생성
- 관련 유저스토리: UFR-CONT-040
- 비즈니스 중요도: ⭐⭐⭐

**주요 기능**
- QR 코드 생성
- 포스터 크기 선택
- 인쇄 최적화

**UI 구성요소**
```
┌─────────────────────────────┐
│ ← QR 포스터 생성             │
├─────────────────────────────┤
│                             │
│  📋 포스터 설정              │
│  ┌─────────────────────┐   │
│  │ 크기 선택            │   │
│  │ ○ A4 (210x297mm)    │   │
│  │ ○ A3 (297x420mm)    │   │
│  └─────────────────────┘   │
│                             │
│  🔗 QR 연결 URL              │
│  https://event.kt.com/...   │ ← 자동 생성
│                             │
│  ✅ 생성 완료!               │
│                             │
│  🖼️ 포스터 미리보기          │
│  ┌─────────────────────┐   │
│  │                     │   │
│  │   [배경 이미지]     │   │
│  │                     │   │
│  │  🎃 할로윈 특별 이벤트│  │
│  │                     │   │
│  │    [QR 코드]        │   │
│  │ 스캔하고 참여하세요! │   │
│  │                     │   │
│  │  기간: 10/20~10/31  │   │
│  │  경품: 치킨세트 무료 │   │
│  │                     │   │
│  └─────────────────────┘   │
│                             │
│  💾 다운로드 가능            │
│  • A4 포스터 PDF            │
│  • QR 코드 단독 PNG         │
│                             │
├─────────────────────────────┤
│  [다운로드] [다음 단계]      │
└─────────────────────────────┘
```

**인터랙션**
- 크기 라디오 버튼 → 선택 변경 시 재생성
- QR URL 자동 생성 (이벤트 참여 페이지)
- 포스터 미리보기 → 확대/축소 가능
- `다운로드` → PDF 파일 다운로드
- `다음 단계` → `13-콘텐츠편집` 또는 `14-콘텐츠최종승인`

#### 13-콘텐츠편집

**개요**
- 목적: 생성된 콘텐츠 개인화 수정
- 관련 유저스토리: UFR-CONT-050
- 비즈니스 중요도: ⭐⭐⭐

**주요 기능**
- 텍스트 편집
- 색상 조정
- 레이아웃 변경

**UI 구성요소**
```
┌─────────────────────────────┐
│ ← 콘텐츠 편집                │
├─────────────────────────────┤
│                             │
│  ✏️ 편집할 콘텐츠 선택        │
│  ┌─────────────────────┐   │
│  │ 📸 이미지 편집       │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 🎥 영상 편집         │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 📱 SNS 텍스트 편집   │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 🖼️ 포스터 편집       │   │
│  └─────────────────────┘   │
│                             │
│  [예: 이미지 편집 모드]      │
│  ┌─────────────────────┐   │
│  │    [  이미지  ]     │   │
│  └─────────────────────┘   │
│                             │
│  🎨 편집 도구                │
│  ┌─────────────────────┐   │
│  │ T 텍스트            │   │
│  │ [할로윈 특별 이벤트] │   │
│  │ 폰트 [맑은 고딕 ▼]  │   │
│  │ 크기 [24px ▼]       │   │
│  │ 색상 [🔴 #FF5733]   │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 🎨 배경 색상         │   │
│  │ [🟠 #FFA500]        │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 📐 레이아웃          │   │
│  │ [템플릿 1] [템플릿 2]│  │
│  └─────────────────────┘   │
│                             │
│  📜 편집 이력 (최대 3개)     │
│  [원본으로 되돌리기]         │
│                             │
├─────────────────────────────┤
│  [취소] [저장]              │
└─────────────────────────────┘
```

**인터랙션**
- 콘텐츠 카드 선택 → 해당 편집 모드 진입
- 텍스트 편집 → 실시간 미리보기 반영
- 색상 변경 → 컬러 피커
- 레이아웃 템플릿 → 여러 레이아웃 옵션
- `원본으로 되돌리기` → 편집 전 상태로 복원
- `취소` → 편집 내용 버리고 이전 화면
- `저장` → 수정사항 적용 → `14-콘텐츠최종승인`

#### 14-콘텐츠최종승인

**개요**
- 목적: 완성된 콘텐츠 최종 검토
- 관련 유저스토리: UFR-CONT-060
- 비즈니스 중요도: ⭐⭐⭐⭐⭐

**주요 기능**
- 전체 콘텐츠 미리보기
- 콘텐츠 승인 및 저장

**UI 구성요소**
```
┌─────────────────────────────┐
│ ← 콘텐츠 최종 승인           │
├─────────────────────────────┤
│                             │
│  ✅ 모든 콘텐츠가 준비되었어요│
│                             │
│  📦 생성된 콘텐츠 (6종)      │
│                             │
│  ┌─────────────────────┐   │
│  │ 📸 이미지 (심플)     │   │
│  │ [썸네일]   [미리보기]│   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 🎥 15초 영상         │   │
│  │ [썸네일]   [재생 ▶️] │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 📱 Instagram 콘텐츠  │   │
│  │ [썸네일]   [미리보기]│   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 📱 Naver Blog 콘텐츠 │   │
│  │ [썸네일]   [미리보기]│   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 🖼️ A4 QR 포스터      │   │
│  │ [썸네일]   [미리보기]│   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 🖼️ A3 QR 포스터      │   │
│  │ [썸네일]   [미리보기]│   │
│  └─────────────────────┘   │
│                             │
│  ⏱️ 콘텐츠 생성 시간: 2분 45초│
│                             │
├─────────────────────────────┤
│  [수정하기] [콘텐츠 승인]    │
└─────────────────────────────┘
```

**인터랙션**
- `미리보기` / `재생` → 전체 화면 모드
- `수정하기` → `13-콘텐츠편집`
- `콘텐츠 승인` → 콘텐츠 DB 저장 + 콘텐츠 ID 생성 → `15-다중채널배포설정`

---

### 3.5 Distribution 서비스

#### 15-다중채널배포설정

**개요**
- 목적: 여러 채널 동시 배포 설정
- 관련 유저스토리: UFR-DIST-010
- 비즈니스 중요도: ⭐⭐⭐⭐⭐

**주요 기능**
- 배포 채널 선택
- 채널별 세부 설정
- 배포 일정 설정

**UI 구성요소**
```
┌─────────────────────────────┐
│ ← 배포 채널 설정             │
├─────────────────────────────┤
│                             │
│  📡 배포 채널 선택            │
│                             │
│  KT 서비스                   │
│  ┌─────────────────────┐   │
│  │ ☐ 우리동네TV ⚙️      │   │
│  │ 지역 타겟 광고       │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ ☐ 링고비즈 연결음 ⚙️  │   │
│  │ 전화 연결음 업데이트 │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ ☐ 지니TV 광고 ⚙️     │   │
│  │ 가정용 TV 광고       │   │
│  └─────────────────────┘   │
│                             │
│  SNS 플랫폼                  │
│  ┌─────────────────────┐   │
│  │ ✅ Instagram (필수)  │   │
│  │ 계정 연동 완료 ✓    │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ ☐ Naver Blog ⚙️      │   │
│  │ [계정 연동 필요]     │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ ☐ Kakao Channel ⚙️   │   │
│  │ [계정 연동 필요]     │   │
│  └─────────────────────┘   │
│                             │
│  🕐 배포 일시                │
│  ○ 즉시 배포                │
│  ○ 예약 배포                │
│     [2025-10-20] [14:00]   │
│                             │
│  📊 선택된 채널: 1개         │
│                             │
├─────────────────────────────┤
│  [    배포 시작    ]         │
└─────────────────────────────┘
```

**인터랙션**
- 채널 체크박스 → 선택/해제, 선택 수 업데이트
- ⚙️ 설정 아이콘 → 채널별 상세 설정 모달
  - 우리동네TV: 반경 (500m/1km), 송출 시간대
  - 링고비즈: 연결음 미리듣기
  - 지니TV: 타겟 지역, 노출 시간대, 예산
  - SNS: 계정 OAuth 연동, 예약 시간
- Instagram 필수 체크 (비활성화)
- 예약 배포 선택 → 날짜/시간 선택기
- `배포 시작` → 배포 요청 발송 → `16-배포진행상태`

#### 16-배포진행상태

**개요**
- 목적: 채널별 배포 진행 상황 모니터링
- 관련 유저스토리: UFR-DIST-020~050
- 비즈니스 중요도: ⭐⭐⭐⭐

**주요 기능**
- 실시간 배포 상태 표시
- 배포 완료/실패 확인
- 재시도 기능

**UI 구성요소**
```
┌─────────────────────────────┐
│ ← 배포 진행 상황             │
├─────────────────────────────┤
│                             │
│  📡 배포 진행중... (2/4)     │
│  [████████░░░░░░] 50%       │
│                             │
│  ✅ 배포 완료                │
│  ┌─────────────────────┐   │
│  │ Instagram            │   │
│  │ ✓ 포스팅 완료        │   │
│  │ 🔗 게시물 보기       │   │
│  │ 완료 시각: 14:02    │   │
│  └─────────────────────┘   │
│                             │
│  🔄 배포 중                  │
│  ┌─────────────────────┐   │
│  │ 우리동네TV           │   │
│  │ ⏳ 영상 업로드 중...  │   │
│  │ [██████░░░░] 60%    │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 지니TV               │   │
│  │ ⏳ 광고 예약 중...    │   │
│  │ [████░░░░░░] 40%    │   │
│  └─────────────────────┘   │
│                             │
│  ⏸️ 대기중                   │
│  ┌─────────────────────┐   │
│  │ Naver Blog           │   │
│  │ ⏸️ 순서 대기         │   │
│  └─────────────────────┘   │
│                             │
│  ❌ 배포 실패 (재시도 가능)  │
│  ┌─────────────────────┐   │
│  │ 링고비즈             │   │
│  │ ❌ API 연결 오류     │   │
│  │ [재시도 1/3]        │   │
│  └─────────────────────┘   │
│                             │
├─────────────────────────────┤
│  [배포 취소] [완료 대기]     │
└─────────────────────────────┘
```

**인터랙션**
- 실시간 진행 상태 업데이트 (폴링 5초)
- `게시물 보기` 링크 → 해당 플랫폼 게시물 새 탭
- `재시도` 버튼 → 실패한 채널 재배포 (최대 3회)
- 모든 배포 완료 → 자동으로 `17-오프라인자료다운로드`
- `배포 취소` → 진행중인 배포 중단 확인 다이얼로그

#### 17-오프라인자료다운로드

**개요**
- 목적: 오프라인 홍보 자료 다운로드
- 관련 유저스토리: UFR-DIST-060
- 비즈니스 중요도: ⭐⭐⭐

**주요 기능**
- QR 포스터 다운로드
- 인쇄용 파일 제공
- 다운로드 이력 관리

**UI 구성요소**
```
┌─────────────────────────────┐
│ ← 오프라인 자료 다운로드     │
├─────────────────────────────┤
│                             │
│  ✅ 배포가 완료되었습니다!    │
│                             │
│  💾 다운로드 가능 파일        │
│                             │
│  📋 포스터                   │
│  ┌─────────────────────┐   │
│  │ A4 QR 포스터 (PDF)   │   │
│  │ 210x297mm, 300dpi   │   │
│  │ [📥 다운로드]        │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ A3 QR 포스터 (PDF)   │   │
│  │ 297x420mm, 300dpi   │   │
│  │ [📥 다운로드]        │   │
│  └─────────────────────┘   │
│                             │
│  🖼️ 이미지                   │
│  ┌─────────────────────┐   │
│  │ QR 코드 (PNG)        │   │
│  │ 단독 이미지, 1080px  │   │
│  │ [📥 다운로드]        │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 홍보 이미지 (PNG)    │   │
│  │ 고해상도, 1080x1080 │   │
│  │ [📥 다운로드]        │   │
│  └─────────────────────┘   │
│                             │
│  📦 전체 파일                │
│  ┌─────────────────────┐   │
│  │ 모든 파일 (ZIP)      │   │
│  │ 4개 파일, 12.5MB    │   │
│  │ [📥 일괄 다운로드]   │   │
│  └─────────────────────┘   │
│                             │
├─────────────────────────────┤
│  [대시보드로 이동]           │
└─────────────────────────────┘
```

**인터랙션**
- `다운로드` 버튼 → 해당 파일 다운로드
- `일괄 다운로드` → ZIP 파일 생성 후 다운로드
- 다운로드 이력 자동 기록
- `대시보드로 이동` → `21-실시간대시보드`

---

### 3.6 Participation 서비스

#### 18-이벤트참여신청 (고객용)

**개요**
- 목적: 고객의 간편한 이벤트 참여
- 관련 유저스토리: UFR-PART-010
- 비즈니스 중요도: ⭐⭐⭐⭐⭐

**주요 기능**
- 이벤트 정보 표시
- 참여 정보 입력
- 중복 참여 방지

**UI 구성요소**
```
┌─────────────────────────────┐
│                             │
│  [ 이벤트 배너 이미지 ]      │
│                             │
│  🎃 할로윈 특별 이벤트        │
│  왕갈비통닭                  │
│                             │
│  📅 기간: 2025.10.20 ~ 10.31│
│  🎁 경품: 치킨세트 무료 (10명)│
│                             │
│  🎯 참여 방법                │
│  1️⃣ 정보 입력               │
│  2️⃣ 참여 완료               │
│  3️⃣ 당첨자 발표 (11/1)      │
│                             │
│  ────────────────────       │
│                             │
│  👤 고객명 *                 │
│  [___________________]      │
│                             │
│  📱 전화번호 *               │
│  [010-____-____]            │
│                             │
│  📍 참여 경로 *              │
│  ○ Instagram                │
│  ○ Naver Blog               │
│  ○ QR 코드 스캔              │
│  ○ 우리동네TV                │
│  ○ 지니TV                   │
│  ○ 기타                     │
│                             │
│  ┌─────────────────────┐   │
│  │ ☐ 개인정보 수집 및   │   │
│  │    이용 동의 (필수)  │   │
│  │ [약관 보기]          │   │
│  └─────────────────────┘   │
│                             │
│  [    참여하기    ]          │
│                             │
└─────────────────────────────┘
```

**인터랙션**
- 입력 필드 실시간 검증
  - 고객명: 2자 이상
  - 전화번호: 010-XXXX-XXXX 형식
- 참여 경로 자동 추적 (URL 파라미터)
- `약관 보기` → 개인정보 처리방침 모달
- 동의 체크박스 필수
- `참여하기` 버튼 → 중복 체크 → `19-참여완료` 또는 중복 알림

#### 19-참여완료

**개요**
- 목적: 응모번호 발급 및 안내
- 관련 유저스토리: UFR-PART-010
- 비즈니스 중요도: ⭐⭐⭐⭐

**주요 기능**
- 응모번호 발급
- 당첨 발표일 안내
- 참여 정보 확인

**UI 구성요소**
```
┌─────────────────────────────┐
│                             │
│  ✅ 참여가 완료되었습니다!    │
│                             │
│  🎟️ 응모번호                 │
│  ┌─────────────────────┐   │
│  │                     │   │
│  │   EV-20251020-1523  │   │
│  │                     │   │
│  └─────────────────────┘   │
│                             │
│  👤 홍길동님                 │
│  📱 010-1234-5678           │
│                             │
│  📅 당첨 발표일              │
│  2025년 11월 1일 (금)       │
│  오후 2시                   │
│                             │
│  📩 당첨 시 SMS로 알림을      │
│     보내드립니다             │
│                             │
│  🎁 경품                     │
│  치킨세트 무료 (10명)        │
│  수령 기한: 당첨 발표 후 7일 │
│  수령 장소: 왕갈비통닭 매장  │
│                             │
│  ────────────────────       │
│                             │
│  📱 SNS에 공유하고           │
│     친구들도 초대하세요!     │
│  [Instagram 공유]            │
│  [Kakao 공유]                │
│                             │
└─────────────────────────────┘
```

**인터랙션**
- 응모번호 자동 발급 및 표시
- `Instagram 공유` → 공유 시트 (이벤트 페이지 링크)
- `Kakao 공유` → 카카오톡 공유 API
- 화면 스크린샷 저장 가능

#### 20-당첨자명단관리

**개요**
- 목적: 소상공인의 당첨자 관리 및 경품 지급 추적
- 관련 유저스토리: UFR-PART-050
- 비즈니스 중요도: ⭐⭐⭐⭐

**주요 기능**
- 당첨자 명단 조회
- 경품 지급 상태 관리
- 명단 다운로드

**UI 구성요소**
```
┌─────────────────────────────┐
│ ← 당첨자 명단 관리           │
├─────────────────────────────┤
│                             │
│  🏆 이벤트: 할로윈 특별 이벤트│
│  당첨자: 10명               │
│                             │
│  📥 [엑셀 다운로드]          │
│                             │
│  ┌─────────────────────┐   │
│  │ 1. 홍길동            │   │
│  │ 📱 010-1234-5678    │   │
│  │ 🎟️ EV-1523          │   │
│  │ ☐ 경품 지급 완료     │   │
│  │ 참여일: 10/20 14:32 │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ 2. 김철수            │   │
│  │ 📱 010-2345-6789    │   │
│  │ 🎟️ EV-1587          │   │
│  │ ✅ 경품 지급 완료    │   │
│  │ 지급일: 11/2 10:15  │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ 3. 이영희            │   │
│  │ 📱 010-3456-7890    │   │
│  │ 🎟️ EV-1612          │   │
│  │ ☐ 경품 지급 완료     │   │
│  │ 참여일: 10/21 11:08 │   │
│  └─────────────────────┘   │
│                             │
│  ... (7명 더)               │
│                             │
│  📊 지급 현황: 2/10 (20%)   │
│  [██░░░░░░░░]               │
│                             │
├─────────────────────────────┤
│  [참여자 전체 명단 다운로드] │
└─────────────────────────────┘
```

**인터랙션**
- 당첨자 카드 체크박스 → 경품 지급 상태 업데이트
  - 체크 시 지급 일시 자동 기록
  - 당첨자에게 확인 문자 발송 (옵션)
- `엑셀 다운로드` → 당첨자 명단 Excel 파일
- `참여자 전체 명단 다운로드` → 전체 참여자 Excel (분석용)
- 지급 현황 자동 업데이트

---

### 3.7 Analytics 서비스

#### 21-실시간대시보드

**개요**
- 목적: 이벤트 성과 실시간 모니터링
- 관련 유저스토리: UFR-ANAL-010
- 비즈니스 중요도: ⭐⭐⭐⭐⭐

**주요 기능**
- 핵심 지표 실시간 표시
- 채널별 노출/참여 현황
- 자동/수동 새로고침

**UI 구성요소**
```
┌─────────────────────────────┐
│ ← 실시간 대시보드            │  🔄
├─────────────────────────────┤
│                             │
│  🎃 할로윈 특별 이벤트        │
│  진행중 · D-7               │
│  마지막 업데이트: 2분 전      │
│                             │
│  ────────────────────       │
│                             │
│  📊 핵심 지표                │
│  ┌─────────┬─────────┐     │
│  │ 👥 참여자 │ 📺 노출수│     │
│  │         │         │     │
│  │  1,523  │ 45,892  │     │
│  │ ↑ +152  │ ↑ +2.3K │     │
│  │ (+11%)  │ (+5%)   │     │
│  └─────────┴─────────┘     │
│  ┌─────────┬─────────┐     │
│  │ 🏪 방문↑ │ 💰 ROI  │     │
│  │         │         │     │
│  │  +32%   │  245%   │     │
│  │ vs 평균 │ 예상치  │     │
│  └─────────┴─────────┘     │
│                             │
│  📈 시간대별 참여 추이        │
│  ┌─────────────────────┐   │
│  │     ▁▃▅▇█▇▅▃▁       │   │
│  │ 09 12 15 18 21 시   │   │
│  └─────────────────────┘   │
│                             │
│  탭: [전체] 채널별 ROI      │
│                             │
│  🎯 참여 채널 분석            │
│  Instagram   45% ████▌     │
│  우리동네TV  28% ██▊       │
│  QR 코드     18% █▊        │
│  Naver Blog   9% ▉         │
│                             │
│  ────────────────────       │
│                             │
│  [📊 상세 분석 보기]         │
│                             │
├─────────────────────────────┤
│ 🏠 홈 │ 🎪 이벤트 │ 📊 분석 │ 👤 │
└─────────────────────────────┘
```

**인터랙션**
- 자동 새로고침 (5분 간격)
- 수동 새로고침 (우상단 🔄 아이콘 또는 당겨서 새로고침)
- 지표 카드 터치 → 해당 지표 상세 팝업
- 그래프 터치 → 시간대별 상세 데이터
- 탭 전환 → `22-채널별성과분석`, `23-ROI분석`
- `상세 분석 보기` → 전체 분석 대시보드 (데스크톱 최적화)

#### 22-채널별성과분석

**개요**
- 목적: 채널별 효율성 비교
- 관련 유저스토리: UFR-ANAL-020
- 비즈니스 중요도: ⭐⭐⭐⭐

**주요 기능**
- 채널별 노출/참여/전환 비교
- 채널 효율성 순위

**UI 구성요소**
```
┌─────────────────────────────┐
│ ← 채널별 성과 분석           │
├─────────────────────────────┤
│                             │
│  탭: 전체 [채널별] ROI      │
│                             │
│  📊 채널 성과 비교            │
│                             │
│  🥇 가장 효과적인 채널        │
│  ┌─────────────────────┐   │
│  │ Instagram            │   │
│  │ 📊 노출 20,642회     │   │
│  │ 👥 참여 685명        │   │
│  │ 🏪 방문 214명        │   │
│  │ 💡 참여율: 3.3%      │   │
│  │ 💡 전환율: 31.2%     │   │
│  │ 💰 CPA: 2,190원     │   │
│  └─────────────────────┘   │
│                             │
│  🥈 2위                     │
│  ┌─────────────────────┐   │
│  │ 우리동네TV           │   │
│  │ 📊 노출 12,850회     │   │
│  │ 👥 참여 427명        │   │
│  │ 🏪 방문 165명        │   │
│  │ 💡 참여율: 3.3%      │   │
│  │ 💡 전환율: 38.6%     │   │
│  │ 💰 CPA: 2,800원     │   │
│  └─────────────────────┘   │
│                             │
│  🥉 3위: QR 코드             │
│  4위: Naver Blog            │
│  5위: 지니TV                │
│  6위: Kakao Channel         │
│                             │
│  📈 비교 그래프              │
│  [막대 그래프 시각화]        │
│                             │
├─────────────────────────────┤
│  [이전] [다음]              │
└─────────────────────────────┘
```

**인터랙션**
- 채널 카드 터치 → 상세 데이터 확장
  - 시간대별 노출 추이
  - 일별 참여율 변화
  - 비용 상세 내역
- 그래프 인터랙션 (확대/축소)
- 순위 정렬 변경 (노출수/참여율/전환율/CPA)

#### 23-ROI분석

**개요**
- 목적: 투자 대비 수익 분석
- 관련 유저스토리: UFR-ANAL-030
- 비즈니스 중요도: ⭐⭐⭐⭐⭐

**주요 기능**
- 비용/수익 계산
- ROI 자동 계산
- 손익분기점 표시

**UI 구성요소**
```
┌─────────────────────────────┐
│ ← ROI 분석                   │
├─────────────────────────────┤
│                             │
│  탭: 전체 채널별 [ROI]      │
│                             │
│  💰 투자 대비 수익 분석       │
│                             │
│  📊 ROI                      │
│  ┌─────────────────────┐   │
│  │                     │   │
│  │      245%           │   │
│  │    ↑ +12%           │   │
│  │                     │   │
│  └─────────────────────┘   │
│                             │
│  💸 총 투자 비용              │
│  ┌─────────────────────┐   │
│  │ 경품 비용     500,000원│  │
│  │ 우리동네TV    300,000원│  │
│  │ 지니TV        400,000원│  │
│  │ Instagram       0원   │  │
│  │ 기타 채널      50,000원│  │
│  │ ─────────────────   │  │
│  │ 합계       1,250,000원│  │
│  └─────────────────────┘   │
│                             │
│  💵 총 수익                  │
│  ┌─────────────────────┐   │
│  │ 매출 증가  2,800,000원│  │
│  │ (이벤트 기간 vs 평균) │  │
│  │                     │   │
│  │ 신규 고객 LTV         │  │
│  │ 243명 × 4,500원     │  │
│  │ = 1,093,500원       │  │
│  │ ─────────────────   │  │
│  │ 합계       3,893,500원│  │
│  └─────────────────────┘   │
│                             │
│  📈 손익 분기                │
│  ✅ 달성 (D-3에 달성)        │
│  순이익: +2,643,500원       │
│                             │
│  📊 ROI 추이 그래프          │
│  [꺾은선 그래프]             │
│                             │
├─────────────────────────────┤
│  [PDF 리포트 생성]           │
└─────────────────────────────┘
```

**인터랙션**
- 비용/수익 카드 → 상세 내역 확장
- 그래프 → 일별 ROI 추이
- `PDF 리포트 생성` → `24-분석리포트`

#### 24-분석리포트

**개요**
- 목적: 종합 분석 리포트 생성 및 다운로드
- 관련 유저스토리: UFR-ANAL-040
- 비즈니스 중요도: ⭐⭐⭐

**주요 기능**
- PDF 리포트 자동 생성
- 리포트 미리보기
- 이메일 발송

**UI 구성요소**
```
┌─────────────────────────────┐
│ ← 분석 리포트 생성           │
├─────────────────────────────┤
│                             │
│  📄 종합 분석 리포트          │
│                             │
│  🤖 리포트 생성 중...         │
│  [██████████░░░░] 70%       │
│                             │
│  ✅ 생성 완료!               │
│                             │
│  📋 리포트 내용              │
│  • 이벤트 개요              │
│  • 참여 통계                │
│  • 노출 통계                │
│  • 매출 분석                │
│  • ROI 분석                 │
│  • 채널별 성과 비교          │
│  • 업종 평균 대비 벤치마킹   │
│  • 시각화 차트 12종          │
│                             │
│  📄 미리보기                 │
│  ┌─────────────────────┐   │
│  │ [ PDF 썸네일 ]      │   │
│  │ 1/8 페이지          │   │
│  └─────────────────────┘   │
│  [◀️ 이전] [다음 ▶️]         │
│                             │
│  📥 다운로드 옵션            │
│  ┌─────────────────────┐   │
│  │ [📥 PDF 다운로드]    │   │
│  │ 할로윈이벤트_리포트.pdf│ │
│  │ 2.8MB, 8페이지      │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ [📧 이메일 발송]     │   │
│  │ 등록된 이메일로 전송 │   │
│  └─────────────────────┘   │
│                             │
├─────────────────────────────┤
│  [대시보드로]                │
└─────────────────────────────┘
```

**인터랙션**
- 리포트 생성 프로그레스 표시
- 미리보기 페이지 네비게이션
- `PDF 다운로드` → PDF 파일 다운로드
- `이메일 발송` → 등록 이메일로 리포트 전송
- `대시보드로` → `21-실시간대시보드`

---

### 3.8 AI Learning 서비스

#### 25-AI개선안제안

**개요**
- 목적: AI 기반 이벤트 개선안 제시
- 관련 유저스토리: UFR-AIMPR-010
- 비즈니스 중요도: ⭐⭐⭐⭐

**주요 기능**
- 성공/실패 요인 분석
- 3가지 개선안 제시
- 예상 효과 표시

**UI 구성요소**
```
┌─────────────────────────────┐
│ ← AI 개선안 제안             │
├─────────────────────────────┤
│                             │
│  🤖 AI가 분석한 개선안        │
│                             │
│  ✅ 성공 요인                │
│  • Instagram 채널 효율 우수  │
│  • 참여 방법 간편성          │
│  • 시즌 트렌드 반영 우수     │
│                             │
│  ❗ 개선 포인트               │
│  • 지니TV 채널 참여율 저조   │
│  • 경품 매력도 부족          │
│  • 홍보 문구 클릭률 낮음     │
│                             │
│  💡 AI 추천 개선안 (Top 3)   │
│                             │
│  ┌─────────────────────┐   │
│  │ 1순위 🥇             │   │
│  │                     │   │
│  │ 경품 변경            │   │
│  │ 치킨세트 → 상품권   │   │
│  │ (50,000원 상당)     │   │
│  │                     │   │
│  │ 📊 예상 효과:        │   │
│  │ 참여율 +45% ↑       │   │
│  │ ROI +67% ↑          │   │
│  │                     │   │
│  │ 근거: 유사 업종에서  │   │
│  │ 상품권 경품 참여율   │   │
│  │ 평균 62% 높음       │   │
│  │                     │   │
│  │ [이 개선안으로 시작] │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ 2순위 🥈             │   │
│  │ 참여 방법 단순화     │   │
│  │ [상세 보기 ▼]       │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ 3순위 🥉             │   │
│  │ 배포 채널 조정       │   │
│  │ [상세 보기 ▼]       │   │
│  └─────────────────────┘   │
│                             │
├─────────────────────────────┤
│  [피드백 제공] [다음 아이디어]│
└─────────────────────────────┘
```

**인터랙션**
- 개선안 카드 `상세 보기` → 확장하여 근거 및 상세 설명 표시
- `이 개선안으로 시작` → 해당 개선안 반영하여 `03-이벤트목적선택` (새 이벤트)
- `피드백 제공` → 개선안 평가 모달 (도움됨/도움 안됨)
- `다음 아이디어` → `26-다음이벤트아이디어`

#### 26-다음이벤트아이디어

**개요**
- 목적: 시즌별 이벤트 아이디어 제안
- 관련 유저스토리: UFR-AIMPR-020
- 비즈니스 중요도: ⭐⭐⭐

**주요 기능**
- 시즌 트렌드 반영
- 5가지 아이디어 제안
- 빠른 기획 시작

**UI 구성요소**
```
┌─────────────────────────────┐
│ ← 다음 이벤트 아이디어       │
├─────────────────────────────┤
│                             │
│  ✨ 11월 추천 이벤트 아이디어 │
│                             │
│  🤖 AI가 학습한 결과를 바탕으로│
│     제안합니다               │
│                             │
│  ┌─────────────────────┐   │
│  │ 1. 🍂 가을 감사제    │   │
│  │                     │   │
│  │ 📅 추천 기간:        │   │
│  │ 11/1 ~ 11/15       │   │
│  │                     │   │
│  │ 🎯 목적: 재방문 유도 │   │
│  │                     │   │
│  │ 📊 예상 성과:        │   │
│  │ 참여 700명          │   │
│  │ ROI 280%            │   │
│  │                     │   │
│  │ 💡 핵심 전략:        │   │
│  │ 단골 고객 특별 할인  │   │
│  │ 친구 초대 이벤트     │   │
│  │                     │   │
│  │ [이 아이디어로 시작] │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ 2. 🎄 연말 특별 이벤트│  │
│  │ [상세 보기 ▼]       │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ 3. 🏃 일일 한정 특가 │   │
│  │ [상세 보기 ▼]       │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ 4. 👨‍👩‍👧 가족 이벤트   │   │
│  │ [상세 보기 ▼]       │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ 5. 🎁 럭키드로우      │   │
│  │ [상세 보기 ▼]       │   │
│  └─────────────────────┘   │
│                             │
├─────────────────────────────┤
│  [메인으로]                  │
└─────────────────────────────┘
```

**인터랙션**
- 아이디어 카드 `상세 보기` → 확장하여 상세 전략 및 예시 표시
- `이 아이디어로 시작` → 해당 아이디어 기본 설정으로 `03-이벤트목적선택`
- 시즌 변경 시 자동으로 트렌드 업데이트
- `메인으로` → `00-메인대시보드`

---

### 3.9 공통 화면

#### 99-마이페이지

**개요**
- 목적: 사용자 정보 및 설정 관리
- 비즈니스 중요도: ⭐⭐⭐

**주요 기능**
- 매장 정보 수정
- 알림 설정
- 계정 관리

**UI 구성요소**
```
┌─────────────────────────────┐
│ ← 마이페이지                 │
├─────────────────────────────┤
│                             │
│  👤 사장님 정보              │
│  ┌─────────────────────┐   │
│  │ 홍길동               │   │
│  │ 010-1234-5678       │   │
│  │ hong@example.com    │   │
│  │ [수정]              │   │
│  └─────────────────────┘   │
│                             │
│  🏪 매장 정보                │
│  ┌─────────────────────┐   │
│  │ 왕갈비통닭           │   │
│  │ 음식점 (치킨)        │   │
│  │ 수원시 영통구...     │   │
│  │ [수정]              │   │
│  └─────────────────────┘   │
│                             │
│  🔔 알림 설정                │
│  ┌─────────────────────┐   │
│  │ ✅ 이벤트 시작 알림   │   │
│  │ ✅ 참여자 알림       │   │
│  │ ✅ 당첨자 발표 알림   │   │
│  │ ☐ 마케팅 정보 수신   │   │
│  └─────────────────────┘   │
│                             │
│  💳 결제 정보                │
│  [무료 체험 쿠폰: 0회 남음]  │
│  [결제 수단 등록]            │
│                             │
│  ℹ️ 기타                     │
│  • 이용 약관                │
│  • 개인정보 처리방침         │
│  • 고객 지원                │
│  • 버전 정보 (v1.0.0)       │
│                             │
│  [로그아웃]                  │
│                             │
└─────────────────────────────┘
```

**인터랙션**
- `수정` 버튼 → 해당 정보 수정 모달
- 알림 토글 → 실시간 반영
- `결제 수단 등록` → 결제 정보 입력 모달
- 각 메뉴 터치 → 해당 상세 페이지
- `로그아웃` → 확인 다이얼로그 → 로그인 화면

---

## 4. 화면간 전환 및 네비게이션

### 4.1 네비게이션 구조

**하단 탭 네비게이션 (소상공인 앱)**
```
┌──────┬──────┬──────┬──────┐
│ 🏠   │ 🎪   │ 📊   │ 👤   │
│ 홈    │이벤트│ 분석 │ 마이 │
└──────┴──────┴──────┴──────┘
```

- **홈 (🏠)**: `00-메인대시보드`
- **이벤트 (🎪)**: 이벤트 생성 플로우 (`03-이벤트목적선택`)
- **분석 (📊)**: `21-실시간대시보드`
- **마이 (👤)**: `99-마이페이지`

### 4.2 전환 애니메이션

**화면 전환 규칙 (Mobile First)**
- 순차 진행: 슬라이드 인 (좌→우)
- 이전 단계: 슬라이드 아웃 (우→좌)
- 탭 전환: 페이드 인/아웃
- 모달: 바텀 시트 (아래→위)

### 4.3 백 버튼 동작

**Android 백 버튼 / iOS 스와이프 백**
- 순차 플로우 내: 이전 단계로
- 메인 화면: 앱 종료 확인
- 모달: 모달 닫기

---

## 5. 반응형 설계 전략

### 5.1 브레이크포인트

**Mobile (320px ~ 767px)** - 기본 디자인
- 단일 컬럼 레이아웃
- 스택형 UI
- 터치 친화적 인터페이스 (최소 44x44px)
- 폰트 크기: 14px (본문), 16px (입력 필드), 20px (제목)

**Tablet (768px ~ 1023px)** - 확장 디자인
- 2열 그리드 (카드형 콘텐츠)
- 사이드바 네비게이션 (접이식)
- 확장된 대시보드 (6개 지표 카드)
- 폰트 크기: 16px (본문), 18px (입력 필드), 24px (제목)

**Desktop (1024px+)** - 완전 확장
- 3열 그리드
- 고정 사이드바 네비게이션
- 전체 대시보드 (12개 지표 + 고급 차트)
- 멀티 패널 (리스트 + 상세 동시 표시)
- 폰트 크기: 16px (본문), 18px (입력 필드), 28px (제목)

### 5.2 Progressive Enhancement

**Mobile (필수 기능)**
- 이벤트 생성 (AI 기획 ~ 배포)
- 실시간 대시보드 (핵심 지표 4개)
- 당첨자 관리
- 간단한 차트 (막대/선 그래프)

**Tablet (향상 기능)**
- 채널별 비교 분석
- 확장된 대시보드 (6개 지표)
- 드래그 앤 드롭 콘텐츠 편집
- 인터랙티브 차트 (확대/축소)

**Desktop (고급 기능)**
- 전체 분석 대시보드 (12개 지표)
- 고급 차트 (히트맵, 퍼널 분석)
- 멀티 패널 워크플로우
- 키보드 단축키 지원

### 5.3 터치/마우스 최적화

**Mobile/Tablet (터치)**
- 최소 터치 영역: 44x44px
- 스와이프 제스처 (화면 전환, 새로고침)
- 롱 프레스 (상세 정보, 컨텍스트 메뉴)
- 핀치 줌 (차트, 이미지)

**Desktop (마우스/키보드)**
- 호버 효과 (툴팁, 미리보기)
- 우클릭 컨텍스트 메뉴
- 키보드 네비게이션 (Tab, Enter, ESC)
- 드래그 앤 드롭 (콘텐츠 편집, 순서 변경)

---

## 6. 접근성 보장 방안 (WCAG 2.1 AA)

### 6.1 시각적 접근성

**색상 대비**
- 본문 텍스트: 최소 4.5:1 대비율
- 대형 텍스트 (18px+): 최소 3:1 대비율
- UI 컴포넌트: 최소 3:1 대비율
- 색상만으로 정보 전달 금지 (아이콘, 패턴 병행)

**폰트**
- 최소 폰트 크기: 14px (본문), 16px (입력 필드)
- 줄 간격: 최소 1.5 (본문), 1.2 (제목)
- 글자 간격 조정 가능
- 고대비 모드 지원

### 6.2 청각적 접근성

**영상 콘텐츠**
- 자막 파일 제공 (SRT)
- 영상 내 텍스트 오버레이
- 시각적 피드백 (로딩, 완료)

### 6.3 운동 능력 접근성

**터치/클릭**
- 최소 터치 영역: 44x44px
- 충분한 요소 간 간격 (8px 이상)
- 드래그 앤 드롭 대안 제공 (버튼 클릭)
- 시간 제한 없음 또는 연장 가능

### 6.4 인지적 접근성

**명확성**
- 간결한 언어 사용
- 명확한 레이블 및 안내
- 에러 메시지 구체적으로 제공
- 아이콘 + 텍스트 병행

**일관성**
- 일관된 네비게이션 구조
- 일관된 인터랙션 패턴
- 예측 가능한 동작

### 6.5 스크린 리더 지원

**ARIA 레이블**
- 모든 버튼에 `aria-label`
- 폼 필드에 `aria-describedby` (도움말)
- 에러 메시지에 `aria-live="polite"`
- 로딩 상태에 `aria-busy="true"`

**키보드 네비게이션**
- 모든 인터랙티브 요소 Tab 접근 가능
- 포커스 표시 명확 (파란색 테두리 2px)
- Skip to content 링크
- Escape 키로 모달 닫기

---

## 7. 성능 최적화 방안

### 7.1 로딩 성능

**First Contentful Paint (FCP): < 1.5초**
- Critical CSS 인라인
- 폰트 preload
- 이미지 최적화 (WebP, AVIF)
- 코드 스플리팅 (라우트별)

**Time to Interactive (TTI): < 3초**
- JavaScript 번들 최소화
- 불필요한 폴리필 제거
- Tree shaking
- 서버 사이드 렌더링 (SSR) 또는 정적 생성 (SSG)

### 7.2 런타임 성능

**AI 처리 시간 최적화**
- API 병렬 호출 (기획안 10초 목표)
- 응답 캐싱 (Redis, 24시간)
- 프롬프트 최적화 (토큰 수 감소)
- 스켈레톤 UI (로딩 중 사용자 경험)

**콘텐츠 생성 최적화**
- 이미지/영상 병렬 생성 (3분 목표)
- GPU 가속 활용
- 웹 워커 활용 (메인 스레드 차단 방지)

**실시간 데이터**
- 폴링 간격 최적화 (5분, 사용자 액션 시 즉시)
- WebSocket 활용 (실시간 업데이트)
- 데이터 증분 업데이트 (전체 재로드 방지)

### 7.3 네트워크 최적화

**이미지**
- Lazy loading (스크롤 시 로드)
- Responsive images (`srcset`, `sizes`)
- WebP/AVIF 포맷 사용
- CDN 활용

**API 호출**
- 요청 배치 (batch API)
- 응답 캐싱 (Service Worker)
- 중복 요청 제거 (debounce, throttle)

### 7.4 오프라인 지원 (PWA)

**Service Worker**
- 핵심 에셋 캐싱 (HTML, CSS, JS)
- API 응답 캐싱 (stale-while-revalidate)
- 오프라인 폴백 페이지

**IndexedDB**
- 작성 중인 이벤트 로컬 저장
- 네트워크 복구 시 동기화

---

## 8. 변경 이력

| 버전 | 날짜 | 변경 내용 | 작성자 |
|------|------|-----------|--------|
| 1.0 | 2025-10-17 | 초기 UI/UX 설계서 작성 | 박민지 (픽셀) |

---

## 부록: KT 사장님Easy 벤치마킹 결과

### 주요 인사이트
1. **AI 중심 설계**: AI Agent, AI 이미지 제작 등 AI 기능 전면 배치
2. **통합 관리**: 하나의 앱에서 로봇, CCTV, 주문 시스템 등 통합 관리
3. **데이터 기반**: 매출 비교, 유동인구 분석 등 데이터 분석 제공
4. **실용적 혜택**: 무료 체험, 포인트 등 실질적 혜택 강조
5. **인사이트 콘텐츠**: 사장님을 위한 고민 해결 팁, 트렌드 콘텐츠 제공

### 적용 사항
- AI 기능을 전면에 배치 (기획, 콘텐츠 생성, 개선안)
- 실시간 데이터 분석 대시보드
- 무료 체험 쿠폰 제공
- 간편한 UI (Mobile First)
- 인사이트 제공 (AI 개선안, 다음 이벤트 아이디어)

---

**문서 끝**