2222 lines
90 KiB
Markdown
2222 lines
90 KiB
Markdown
# 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 개선안, 다음 이벤트 아이디어)
|
||
|
||
---
|
||
|
||
**문서 끝**
|