# KT AI 기반 소상공인 이벤트 자동 생성 서비스 - UI/UX 설계서
## 문서 정보
- **작성일**: 2025-01-20
- **버전**: 1.0
- **작성자**: UI/UX Designer (박민지 "픽셀")
- **참조 문서**: design/userstory.md
## 1. 설계 개요
### 1.1 설계 목적
소상공인이 이벤트 기획부터 배포, 분석까지 모바일 환경에서 손쉽게 수행할 수 있는 직관적이고 효율적인 사용자 경험 제공
### 1.2 설계 원칙
#### Mobile First 디자인 철학
1. **우선순위 중심 설계**: 작은 화면에서 가장 중요한 기능과 콘텐츠에 집중
2. **점진적 향상**: 모바일 기본 경험 먼저 구축 후, 화면이 커질수록 추가 기능 제공
3. **성능 최적화**: 모바일 환경의 제약(느린 네트워크, 제한된 처리 능력)을 먼저 고려
#### 핵심 UX 원칙
- **단순성**: 복잡한 AI 기능을 단순한 인터페이스로 제공
- **피드백**: 모든 AI 처리 과정에 대한 명확한 진행 상황 표시
- **일관성**: 전체 플로우에서 일관된 패턴과 컴포넌트 사용
- **효율성**: 최소한의 입력으로 최대한의 결과 제공 (AI 자동화)
- **신뢰성**: AI 추천에 대한 투명성과 수정 가능성 제공
### 1.3 참조 사이트 분석
#### KT 사장님Easy
- 깔끔한 현대적 인터페이스, 대형 타이포그래피
- 단계별 기능 소개를 시각적 예시로 제시
- QR 코드 다운로드 강조
- 캐러셀을 통한 프로모션 전달
#### wwit.design 닷슬래시대시
- 미니멀 모바일 우선 디자인
- 바텀 시트를 통한 보조 액션
- 탭 네비게이션으로 섹션 구분
- 명확한 빈 상태(Empty State) 처리
- 점진적 정보 공개
## 2. 프로토타입 화면 목록
### 2.1 화면 분류 및 우선순위
| 화면번호 | 화면명 | 관련 유저스토리 | 비즈니스 중요도 | 비고 |
|---------|--------|----------------|----------------|------|
| **User Service** |
| 01 | 회원가입 | UFR-USER-010 | Must (M/8) | KT 인증 선택 |
| 02 | 매장정보등록 | UFR-USER-020 | Must (M/13) | 사업자번호 검증 |
| **Event Planning Service** |
| 03 | 이벤트목적선택 | UFR-PLAN-010 | Must (M/3) | 기획 시작점 |
| 04 | AI트렌드분석결과 | UFR-PLAN-020 | Must (M/13) | AI 분석 결과 |
| 05 | AI경품추천 | UFR-PLAN-030 | Must (M/21) | 경품 수정 가능 |
| 06 | AI참여방법설계 | UFR-PLAN-040 | Must (M/21) | 3가지 옵션 |
| 07 | AI홍보문구생성 | UFR-PLAN-050 | Must (M/13) | 5개 버전 |
| 08 | 이벤트기획안승인 | UFR-PLAN-060 | Must (M/5) | 최종 확인 |
| **Content Generation Service** |
| 09 | AI이미지생성 | UFR-CONT-010 | Must (M/34) | 3종 이미지 |
| 10 | AI영상제작 | UFR-CONT-020 | Must (M/34) | 15초 영상, 우리동네TV 16:9 |
| 11 | SNS콘텐츠생성 | UFR-CONT-030 | Must (M/21) | Instagram, Blog, Kakao |
| 12 | QR포스터생성 | UFR-CONT-040 | Must (M/8) | A4/A3 PDF |
| 13 | 콘텐츠편집 | UFR-CONT-050 | Should (S/13) | 간단한 수정 |
| 14 | 콘텐츠최종승인 | UFR-CONT-060 | Must (M/3) | 최종 확인 |
| **Distribution Service** |
| 15 | 배포채널선택 | UFR-DIST-010 | Must (M/13) | 다중 채널 |
| 16 | 배포진행상태 | UFR-DIST-020~050 | Must (M/47) | 실시간 상태 |
| 17 | 오프라인자료다운로드 | UFR-DIST-060 | Should (S/5) | QR/PDF |
| **Participation Service** |
| 18 | 이벤트참여 | UFR-PART-010 | Must (M/8) | 고객용 |
| 19 | 참여완료 | UFR-PART-010 | Must (M/8) | 응모번호 발급 |
| **Analytics & Management Service** |
| 20 | 당첨자명단관리 | UFR-PART-050 | Must (M/5) | 경품 지급 관리 |
| 21 | 실시간대시보드 | UFR-ANAL-010 | Must (M/21) | 5분 갱신 |
| 22 | 채널별성과분석 | UFR-ANAL-020 | Must (M/13) | 비교 분석 |
| 23 | ROI분석 | UFR-ANAL-030 | Must (M/13) | 투자 대비 효과 |
| 24 | 분석리포트 | UFR-ANAL-040 | Should (S/8) | PDF 다운로드 |
**총 24개 화면** (Must: 21개, Should: 3개)
## 3. 화면 간 사용자 플로우
### 3.1 메인 플로우 (소상공인)
```
[시작]
↓
[01-회원가입] → [02-매장정보등록]
↓
[21-실시간대시보드] (홈)
↓
┌─────────────────────┐
│ 이벤트 생성 플로우 │
├─────────────────────┤
[03-이벤트목적선택]
↓
[04-AI트렌드분석결과]
↓
[05-AI경품추천] ←→ (수정 가능)
↓
[06-AI참여방법설계]
↓
[07-AI홍보문구생성] ←→ (편집 가능)
↓
[08-이벤트기획안승인]
└─────────────────────┘
↓
┌─────────────────────┐
│ 콘텐츠 생성 플로우 │
├─────────────────────┤
[09-AI이미지생성]
↓
[10-AI영상제작]
↓
[11-SNS콘텐츠생성]
↓
[12-QR포스터생성]
↓
[13-콘텐츠편집] (선택)
↓
[14-콘텐츠최종승인]
└─────────────────────┘
↓
┌─────────────────────┐
│ 배포 플로우 │
├─────────────────────┤
[15-배포채널선택]
↓
[16-배포진행상태]
↓
[17-오프라인자료다운로드] (선택)
└─────────────────────┘
↓
┌─────────────────────┐
│ 모니터링 & 관리 │
├─────────────────────┤
[21-실시간대시보드]
↓
[22-채널별성과분석]
↓
[23-ROI분석]
↓
[20-당첨자명단관리]
↓
[24-분석리포트] (선택)
└─────────────────────┘
```
### 3.2 고객 플로우
```
[이벤트 발견]
(QR코드/SNS/우리동네TV/지니TV/링고비즈)
↓
[18-이벤트참여]
↓
[19-참여완료]
↓
(당첨 발표 대기)
↓
[당첨 알림 수신] (SMS/알림톡)
```
### 3.3 네비게이션 구조
#### 바텀 네비게이션 (소상공인용)
1. **홈** → 21-실시간대시보드
2. **이벤트** → 이벤트 목록 + 새 이벤트 생성 버튼
3. **분석** → 22-채널별성과분석
4. **마이페이지** → 설정, 매장정보, 로그아웃
#### 상단 앱바
- 컨텍스트별 제목
- 뒤로가기 (하위 화면)
- 액션 버튼 (저장, 공유 등)
## 4. 화면별 상세 설계
### 4.1 User Service
---
#### 01-회원가입
**개요**
- **목적**: 신규 소상공인의 간편한 회원가입 처리
- **관련 유저스토리**: UFR-USER-010
- **비즈니스 중요도**: Must (M/8)
**주요 기능**
1. 기본 정보 입력 (이름, 전화번호, 이메일)
2. KT 본인 인증 (선택) - 추가 혜택 제공
3. 개인정보 수집 동의
**UI 구성요소**
**모바일 (320px~767px)**
```
┌─────────────────────────┐
│ ← [뒤로] 회원가입 │
├─────────────────────────┤
│ │
│ KT 이벤트 마케팅 │
│ 환영합니다 🎉 │
│ │
│ ┌──────────────────┐ │
│ │ 이름 │ │
│ │ [입력 필드] │ │
│ └──────────────────┘ │
│ │
│ ┌──────────────────┐ │
│ │ 전화번호 │ │
│ │ [010-XXXX-XXXX] │ │
│ └──────────────────┘ │
│ │
│ ┌──────────────────┐ │
│ │ 이메일 │ │
│ │ [example@xx.com] │ │
│ └──────────────────┘ │
│ │
│ ┌──────────────────┐ │
│ │ ☐ KT 본인 인증 │ │
│ │ (인증 시 혜택 +) │ │
│ └──────────────────┘ │
│ │
│ ☑ 개인정보 수집 동의 │
│ (필수) [자세히보기] │
│ │
├─────────────────────────┤
│ [ 다음 단계 ] │
└─────────────────────────┘
```
**인터랙션**
- 입력 필드 포커스 시 라벨 상단 이동 (Material Design)
- 실시간 형식 검증 (전화번호, 이메일)
- KT 인증 선택 시 바텀 시트로 인증 프로세스 표시
- 모든 필드 입력 완료 시 "다음 단계" 버튼 활성화
**반응형 처리**
- 태블릿(768px~): 입력 필드 최대 너비 500px 중앙 정렬
- 데스크톱(1024px~): 좌측에 서비스 소개 이미지, 우측에 폼 배치
**접근성**
- 모든 입력 필드에 적절한 label과 placeholder
- 에러 메시지는 aria-live로 스크린 리더에 즉시 전달
- Tab 키 순서 논리적으로 설정
---
#### 02-매장정보등록
**개요**
- **목적**: 맞춤형 이벤트 생성을 위한 매장 정보 수집 및 검증
- **관련 유저스토리**: UFR-USER-020
- **비즈니스 중요도**: Must (M/13)
**주요 기능**
1. 매장 기본 정보 입력 (매장명, 업종, 주소, 영업시간)
2. 사업자번호 검증 (국세청 API 연동)
3. 메뉴/상품 정보 입력 (선택)
4. 매장 이미지 업로드 (선택)
5. 무료 체험 쿠폰 자동 발급
**UI 구성요소**
**모바일 (320px~767px)**
```
┌─────────────────────────┐
│ ← [뒤로] 매장정보등록 │
├─────────────────────────┤
│ 진행상황: ━━━━━━━━━ 2/2 │
├─────────────────────────┤
│ │
│ 필수 정보 │
│ │
│ [매장명 입력] │
│ │
│ [업종 선택 ▼] │
│ 음식점/카페/소매업... │
│ │
│ [주소 검색 🔍] │
│ (도로명 주소) │
│ │
│ 영업시간 │
│ 월: [09:00] ~ [21:00] │
│ 화: [09:00] ~ [21:00] │
│ ... (요일별 설정) │
│ │
│ [사업자번호] │
│ XXX-XX-XXXXX │
│ [검증하기] ← AI 자동검증│
│ │
│ ───────────────────── │
│ 선택 정보 (이벤트 맞춤화)│
│ │
│ 메뉴/상품 (최대 10개) │
│ + [메뉴 추가] │
│ │
│ 매장 특징 │
│ [텍스트 입력 영역] │
│ (최대 200자) │
│ │
│ 대표 이미지 (최대 3장) │
│ [📷] [📷] [📷] │
│ │
├─────────────────────────┤
│ [ 등록 완료하기 ] │
└─────────────────────────┘
```
**인터랙션**
1. **주소 검색**: 바텀 시트로 주소 검색 UI 표시 (카카오 주소 API)
2. **사업자번호 검증**:
- 입력 완료 시 자동 검증 시작
- 로딩 인디케이터 표시
- 검증 성공: ✅ "확인됨" 표시
- 검증 실패: ❌ 명확한 오류 메시지
3. **메뉴 추가**: 바텀 시트로 메뉴명, 가격, 설명 입력
4. **이미지 업로드**:
- 카메라 또는 갤러리 선택
- 업로드 진행률 표시
- 미리보기 제공
**반응형 처리**
- 태블릿: 2단 레이아웃 (필수정보 | 선택정보)
- 데스크톱: 3단 레이아웃 + 우측에 진행 상황 및 혜택 안내
**검증 및 피드백**
- 매장명: 2자 이상 필수
- 사업자번호: 형식 검증 → 국세청 API 검증
- 검증 실패 시 재입력 유도, 이전 입력값 유지
---
### 4.2 Event Planning Service
---
#### 03-이벤트목적선택
**개요**
- **목적**: 이벤트 기획의 방향성 설정
- **관련 유저스토리**: UFR-PLAN-010
- **비즈니스 중요도**: Must (M/3)
**주요 기능**
1. 4가지 목적 중 하나 선택 (라디오 버튼)
2. 각 목적별 설명 및 예상 효과 제시
**UI 구성요소**
**모바일**
```
┌─────────────────────────┐
│ ← [닫기] 새 이벤트 기획 │
├─────────────────────────┤
│ 단계 1/6: 목적 선택 │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ 이벤트 목적을 선택하세요 │
│ │
│ ┌─────────────────────┐│
│ │ ○ 신규고객 유치 ││
│ │ 새로운 고객 확보 ││
│ │ 예상효과: 👤+30% ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ ○ 재방문 유도 ││
│ │ 기존 고객 재방문 ││
│ │ 예상효과: 🔄+25% ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ ○ 매출 증대 ││
│ │ 단기 매출 향상 ││
│ │ 예상효과: 💰+40% ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ ○ 인지도 향상 ││
│ │ 브랜드 인지도 제고 ││
│ │ 예상효과: 📢+50% ││
│ └─────────────────────┘│
│ │
├─────────────────────────┤
│ [ 다음 (AI분석) ] │
└─────────────────────────┘
```
**인터랙션**
- 카드 선택 시 라디오 버튼 활성화 및 카드 하이라이트
- 선택 완료 시 "다음" 버튼 활성화
- 각 카드 롱프레스/호버 시 상세 툴팁 표시
**성능**
- 초기 로딩 < 1초
- 선택 즉시 다음 단계 준비 (프리페치)
---
#### 04-AI트렌드분석결과
**개요**
- **목적**: AI가 분석한 업종/지역 트렌드 제시
- **관련 유저스토리**: UFR-PLAN-020
- **비즈니스 중요도**: Must (M/13)
**주요 기능**
1. 업종, 지역, 시즌 기반 트렌드 분석
2. 주요 트렌드 3-5가지 제시
3. 예상 성공률 표시
**UI 구성요소**
**모바일**
```
┌─────────────────────────┐
│ ← [뒤로] AI 트렌드 분석 │
├─────────────────────────┤
│ 단계 2/6: 트렌드 분석 │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ 🤖 AI가 분석중입니다... │
│ [프로그레스 바] │
│ │
│ (분석 완료 후) │
│ │
│ 📊 분석 결과 │
│ │
│ 매장: 수원 왕갈비통닭 │
│ 업종: 치킨 전문점 │
│ 지역: 수원시 팔달구 │
│ 시즌: 겨울 (12월) │
│ │
│ ┌─────────────────────┐│
│ │ 주요 트렌드 ││
│ │ ││
│ │ 1️⃣ 연말 모임 증가 ││
│ │ → 단체 할인 이벤트 ││
│ │ 효과적 ││
│ │ ││
│ │ 2️⃣ 배달 주문 급증 ││
│ │ → 배달 경품 추천 ││
│ │ ││
│ │ 3️⃣ SNS 공유 활발 ││
│ │ → 바이럴 참여방법 ││
│ │ 권장 ││
│ └─────────────────────┘│
│ │
│ 예상 성공률: 78% 🎯 │
│ (동일 업종 평균 대비) │
│ │
├─────────────────────────┤
│ [ 다음 (경품추천) ] │
└─────────────────────────┘
```
**인터랙션**
- AI 분석 진행 시 애니메이션 표시 (3-13초 소요)
- 분석 결과 순차적 페이드인 애니메이션
- 각 트렌드 탭 시 상세 정보 바텀 시트
**성능**
- AI 분석 시간: 목표 3초 이내
- 실패 시 재시도 버튼 제공
---
#### 05-AI경품추천
**개요**
- **목적**: 예산 대비 최적 경품 AI 추천 및 수정
- **관련 유저스토리**: UFR-PLAN-030
- **비즈니스 중요도**: Must (M/21)
**주요 기능**
1. 예산 입력
2. AI가 Top 5 경품 추천
3. 경품 선택 및 수정 가능
**UI 구성요소**
**모바일**
```
┌─────────────────────────┐
│ ← [뒤로] AI 경품 추천 │
├─────────────────────────┤
│ 단계 3/6: 경품 선택 │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ 예산 설정 │
│ ┌─────────────────────┐│
│ │ 100,000원 ││
│ │ [슬라이더] ││
│ │ 1만원 ━━●━━ 500만원││
│ └─────────────────────┘│
│ │
│ 🤖 AI 추천 경품 (Top 5) │
│ │
│ ┌─────────────────────┐│
│ │ 1. 치킨세트 무료교환 ││
│ │ 매력도: ⭐⭐⭐⭐⭐││
│ │ 예상참여율: 45% ││
│ │ [선택] [수정] ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 2. 5천원 할인쿠폰 ││
│ │ 매력도: ⭐⭐⭐⭐ ││
│ │ 예상참여율: 38% ││
│ │ [선택] [수정] ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 3. KT 멤버십 포인트 ││
│ │ 매력도: ⭐⭐⭐ ││
│ │ 예상참여율: 32% ││
│ │ [선택] [수정] ││
│ └─────────────────────┘│
│ │
│ ... (스크롤) │
│ │
│ [+ 직접 입력하기] │
│ │
├─────────────────────────┤
│ [ 다음 (참여방법) ] │
└─────────────────────────┘
```
**인터랙션**
1. **예산 슬라이더**: 실시간 경품 추천 업데이트
2. **경품 수정**: 바텀 시트로 경품명, 수량, 가격 수정
3. **직접 입력**: 새 경품 추가 폼 표시
4. **선택 시**: 카드 하이라이트, 예상 효과 재계산
**검증**
- 예산 초과 시 경고 메시지
- 경품 수정 시 실시간 예상참여율 재계산
---
#### 06-AI참여방법설계
**개요**
- **목적**: 간단하면서도 재방문을 유도하는 참여 방법 AI 제안
- **관련 유저스토리**: UFR-PLAN-040
- **비즈니스 중요도**: Must (M/21)
**주요 기능**
1. 3가지 참여 방법 옵션 제시
2. 각 옵션별 난이도 및 예상 참여율 표시
3. 1개 선택
**UI 구성요소**
**모바일**
```
┌─────────────────────────┐
│ ← [뒤로] AI 참여방법 설계│
├─────────────────────────┤
│ 단계 4/6: 참여방법 선택 │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ 🤖 AI 추천 참여방법 │
│ │
│ ┌─────────────────────┐│
│ │ 옵션 1: 간편형 ││
│ │ 📱 QR 코드 스캔 ││
│ │ ││
│ │ 난이도: ⭐ (쉬움) ││
│ │ 예상참여율: 60% ││
│ │ 재방문율: 20% ││
│ │ ││
│ │ ✓ 빠른 참여 ││
│ │ ✓ 매장 방문 불필요 ││
│ │ [선택하기] ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 옵션 2: 재방문 유도형││
│ │ 🏪 매장 방문 + 리뷰 ││
│ │ ││
│ │ 난이도: ⭐⭐ (보통) ││
│ │ 예상참여율: 35% ││
│ │ 재방문율: 80% ││
│ │ ││
│ │ ✓ 높은 재방문율 ││
│ │ ✓ 리뷰 축적 ││
│ │ [선택하기] ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 옵션 3: 바이럴형 ││
│ │ 📢 SNS 공유 + 태그 ││
│ │ ││
│ │ 난이도: ⭐⭐⭐ ││
│ │ 예상참여율: 25% ││
│ │ 바이럴 확산: 150% ││
│ │ ││
│ │ ✓ 입소문 효과 ││
│ │ ✓ 신규고객 유입 ││
│ │ [선택하기] ││
│ └─────────────────────┘│
│ │
├─────────────────────────┤
│ [ 다음 (홍보문구) ] │
└─────────────────────────┘
```
**인터랙션**
- 옵션 카드 탭 시 상세 설명 확장
- 선택 시 카드 하이라이트 및 체크마크 표시
- 옵션 간 비교를 위한 나란히 보기 모드 제공
---
#### 07-AI홍보문구생성
**개요**
- **목적**: GPT-4 기반 홍보 문구 및 해시태그 자동 생성
- **관련 유저스토리**: UFR-PLAN-050
- **비즈니스 중요도**: Must (M/13)
**주요 기능**
1. 5개 버전 홍보 문구 생성
2. SNS 해시태그 자동 생성
3. 플랫폼별 최적화 (Instagram, Blog, Kakao)
4. 선택 및 편집 가능
**UI 구성요소**
**모바일**
```
┌─────────────────────────┐
│ ← [뒤로] AI 홍보문구 생성│
├─────────────────────────┤
│ 단계 5/6: 홍보문구 선택 │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ 🤖 AI가 생성중입니다... │
│ [프로그레스 바] │
│ │
│ (생성 완료 후) │
│ │
│ 📝 생성된 홍보 문구 │
│ │
│ ┌─────────────────────┐│
│ │ 버전 1: 친근한 톤 ││
│ │ ─────────────────── ││
│ │ "🎉 연말 대박 이벤트!││
│ │ 수원 왕갈비통닭에서 ││
│ │ 치킨세트를 공짜로! ││
│ │ 지금 바로 참여하세요"││
│ │ ││
│ │ 해시태그: #수원맛집 ││
│ │ #치킨이벤트 #연말특가││
│ │ ││
│ │ [선택] [편집] ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 버전 2: 공식적인 톤 ││
│ │ ─────────────────── ││
│ │ "왕갈비통닭 12월 ││
│ │ 프로모션을 시작합니다││
│ │ 선착순 100명에게 ││
│ │ 치킨세트 무료 증정" ││
│ │ ││
│ │ [선택] [편집] ││
│ └─────────────────────┘│
│ │
│ ... (스크롤로 5개) │
│ │
│ [🔄 다시 생성하기] │
│ │
├─────────────────────────┤
│ [ 다음 (최종확인) ] │
└─────────────────────────┘
```
**인터랙션**
1. **생성 과정**: 로딩 애니메이션 + 진행 상태 (13초 이내)
2. **편집**: 바텀 시트로 텍스트 편집기 표시
3. **미리보기**: 플랫폼별 미리보기 (Instagram 피드, 블로그 등)
4. **다시 생성**: 새로운 5개 문구 생성 (다른 톤앤매너)
**성능**
- AI 생성 시간: 목표 13초 이내
- 편집 실시간 반영
---
#### 08-이벤트기획안승인
**개요**
- **목적**: 완성된 기획안 최종 검토 및 승인
- **관련 유저스토리**: UFR-PLAN-060
- **비즈니스 중요도**: Must (M/5)
**주요 기능**
1. 전체 기획안 요약 제시
2. 예상 예산 및 효과 표시
3. 승인 또는 이전 단계 수정
**UI 구성요소**
**모바일**
```
┌─────────────────────────┐
│ ← [뒤로] 기획안 최종확인 │
├─────────────────────────┤
│ 단계 6/6: 기획안 승인 │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ ✅ 기획 완료! │
│ │
│ ┌─────────────────────┐│
│ │ 📋 기획안 요약 ││
│ │ ││
│ │ 목적: 신규고객 유치 ││
│ │ 경품: 치킨세트 무료 ││
│ │ 참여: QR코드 스캔 ││
│ │ 홍보: "🎉 연말..." ││
│ │ ││
│ │ [수정하기 ✏️] ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 💰 예상 비용 ││
│ │ ││
│ │ 경품 비용: 100,000원││
│ │ 플랫폼 비용: 무료 ││
│ │ ────────────────── ││
│ │ 총 예산: 100,000원 ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 📈 예상 효과 ││
│ │ ││
│ │ 참여율: 60% ││
│ │ 예상참여자: ~180명 ││
│ │ ROI: 240% ││
│ └─────────────────────┘│
│ │
│ ⏱ 전체 소요시간: 8초 │
│ │
├─────────────────────────┤
│ [← 이전] [승인하기 ✓] │
└─────────────────────────┘
```
**인터랙션**
- 각 섹션 탭 시 해당 단계로 이동하여 수정 가능
- 승인 시 확인 다이얼로그 표시
- 승인 완료 후 콘텐츠 생성 단계로 자동 이동
**성능**
- 전체 기획 과정: 목표 10초 이내 완료 (AI 처리 포함)
---
### 4.3 Content Generation Service
---
#### 09-AI이미지생성
**개요**
- **목적**: 브랜드 컬러/로고 반영한 이미지 3종 AI 생성
- **관련 유저스토리**: UFR-CONT-010
- **비즈니스 중요도**: Must (M/34)
**주요 기능**
1. 브랜드 컬러 선택 또는 입력
2. 로고 이미지 업로드
3. Stable Diffusion으로 3가지 스타일 이미지 생성
4. 미리보기 및 다운로드
**UI 구성요소**
**모바일**
```
┌─────────────────────────┐
│ ← [뒤로] AI 이미지 생성 │
├─────────────────────────┤
│ 콘텐츠 1/5: 이미지 │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ 브랜드 설정 │
│ │
│ ┌─────────────────────┐│
│ │ 브랜드 컬러 ││
│ │ [🎨] #FF5733 ││
│ │ (컬러 피커) ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 로고 업로드 ││
│ │ [📷 이미지 선택] ││
│ │ (미리보기) ││
│ └─────────────────────┘│
│ │
│ [AI 이미지 생성 시작] │
│ │
│ (생성 중) │
│ 🤖 AI가 이미지 생성중...│
│ ▓▓▓▓░░░░░░ 40% │
│ 예상 소요: 2분 30초 │
│ │
│ (생성 완료 후) │
│ │
│ 생성된 이미지 (3종) │
│ │
│ ┌────┐ ┌────┐ ┌────┐ │
│ │심플││화려││트렌││ │
│ │ ││ ││디 ││ │
│ │ ○ ││ ● ││ ○ ││ │
│ └────┘ └────┘ └────┘ │
│ │
│ [다운로드] [다시생성] │
│ │
├─────────────────────────┤
│ [ 다음 (영상제작) ] │
└─────────────────────────┘
```
**인터랙션**
1. **브랜드 컬러**: 컬러 피커 또는 HEX 코드 직접 입력
2. **로고 업로드**: 카메라/갤러리 선택, 최대 5MB
3. **생성 진행**: 실시간 진행률 표시 (2-3분)
4. **이미지 선택**: 탭하여 확대, 스와이프로 비교
5. **다운로드**: 선택한 이미지 저장
**성능**
- AI 이미지 생성: 목표 2-3분 이내
- 백그라운드 처리로 다른 작업 가능 (알림으로 완료 통지)
---
#### 10-AI영상제작
**개요**
- **목적**: 15초 분량의 홍보 영상 AI 제작 (SNS 및 우리동네TV용)
- **관련 유저스토리**: UFR-CONT-020
- **비즈니스 중요도**: Must (M/34)
**주요 기능**
1. 배경 음악 선택
2. 텍스트 오버레이 편집
3. 우리동네TV용 해상도 선택 (1920x1080, 16:9)
4. 15초 영상 자동 제작
**UI 구성요소**
**모바일**
```
┌─────────────────────────┐
│ ← [뒤로] AI 영상 제작 │
├─────────────────────────┤
│ 콘텐츠 2/5: 영상 │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ 영상 설정 │
│ │
│ ┌─────────────────────┐│
│ │ 배경 음악 ││
│ │ [▶️ 경쾌한 음악 1] ││
│ │ [ 신나는 음악 2] ││
│ │ [ 차분한 음악 3] ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 텍스트 오버레이 ││
│ │ "🎉 연말 대박..." ││
│ │ [편집하기] ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 해상도 선택 ││
│ │ ☑ SNS용 (1080x1080) ││
│ │ ☑ 우리동네TV ││
│ │ (1920x1080, 16:9) ││
│ └─────────────────────┘│
│ │
│ [AI 영상 제작 시작] │
│ │
│ (제작 중) │
│ 🎬 AI가 영상 제작중... │
│ ▓▓▓▓▓░░░░░ 50% │
│ 예상 소요: 3분 │
│ │
│ (완료 후) │
│ ┌─────────────────────┐│
│ │ [▶️ 15초 미리보기] ││
│ │ ─────────────────── ││
│ │ SNS용, 우리동네TV용 ││
│ │ 영상 각 1개 생성완료 ││
│ └─────────────────────┘│
│ │
│ [다운로드] [다시제작] │
│ │
├─────────────────────────┤
│ [ 다음 (SNS콘텐츠) ] │
└─────────────────────────┘
```
**인터랙션**
1. **배경 음악**: 재생 버튼으로 미리듣기
2. **텍스트 편집**: 바텀 시트로 텍스트, 폰트, 위치 조정
3. **제작 진행**: 실시간 진행률 + 예상 소요 시간 (3-5분)
4. **미리보기**: 전체 화면으로 재생, 재생/일시정지 컨트롤
**성능**
- AI 영상 제작: 목표 3-5분 이내
- 백그라운드 처리 + 푸시 알림
---
#### 11-SNS콘텐츠생성
**개요**
- **목적**: Instagram, Naver Blog, Kakao Channel용 최적화 콘텐츠 생성
- **관련 유저스토리**: UFR-CONT-030
- **비즈니스 중요도**: Must (M/21)
**주요 기능**
1. SNS 플랫폼 선택 (Instagram 필수, 나머지 선택)
2. 플랫폼별 해상도 자동 조정
3. 해시태그 자동 삽입
4. 일괄 다운로드
**UI 구성요소**
**모바일**
```
┌─────────────────────────┐
│ ← [뒤로] SNS 콘텐츠 생성 │
├─────────────────────────┤
│ 콘텐츠 3/5: SNS │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ 플랫폼 선택 │
│ │
│ ┌─────────────────────┐│
│ │ ✅ Instagram ││
│ │ 1080x1080 (정사각형) ││
│ │ [미리보기] ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ ☐ Naver Blog ││
│ │ 800x600 (가로형) ││
│ │ [미리보기] ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ ☐ Kakao Channel ││
│ │ 800x800 (정사각형) ││
│ │ [미리보기] ││
│ └─────────────────────┘│
│ │
│ [콘텐츠 생성하기] │
│ │
│ (생성 완료 후) │
│ │
│ 생성된 콘텐츠 │
│ │
│ ┌────┐ ┌────┐ │
│ │Inst││Blog│ │
│ │agram││ │ │
│ └────┘ └────┘ │
│ │
│ 게시 텍스트: │
│ "🎉 연말 대박 이벤트! │
│ #수원맛집 #치킨이벤트" │
│ │
│ [📦 일괄 다운로드] │
│ │
├─────────────────────────┤
│ [ 다음 (QR포스터) ] │
└─────────────────────────┘
```
**인터랙션**
1. **플랫폼 선택**: 체크박스로 다중 선택
2. **미리보기**: 바텀 시트로 플랫폼별 미리보기 (실제 피드 모습)
3. **생성**: 선택한 플랫폼 수만큼 최적화 콘텐츠 생성 (30초 이내)
4. **다운로드**: ZIP 파일로 일괄 다운로드
**성능**
- SNS 콘텐츠 생성: 30초 이내
- 미리보기 즉시 로딩
---
#### 12-QR포스터생성
**개요**
- **목적**: QR 코드 포함 인쇄용 포스터 생성
- **관련 유저스토리**: UFR-CONT-040
- **비즈니스 중요도**: Must (M/8)
**주요 기능**
1. QR 연결 URL 자동 설정
2. 포스터 크기 선택 (A4/A3)
3. QR 포스터 PDF 생성
**UI 구성요소**
**모바일**
```
┌─────────────────────────┐
│ ← [뒤로] QR 포스터 생성 │
├─────────────────────────┤
│ 콘텐츠 4/5: QR 포스터 │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ QR 코드 설정 │
│ │
│ ┌─────────────────────┐│
│ │ 연결 URL (자동생성) ││
│ │ ktevnt.co/abc123 ││
│ │ [📋 복사] ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ QR 코드 미리보기 ││
│ │ ┌────────────────┐ ││
│ │ │ [QR 이미지] │ ││
│ │ └────────────────┘ ││
│ └─────────────────────┘│
│ │
│ 포스터 크기 │
│ ○ A4 (210x297mm) │
│ ○ A3 (297x420mm) │
│ │
│ [포스터 생성하기] │
│ │
│ (생성 완료 후) │
│ │
│ ┌─────────────────────┐│
│ │ 📄 생성된 포스터 ││
│ │ ││
│ │ [미리보기 이미지] ││
│ │ ││
│ │ A4 PDF: 2.1MB ││
│ │ QR 이미지: 150KB ││
│ └─────────────────────┘│
│ │
│ [다운로드] [인쇄하기] │
│ │
├─────────────────────────┤
│ [ 다음 (콘텐츠편집) ] │
└─────────────────────────┘
```
**인터랙션**
1. **URL 복사**: 클립보드 복사 + 토스트 메시지
2. **크기 선택**: 라디오 버튼, 미리보기 즉시 업데이트
3. **생성**: 20초 이내 완료
4. **인쇄**: 시스템 인쇄 다이얼로그 호출
**성능**
- QR 포스터 생성: 20초 이내
- PDF 파일 크기 최적화 (<5MB)
---
#### 13-콘텐츠편집
**개요**
- **목적**: 생성된 콘텐츠 간단 수정
- **관련 유저스토리**: UFR-CONT-050
- **비즈니스 중요도**: Should (S/13)
**주요 기능**
1. 이미지/영상 텍스트 수정
2. 색상 조정
3. 편집 이력 관리 (최대 3개 버전)
**UI 구성요소**
**모바일**
```
┌─────────────────────────┐
│ ← [뒤로] 콘텐츠 편집 │
├─────────────────────────┤
│ 콘텐츠 편집 (선택) │
│ │
│ 편집할 콘텐츠 선택 │
│ │
│ ┌────┐ ┌────┐ ┌────┐ │
│ │이미││영상││SNS ││ │
│ │지 ││ ││ ││ │
│ └────┘ └────┘ └────┘ │
│ │
│ (이미지 편집 예시) │
│ │
│ ┌─────────────────────┐│
│ │ [이미지 미리보기] ││
│ │ ││
│ │ 텍스트: "🎉..." ││
│ │ [편집] ││
│ └─────────────────────┘│
│ │
│ 편집 도구 │
│ [T 텍스트] [🎨 색상] │
│ [↔️ 크기] [📐 위치] │
│ │
│ 편집 이력 │
│ • 원본 │
│ • 버전 1 (현재) │
│ [원본으로 되돌리기] │
│ │
├─────────────────────────┤
│ [취소] [저장하기] │
└─────────────────────────┘
```
**인터랙션**
1. **콘텐츠 선택**: 카드 탭으로 선택
2. **텍스트 편집**: 바텀 시트로 텍스트 에디터
3. **색상 조정**: 컬러 피커
4. **실시간 미리보기**: 편집 사항 즉시 반영
5. **되돌리기**: 이전 버전으로 복원
**성능**
- 편집 실시간 반영
- 최대 3개 버전 관리
---
#### 14-콘텐츠최종승인
**개요**
- **목적**: 완성된 콘텐츠 최종 검토 및 승인
- **관련 유저스토리**: UFR-CONT-060
- **비즈니스 중요도**: Must (M/3)
**주요 기능**
1. 전체 콘텐츠 미리보기
2. 승인 또는 이전 단계 수정
**UI 구성요소**
**모바일**
```
┌─────────────────────────┐
│ ← [뒤로] 콘텐츠 최종확인 │
├─────────────────────────┤
│ 콘텐츠 5/5: 최종 승인 │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ ✅ 콘텐츠 생성 완료! │
│ │
│ 생성된 콘텐츠 (갤러리) │
│ │
│ ┌────┐ ┌────┐ ┌────┐ │
│ │이미││이미││이미││ │
│ │지1 ││지2 ││지3 ││ │
│ └────┘ └────┘ └────┘ │
│ │
│ ┌────┐ ┌────┐ │
│ │15초││SNS ││ │
│ │영상││세트││ │
│ └────┘ └────┘ │
│ │
│ ┌────┐ │
│ │QR ││ │
│ │포스││ │
│ │터 ││ │
│ └────┘ │
│ │
│ [📦 전체 다운로드] │
│ │
│ ⏱ 콘텐츠 생성시간: 7분 │
│ (목표: 5-8분 이내) │
│ │
├─────────────────────────┤
│ [← 수정] [승인하기 ✓] │
└─────────────────────────┘
```
**인터랙션**
- 각 콘텐츠 탭 시 전체 화면 미리보기
- 승인 시 확인 다이얼로그
- 승인 완료 후 배포 단계로 자동 이동
**성능**
- 전체 콘텐츠 생성: 목표 5-8분 이내
---
### 4.4 Distribution Service
---
#### 15-배포채널선택
**개요**
- **목적**: 다중 채널 배포 설정
- **관련 유저스토리**: UFR-DIST-010
- **비즈니스 중요도**: Must (M/13)
**주요 기능**
1. 배포 채널 선택 (다중 선택)
2. 즉시 배포 또는 예약 배포
3. 채널별 개별 설정
**UI 구성요소**
**모바일**
```
┌─────────────────────────┐
│ ← [뒤로] 배포 채널 선택 │
├─────────────────────────┤
│ 배포 1/3: 채널 선택 │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ KT 채널 │
│ │
│ ┌─────────────────────┐│
│ │ ☐ 우리동네TV ││
│ │ 지역 주변 노출 ││
│ │ [설정 >] ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ ☐ 링고비즈 연결음 ││
│ │ 매장 전화 연결음 ││
│ │ [설정 >] ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ ☐ 지니TV 광고 ││
│ │ TV 광고 송출 ││
│ │ [설정 >] ││
│ └─────────────────────┘│
│ │
│ SNS 채널 │
│ │
│ ┌─────────────────────┐│
│ │ ✅ Instagram (필수) ││
│ │ [계정 연동 ✓] ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ ☐ Naver Blog ││
│ │ [계정 연동하기] ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ ☐ Kakao Channel ││
│ │ [계정 연동하기] ││
│ └─────────────────────┘│
│ │
│ 배포 시간 │
│ ○ 즉시 배포 │
│ ○ 예약 배포 │
│ [날짜/시간 선택] │
│ │
├─────────────────────────┤
│ [ 다음 (배포 시작) ] │
└─────────────────────────┘
```
**인터랙션**
1. **채널 선택**: 체크박스로 다중 선택
2. **설정**: 바텀 시트로 채널별 세부 설정 (반경, 시간대, 예산 등)
3. **계정 연동**: OAuth 인증 플로우
4. **예약 배포**: 날짜/시간 피커
**성능**
- 채널 설정 즉시 저장
- 배포 준비 완료 시 다음 단계 활성화
---
#### 16-배포진행상태
**개요**
- **목적**: 실시간 배포 진행 상황 모니터링
- **관련 유저스토리**: UFR-DIST-020~050
- **비즈니스 중요도**: Must (M/47)
**주요 기능**
1. 채널별 배포 상태 실시간 표시
2. 배포 실패 시 자동 재시도 (3회)
3. 실패 시 알림 및 수동 재시도 옵션
**UI 구성요소**
**모바일**
```
┌─────────────────────────┐
│ ← [뒤로] 배포 진행 중 │
├─────────────────────────┤
│ 배포 2/3: 진행 상태 │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ 배포 진행 중... 🚀 │
│ │
│ ┌─────────────────────┐│
│ │ ✅ Instagram ││
│ │ 배포 완료 (3초) ││
│ │ [게시물 보기] ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 🔄 우리동네TV ││
│ │ 배포 중... (15초) ││
│ │ ▓▓▓▓░░░░░░ 40% ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ ⏳ 지니TV ││
│ │ 대기 중... ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ ❌ Naver Blog ││
│ │ 배포 실패 (재시도중) ││
│ │ 1/3 재시도 ││
│ │ [수동 재시도] ││
│ └─────────────────────┘│
│ │
│ 전체 진행률: 50% │
│ 예상 소요: 45초 남음 │
│ │
│ [취소] [새로고침] │
│ │
├─────────────────────────┤
│ (배포 완료 시) │
│ [다음 (완료 화면) ✓] │
└─────────────────────────┘
```
**인터랙션**
1. **실시간 업데이트**: 5초 간격 자동 새로고침
2. **게시물 보기**: 외부 링크로 실제 게시물 확인
3. **수동 재시도**: 실패한 채널 개별 재시도
4. **취소**: 진행 중인 배포 중단 (확인 다이얼로그)
**성능**
- 전체 배포: 목표 1분 이내
- 병렬 배포로 시간 단축
---
#### 17-오프라인자료다운로드
**개요**
- **목적**: QR 포스터 및 인쇄용 자료 다운로드
- **관련 유저스토리**: UFR-DIST-060
- **비즈니스 중요도**: Should (S/5)
**주요 기능**
1. QR 포스터 (A4/A3 PDF)
2. QR 코드 이미지 (PNG)
3. 고해상도 이미지
4. 일괄 다운로드 (ZIP)
**UI 구성요소**
**모바일**
```
┌─────────────────────────┐
│ ← [뒤로] 오프라인 자료 │
├─────────────────────────┤
│ 배포 3/3: 자료 다운로드 │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ ✅ 배포 완료! │
│ │
│ 오프라인 홍보 자료 │
│ │
│ ┌─────────────────────┐│
│ │ 📄 QR 포스터 (A4) ││
│ │ 2.1MB PDF ││
│ │ [다운로드] ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 📄 QR 포스터 (A3) ││
│ │ 4.5MB PDF ││
│ │ [다운로드] ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 📷 QR 코드 이미지 ││
│ │ 150KB PNG ││
│ │ [다운로드] ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 🖼️ 고해상도 이미지 ││
│ │ 5.2MB (300dpi) ││
│ │ [다운로드] ││
│ └─────────────────────┘│
│ │
│ [📦 전체 다운로드 (ZIP)]│
│ │
│ 다운로드 이력 │
│ • 2025-01-20 15:30 │
│ │
├─────────────────────────┤
│ [ 홈으로 이동하기 ] │
└─────────────────────────┘
```
**인터랙션**
- 개별 다운로드: 파일 저장 다이얼로그
- 전체 다운로드: ZIP 파일로 압축 다운로드
- 다운로드 이력: 이전 다운로드 기록 표시
---
### 4.5 Participation Service (고객용)
---
#### 18-이벤트참여
**개요**
- **목적**: 고객의 간편한 이벤트 참여
- **관련 유저스토리**: UFR-PART-010
- **비즈니스 중요도**: Must (M/8)
**주요 기능**
1. 이름, 전화번호 입력
2. 참여 경로 자동 추적
3. 개인정보 수집 동의
4. 중복 참여 방지
**UI 구성요소**
**모바일**
```
┌─────────────────────────┐
│ 🎉 수원 왕갈비통닭 │
│ 연말 대박 이벤트! │
├─────────────────────────┤
│ │
│ 경품: 치킨세트 무료교환 │
│ 당첨인원: 100명 │
│ 기간: ~2025-12-31 │
│ │
│ 참여방법 │
│ 1. 매장 방문 │
│ 2. QR 코드 스캔 │
│ 3. 정보 입력 │
│ │
│ ───────────────────── │
│ │
│ 참여 신청 │
│ │
│ [이름 입력] │
│ │
│ [전화번호] │
│ 010-XXXX-XXXX │
│ │
│ 참여 경로 (자동 감지) │
│ 📍 QR 코드 스캔 │
│ │
│ ☑ 개인정보 수집 동의 │
│ (필수) [자세히] │
│ │
│ ───────────────────── │
│ │
│ 💡 매장 방문 고객은 │
│ 당첨 확률 UP! 🎁 │
│ │
├─────────────────────────┤
│ [ 참여하기 ] │
└─────────────────────────┘
```
**인터랙션**
1. **자동 입력**: 참여 경로 자동 감지 (QR/SNS/TV)
2. **실시간 검증**: 전화번호 형식 체크
3. **중복 체크**: 제출 시 중복 참여 확인
4. **에러 처리**:
- 중복: "이미 참여하셨습니다 (참여일시 표시)"
- 기타: 명확한 오류 메시지
**접근성**
- 큰 터치 영역 (44x44px 이상)
- 명확한 라벨과 에러 메시지
- 고대비 색상
---
#### 19-참여완료
**개요**
- **목적**: 참여 완료 확인 및 응모번호 발급
- **관련 유저스토리**: UFR-PART-010
- **비즈니스 중요도**: Must (M/8)
**주요 기능**
1. 응모번호 자동 발급
2. 당첨 발표일 안내
3. 매장 정보 표시
**UI 구성요소**
**모바일**
```
┌─────────────────────────┐
│ ✅ 참여 완료! │
├─────────────────────────┤
│ │
│ 🎉 🎁 🎉 │
│ │
│ 이벤트 참여가 완료 │
│ 되었습니다! │
│ │
│ ┌─────────────────────┐│
│ │ 응모번호 ││
│ │ ││
│ │ A-12345678 ││
│ │ ││
│ │ [📋 복사하기] ││
│ └─────────────────────┘│
│ │
│ 당첨 발표일 │
│ 📅 2025-12-31 │
│ │
│ 당첨 시 입력하신 전화번호│
│ 로 SMS/알림톡 발송됩니다│
│ │
│ ───────────────────── │
│ │
│ 매장 정보 │
│ 📍 수원 왕갈비통닭 │
│ 🏪 경기도 수원시... │
│ ☎️ 031-XXX-XXXX │
│ │
│ [매장 위치 보기] │
│ │
│ ───────────────────── │
│ │
│ 💬 친구에게 공유하기 │
│ [Instagram] [Kakao] │
│ │
└─────────────────────────┘
```
**인터랙션**
- 응모번호 복사: 클립보드 복사 + 토스트
- 위치 보기: 지도 앱 연동
- 공유하기: SNS 공유 기능
---
### 4.6 Analytics & Management Service
---
#### 20-당첨자명단관리
**개요**
- **목적**: 당첨자 명단 조회 및 경품 지급 관리
- **관련 유저스토리**: UFR-PART-050
- **비즈니스 중요도**: Must (M/5)
**주요 기능**
1. 이벤트별 당첨자 목록
2. 경품 지급 상태 업데이트
3. 엑셀 다운로드
**UI 구성요소**
**모바일**
```
┌─────────────────────────┐
│ ← [뒤로] 당첨자 명단 │
├─────────────────────────┤
│ 이벤트: 연말 대박 이벤트 │
│ 당첨인원: 100명 │
├─────────────────────────┤
│ │
│ 검색 [🔍 이름/전화번호] │
│ │
│ 지급 상태 필터 │
│ [전체] [미지급] [완료] │
│ │
│ ┌─────────────────────┐│
│ │ 김철수 ││
│ │ 010-1234-5678 ││
│ │ 응모: A-12345678 ││
│ │ 참여일: 2025-12-15 ││
│ │ 경로: QR코드 ││
│ │ ││
│ │ ☐ 경품 지급 완료 ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 이영희 ││
│ │ 010-2345-6789 ││
│ │ 응모: A-23456789 ││
│ │ 참여일: 2025-12-16 ││
│ │ 경로: Instagram ││
│ │ ││
│ │ ✅ 경품 지급 완료 ││
│ │ 지급일: 2025-12-20 ││
│ └─────────────────────┘│
│ │
│ ... (스크롤) │
│ │
│ ───────────────────── │
│ │
│ [📊 참여자 전체 명단] │
│ [📥 엑셀 다운로드] │
│ │
└─────────────────────────┘
```
**인터랙션**
1. **검색**: 실시간 검색 필터링
2. **상태 필터**: 미지급/완료 필터
3. **체크박스**: 지급 완료 시 체크, 자동으로 지급일 기록
4. **다운로드**: 엑셀 파일 다운로드
**반응형**
- 태블릿: 테이블 레이아웃
- 데스크톱: 페이지네이션 + 대량 작업
---
#### 21-실시간대시보드
**개요**
- **목적**: 이벤트 성과 실시간 모니터링
- **관련 유저스토리**: UFR-ANAL-010
- **비즈니스 중요도**: Must (M/21)
**주요 기능**
1. 총 참여자 수, 노출 수, 매출 증가율 실시간 표시
2. 5분 간격 자동 업데이트
3. 채널별 성과 요약
**UI 구성요소**
**모바일**
```
┌─────────────────────────┐
│ ☰ 실시간 대시보드 🔔 │
├─────────────────────────┤
│ 마지막 업데이트: 15:35 │
│ [🔄 새로고침] │
├─────────────────────────┤
│ │
│ 진행 중인 이벤트 │
│ "연말 대박 이벤트" │
│ D-5 (2025-12-31까지) │
│ │
│ ┌─────────────────────┐│
│ │ 총 참여자 ││
│ │ 1,234명 👥 ││
│ │ +45 (오늘) ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 총 노출 수 ││
│ │ 15,678회 👁️ ││
│ │ +230 (최근 1시간) ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 매출 증가율 ││
│ │ +42% 💰 ││
│ │ (이벤트 전 대비) ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 예상 ROI ││
│ │ 245% 📈 ││
│ │ (투자 대비 수익) ││
│ └─────────────────────┘│
│ │
│ 채널별 참여 현황 │
│ ┌───────────────────┐ │
│ │ QR코드 45% │ │
│ │ Instagram 30% │ │
│ │ 우리동네TV 15% │ │
│ │ Naver Blog 10% │ │
│ └───────────────────┘ │
│ │
│ [📊 상세 분석 보기] │
│ │
├─────────────────────────┤
│ [홈][이벤트][분석][MY] │
└─────────────────────────┘
```
**인터랙션**
1. **자동 새로고침**: 5분 간격
2. **수동 새로고침**: 버튼 탭
3. **상세 보기**: 각 지표 탭 시 상세 분석 화면으로 이동
4. **푸시 알림**: 주요 이벤트 발생 시 (목표 달성 등)
**성능**
- 데이터 로딩: 5분 간격 자동 업데이트
- 캐싱으로 빠른 초기 로딩
**반응형**
- 태블릿: 2x2 그리드
- 데스크톱: 대시보드 전체 한눈에 표시
---
#### 22-채널별성과분석
**개요**
- **목적**: 채널별 노출 수, 참여율, 전환율 비교
- **관련 유저스토리**: UFR-ANAL-020
- **비즈니스 중요도**: Must (M/13)
**주요 기능**
1. 채널별 성과 지표
2. 비교 분석 시각화
3. 가장 효과적인 채널 강조
**UI 구성요소**
**모바일**
```
┌─────────────────────────┐
│ ← [뒤로] 채널별 성과분석 │
├─────────────────────────┤
│ │
│ 📊 채널별 성과 비교 │
│ │
│ 기간: 2025-12-01~현재 │
│ [기간 선택 ▼] │
│ │
│ 종합 순위 │
│ 🥇 QR코드 (가장 효과적) │
│ 🥈 Instagram │
│ 🥉 우리동네TV │
│ │
│ ┌─────────────────────┐│
│ │ QR코드 ││
│ │ ─────────────────── ││
│ │ 노출: 5,678회 ││
│ │ 참여: 556명 (9.8%) ││
│ │ 전환: 223명 (40%) ││
│ │ CPA: 180원 ││
│ │ ││
│ │ [상세 보기 >] ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ Instagram ││
│ │ ─────────────────── ││
│ │ 노출: 4,523회 ││
│ │ 참여: 370명 (8.2%) ││
│ │ 전환: 148명 (40%) ││
│ │ CPA: 270원 ││
│ │ ││
│ │ [상세 보기 >] ││
│ └─────────────────────┘│
│ │
│ ... (스크롤) │
│ │
│ ───────────────────── │
│ │
│ 비교 차트 (막대 그래프) │
│ ┌───────────────────┐ │
│ │ QR ▓▓▓▓▓▓▓▓▓▓│ │
│ │ Insta ▓▓▓▓▓▓▓ │ │
│ │ TV ▓▓▓▓ │ │
│ │ Blog ▓▓ │ │
│ └───────────────────┘ │
│ │
│ 💡 인사이트: │
│ QR코드가 가장 높은 │
│ 전환율을 보입니다. │
│ 오프라인 홍보를 강화하면│
│ 효과가 더 좋을 것 같아요│
│ │
└─────────────────────────┘
```
**인터랙션**
1. **기간 선택**: 드롭다운으로 기간 변경
2. **상세 보기**: 채널별 상세 분석 페이지
3. **차트 인터랙션**: 탭하여 수치 확인
**반응형**
- 태블릿: 2열 레이아웃
- 데스크톱: 차트 확대 + 비교 테이블
---
#### 23-ROI분석
**개요**
- **목적**: 투자 대비 효과 자동 계산
- **관련 유저스토리**: UFR-ANAL-030
- **비즈니스 중요도**: Must (M/13)
**주요 기능**
1. 총 비용 자동 집계
2. 수익 데이터 수집 (POS 연동)
3. ROI 자동 계산 및 시각화
**UI 구성요소**
**모바일**
```
┌─────────────────────────┐
│ ← [뒤로] ROI 분석 │
├─────────────────────────┤
│ │
│ 💰 투자 대비 효과 │
│ │
│ ┌─────────────────────┐│
│ │ ROI ││
│ │ ││
│ │ 245% ││
│ │ ││
│ │ 투자한 금액 대비 ││
│ │ 2.45배 수익! ││
│ └─────────────────────┘│
│ │
│ 비용 내역 │
│ ┌─────────────────────┐│
│ │ 경품 비용 ││
│ │ 100,000원 ││
│ │ ││
│ │ 플랫폼 이용료 ││
│ │ • 우리동네TV: 무료 ││
│ │ • 지니TV: 무료 ││
│ │ • SNS: 무료 ││
│ │ ││
│ │ ────────────────── ││
│ │ 총 투자: 100,000원 ││
│ └─────────────────────┘│
│ │
│ 수익 내역 │
│ ┌─────────────────────┐│
│ │ 매출 증가액 ││
│ │ 180,000원 ││
│ │ (이벤트 기간 vs 평균)││
│ │ ││
│ │ 신규 고객 가치 ││
│ │ 65,000원 ││
│ │ (78명 × 예상 LTV) ││
│ │ ││
│ │ ────────────────── ││
│ │ 총 수익: 245,000원 ││
│ └─────────────────────┘│
│ │
│ 손익 분기점 │
│ ✅ 달성 (3일차) │
│ │
│ 회수 기간 예상 │
│ 📅 약 1.5개월 │
│ │
│ ───────────────────── │
│ │
│ ROI 추이 그래프 │
│ ┌───────────────────┐ │
│ │ ╱╲ │ │
│ │ ╱ ╲ │ │
│ │ ╱ ╲ │ │
│ └───────────────────┘ │
│ 12/1 12/10 12/20 │
│ │
└─────────────────────────┘
```
**인터랙션**
- 비용/수익 항목 탭 시 상세 내역
- 그래프 인터랙션으로 일별 ROI 확인
**성능**
- POS 데이터 5분 간격 동기화
- ROI 실시간 재계산
---
#### 24-분석리포트
**개요**
- **목적**: 종합 분석 리포트 PDF 생성
- **관련 유저스토리**: UFR-ANAL-040
- **비즈니스 중요도**: Should (S/8)
**주요 기능**
1. 전체 성과 요약
2. 그래프 및 차트 시각화
3. 업종 평균 벤치마킹
4. PDF 다운로드 및 이메일 발송
**UI 구성요소**
**모바일**
```
┌─────────────────────────┐
│ ← [뒤로] 분석 리포트 │
├─────────────────────────┤
│ │
│ 📊 종합 분석 리포트 │
│ │
│ 이벤트: 연말 대박 이벤트 │
│ 기간: 2025-12-01~12-31 │
│ │
│ ┌─────────────────────┐│
│ │ 리포트 미리보기 ││
│ │ ││
│ │ [PDF 썸네일 이미지] ││
│ │ ││
│ │ 10페이지 ││
│ │ 5.2MB ││
│ └─────────────────────┘│
│ │
│ 포함 내용 │
│ ✅ 이벤트 개요 │
│ ✅ 참여 통계 │
│ ✅ 노출 통계 │
│ ✅ 매출 분석 │
│ ✅ ROI 분석 │
│ ✅ 채널별 성과 비교 │
│ ✅ 업종 평균 벤치마킹 │
│ ✅ 그래프 시각화 │
│ │
│ [📥 PDF 다운로드] │
│ [✉️ 이메일로 받기] │
│ │
│ ───────────────────── │
│ │
│ 생성 이력 │
│ • 2025-12-31 16:00 │
│ [다운로드] │
│ │
└─────────────────────────┘
```
**인터랙션**
1. **PDF 생성**: 데이터 집계 → 그래프 생성 → PDF 레이아웃 → 파일 생성 (30초 이내)
2. **이메일 발송**: 등록된 이메일로 자동 발송
3. **미리보기**: 썸네일 탭 시 전체 화면 미리보기
**성능**
- 리포트 생성: 30초 이내
- PDF 파일 크기 최적화 (<10MB)
---
## 5. 화면 간 전환 및 네비게이션
### 5.1 네비게이션 패턴
#### 바텀 네비게이션 (소상공인용)
```
┌───────────────────────────────┐
│ [홈] [이벤트] [분석] [MY] │
└───────────────────────────────┘
홈: 21-실시간대시보드
이벤트: 이벤트 목록 + [+ 새 이벤트] FAB
분석: 22-채널별성과분석
MY: 매장정보, 설정, 로그아웃
```
**특징**:
- 4개 주요 섹션
- 현재 선택된 탭 강조 (아이콘 + 라벨)
- 고정 위치 (항상 표시)
#### 상단 앱바
```
┌─────────────────────────────┐
│ [←] 화면 제목 [액션] │
└─────────────────────────────┘
```
**패턴**:
- 하위 화면: 뒤로가기 버튼
- 최상위 화면: 메뉴 버튼 (☰)
- 컨텍스트별 액션 (저장, 공유, 편집 등)
#### 마법사 (Wizard) 패턴
이벤트 기획 및 콘텐츠 생성 단계에서 사용:
```
┌─────────────────────────────┐
│ 단계 3/6: 경품 선택 │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ [콘텐츠] │
│ │
│ [← 이전] [다음 →] │
└─────────────────────────────┘
```
**특징**:
- 진행률 표시
- 이전/다음 버튼
- 중간 저장 가능
### 5.2 전환 애니메이션
#### 화면 전환
- **앞으로 이동**: 슬라이드 인 (우→좌)
- **뒤로 이동**: 슬라이드 아웃 (좌→우)
- **바텀 네비게이션**: 페이드 전환
- **모달/바텀 시트**: 슬라이드 업
#### 요소 전환
- **리스트 아이템**: 페이드 인 (순차적)
- **카드 선택**: 스케일 + 하이라이트
- **로딩**: 스켈레톤 스크린 → 실제 콘텐츠
### 5.3 제스처
- **스와이프**:
- 좌우: 이미지 갤러리, 탭 전환
- 아래: 바텀 시트 닫기, 당겨서 새로고침
- **롱프레스**: 툴팁 표시, 컨텍스트 메뉴
- **핀치 줌**: 이미지 확대/축소
## 6. 반응형 설계 전략
### 6.1 브레이크포인트
| 디바이스 | 해상도 | 레이아웃 | 주요 변경사항 |
|---------|--------|---------|--------------|
| Mobile | 320px~767px | 단일 컬럼 | 세로 스택, 바텀 네비게이션 |
| Tablet | 768px~1023px | 2컬럼 | 사이드 패널, 그리드 레이아웃 |
| Desktop | 1024px+ | 다중 컬럼 | 대시보드 전체 표시, 사이드바 |
### 6.2 Mobile First 적용
#### 우선순위 정의
**1순위 (모바일)**:
- 핵심 액션 (이벤트 생성, 참여, 승인)
- 실시간 지표 (참여자 수, ROI)
- 주요 알림
**2순위 (태블릿)**:
- 상세 통계
- 비교 분석
- 추가 설정 옵션
**3순위 (데스크톱)**:
- 전체 대시보드
- 벤치마킹 데이터
- 고급 필터
#### 점진적 향상 예시
**대시보드 화면**:
**Mobile (320px)**:
```
┌─────────┐
│ 참여자 │
│ 1,234명 │
├─────────┤
│ 노출수 │
│ 15,678회│
├─────────┤
│ 매출증가│
│ +42% │
├─────────┤
│ ROI │
│ 245% │
└─────────┘
```
**Tablet (768px)**:
```
┌─────────┬─────────┐
│ 참여자 │ 노출수 │
│ 1,234명 │15,678회│
├─────────┼─────────┤
│ 매출증가│ ROI │
│ +42% │ 245% │
├─────────┴─────────┤
│ 채널별 성과 차트 │
└───────────────────┘
```
**Desktop (1024px+)**:
```
┌──────────────────────────────────┐
│ ┌────────┬────────┬────────────┐ │
│ │참여자 │노출수 │매출 +42% │ │
│ │1,234명 │15,678회│ROI 245% │ │
│ └────────┴────────┴────────────┘ │
│ │
│ ┌────────────────────────────┐ │
│ │ 채널별 성과 상세 차트 │ │
│ │ [대형 그래프] │ │
│ └────────────────────────────┘ │
│ │
│ ┌────────────┬────────────────┐ │
│ │진행중 이벤트│ 최근 활동 │ │
│ └────────────┴────────────────┘ │
└──────────────────────────────────┘
```
### 6.3 터치 타겟 최적화
**최소 크기**: 44x44px (Apple HIG, Material Design 권장)
**적용 예시**:
- 버튼: 48dp 높이
- 체크박스/라디오: 44x44px 터치 영역
- 리스트 아이템: 56dp 높이
- FAB: 56x56dp
## 7. 접근성 보장 방안
### 7.1 WCAG 2.1 AA 준수
#### 색상 대비
- **일반 텍스트**: 최소 4.5:1
- **대형 텍스트**: 최소 3:1
- **UI 컴포넌트**: 최소 3:1
**예시**:
- 주요 버튼: 진한 파란색 (#0066CC) on 흰색 (6.3:1) ✅
- 경고 메시지: 빨간색 (#CC0000) on 흰색 (5.8:1) ✅
#### 키보드 네비게이션
- Tab 순서 논리적 설정
- 포커스 인디케이터 명확히 표시
- 모든 인터랙티브 요소 키보드 접근 가능
#### 스크린 리더 지원
- 의미 있는 대체 텍스트 (alt text)
- ARIA 레이블 적절히 사용
- 동적 콘텐츠 변경 시 aria-live 사용
**예시**:
```html
AI가 분석 중입니다...
```
### 7.2 접근성 체크리스트
- [ ] 모든 이미지에 대체 텍스트
- [ ] 폼 요소에 명확한 라벨
- [ ] 에러 메시지 명확하고 구체적
- [ ] 색상만으로 정보 전달하지 않음
- [ ] 터치 타겟 최소 44x44px
- [ ] 자동 재생 영상/음악 없음 (또는 컨트롤 제공)
- [ ] 타임아웃 있는 작업에 충분한 시간 제공
## 8. 성능 최적화 방안
### 8.1 로딩 전략
#### 초기 로딩
- **Critical CSS**: 인라인 삽입 (above-the-fold)
- **코드 스플리팅**: 라우트별 번들 분리
- **이미지 최적화**: WebP 포맷, 반응형 이미지
**목표**:
- First Contentful Paint (FCP): <1.8초
- Largest Contentful Paint (LCP): <2.5초
- Time to Interactive (TTI): <3.8초
#### Lazy Loading
- 이미지: Intersection Observer 사용
- 컴포넌트: React.lazy() 또는 동적 import
- 데이터: 무한 스크롤 페이지네이션
### 8.2 AI 처리 피드백
AI 작업은 시간이 걸리므로 명확한 피드백 필수:
**패턴**:
1. **즉각적 피드백**: "AI가 분석 시작했습니다"
2. **진행률 표시**: 프로그레스 바 + 예상 소요 시간
3. **백그라운드 처리**: 다른 작업 가능
4. **완료 알림**: 푸시 알림 + 인앱 알림
**예시**:
```
🤖 AI가 이미지 생성중...
▓▓▓▓▓░░░░░ 50%
예상 소요: 1분 30초 남음
✅ 백그라운드에서 계속 진행됩니다.
완료되면 알려드릴게요!
```
### 8.3 캐싱 전략
| 데이터 유형 | 캐싱 전략 | 갱신 주기 |
|------------|----------|----------|
| 정적 자산 (이미지, CSS, JS) | Service Worker | 앱 업데이트 시 |
| 트렌드 분석 결과 | Redis | 1시간 |
| 경품 추천 | Redis | 5분 |
| 실시간 대시보드 | 클라이언트 메모리 | 5분 |
| 사용자 정보 | LocalStorage | 세션 유지 |
### 8.4 성능 목표
| 기능 | 성능 목표 | 측정 방법 |
|-----|----------|----------|
| 이벤트 기획 | 10초 이내 | AI 처리 시간 합계 |
| 콘텐츠 생성 | 5-8분 이내 | 병렬 처리 시간 |
| 배포 | 1분 이내 | 채널별 병렬 배포 |
| 대시보드 로딩 | 1초 이내 | LCP |
| 화면 전환 | 300ms 이내 | 애니메이션 완료 시간 |
## 9. 변경 이력
| 버전 | 날짜 | 변경 내용 | 작성자 |
|-----|------|----------|--------|
| 1.0 | 2025-01-20 | 초기 UI/UX 설계서 작성 | 박민지 |
---
## 부록
### A. 디자인 시스템 가이드라인
#### 색상 팔레트
```
Primary: #0066CC (KT Blue)
Secondary: #FF6B00 (KT Orange)
Success: #00C853
Warning: #FFA000
Error: #D32F2F
Background: #FFFFFF
Surface: #F5F5F5
Text Primary: #212121
Text Secondary: #757575
```
#### 타이포그래피
```
H1: 24px/32px Bold (모바일)
H2: 20px/28px Bold
H3: 18px/24px SemiBold
Body: 16px/24px Regular
Caption: 14px/20px Regular
Small: 12px/16px Regular
```
#### 간격 시스템
```
XXS: 4px
XS: 8px
S: 12px
M: 16px
L: 24px
XL: 32px
XXL: 48px
```
#### 그림자
```
Elevation 1: 0 2px 4px rgba(0,0,0,0.1)
Elevation 2: 0 4px 8px rgba(0,0,0,0.12)
Elevation 3: 0 8px 16px rgba(0,0,0,0.14)
```
### B. 컴포넌트 라이브러리
주요 재사용 컴포넌트:
- Button (Primary, Secondary, Text, Outlined)
- Card (기본, 선택 가능, 호버)
- Input (Text, Number, Select, Checkbox, Radio)
- ProgressBar (Determinate, Indeterminate)
- BottomSheet
- Dialog
- Skeleton Screen
- Empty State
- Error State
### C. 참조 자료
1. **KT 사장님Easy**: https://product.kt.com/wDic/soho/marketing.do?itemCode=sajangeasy
2. **wwit.design 닷슬래시대시**: https://wwit.design/2023/09/30/dotslashdash/
3. **Material Design**: https://material.io/design
4. **Apple Human Interface Guidelines**: https://developer.apple.com/design/human-interface-guidelines/
5. **WCAG 2.1**: https://www.w3.org/WAI/WCAG21/quickref/
---
**문서 종료**