# 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
AI가 분석 중입니다...
```
### 7.2 접근성 체크리스트
- [ ] 모든 이미지에 대체 텍스트
- [ ] 폼 요소에 명확한 라벨
- [ ] 에러 메시지 명확하고 구체적
- [ ] 색상만으로 정보 전달하지 않음
- [ ] 터치 타겟 최소 44x44px
- [ ] 자동 재생 영상/음악 없음 (또는 컨트롤 제공)
- [ ] 타임아웃 있는 작업에 충분한 시간 제공
## 8. 성능 최적화 방안
### 8.1 로딩 전략
#### 초기 로딩
- **Critical CSS**: 인라인 삽입 (above-the-fold)
- **코드 스플리팅**: 라우트별 번들 분리
- **이미지 최적화**: WebP 포맷, 반응형 이미지
**목표**:
- First Contentful Paint (FCP): <1.8초
- Largest Contentful Paint (LCP): <2.5초
- Time to Interactive (TTI): <3.8초
#### Lazy Loading
- 이미지: Intersection Observer 사용
- 컴포넌트: React.lazy() 또는 동적 import
- 데이터: 무한 스크롤 페이지네이션
### 8.2 AI 처리 피드백
AI 작업은 시간이 걸리므로 명확한 피드백 필수:
**패턴**:
1. **즉각적 피드백**: "AI가 분석 시작했습니다"
2. **진행률 표시**: 프로그레스 바 + 예상 소요 시간
3. **백그라운드 처리**: 다른 작업 가능
4. **완료 알림**: 푸시 알림 + 인앱 알림
**예시**:
```
🤖 AI가 이미지 생성중...
▓▓▓▓▓░░░░░ 50%
예상 소요: 1분 30초 남음
✅ 백그라운드에서 계속 진행됩니다.
완료되면 알려드릴게요!
```
### 8.3 캐싱 전략
| 데이터 유형 | 캐싱 전략 | 갱신 주기 |
|------------|----------|----------|
| 정적 자산 (이미지, CSS, JS) | Service Worker | 앱 업데이트 시 |
| 트렌드 분석 결과 | Redis | 1시간 |
| 경품 추천 | Redis | 5분 |
| 실시간 대시보드 | 클라이언트 메모리 | 5분 |
| 사용자 정보 | LocalStorage | 세션 유지 |
### 8.4 성능 목표
| 기능 | 성능 목표 | 측정 방법 |
|-----|----------|----------|
| 이벤트 기획 | 10초 이내 | AI 처리 시간 합계 |
| 콘텐츠 생성 | 5-8분 이내 | 병렬 처리 시간 |
| 배포 | 1분 이내 | 채널별 병렬 배포 |
| 대시보드 로딩 | 1초 이내 | LCP |
| 화면 전환 | 300ms 이내 | 애니메이션 완료 시간 |
## 9. 변경 이력
| 버전 | 날짜 | 변경 내용 | 작성자 |
|-----|------|----------|--------|
| 1.0 | 2025-01-20 | 초기 UI/UX 설계서 작성 | 박민지 |
---
## 부록
### A. 디자인 시스템 가이드라인
#### 색상 팔레트
```
Primary: #0066CC (KT Blue)
Secondary: #FF6B00 (KT Orange)
Success: #00C853
Warning: #FFA000
Error: #D32F2F
Background: #FFFFFF
Surface: #F5F5F5
Text Primary: #212121
Text Secondary: #757575
```
#### 타이포그래피
```
H1: 24px/32px Bold (모바일)
H2: 20px/28px Bold
H3: 18px/24px SemiBold
Body: 16px/24px Regular
Caption: 14px/20px Regular
Small: 12px/16px Regular
```
#### 간격 시스템
```
XXS: 4px
XS: 8px
S: 12px
M: 16px
L: 24px
XL: 32px
XXL: 48px
```
#### 그림자
```
Elevation 1: 0 2px 4px rgba(0,0,0,0.1)
Elevation 2: 0 4px 8px rgba(0,0,0,0.12)
Elevation 3: 0 8px 16px rgba(0,0,0,0.14)
```
### B. 컴포넌트 라이브러리
주요 재사용 컴포넌트:
- Button (Primary, Secondary, Text, Outlined)
- Card (기본, 선택 가능, 호버)
- Input (Text, Number, Select, Checkbox, Radio)
- ProgressBar (Determinate, Indeterminate)
- BottomSheet
- Dialog
- Skeleton Screen
- Empty State
- Error State
### C. 참조 자료
1. **KT 사장님Easy**: https://product.kt.com/wDic/soho/marketing.do?itemCode=sajangeasy
2. **wwit.design 닷슬래시대시**: https://wwit.design/2023/09/30/dotslashdash/
3. **Material Design**: https://material.io/design
4. **Apple Human Interface Guidelines**: https://developer.apple.com/design/human-interface-guidelines/
5. **WCAG 2.1**: https://www.w3.org/WAI/WCAG21/quickref/
---
**문서 종료**