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 18:46:23 +00:00
Code Issues Packages Projects Releases Wiki Activity
kt-event-marketing/TEMP_BACKUP/uiux.md
cherry2250 077e4d4a81 edit folder
2025-10-21 13:23:26 +09:00

3312 lines
121 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-001 | Must (M/5) | JWT 인증 |
| 02 | 홈화면 | UFR-USER-002 | Must (M/8) | 대시보드 요약 |
| 03 | 회원가입 | UFR-USER-010 | Must (M/5) | 이메일/비밀번호 |
| 04 | 매장정보등록 | UFR-USER-020 | Must (M/13) | 사업자번호 검증 |
| **Event Planning Service** |
| 05 | 이벤트목적선택 | UFR-PLAN-010 | Must (M/3) | 기획 시작점 |
| 06 | AI트렌드분석결과 | UFR-PLAN-020 | Must (M/13) | AI 분석 결과 |
| 07 | AI이벤트상품추천 | UFR-PLAN-030 | Must (M/21) | 이벤트상품 수정 가능, 진행방법 선택 |
| 08 | AI참여방법설계 | UFR-PLAN-040 | Must (M/21) | 3가지 옵션 |
| 09 | AI홍보문구생성 | UFR-PLAN-050 | Must (M/13) | 5개 버전 |
| 10 | 이벤트기획안승인 | UFR-PLAN-060 | Must (M/5) | 최종 확인 |
| **Content Generation Service** |
| 11 | AI이미지생성 | UFR-CONT-010 | Must (M/34) | 3종 이미지 |
| 12 | SNS콘텐츠생성 | UFR-CONT-030 | Must (M/21) | Instagram(선택), Blog, Kakao |
| 13 | QR포스터생성선택 | UFR-CONT-040 | Must (M/8) | 생성 여부 선택 |
| 14 | QR포스터상세설정 | UFR-CONT-040 | Must (M/8) | A4/A3 PDF |
| 15 | 콘텐츠편집 | UFR-CONT-050 | Should (S/13) | 간단한 수정 |
| 16 | 콘텐츠최종승인 | UFR-CONT-060 | Must (M/3) | 최종 확인 |
| **Distribution Service** |
| 17 | 배포채널선택 | UFR-DIST-010 | Must (M/13) | 다중 채널, 최소 1개 |
| 18 | 배포진행상태 | UFR-DIST-020~050 | Must (M/47) | 실시간 상태 |
| 19 | 오프라인자료다운로드 | UFR-DIST-060 | Should (S/5) | QR/PDF |
| **Participation Service** |
| 20 | 이벤트참여 | UFR-PART-010 | Must (M/8) | 고객용 |
| 21 | 참여완료 | UFR-PART-010 | Must (M/8) | 응모번호 발급 |
| **Analytics & Management Service** |
| 22 | 당첨자명단관리 | UFR-PART-050 | Must (M/5) | 이벤트상품 지급 관리 |
| 23 | 실시간대시보드 | UFR-ANAL-010 | Must (M/21) | 5분 갱신 |
| 24 | 채널별성과분석 | UFR-ANAL-020 | Must (M/13) | 비교 분석 |
| 25 | 광고수익률분석 | UFR-ANAL-030 | Must (M/13) | 투자 대비 효과 |
| 26 | 분석리포트 | UFR-ANAL-040 | Should (S/8) | PDF 다운로드 |
**총 26개 화면** (Must: 23개, Should: 3개)
- 추가: 로그인, 홈화면, QR포스터생성선택
- 삭제: AI영상제작
- 변경: AI경품추천→AI이벤트상품추천, ROI분석→광고수익률분석
## 3. 화면 간 사용자 플로우
### 3.1 메인 플로우 (소상공인)
```
[시작]
↓
[01-로그인] ←─ 기존 회원
↓
[02-홈화면] (대시보드)
↓
┌──────────────────────────┐
│ 신규 회원 가입 (최초 1회) │
├──────────────────────────┤
[03-회원가입] → [04-매장정보등록]
└──────────────────────────┘
↓
┌─────────────────────┐
│ 이벤트 생성 플로우 │
├─────────────────────┤
[05-이벤트목적선택]
↓
[06-AI트렌드분석결과]
↓
[07-AI이벤트상품추천] ←→ (수정 가능, 진행방법 선택)
↓
[08-AI참여방법설계]
↓
[09-AI홍보문구생성] ←→ (편집 가능)
↓
[10-이벤트기획안승인]
└─────────────────────┘
↓
┌─────────────────────┐
│ 콘텐츠 생성 플로우 │
├─────────────────────┤
[11-AI이미지생성]
↓
[12-SNS콘텐츠생성]
↓
[13-QR포스터생성선택] ─→ [생성 안 함] → [15-콘텐츠편집]
↓ [QR 포스터 생성]
[14-QR포스터상세설정]
↓
[15-콘텐츠편집] (선택)
↓
[16-콘텐츠최종승인]
└─────────────────────┘
↓
┌─────────────────────┐
│ 배포 플로우 │
├─────────────────────┤
[17-배포채널선택] (최소 1개)
↓
[18-배포진행상태]
↓
[19-오프라인자료다운로드] (선택)
└─────────────────────┘
↓
┌─────────────────────┐
│ 모니터링 & 관리 │
├─────────────────────┤
[23-실시간대시보드]
↓
[24-채널별성과분석]
↓
[25-광고수익률분석]
↓
[22-당첨자명단관리]
↓
[26-분석리포트] (선택)
└─────────────────────┘
```
### 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-001
- **비즈니스 중요도**: Must (M/5)
**주요 기능**
1. 이메일/비밀번호 로그인
2. 자동 로그인 옵션
3. 비밀번호 찾기
4. 회원가입 링크
**UI 구성요소**
**모바일 (320px~767px)**
```
┌─────────────────────────┐
│ │
│ KT 이벤트 마케팅 │
│ 로고 🎯 │
│ │
│ 소상공인 이벤트 자동 생성│
│ │
│ ┌──────────────────┐ │
│ │ 이메일 │ │
│ │ [example@xxx.com]│ │
│ └──────────────────┘ │
│ │
│ ┌──────────────────┐ │
│ │ 비밀번호 │ │
│ │ [••••••••] 👁 │ │
│ └──────────────────┘ │
│ │
│ ☐ 자동 로그인 │
│ │
│ [비밀번호 찾기] │
│ │
├─────────────────────────┤
│ [ 로그인 ] │
│ │
│ 계정이 없으신가요? │
│ [회원가입] │
└─────────────────────────┘
```
**인터랙션**
- 입력 필드 포커스 시 테두리 강조
- 비밀번호 보기/숨기기 토글
- 로그인 실패 시 에러 메시지 표시
- "이메일 또는 비밀번호가 일치하지 않습니다"
- "존재하지 않는 계정입니다"
- 로그인 성공 시 홈화면(02)으로 이동
**반응형 처리**
- 태블릿(768px~): 입력 필드 최대 너비 400px 중앙 정렬
- 데스크톱(1024px~): 좌측에 서비스 소개 영상/이미지, 우측에 로그인 폼
**접근성**
- 모든 입력 필드에 명확한 label
- 에러 메시지는 aria-live="polite"로 전달
- Enter 키로 로그인 가능
---
#### 02-홈화면
**개요**
- **목적**: 로그인 후 이벤트 현황 확인 및 빠른 액션 제공
- **관련 유저스토리**: UFR-USER-002
- **비즈니스 중요도**: Must (M/8)
**주요 기능**
1. 대시보드 요약 (진행 중인 이벤트, 참여자, 광고수익률)
2. 진행 중인 이벤트 목록
3. 새 이벤트 생성 버튼
4. 빠른 네비게이션
**UI 구성요소**
**모바일 (320px~767px)**
```
┌─────────────────────────┐
│ ☰ 메뉴 KT 이벤트 🔔 │
├─────────────────────────┤
│ │
│ 안녕하세요, │
│ [김사장님] 매장 👋 │
│ │
│ ┌─────────────────────┐│
│ │ 📊 이번 달 요약 ││
│ │ ││
│ │ 진행중 이벤트: 2개 ││
│ │ 총 참여자: 145명 ││
│ │ 광고수익률: +35% ││
│ └─────────────────────┘│
│ │
│ 진행 중인 이벤트 │
│ ┌─────────────────────┐│
│ │ 🎁 신년 특별 이벤트 ││
│ │ 참여: 78명 ││
│ │ 남은기간: D-5 ││
│ │ [상세보기] ││
│ └─────────────────────┘│
│ ┌─────────────────────┐│
│ │ 🍕 재방문 쿠폰 ││
│ │ 참여: 67명 ││
│ │ 남은기간: D-12 ││
│ │ [상세보기] ││
│ └─────────────────────┘│
│ │
│ [모든 이벤트 보기 >] │
│ │
├─────────────────────────┤
│ [ ➕ 새 이벤트 생성 ] │
│ │
│ ┌──────┬──────┬───────┐│
│ │ 홈 │ 분석 │ 관리 ││
│ └──────┴──────┴───────┘│
└─────────────────────────┘
```
**인터랙션**
- 대시보드 카드 스와이프로 더 많은 정보 확인
- 이벤트 카드 클릭 시 상세 대시보드(23번 화면)로 이동
- "새 이벤트 생성" 버튼 클릭 시 이벤트 기획 시작(05번 화면)
- 하단 탭 네비게이션으로 주요 섹션 이동
**반응형 처리**
- 태블릿(768px~): 이벤트 카드 2열 그리드
- 데스크톱(1024px~): 좌측 사이드바 네비게이션, 우측에 대시보드 3열 레이아웃
**접근성**
- 모든 카드에 명확한 제목과 설명
- 버튼은 최소 44x44px 터치 영역
- 화면 로드 시 환영 메시지 읽어주기
---
#### 03-회원가입
**개요**
- **목적**: 신규 소상공인의 간편한 회원가입 처리
- **관련 유저스토리**: UFR-USER-010
- **비즈니스 중요도**: Must (M/5)
**주요 기능**
1. 기본 정보 입력 (이름, 전화번호, 이메일)
2. 비밀번호 설정
3. 개인정보 수집 동의
4. 중복 가입 방지
**UI 구성요소**
**모바일 (320px~767px)**
```
┌─────────────────────────┐
│ ← [뒤로] 회원가입 │
├─────────────────────────┤
│ │
│ KT 이벤트 마케팅 │
│ 환영합니다 🎉 │
│ │
│ ┌──────────────────┐ │
│ │ 이름 * │ │
│ │ [2자 이상 입력] │ │
│ └──────────────────┘ │
│ │
│ ┌──────────────────┐ │
│ │ 전화번호 * │ │
│ │ [010-XXXX-XXXX] │ │
│ └──────────────────┘ │
│ │
│ ┌──────────────────┐ │
│ │ 이메일 * │ │
│ │ [example@xx.com] │ │
│ └──────────────────┘ │
│ │
│ ┌──────────────────┐ │
│ │ 비밀번호 * │ │
│ │ [••••••••] 👁 │ │
│ │ 최소 8자, 영문/숫자│ │
│ │ /특수문자 조합 │ │
│ └──────────────────┘ │
│ │
│ ┌──────────────────┐ │
│ │ 비밀번호 확인 * │ │
│ │ [••••••••] 👁 │ │
│ └──────────────────┘ │
│ │
│ ☑ 개인정보 수집 동의 │
│ (필수) [자세히보기] │
│ │
├─────────────────────────┤
│ [ 매장 정보 등록 ] │
└─────────────────────────┘
```
**인터랙션**
- 입력 필드 포커스 시 라벨 상단 이동 (Material Design)
- 실시간 형식 검증
- 이름: 2자 이상
- 전화번호: 010-XXXX-XXXX 형식
- 이메일: example@domain.com 형식
- 비밀번호: 최소 8자, 영문/숫자/특수문자 조합
- 비밀번호 확인: 비밀번호와 일치 여부
- 중복 가입 체크 (이메일, 전화번호 기준)
- 비밀번호 보기/숨기기 토글
- 모든 필드 입력 및 동의 완료 시 버튼 활성화
- 회원가입 완료 시 매장정보등록(04번 화면)으로 이동
**검증 에러 메시지**
- 이름: "이름을 2자 이상 입력해주세요"
- 전화번호: "올바른 전화번호 형식이 아닙니다 (010-XXXX-XXXX)"
- 이메일: "올바른 이메일 형식이 아닙니다"
- 비밀번호: "최소 8자 이상, 영문/숫자/특수문자를 조합해주세요"
- 비밀번호 확인: "비밀번호가 일치하지 않습니다"
- 중복: "이미 가입된 이메일입니다" / "이미 가입된 전화번호입니다"
**반응형 처리**
- 태블릿(768px~): 입력 필드 최대 너비 500px 중앙 정렬
- 데스크톱(1024px~): 좌측에 서비스 소개 이미지, 우측에 폼 배치
**접근성**
- 모든 입력 필드에 적절한 label과 placeholder
- 필수 필드는 asterisk(*)로 표시
- 에러 메시지는 aria-live로 스크린 리더에 즉시 전달
- Tab 키 순서 논리적으로 설정
---
#### 04-매장정보등록
**개요**
- **목적**: 맞춤형 이벤트 생성을 위한 매장 정보 수집 및 검증
- **관련 유저스토리**: UFR-USER-020
- **비즈니스 중요도**: Must (M/13)
**주요 기능**
1. 매장 기본 정보 입력 (매장명, 업종, 주소)
2. 사업자번호 검증 (국세청 API 연동)
3. 메뉴/상품 정보 입력 (선택)
4. 매장 이미지 업로드 (선택)
5. 검증 완료 후 대시보드로 이동
**UI 구성요소**
**모바일 (320px~767px)**
```
┌─────────────────────────┐
│ ← [뒤로] 매장정보등록 │
├─────────────────────────┤
│ 진행상황: ━━━━━━━━━ 2/2 │
├─────────────────────────┤
│ │
│ 필수 정보 │
│ │
│ [매장명 입력] │
│ (최대 50자) │
│ │
│ [업종 선택 ▼] │
│ 음식점/카페/소매업... │
│ │
│ [주소 검색 🔍] │
│ (도로명 주소 API 연동) │
│ │
│ [사업자번호 *] │
│ XXX-XX-XXXXX │
│ [검증하기] ← 자동 검증 │
│ │
│ ───────────────────── │
│ 선택 정보 (이벤트 맞춤화)│
│ │
│ 메뉴/상품 (최대 10개) │
│ + [메뉴 추가] │
│ ┌────────────────────┐ │
│ │ • 치킨 세트 │ │
│ │ 15,000원 │ │
│ │ 바삭한 황금 치킨 │ │
│ └────────────────────┘ │
│ │
│ 매장 특징/강점 │
│ [텍스트 입력 영역] │
│ (최대 200자) │
│ │
│ 대표 이미지 (최대 3장) │
│ [📷] [📷] [📷] │
│ │
├─────────────────────────┤
│ [ 등록 완료하기 ] │
└─────────────────────────┘
```
**인터랙션**
1. **주소 검색**: 바텀 시트로 주소 검색 UI 표시 (카카오 주소 API)
2. **사업자번호 검증**:
- 입력 완료 시 자동 검증 시작
- 로딩 인디케이터 표시: "사업자번호 확인 중..."
- 검증 성공: ✅ "확인됨" 표시 (녹색 배지)
- 검증 실패: ❌ 구체적인 오류 메시지 표시
- **형식 오류**: "사업자번호 형식이 올바르지 않습니다. (XXX-XX-XXXXX 형식으로 입력해주세요)"
- **유효성 오류**: "등록되지 않은 사업자번호입니다. 번호를 다시 확인해주세요."
- **휴폐업**: "휴업 또는 폐업된 사업자입니다. 현재 운영 중인 사업자번호를 입력해주세요."
- **정보 불일치**: "입력하신 매장명과 사업자 정보가 일치하지 않습니다."
- **API 연동 오류**: "사업자번호 확인 중 오류가 발생했습니다. 잠시 후 다시 시도해주세요."
- 오류 발생 시 입력 필드 빨간색 테두리 강조 및 포커스 이동
- 재시도 버튼 제공
3. **메뉴 추가**: 바텀 시트로 메뉴명(최대 30자), 가격, 설명(최대 100자) 입력
4. **이미지 업로드**:
- 카메라 또는 갤러리 선택
- 업로드 진행률 표시
- 미리보기 제공 (최대 5MB)
**반응형 처리**
- 태블릿: 2단 레이아웃 (필수정보 | 선택정보)
- 데스크톱: 3단 레이아웃 + 우측에 진행 상황 및 안내
**검증 및 피드백**
- 매장명: 최대 50자 필수
- 업종: 카테고리 리스트 중 필수 선택
- 주소: 도로명 주소 API 연동 필수
- 사업자번호: 형식 검증 (XXX-XX-XXXXX) → 국세청 API 검증
- 유효성 확인
- 휴폐업 여부 확인
- 매장명과 사업자 정보 일치 확인
- 검증 실패 시 구체적인 오류 메시지와 함께 재입력 유도
- 이전 입력값 유지하여 사용자 편의성 제공
- 오류 로그 자동 기록 (감사 추적용)
---
### 4.2 Event Planning Service
---
#### 05-이벤트목적선택
**개요**
- **목적**: 이벤트 기획의 방향성 설정
- **관련 유저스토리**: UFR-PLAN-010
- **비즈니스 중요도**: Must (M/3)
**주요 기능**
1. 4가지 목적 중 하나 선택 (카드형 라디오 버튼)
2. 각 목적별 아이콘, 설명, 예상 효과 제시
3. 목적별 상세 정보 바텀 시트 제공 (주요 혜택, 추천 전략, 성공률)
4. 선택 시 다음 단계(AI 분석) 자동 진행
**UI 구성요소**
**모바일**
```
┌─────────────────────────┐
│ ← [닫기] 새 이벤트 기획 │
├─────────────────────────┤
│ 단계 1/6 ●○○○○○ │
│ │
│ 이벤트 목적을 선택하세요 │
│ │
│ ┌─────────────────────┐│
│ │ 👤 ││
│ │ 신규고객 유치 ││
│ │ 새로운 고객 확보 ││
│ │ 예상효과: +30% ││
│ │ [ℹ️] ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 🔄 ││
│ │ 재방문 유도 ││
│ │ 기존 고객 재방문 ││
│ │ 예상효과: +25% ││
│ │ [ℹ️] ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 💰 ││
│ │ 매출 증대 ││
│ │ 단기 매출 향상 ││
│ │ 예상효과: +40% ││
│ │ [ℹ️] ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 📢 ││
│ │ 인지도 향상 ││
│ │ 브랜드 인지도 제고 ││
│ │ 예상효과: +50% ││
│ │ [ℹ️] ││
│ └─────────────────────┘│
│ │
└─────────────────────────┘
```
**목적별 상세 정보 (바텀 시트)**
```
┌─────────────────────────┐
│ [━━] 신규고객 유치 │
├─────────────────────────┤
│ 👤 예상효과: 신규 고객 +30% │
│ 📊 성공률: 85% │
│ │
│ 💡 주요 혜택 │
│ • 새로운 잠재고객 발굴 │
│ • 고객 기반 확대 │
│ • 시장 점유율 증가 │
│ │
│ 🎯 추천 전략 │
│ • 할인 쿠폰 제공 │
│ • SNS 바이럴 마케팅 │
│ • 신규 고객 전용 특전 │
│ │
│ [ 이 목적으로 진행 ] │
└─────────────────────────┘
```
**목적별 세부 정보**
**1. 신규고객 유치**
- 예상효과: +30%
- 성공률: 85%
- 주요 혜택:
- 새로운 잠재고객 발굴
- 고객 기반 확대
- 시장 점유율 증가
- 추천 전략:
- 할인 쿠폰 제공
- SNS 바이럴 마케팅
- 신규 고객 전용 특전
**2. 재방문 유도**
- 예상효과: +25%
- 성공률: 80%
- 주요 혜택:
- 고객 충성도 향상
- 재구매율 증가
- 고객 생애 가치(LTV) 상승
- 추천 전략:
- 재방문 쿠폰 증정
- 포인트 적립 이벤트
- VIP 고객 우대 프로그램
**3. 매출 증대**
- 예상효과: +40%
- 성공률: 75%
- 주요 혜택:
- 단기 매출 급증
- 재고 소진 효과
- 객단가 상승
- 추천 전략:
- 한정 수량 프로모션
- 세트 상품 할인
- 시간대별 특가 이벤트
**4. 인지도 향상**
- 예상효과: +50%
- 성공률: 90%
- 주요 혜택:
- 브랜드 노출 극대화
- 입소문 효과
- 잠재 고객층 확대
- 추천 전략:
- SNS 공유 이벤트
- 해시태그 챌린지
- 인플루언서 협업
**인터랙션**
1. **카드 선택**:
- 카드 탭 시 선택 상태 전환 (배경색 변경, 체크 표시)
- 호버/롱프레스 시 카드 약간 확대 애니메이션
- 선택된 카드는 Primary Color 배경, 미선택 카드는 회색 배경
2. **상세 정보 보기** (ℹ️ 버튼):
- 각 카드 우측 하단 ℹ️ 아이콘 탭
- 바텀 시트 슬라이드업 애니메이션 (0.3초)
- 상세 정보 표시 (주요 혜택, 추천 전략, 성공률)
- 바텀 시트 내 "이 목적으로 진행" 버튼 탭 시:
- 해당 목적 자동 선택
- 바텀 시트 닫힘
- 다음 단계(AI 트렌드 분석) 자동 진행
3. **다음 단계 진행**:
- 카드 직접 선택 시 즉시 다음 화면(06-AI트렌드분석결과)으로 자동 이동
- 트랜지션: 페이드아웃 → 페이드인 (0.5초)
- 선택한 목적 정보는 다음 단계로 전달
4. **뒤로가기**:
- 좌측 상단 X 버튼 또는 디바이스 뒤로가기
- 확인 다이얼로그: "기획을 취소하시겠습니까?"
- 확인 시 홈 화면(02)으로 이동
**접근성**
- 각 카드에 role="radio" 속성
- aria-label: "신규고객 유치, 예상효과 30% 증가"
- 키보드 네비게이션: Tab/Shift+Tab으로 카드 이동, Enter/Space로 선택
- 스크린 리더: 목적명, 설명, 예상효과 순서로 읽기
**성능**
- 초기 로딩 < 1초
- 카드 선택 후 다음 화면 프리페치 (0.5초 이내)
- 바텀 시트 애니메이션 60fps 유지
- 이미지 아이콘 대신 유니코드 이모지 사용 (로딩 시간 절감)
---
#### 06-AI이벤트유형추천
**개요**
- **목적**: AI 기반 이벤트 유형 추천 및 선택
- **관련 유저스토리**: UFR-PLAN-020
- **비즈니스 중요도**: Must (M/21)
**주요 기능**
1. 선택한 목적에 맞는 7가지 이벤트 유형 AI 추천
2. 가성비 등급 표시 (S/A/B/C/D)
3. 정렬 기능 (가성비순, 추천순, 난이도순, ROI순)
4. 태그 필터링 (디지털/오프라인, SNS, 저예산 등)
5. 각 이벤트 유형별 상세 정보 확인
6. 이벤트 유형 선택 → 상세 정보 화면으로 이동
**UI 구성요소**
**모바일**
```
┌─────────────────────────┐
│ ← [뒤로] AI 이벤트 추천 │
├─────────────────────────┤
│ 단계 2/6 ●●○○○○ │
│ │
│ 매장 유형에 맞는 │
│ 이벤트를 추천해드려요 │
│ │
│ [정렬: 가성비순 ▼] │
│ #전체 #디지털 #오프라인 │
│ │
│ ┌─────────────────────┐│
│ │ SNS 해시태그 이벤트 ││
│ │ 가성비 [S] 난이도 ⭐ ││
│ │ 💰 5만원~10만원 ││
│ │ 📊 ROI: 1,700% ││
│ │ ││
│ │ 예상효과 ││
│ │ • SNS 노출 +400% ││
│ │ • 신규 고객 +70% ││
│ │ • 인지도 +120% ││
│ │ ││
│ │ #디지털 #SNS #바이럴││
│ │ [자세히 보기]││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 명함형 쿠폰 배포 ││
│ │ 가성비 [S] 난이도 ⭐ ││
│ │ 💰 3만원~8만원 ││
│ │ 📊 ROI: 2,592% ││
│ │ ││
│ │ 예상효과 ││
│ │ • 재방문율 +350% ││
│ │ • 객단가 +45% ││
│ │ • 신규고객 +120% ││
│ │ ││
│ │ #오프라인 #쿠폰 ││
│ │ #최고가성비 ││
│ │ [자세히 보기]││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 출석체크 이벤트 ││
│ │ 가성비 [A] 난이도 ⭐⭐││
│ │ 💰 8만원~15만원 ││
│ │ 📊 ROI: 1,875% ││
│ │ [자세히 보기]││
│ └─────────────────────┘│
│ │
│ ... (스크롤로 더보기) │
│ │
└─────────────────────────┘
```
**7가지 추천 이벤트 유형**
**1. SNS 해시태그 이벤트**
- 예산: 5만원 ~ 10만원
- 가성비 등급: S (17.0점)
- 난이도: ⭐ (1/5)
- 추천점수: 8.3/10
- 예상 ROI: 1,700%
- 예상 효과:
- SNS 노출 +400%
- 신규 고객 +70%
- 브랜드 인지도 +120%
- 태그: #디지털 #SNS #바이럴 #저예산
**2. 명함형 쿠폰 배포**
- 예산: 3만원 ~ 8만원
- 가성비 등급: S (25.9점)
- 난이도: ⭐ (1/5)
- 추천점수: 9.1/10
- 예상 ROI: 2,592%
- 예상 효과:
- 재방문율 +350%
- 객단가 +45%
- 신규 고객 +120%
- 태그: #오프라인 #쿠폰 #지역마케팅 #최고가성비
**3. 출석체크 이벤트**
- 예산: 8만원 ~ 15만원
- 가성비 등급: A (15.0점)
- 난이도: ⭐⭐ (2/5)
- 추천점수: 7.8/10
- 예상 ROI: 1,875%
- 예상 효과:
- 재방문율 +280%
- 고객 충성도 +150%
- 참여율 +65%
- 태그: #디지털 #앱필요 #중기간
**4. 룰렛 이벤트**
- 예산: 10만원 ~ 20만원
- 가성비 등급: B (12.5점)
- 난이도: ⭐⭐ (2/5)
- 추천점수: 7.5/10
- 예상 ROI: 1,250%
- 예상 효과:
- 참여율 +200%
- 재미 요소로 공유율 +180%
- 신규 고객 +90%
- 태그: #디지털 #게이미피케이션 #재미
**5. 친구 초대 이벤트**
- 예산: 15만원 ~ 30만원
- 가성비 등급: B (10.0점)
- 난이도: ⭐⭐⭐ (3/5)
- 추천점수: 7.2/10
- 예상 ROI: 1,000%
- 예상 효과:
- 신규 고객 +250%
- 바이럴 효과 +300%
- 고객 확보 비용 -40%
- 태그: #디지털 #바이럴 #신규고객
**6. 리뷰 작성 이벤트**
- 예산: 12만원 ~ 25만원
- 가성비 등급: C (8.3점)
- 난이도: ⭐⭐⭐ (3/5)
- 추천점수: 6.9/10
- 예상 ROI: 833%
- 예상 효과:
- 리뷰 수 +400%
- 신뢰도 +120%
- 검색 노출 +80%
- 태그: #디지털 #신뢰구축 #장기전략
**7. 포토 콘테스트**
- 예산: 20만원 ~ 50만원
- 가성비 등급: C (5.0점)
- 난이도: ⭐⭐⭐⭐ (4/5)
- 추천점수: 6.5/10
- 예상 ROI: 500%
- 예상 효과:
- UGC 콘텐츠 +500%
- SNS 노출 +250%
- 브랜드 이미지 +150%
- 태그: #디지털 #SNS #고예산 #장기전략
**가성비 등급 기준**
- **S등급**: 20점 이상 (최고 가성비)
- **A등급**: 15~19점 (매우 높은 가성비)
- **B등급**: 10~14점 (높은 가성비)
- **C등급**: 5~9점 (보통 가성비)
- **D등급**: 5점 미만 (낮은 가성비)
**인터랙션**
1. **정렬 기능**:
- 드롭다운 메뉴: 가성비순, 추천순, 난이도순, ROI순
- 선택 시 카드 순서 즉시 재정렬 (애니메이션 0.3초)
- 현재 정렬 기준 헤더에 표시
2. **태그 필터링**:
- 태그 칩 탭으로 필터 활성화/비활성화
- 선택된 태그는 Primary Color 배경
- 여러 태그 동시 선택 가능 (OR 조건)
- 필터링 시 매칭되는 카드만 표시 (페이드 애니메이션)
3. **카드 인터랙션**:
- 카드 전체 탭 시 해당 이벤트 유형의 상세 정보 화면(06-2)으로 이동
- "자세히 보기" 버튼 탭 시 상세 정보 화면으로 이동
- 호버 시 카드 살짝 확대 효과 (스케일 1.02)
- 스크롤 시 무한 스크롤 (7개 전체 로드)
4. **AI 분석 프로세스**:
- 이전 화면(05)에서 선택한 목적 기반 추천
- 매장 업종, 지역, 시즌 정보 반영
- 로딩: 스켈레톤 UI 표시 (1-2초)
- 분석 완료 후 카드 순차 페이드인 (각 0.1초 간격)
5. **트렌드 분석 보기** (옵션):
- 우측 상단 "📊 트렌드 분석" 버튼
- 탭 시 AI 트렌드 분석 결과 모달/바텀 시트 표시
- 현재 계절, 업종별 트렌드 정보 제공
**접근성**
- 각 카드에 role="article" 속성
- aria-label: "SNS 해시태그 이벤트, 가성비 S등급, 예상 ROI 1700%"
- 키보드: Tab으로 카드 탐색, Enter로 상세 보기
- 스크린 리더: 이벤트명, 가성비, 예산, 효과 순서로 읽기
- 색맹 고려: 등급 표시에 색상 + 문자 병행 (S/A/B/C/D)
**성능**
- 초기 로딩 < 2초 (AI 추천 포함)
- 카드 렌더링: 가상 스크롤 적용 (메모리 효율화)
- 이미지 없이 아이콘/이모지만 사용 (빠른 렌더링)
- 정렬/필터링 즉시 반영 (< 0.3초)
- 다음 화면(상세 정보) 프리페치
**AI 추천 로직**
- 입력: 선택한 목적, 매장 업종, 지역, 계절, 예산 범위
- Claude API 활용: 7가지 이벤트 유형 추천
- 가성비 점수 계산: (예상 효과 / 예상 비용) × 가중치
- 난이도 평가: 준비 시간, 기술 요구사항, 복잡도
- ROI 예측: 동일 업종 과거 데이터 기반
---
#### 06-1-AI트렌드분석결과
**개요**
- **목적**: AI가 분석한 업종/지역/시즌 트렌드 제시
- **관련 유저스토리**: UFR-PLAN-020
- **비즈니스 중요도**: Must (M/13)
**주요 기능**
1. 5단계 AI 분석 프로세스 시각화 (로딩 애니메이션)
2. 업종, 지역, 시즌 기반 맞춤형 트렌드 분석
3. 주요 트렌드 3-5가지 카드 형태로 제시
4. 트렌드별 추천 이벤트 전략 제시
5. 분석 완료 후 자동으로 다음 단계 진행
**UI 구성요소**
**모바일 - 분석 진행 중**
```
┌─────────────────────────┐
│ AI 트렌드 분석 │
├─────────────────────────┤
│ │
│ 🤖 │
│ AI가 분석중입니다 │
│ │
│ ━━━━━━━━●━━━━━━━━━━━ │
│ 60% │
│ │
│ 시즌 패턴 학습 중... │
│ │
│ 분석 단계: │
│ ✅ 업종 데이터 수집 │
│ ✅ 지역 트렌드 분석 │
│ 🔄 시즌 패턴 학습 │
│ ⏳ 최적 전략 계산 │
│ ⏳ 분석 완료 │
│ │
└─────────────────────────┘
```
**모바일 - 분석 완료 후**
```
┌─────────────────────────┐
│ ← [뒤로] AI 트렌드 분석 │
├─────────────────────────┤
│ │
│ 📊 분석 결과 │
│ │
│ 매장: 수원 왕갈비통닭 │
│ 업종: 치킨 전문점 │
│ 지역: 수원시 팔달구 │
│ 시즌: 겨울 (12월) │
│ │
│ 주요 트렌드 │
│ │
│ ┌─────────────────────┐│
│ │ 1️⃣ 연말 모임 증가 ││
│ │ ││
│ │ 💡 추천 전략 ││
│ │ 단체 할인 이벤트 효과││
│ │ 적, 회식/송년회 수요││
│ │ 급증으로 단체 예약 ││
│ │ 고객 공략 필요 ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 2️⃣ 배달 주문 급증 ││
│ │ ││
│ │ 💡 추천 전략 ││
│ │ 배달 경품 추천, 배달││
│ │ 전용 할인 쿠폰 이벤트││
│ │ 효과적 ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 3️⃣ SNS 공유 활발 ││
│ │ ││
│ │ 💡 추천 전략 ││
│ │ 바이럴 참여방법 권장,││
│ │ 해시태그 이벤트로 ││
│ │ 노출 극대화 ││
│ └─────────────────────┘│
│ │
│ 예상 성공률: 78% 🎯 │
│ (동일 업종 평균 대비) │
│ │
├─────────────────────────┤
│ [이벤트 유형 선택하기] │
└─────────────────────────┘
```
**5단계 AI 분석 프로세스**
**1단계: 업종 데이터 수집 (0-20%)**
- 진행 메시지: "업종 데이터 수집 중..."
- 처리 내용: 선택한 업종의 과거 이벤트 데이터 수집
- 예상 시간: 0.5-1초
**2단계: 지역 트렌드 분석 (20-40%)**
- 진행 메시지: "지역 트렌드 분석 중..."
- 처리 내용: 매장 지역의 인구통계 및 소비 패턴 분석
- 예상 시간: 0.5-1초
**3단계: 시즌 패턴 학습 (40-60%)**
- 진행 메시지: "시즌 패턴 학습 중..."
- 처리 내용: 현재 계절/월의 소비 트렌드 패턴 분석
- 예상 시간: 1-2초
**4단계: 최적 전략 계산 (60-80%)**
- 진행 메시지: "최적 전략 계산 중..."
- 처리 내용: AI가 최적의 이벤트 전략 도출
- 예상 시간: 1-2초
**5단계: 분석 완료 (80-100%)**
- 진행 메시지: "분석 완료!"
- 처리 내용: 결과 데이터 구조화 및 UI 렌더링 준비
- 예상 시간: 0.5초
**업종별 트렌드 예시**
**치킨 전문점 (겨울)**
1. 연말 모임 증가 → 단체 할인 이벤트 효과적
2. 배달 주문 급증 → 배달 경품 추천
3. SNS 공유 활발 → 바이럴 참여방법 권장
**카페 (여름)**
1. 아이스 음료 선호 → 시즌 메뉴 할인
2. 학생 고객 증가 → 학생 할인 이벤트
3. 포토존 수요 → 인스타그램 해시태그 이벤트
**미용실 (봄)**
1. 졸업/입학 시즌 → 패키지 할인
2. 웨딩 성수기 → 신부 메이크업 특가
3. 새학기 이미지 변신 → SNS 공유 이벤트
**인터랙션**
1. **AI 분석 진행 중**:
- 5단계 프로그레스 바 애니메이션 (0% → 100%)
- 각 단계별 진행 메시지 실시간 업데이트
- 체크마크(✅)/진행중(🔄)/대기중(⏳) 아이콘 변경
- 부드러운 로딩 애니메이션 (펄스 효과)
- 총 소요 시간: 3-7초
2. **분석 완료 후**:
- 결과 카드 순차 페이드인 애니메이션 (각 0.2초 간격)
- 매장 정보 먼저 표시 → 트렌드 카드 순차 표시
- 각 트렌드 카드에 슬라이드업 애니메이션
3. **트렌드 카드 인터랙션**:
- 각 카드 탭 시 확장되어 상세 설명 표시
- 호버 시 카드 살짝 확대 (스케일 1.02)
- 추천 전략 텍스트 강조 표시
4. **다음 단계 진행**:
- "이벤트 유형 선택하기" 버튼 탭
- 화면 06(AI이벤트유형추천)으로 이동
- 분석된 트렌드 정보는 다음 단계로 전달
5. **에러 처리**:
- 분석 실패 시: "분석에 실패했습니다" 메시지 + [재시도] 버튼
- 타임아웃 (15초 초과): "분석 시간이 초과되었습니다" + [재시도] 버튼
**접근성**
- 로딩 진행 상태 aria-live="polite" 속성으로 스크린 리더 알림
- 프로그레스 바 role="progressbar", aria-valuenow 동적 업데이트
- 각 트렌드 카드 role="article", aria-label로 내용 요약
- 키보드: Tab으로 트렌드 카드 탐색, Enter로 확장/축소
**성능**
- AI 분석 시간: 목표 3-7초 (Claude API 응답 시간 포함)
- 로딩 애니메이션 60fps 유지
- 타임아웃 설정: 15초 (초과 시 재시도 옵션)
- 결과 캐싱: 동일 조건 재분석 시 즉시 표시
- 다음 화면(이벤트 유형) 프리페치
**AI 분석 로직**
- 입력: 매장 업종, 지역, 현재 계절/월
- Claude API 활용: 맞춤형 트렌드 분석 및 전략 추천
- 분석 범위:
- 동일 업종 과거 3년 이벤트 데이터
- 지역 인구통계 및 소비 패턴
- 계절별/월별 소비 트렌드
- SNS 언급량 및 키워드 분석
- 출력: 3-5개 주요 트렌드 + 각 트렌드별 추천 전략
---
#### 06-2-이벤트상세정보
**개요**
- **목적**: 선택한 이벤트 유형의 상세 정보 제공
- **관련 유저스토리**: UFR-PLAN-020
- **비즈니스 중요도**: Must (M/21)
**주요 기능**
1. 4개 탭으로 구성된 상세 정보 제공
- 개요: 이벤트 핵심 정보 및 예상 효과
- 실행 가이드: 5단계 구현 타임라인
- 비용 구조: 상세 비용 내역 및 예산 계획
- 성공 사례: 실제 사례 및 성과 데이터
2. 탭 전환으로 정보 탐색
3. 이벤트 유형 선택 또는 돌아가기 기능
**UI 구성요소**
**모바일**
```
┌─────────────────────────┐
│ ← [뒤로] SNS 해시태그 이벤트│
├─────────────────────────┤
│ ┌─────┬─────┬─────┬───┐│
│ │개요 │실행│비용│성공││
│ │ │가이드│구조│사례││
│ └─────┴─────┴─────┴───┘│
│ ━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ [탭 1: 개요] │
│ │
│ 🎯 이벤트 핵심 │
│ │
│ ┌─────────────────────┐│
│ │ 가성비 [S] ││
│ │ 난이도 ⭐ (매우 쉬움)││
│ │ 예산 5만원~10만원 ││
│ │ 준비기간 1-2일 ││
│ └─────────────────────┘│
│ │
│ 📈 예상 효과 │
│ • SNS 노출 +400% │
│ • 신규 고객 +70% │
│ • 브랜드 인지도 +120% │
│ │
│ 💡 이런 분들에게 추천 │
│ • SNS 마케팅 중요 매장 │
│ • 저예산 고효율 원하는 │
│ • 빠른 시작 원하는 │
│ │
├─────────────────────────┤
│ [ 이 이벤트로 진행 ] │
│ [ 다른 유형 보기 ] │
└─────────────────────────┘
```
**탭 1: 개요**
```
│ 🎯 이벤트 핵심 │
│ │
│ ┌─────────────────────┐│
│ │ 가성비 등급 [S] ││
│ │ 난이도 ⭐ (매우 쉬움)││
│ │ 예상 예산 5만~10만원││
│ │ 준비 기간 1-2일 ││
│ │ 운영 기간 1-2주 ││
│ │ 예상 ROI 1,700% ││
│ └─────────────────────┘│
│ │
│ 📈 예상 효과 │
│ • SNS 노출 +400% │
│ • 신규 고객 +70% │
│ • 브랜드 인지도 +120% │
│ • 참여율 15-25% │
│ │
│ 💡 이런 분들에게 추천 │
│ • SNS 마케팅이 중요한 │
│ 매장 │
│ • 저예산으로 고효율을 │
│ 원하는 사장님 │
│ • 빠르게 시작하고 싶은 │
│ 사장님 │
│ • 바이럴 효과를 원하는 │
│ 사장님 │
│ │
│ ⚠️ 주의사항 │
│ • 해시태그 관리 필요 │
│ • SNS 계정 준비 필수 │
│ • 참여 검증 시간 소요 │
```
**탭 2: 실행 가이드**
```
│ 📋 5단계 실행 가이드 │
│ │
│ ┌─────────────────────┐│
│ │ [1] 준비 단계 (1-2일)││
│ │ ││
│ │ ✓ 이벤트 이미지 제작││
│ │ (Canva 무료 활용) ││
│ │ ✓ 해시태그 선정 ││
│ │ (매장명+이벤트명 ││
│ │ +지역명) ││
│ │ ✓ SNS 계정 준비 ││
│ │ (Instagram/Facebook)││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ [2] 런칭 단계 (1일) ││
│ │ ││
│ │ ✓ SNS에 이벤트 공지││
│ │ ✓ 매장 내 포스터 ││
│ │ 부착 ││
│ │ ✓ 직원 교육 ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ [3] 운영 단계 (1-2주)││
│ │ ││
│ │ ✓ 참여자 모니터링 ││
│ │ ✓ 댓글/DM 응답 ││
│ │ ✓ 중간 결과 공유 ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ [4] 추첨 단계 (1일) ││
│ │ ││
│ │ ✓ 참여자 검증 ││
│ │ ✓ 랜덤 추첨 ││
│ │ ✓ 당첨자 발표 ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ [5] 마무리 (2-3일) ││
│ │ ││
│ │ ✓ 경품 지급 ││
│ │ ✓ 감사 인사 포스팅 ││
│ │ ✓ 결과 분석 ││
│ └─────────────────────┘│
```
**탭 3: 비용 구조**
```
│ 💰 상세 비용 내역 │
│ │
│ ┌─────────────────────┐│
│ │ 이벤트 상품 비용 ││
│ │ 50,000원 (예시) ││
│ │ ││
│ │ • 치킨 세트 5개 ││
│ │ @ 10,000원 ││
│ │ ││
│ │ 또는 ││
│ │ ││
│ │ • 5,000원 쿠폰 10개││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 홍보 비용 (선택) ││
│ │ 0 ~ 30,000원 ││
│ │ ││
│ │ • SNS 광고 (선택) ││
│ │ • 포스터 인쇄 (선택)││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 예상 총 비용 ││
│ │ 50,000 ~ 80,000원 ││
│ │ ││
│ │ 예상 참여자 50-100명││
│ │ 1인당 비용 500-1,600원││
│ └─────────────────────┘│
│ │
│ 💡 비용 절감 팁 │
│ • Canva로 무료 디자인 │
│ • 자사 SNS 활용 │
│ • 고객 태그로 무료 홍보│
```
**탭 4: 성공 사례**
```
│ 🏆 실제 성공 사례 │
│ │
│ ┌─────────────────────┐│
│ │ 수원 왕갈비통닭 ││
│ │ 치킨 전문점 ││
│ │ ││
│ │ 📊 성과 ││
│ │ • 참여자 127명 ││
│ │ • 신규 고객 89명 ││
│ │ • 매출 +43% ││
│ │ • 팔로워 +312명 ││
│ │ ││
│ │ 💬 후기 ││
│ │ "예산 7만원으로 신규││
│ │ 고객 89명 확보했어요!││
│ │ SNS 팔로워도 3배 ││
│ │ 늘었습니다." ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 부산 떡볶이 천국 ││
│ │ 분식점 ││
│ │ ││
│ │ 📊 성과 ││
│ │ • 참여자 203명 ││
│ │ • 신규 고객 145명 ││
│ │ • 매출 +67% ││
│ │ • 재방문율 +35% ││
│ │ ││
│ │ 💬 후기 ││
│ │ "학생들 사이에서 입소││
│ │ 문 나면서 대박났어요!││
│ │ 비용 대비 효과 최고"││
│ └─────────────────────┘│
```
**인터랙션**
1. **탭 전환**:
- 탭 버튼 탭 시 해당 컨텐츠로 전환
- 활성 탭은 하단 언더라인 표시 (Primary Color)
- 탭 전환 애니메이션: 슬라이드 (0.3초)
- 스와이프 제스처로도 탭 전환 가능
2. **스크롤 인터랙션**:
- 각 탭 내용은 독립적으로 스크롤
- 스크롤 위치는 탭별로 유지
- 긴 컨텐츠는 페이드 인디케이터로 더보기 힌트
3. **액션 버튼**:
- "이 이벤트로 진행" 버튼:
- Primary 버튼 스타일
- 탭 시 선택한 이벤트 유형 저장
- 다음 화면(07-AI이벤트상품추천)으로 이동
- "다른 유형 보기" 버튼:
- Secondary 버튼 스타일
- 탭 시 이전 화면(06-AI이벤트유형추천)으로 돌아가기
4. **뒤로가기**:
- 좌측 상단 뒤로가기 버튼
- 이전 화면(06-AI이벤트유형추천)으로 이동
- 선택 상태 유지 (동일 이벤트 하이라이트)
5. **타임라인 인터랙션** (실행 가이드 탭):
- 각 단계 카드 탭 시 확장되어 추가 상세 정보 표시
- 완료 체크박스 제공 (준비 진행도 추적)
**접근성**
- 탭 role="tablist", 각 탭 버튼 role="tab"
- 탭 패널 role="tabpanel", aria-labelledby로 탭 연결
- 키보드: 좌우 화살표로 탭 전환, Tab으로 패널 내 탐색
- 스크린 리더: 현재 탭 위치 알림 (예: "개요 탭, 4개 중 1번째")
- 고대비 모드: 탭 언더라인 및 버튼 명확히 구분
**성능**
- 탭 컨텐츠 지연 로딩 (최초 개요 탭만 로드)
- 탭 전환 시 다음 탭 프리페치
- 이미지 없이 텍스트 기반 (빠른 렌더링)
- 애니메이션 하드웨어 가속 (GPU 사용)
**콘텐츠 커스터마이징**
- 이벤트 유형별로 4개 탭 모두 커스터마이징
- Claude API 활용: 매장 업종 맞춤형 콘텐츠 생성
- 성공 사례는 동일 업종 우선 표시
- 비용 구조는 예산 범위 기반 자동 계산
**7가지 이벤트 유형별 핵심 정보**
모든 이벤트 유형에 대해 동일한 4개 탭 구조로 정보 제공:
1. SNS 해시태그 이벤트
2. 명함형 쿠폰 배포
3. 출석체크 이벤트
4. 룰렛 이벤트
5. 친구 초대 이벤트
6. 리뷰 작성 이벤트
7. 포토 콘테스트
각 유형별 차별화 정보:
- 준비 기간 및 난이도
- 필요한 도구/플랫폼
- 예상 참여율 및 효과
- 비용 구조 및 절감 방법
- 실제 성공 사례 (동일 업종 우선)
---
#### 07-AI이벤트상품추천
**개요**
- **목적**: 예산 대비 최적 이벤트상품 AI 추천 및 진행 방법 선택
- **관련 유저스토리**: UFR-PLAN-030
- **비즈니스 중요도**: Must (M/21)
**주요 기능**
1. 예산 입력
2. 이벤트 진행 방법 선택 (추첨형 / 선착순형)
3. AI가 Top 5 이벤트상품 추천
4. 이벤트상품 선택 및 수정 가능
**UI 구성요소**
**모바일**
```
┌─────────────────────────┐
│ ← [뒤로] AI 이벤트상품 추천│
├─────────────────────────┤
│ 단계 3/6: 이벤트상품 선택 │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ 예산 설정 │
│ ┌─────────────────────┐│
│ │ 100,000원 ││
│ │ [슬라이더] ││
│ │ 1만원 ━━●━━ 500만원││
│ └─────────────────────┘│
│ │
│ 이벤트 진행 방법 * │
│ ┌─────────────────────┐│
│ │ ○ 추첨형 ││
│ │ 기간 내 참여 후 ││
│ │ 종료 시 자동 추첨 ││
│ └─────────────────────┘│
│ ┌─────────────────────┐│
│ │ ○ 선착순형 ││
│ │ 선착순 쿠폰 소진 방식││
│ │ (소진 시 자동 종료) ││
│ └─────────────────────┘│
│ │
│ 🤖 AI 추천 이벤트상품 │
│ (Top 5) │
│ │
│ ┌─────────────────────┐│
│ │ 1. 치킨세트 무료교환 ││
│ │ 매력도: ⭐⭐⭐⭐⭐││
│ │ 예상참여율: 45% ││
│ │ [선택] [수정] ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 2. 5천원 할인쿠폰 ││
│ │ 매력도: ⭐⭐⭐⭐ ││
│ │ 예상참여율: 38% ││
│ │ [선택] [수정] ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 3. KT 멤버십 포인트 ││
│ │ 매력도: ⭐⭐⭐ ││
│ │ 예상참여율: 32% ││
│ │ [선택] [수정] ││
│ └─────────────────────┘│
│ │
│ ... (스크롤) │
│ │
│ [+ 직접 입력하기] │
│ │
├─────────────────────────┤
│ [ 다음 (참여방법) ] │
└─────────────────────────┘
```
**인터랙션**
1. **예산 슬라이더**: 실시간 이벤트상품 추천 업데이트
2. **진행 방법 선택**: 라디오 버튼으로 추첨형/선착순형 선택
- 추첨형: 이벤트 종료 시 자동 추첨 안내 툴팁
- 선착순형: 쿠폰 소진 시 자동 종료 안내 툴팁
3. **이벤트상품 수정**: 바텀 시트로 이벤트상품명, 수량, 가격 수정
4. **직접 입력**: 새 이벤트상품 추가 폼 표시
5. **선택 시**: 카드 하이라이트, 예상 효과 재계산
**검증**
- 진행 방법 미선택 시 경고: "이벤트 진행 방법을 선택해주세요"
- 예산 초과 시 경고 메시지
- 이벤트상품 수정 시 실시간 예상참여율 재계산
- 선착순형 선택 시 쿠폰 소진 시점 자동 종료 안내
**진행 방법별 차이점**
- **추첨형**: 기간 내 참여한 고객 중 이벤트 종료 시 상품 수량 내에서 당첨자 랜덤 추첨
- **선착순형**: 선착순 쿠폰 소진 방식 (예: 50명 한정, 소진 시 자동 종료)
---
#### 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명 ││
│ │ 광고수익률: 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분 이내
- 백그라운드 처리 + 푸시 알림
---
#### 12-SNS콘텐츠생성
**개요**
- **목적**: Instagram, Naver Blog, Kakao Channel용 최적화 콘텐츠 생성
- **관련 유저스토리**: UFR-CONT-030
- **비즈니스 중요도**: Must (M/21)
**주요 기능**
1. SNS 플랫폼 선택 (최소 1개 이상 선택 필수)
2. 플랫폼별 해상도 자동 조정
3. 해시태그 자동 삽입
4. 일괄 다운로드
**UI 구성요소**
**모바일**
```
┌─────────────────────────┐
│ ← [뒤로] SNS 콘텐츠 생성 │
├─────────────────────────┤
│ 콘텐츠 3/5: SNS │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ 플랫폼 선택 * │
│ (최소 1개 이상 선택) │
│ │
│ ┌─────────────────────┐│
│ │ ☐ Instagram ││
│ │ 1080x1080 (정사각형) ││
│ │ [미리보기] ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ ☐ Naver Blog ││
│ │ 800x600 (가로형) ││
│ │ [미리보기] ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ ☐ Kakao Channel ││
│ │ 800x800 (정사각형) ││
│ │ [미리보기] ││
│ └─────────────────────┘│
│ │
│ [콘텐츠 생성하기] │
│ │
│ (생성 완료 후) │
│ │
│ 생성된 콘텐츠 │
│ │
│ ┌────┐ ┌────┐ │
│ │Inst││Blog│ │
│ │agram││ │ │
│ └────┘ └────┘ │
│ │
│ 게시 텍스트: │
│ "🎉 연말 대박 이벤트! │
│ #수원맛집 #치킨이벤트" │
│ │
│ [📦 일괄 다운로드] │
│ │
├─────────────────────────┤
│ [ 다음 (QR포스터) ] │
└─────────────────────────┘
```
**인터랙션**
1. **플랫폼 선택**:
- 체크박스로 다중 선택 가능 (Instagram, Naver Blog, Kakao Channel 모두 선택 가능)
- 최소 1개 이상 선택 필수
- 미선택 시 "콘텐츠 생성하기" 버튼 비활성화 (회색 처리)
2. **미리보기**: 바텀 시트로 플랫폼별 미리보기 (실제 피드 모습)
3. **생성**: 선택한 플랫폼 수만큼 최적화 콘텐츠 생성 (30초 이내)
4. **다운로드**: ZIP 파일로 일괄 다운로드
**검증 규칙**
- 플랫폼 미선택 시 경고: "최소 1개 이상의 SNS 플랫폼을 선택해주세요"
- 선택된 플랫폼 개수 표시: "선택됨: 2개 플랫폼"
**성능**
- SNS 콘텐츠 생성: 30초 이내
- 미리보기 즉시 로딩
---
#### 13-QR포스터생성선택
**개요**
- **목적**: QR 포스터 생성 여부 선택
- **관련 유저스토리**: UFR-CONT-040
- **비즈니스 중요도**: Must (M/8)
**주요 기능**
1. QR 포스터 생성 여부 선택 (예/아니오)
2. 선택에 따른 플로우 분기
**UI 구성요소**
**모바일**
```
┌─────────────────────────┐
│ ← [뒤로] QR 포스터 │
├─────────────────────────┤
│ 콘텐츠 4/5: QR 포스터 │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ QR 포스터를 생성하시겠습니까? │
│ │
│ ┌─────────────────────┐│
│ │ 📄 ││
│ │ QR 코드 포함 ││
│ │ 인쇄용 포스터 ││
│ │ ││
│ │ • A4/A3 크기 선택 ││
│ │ • PDF 다운로드 ││
│ │ • 즉시 인쇄 가능 ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ [ 예, 생성합니다 ] ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ [ 아니오, 건너뜁니다 ] ││
│ └─────────────────────┘│
│ │
├─────────────────────────┤
│ "건너뜁니다" 선택 시: │
│ [ 다음 (콘텐츠편집) ] │
└─────────────────────────┘
```
**인터랙션**
1. **예 선택**: Screen 14 (QR포스터상세설정) 화면으로 이동
2. **아니오 선택**: QR 포스터 단계 건너뛰고 Screen 15 (콘텐츠편집)로 이동
3. **뒤로 가기**: 이전 화면(SNS콘텐츠생성)으로 복귀
**검증 규칙**
- 선택 없이 다음 진행 불가
- 기본 선택값 없음 (사용자 명시적 선택 필요)
---
#### 14-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 복사**: 클립보드 복사 + 토스트 메시지 "URL이 복사되었습니다"
2. **크기 선택**: 라디오 버튼, 선택 시 미리보기 즉시 업데이트
3. **생성**: 20초 이내 완료, 진행률 표시
4. **인쇄**: 시스템 인쇄 다이얼로그 호출
**검증 규칙**
- 포스터 크기 미선택 시 경고: "포스터 크기를 선택해주세요"
- 기본값: A4 선택
**성능**
- QR 포스터 생성: 20초 이내
- PDF 파일 크기 최적화 (<5MB)
- QR 코드 자동 생성: 즉시
---
#### 15-콘텐츠편집
**개요**
- **목적**: 생성된 콘텐츠 간단 수정
- **관련 유저스토리**: 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
---
#### 22-당첨자명단관리
**개요**
- **목적**: 당첨자 명단 조회 및 이벤트상품 지급 관리
- **관련 유저스토리**: 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. **다운로드**: 엑셀 파일 다운로드
**반응형**
- 태블릿: 테이블 레이아웃
- 데스크톱: 페이지네이션 + 대량 작업
---
#### 23-실시간대시보드
**개요**
- **목적**: 이벤트 성과 실시간 모니터링
- **관련 유저스토리**: 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% 💰 ││
│ │ (이벤트 전 대비) ││
│ └─────────────────────┘│
│ │
│ ┌─────────────────────┐│
│ │ 예상 광고수익률 ││
│ │ 245% 📈 ││
│ │ (투자 대비 수익) ││
│ └─────────────────────┘│
│ │
│ 채널별 참여 현황 │
│ ┌───────────────────┐ │
│ │ QR코드 45% │ │
│ │ Instagram 30% │ │
│ │ 우리동네TV 15% │ │
│ │ Naver Blog 10% │ │
│ └───────────────────┘ │
│ │
│ [📊 상세 분석 보기] │
│ │
├─────────────────────────┤
│ [홈][이벤트][분석][MY] │
└─────────────────────────┘
```
**인터랙션**
1. **자동 새로고침**: 5분 간격
2. **수동 새로고침**: 버튼 탭
3. **상세 보기**: 각 지표 탭 시 상세 분석 화면으로 이동
4. **푸시 알림**: 주요 이벤트 발생 시 (목표 달성 등)
**성능**
- 데이터 로딩: 5분 간격 자동 업데이트
- 캐싱으로 빠른 초기 로딩
**반응형**
- 태블릿: 2x2 그리드
- 데스크톱: 대시보드 전체 한눈에 표시
---
#### 24-채널별성과분석
**개요**
- **목적**: 채널별 노출 수, 참여율, 전환율 비교
- **관련 유저스토리**: 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열 레이아웃
- 데스크톱: 차트 확대 + 비교 테이블
---
#### 25-광고수익률분석
**개요**
- **목적**: 투자 대비 효과 자동 계산
- **관련 유저스토리**: UFR-ANAL-030
- **비즈니스 중요도**: Must (M/13)
**주요 기능**
1. 총 비용 자동 집계
2. 수익 데이터 수집 (POS 연동)
3. 광고수익률 자동 계산 및 시각화
**UI 구성요소**
**모바일**
```
┌─────────────────────────┐
│ ← [뒤로] 광고수익률 분석 │
├─────────────────────────┤
│ │
│ 💰 투자 대비 효과 │
│ │
│ ┌─────────────────────┐│
│ │ 광고수익률 ││
│ │ ││
│ │ 245% ││
│ │ ││
│ │ 투자한 금액 대비 ││
│ │ 2.45배 수익! ││
│ └─────────────────────┘│
│ │
│ 비용 내역 │
│ ┌─────────────────────┐│
│ │ 이벤트상품 비용 ││
│ │ 100,000원 ││
│ │ ││
│ │ 플랫폼 이용료 ││
│ │ • 우리동네TV: 무료 ││
│ │ • 지니TV: 무료 ││
│ │ • SNS: 무료 ││
│ │ ││
│ │ ────────────────── ││
│ │ 총 투자: 100,000원 ││
│ └─────────────────────┘│
│ │
│ 수익 내역 │
│ ┌─────────────────────┐│
│ │ 매출 증가액 ││
│ │ 180,000원 ││
│ │ (이벤트 기간 vs 평균)││
│ │ ││
│ │ 신규 고객 가치 ││
│ │ 65,000원 ││
│ │ (78명 × 예상 LTV) ││
│ │ ││
│ │ ────────────────── ││
│ │ 총 수익: 245,000원 ││
│ └─────────────────────┘│
│ │
│ 손익 분기점 │
│ ✅ 달성 (3일차) │
│ │
│ 회수 기간 예상 │
│ 📅 약 1.5개월 │
│ │
│ ───────────────────── │
│ │
│ 광고수익률 추이 그래프 │
│ ┌───────────────────┐ │
│ │ ╱╲ │ │
│ │ ╱ ╲ │ │
│ │ ╱ ╲ │ │
│ └───────────────────┘ │
│ 12/1 12/10 12/20 │
│ │
└─────────────────────────┘
```
**인터랙션**
- 비용/수익 항목 탭 시 상세 내역
- 그래프 인터랙션으로 일별 광고수익률 확인
**성능**
- POS 데이터 5분 간격 동기화
- 광고수익률 실시간 재계산
---
#### 26-분석리포트
**개요**
- **목적**: 종합 분석 리포트 PDF 생성
- **관련 유저스토리**: UFR-ANAL-040
- **비즈니스 중요도**: Should (S/8)
**주요 기능**
1. 전체 성과 요약
2. 그래프 및 차트 시각화
3. 업종 평균 벤치마킹
4. PDF 다운로드 및 이메일 발송
**UI 구성요소**
**모바일**
```
┌─────────────────────────┐
│ ← [뒤로] 분석 리포트 │
├─────────────────────────┤
│ │
│ 📊 종합 분석 리포트 │
│ │
│ 이벤트: 연말 대박 이벤트 │
│ 기간: 2025-12-01~12-31 │
│ │
│ ┌─────────────────────┐│
│ │ 리포트 미리보기 ││
│ │ ││
│ │ [PDF 썸네일 이미지] ││
│ │ ││
│ │ 10페이지 ││
│ │ 5.2MB ││
│ └─────────────────────┘│
│ │
│ 포함 내용 │
│ ✅ 이벤트 개요 │
│ ✅ 참여 통계 │
│ ✅ 노출 통계 │
│ ✅ 매출 분석 │
│ ✅ 광고수익률 분석 │
│ ✅ 채널별 성과 비교 │
│ ✅ 업종 평균 벤치마킹 │
│ ✅ 그래프 시각화 │
│ │
│ [📥 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순위 (모바일)**:
- 핵심 액션 (이벤트 생성, 참여, 승인)
- 실시간 지표 (참여자 수, 광고수익률)
- 주요 알림
**2순위 (태블릿)**:
- 상세 통계
- 비교 분석
- 추가 설정 옵션
**3순위 (데스크톱)**:
- 전체 대시보드
- 벤치마킹 데이터
- 고급 필터
#### 점진적 향상 예시
**대시보드 화면**:
**Mobile (320px)**:
```
┌──────────┐
│ 참여자 │
│ 1,234명 │
├──────────┤
│ 노출수 │
│ 15,678회 │
├──────────┤
│ 매출증가 │
│ +42% │
├──────────┤
│광고수익률│
│ 245% │
└──────────┘
```
**Tablet (768px)**:
```
┌──────────┬──────────┐
│ 참여자 │ 노출수 │
│ 1,234명 │15,678회 │
├──────────┼──────────┤
│ 매출증가 │광고수익률│
│ +42% │ 245% │
├──────────┴──────────┤
│ 채널별 성과 차트 │
└─────────────────────┘
```
**Desktop (1024px+)**:
```
┌──────────────────────────────────┐
│ ┌────────┬────────┬────────────┐ │
│ │참여자 │노출수 │매출 +42% │ │
│ │1,234명 │15,678회│광고수익률 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