shared-dg05-dodari/kt-event-marketing
7
0
Fork 0
mirror of https://github.com/ktds-dg0501/kt-event-marketing.git synced 2025-12-06 17:26:23 +00:00
Code Issues Packages Projects Releases Wiki Activity
kt-event-marketing/design/uiux/uiux.md
doyeon 58ab3bac44 프로토타입 파일 구조 개선 및 CSS 디렉토리 통합 
- 중복 프로토타입 파일 삭제
- common.css/js를 css 디렉토리로 통합
- uiux.md 업데이트

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-20 13:50:09 +09:00

2298 lines
81 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 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
<button aria-label="이벤트 생성하기">
+ 새 이벤트
</button>
<div role="alert" aria-live="polite">
AI가 분석 중입니다...
</div>
```
### 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/
---
**문서 종료**
Reference in New Issue View Git Blame Copy Permalink