# KT AI 기반 소상공인 이벤트 자동 생성 서비스 - UI/UX 설계서 ## 문서 정보 - 작성일: 2025-10-17 - 버전: 1.0 - 설계 원칙: Mobile First, 유저스토리 기반, 우선순위 중심 --- ## 1. 프로토타입 화면 목록 정의 ### 1.1 소상공인용 앱/웹 (26개 화면) #### User 서비스 1. **01-회원가입** - 소상공인 회원가입 (UFR-USER-010) 2. **02-매장정보등록** - 매장 정보 및 사업자번호 검증 (UFR-USER-020) #### Event Planning 서비스 3. **03-이벤트목적선택** - 이벤트 목적 설정 (UFR-PLAN-010) 4. **04-AI트렌드분석결과** - 업종/지역 트렌드 분석 결과 (UFR-PLAN-020) 5. **05-AI경품추천** - 예산 기반 경품 추천 (UFR-PLAN-030) 6. **06-AI참여방법설계** - 참여 방법 옵션 제시 (UFR-PLAN-040) 7. **07-AI홍보문구생성** - 홍보 문구 및 해시태그 생성 (UFR-PLAN-050) 8. **08-이벤트기획안승인** - 완성된 기획안 검토 및 승인 (UFR-PLAN-060) #### Content Generation 서비스 9. **09-AI이미지생성** - 브랜드 컬러/로고 기반 이미지 생성 (UFR-CONT-010) 10. **10-AI영상제작** - 15초 홍보 영상 제작 (UFR-CONT-020) 11. **11-SNS콘텐츠생성** - 플랫폼별 최적화 콘텐츠 (UFR-CONT-030) 12. **12-QR포스터생성** - 인쇄용 QR 포스터 (UFR-CONT-040) 13. **13-콘텐츠편집** - 생성된 콘텐츠 수정 (UFR-CONT-050) 14. **14-콘텐츠최종승인** - 콘텐츠 미리보기 및 승인 (UFR-CONT-060) #### Distribution 서비스 15. **15-다중채널배포설정** - 배포 채널 선택 및 일정 설정 (UFR-DIST-010) 16. **16-배포진행상태** - 채널별 배포 진행 상황 (UFR-DIST-020~050) 17. **17-오프라인자료다운로드** - QR 포스터 및 인쇄물 다운로드 (UFR-DIST-060) #### Participation 서비스 18. **18-이벤트참여신청** - 고객용 이벤트 참여 화면 (UFR-PART-010) 19. **19-참여완료** - 응모번호 발급 화면 (UFR-PART-010) 20. **20-당첨자명단관리** - 당첨자 조회 및 경품 지급 관리 (UFR-PART-050) #### Analytics 서비스 21. **21-실시간대시보드** - 이벤트 성과 실시간 모니터링 (UFR-ANAL-010) 22. **22-채널별성과분석** - 채널별 노출/참여율 비교 (UFR-ANAL-020) 23. **23-ROI분석** - 투자 대비 수익 분석 (UFR-ANAL-030) 24. **24-분석리포트** - PDF 종합 리포트 (UFR-ANAL-040) #### AI Learning 서비스 25. **25-AI개선안제안** - 이벤트 개선안 제시 (UFR-AIMPR-010) 26. **26-다음이벤트아이디어** - 시즌별 이벤트 아이디어 (UFR-AIMPR-020) #### 공통 27. **00-메인대시보드** - 홈 화면 (진입점) 28. **99-마이페이지** - 사용자 설정 및 정보 --- ## 2. 화면 간 사용자 플로우 정의 ### 2.1 신규 가입 플로우 ``` 01-회원가입 → KT 본인 인증 → 02-매장정보등록 → 사업자번호 검증 → 무료 체험 쿠폰 발급 → 00-메인대시보드 ``` ### 2.2 이벤트 생성 플로우 (핵심) ``` 00-메인대시보드 → 03-이벤트목적선택 → 04-AI트렌드분석결과 (AI 처리 3초) → 05-AI경품추천 (AI 처리 3초) → 06-AI참여방법설계 (AI 처리 2초) → 07-AI홍보문구생성 (AI 처리 2초) → 08-이벤트기획안승인 → 09-AI이미지생성 (AI 처리 90초) → 10-AI영상제작 (AI 처리 90초, 병렬) → 11-SNS콘텐츠생성 (20초) → 12-QR포스터생성 (10초) → [선택] 13-콘텐츠편집 → 14-콘텐츠최종승인 → 15-다중채널배포설정 → 16-배포진행상태 → 17-오프라인자료다운로드 → 21-실시간대시보드 ``` **총 소요 시간:** 기획 10초 + 콘텐츠 3분 + 배포 1분 = 약 4분 10초 ### 2.3 이벤트 관리 플로우 ``` 00-메인대시보드 → 21-실시간대시보드 (진행중 이벤트 선택) → [탭 전환] 22-채널별성과분석 → [탭 전환] 23-ROI분석 → 24-분석리포트 (PDF 다운로드) → 20-당첨자명단관리 → 25-AI개선안제안 → 26-다음이벤트아이디어 → [순환] 03-이벤트목적선택 (새 이벤트) ``` ### 2.4 고객 참여 플로우 (별도 고객용 페이지) ``` 이벤트 발견 (SNS/QR/TV/Blog) → 18-이벤트참여신청 → 정보 입력 (이름, 전화번호) → 중복 체크 → 19-참여완료 (응모번호 발급) → 당첨 발표일 대기 → SMS/알림톡 수신 ``` --- ## 3. 화면별 상세 설계 ### 3.1 공통 화면 #### 00-메인대시보드 (홈) **개요** - 목적: 이벤트 현황 한눈에 파악, 빠른 액션 - 관련 유저스토리: 전체 서비스 진입점 - 비즈니스 중요도: ⭐⭐⭐⭐⭐ (최상) **주요 기능** - 새 이벤트 빠른 생성 - 진행중 이벤트 현황 확인 - 주요 지표 요약 (참여자 수, ROI) - 알림 및 액션 아이템 **UI 구성요소** ``` ┌─────────────────────────────┐ │ 🏪 [매장명] 🔔 ⚙️ │ ← 헤더 ├─────────────────────────────┤ │ │ │ ┌─────────────────────┐ │ │ │ ➕ 새 이벤트 만들기 │ │ ← 대형 CTA │ └─────────────────────┘ │ │ │ │ 🎪 진행중 이벤트 (2) │ │ ┌─────────────────────┐ │ │ │ 🎁 가을맞이 특별할인 │ │ │ │ 참여 152명 · D-7 │ │ │ │ [상세보기 →] │ │ │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ 🍕 신메뉴 이벤트 │ │ │ │ 참여 89명 · D-14 │ │ │ │ [상세보기 →] │ │ │ └─────────────────────┘ │ │ │ │ 📊 이번 달 성과 │ │ 참여자 +32% │ ROI 245% │ │ │ ├─────────────────────────────┤ │ 🏠 홈 │ 🎪 이벤트 │ 📊 분석 │ 👤 │ ← 하단 네비게이션 └─────────────────────────────┘ ``` **인터랙션** - `새 이벤트 만들기` 버튼 → `03-이벤트목적선택` 화면 - 진행중 이벤트 카드 터치 → `21-실시간대시보드` (해당 이벤트) - 알림 아이콘 → 알림 목록 모달 - 설정 아이콘 → `99-마이페이지` - 하단 네비게이션 탭 → 해당 화면 전환 --- ### 3.2 User 서비스 #### 01-회원가입 **개요** - 목적: 소상공인 신규 회원 가입 - 관련 유저스토리: UFR-USER-010 - 비즈니스 중요도: ⭐⭐⭐⭐ **주요 기능** - 기본 정보 입력 - KT 본인 인증 - 중복 가입 방지 **UI 구성요소** ``` ┌─────────────────────────────┐ │ ← 회원가입 │ ├─────────────────────────────┤ │ │ │ 환영합니다! 👋 │ │ 사장님의 이벤트 성공을 │ │ 함께 만들어갑니다 │ │ │ │ ┌─────────────────────┐ │ │ │ 이름 * │ │ │ │ [_______________] │ │ │ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ │ │ │ 전화번호 * │ │ │ │ [010-____-____] │ │ │ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ │ │ │ 이메일 * │ │ │ │ [________@_____] │ │ │ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ │ │ │ 📱 KT 본인 인증 │ │ │ └─────────────────────┘ │ │ │ ├─────────────────────────────┤ │ [ 다음 단계로 ] │ └─────────────────────────────┘ ``` **인터랙션** - 입력 필드 실시간 검증 (형식 확인) - 이름: 2자 이상 - 전화번호: 010-XXXX-XXXX - 이메일: example@domain.com - `KT 본인 인증` 버튼 → KT 인증 시스템 연동 - 인증 완료 시 인증 토큰 저장 - `다음 단계로` → `02-매장정보등록` - 중복 가입 시 "이미 가입된 전화번호입니다" 알림 #### 02-매장정보등록 **개요** - 목적: 맞춤형 이벤트를 위한 매장 정보 수집 - 관련 유저스토리: UFR-USER-020 - 비즈니스 중요도: ⭐⭐⭐⭐ **주요 기능** - 매장 기본 정보 입력 - 사업자번호 검증 - 무료 체험 쿠폰 자동 발급 **UI 구성요소** ``` ┌─────────────────────────────┐ │ ← 매장정보 등록 │ ├─────────────────────────────┤ │ 매장명 * │ │ [___________________] │ │ │ │ 업종 * ℹ️ │ │ [드롭다운 ▼] │ │ 음식점 / 카페 / 소매업... │ │ │ │ 주소 * 🔍 │ │ [___________________] │ │ [도로명 주소 검색] │ │ │ │ 영업시간 │ │ 월 [09:00] ~ [21:00] ✓ │ │ 화 [09:00] ~ [21:00] ✓ │ │ 수 [09:00] ~ [21:00] ✓ │ │ ... │ │ │ │ 사업자번호 * ℹ️ │ │ [___-__-_____] │ │ [검증하기] │ │ │ │ ✅ 사업자번호 확인 완료 │ │ 매장명: OO치킨 │ │ 대표자: 홍길동 │ │ │ ├─────────────────────────────┤ │ [ 등록 완료 ] │ └─────────────────────────────┘ ``` **인터랙션** - 업종 드롭다운 → 카테고리 리스트 표시 - 주소 검색 버튼 → 도로명 주소 API 모달 - 영업시간 체크박스 → 요일별 활성화/비활성화 - `검증하기` 버튼 → 국세청 API 연동 - 형식 검증 (XXX-XX-XXXXX) - 사업자번호 유효성 확인 - 휴폐업 여부 확인 - 매장명 일치 확인 - 검증 성공 → ✅ 표시 및 사업자 정보 자동 입력 - 검증 실패 → ❌ 오류 메시지 (유효하지 않은 번호 / 휴폐업 등) - `등록 완료` → 무료 체험 쿠폰 발급 알림 → `00-메인대시보드` --- ### 3.3 Event Planning 서비스 #### 03-이벤트목적선택 **개요** - 목적: 이벤트 방향성 설정 - 관련 유저스토리: UFR-PLAN-010 - 비즈니스 중요도: ⭐⭐⭐⭐⭐ **주요 기능** - 4가지 목적 중 선택 - 목적별 설명 및 효과 제시 **UI 구성요소** ``` ┌─────────────────────────────┐ │ ← 이벤트 목적 선택 │ ├─────────────────────────────┤ │ │ │ 어떤 목적의 이벤트를 │ │ 만드실 건가요? 🎯 │ │ │ │ ┌─────────────────────┐ │ │ │ 👥 신규고객 유치 ℹ️ │ │ │ │ 새로운 고객을 확보하고│ │ │ │ 매장 인지도를 높입니다│ │ │ │ 예상 효과: 신규 방문 │ │ │ │ +25% ↑ │ │ │ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ │ │ │ 🔄 재방문 유도 ℹ️ │ │ │ │ 기존 고객의 재방문을 │ │ │ │ 촉진합니다 │ │ │ │ 예상 효과: 재방문율 │ │ │ │ +40% ↑ │ │ │ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ │ │ │ 💰 매출 증대 ℹ️ │ │ │ │ 단기 매출 향상에 │ │ │ │ 집중합니다 │ │ │ │ 예상 효과: 매출 │ │ │ │ +35% ↑ │ │ │ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ │ │ │ 📢 인지도 향상 ℹ️ │ │ │ │ 브랜드 인지도를 │ │ │ │ 제고합니다 │ │ │ │ 예상 효과: SNS 공유 │ │ │ │ +50% ↑ │ │ │ └─────────────────────┘ │ │ │ ├─────────────────────────────┤ │ [ 다음 ] │ └─────────────────────────────┘ ``` **인터랙션** - 카드 터치 → 라디오 버튼 선택 + 카드 강조 (테두리 색상) - ℹ️ 아이콘 터치 → 상세 설명 모달 - 예시 이벤트 - 성공 사례 - 권장 경품 유형 - 선택 전: `다음` 버튼 비활성화 (회색) - 선택 후: `다음` 버튼 활성화 (파란색) - `다음` 버튼 → AI 트렌드 분석 시작 (로딩 3초) → `04-AI트렌드분석결과` #### 04-AI트렌드분석결과 **개요** - 목적: 업종/지역 트렌드 기반 성공 전략 제시 - 관련 유저스토리: UFR-PLAN-020 - 비즈니스 중요도: ⭐⭐⭐⭐ **주요 기능** - AI 트렌드 분석 결과 표시 - 추천 이벤트 방향 제시 - 예상 성공률 표시 **UI 구성요소** ``` ┌─────────────────────────────┐ │ ← AI 트렌드 분석 │ ├─────────────────────────────┤ │ │ │ 🤖 AI가 분석한 결과예요 │ │ │ │ 📍 우리 매장 정보 │ │ 업종: 음식점 (치킨) │ │ 지역: 수원시 영통구 │ │ 시즌: 가을 (10월) │ │ │ │ 📊 주요 트렌드 (Top 3) │ │ ┌─────────────────────┐ │ │ │ 1️⃣ 할로윈 테마 │ │ │ │ 10월 성공률 85% ⬆️ │ │ │ │ 유사 업종 성공 사례 │ │ │ │ 12건 │ │ │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ 2️⃣ 단체 할인 │ │ │ │ 영통구 인기 78% ⬆️ │ │ │ │ 평균 참여율 +42% │ │ │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ 3️⃣ SNS 친구 초대 │ │ │ │ 바이럴 효과 72% ⬆️ │ │ │ │ 공유율 평균 2.3배 │ │ │ └─────────────────────┘ │ │ │ │ 💡 추천 전략 │ │ 할로윈 테마 + 단체 할인 조합│ │ 예상 성공률: 89% 🎯 │ │ │ ├─────────────────────────────┤ │ [ 경품 추천 받기 ] │ └─────────────────────────────┘ ``` **인터랙션** - 트렌드 카드 터치 → 상세 설명 확장 - 성공 사례 리스트 - 참여율 그래프 - `경품 추천 받기` → AI 경품 추천 시작 (로딩 3초) → `05-AI경품추천` #### 05-AI경품추천 **개요** - 목적: 예산 대비 최적 경품 선정 - 관련 유저스토리: UFR-PLAN-030 - 비즈니스 중요도: ⭐⭐⭐⭐⭐ **주요 기능** - 예산 설정 - AI 추천 경품 Top 5 제시 - 예상 참여율 표시 **UI 구성요소** ``` ┌─────────────────────────────┐ │ ← AI 경품 추천 │ ├─────────────────────────────┤ │ │ │ 💰 예산 설정 │ │ ┌─────────────────────┐ │ │ │ 500,000원 │ │ │ │ ●────────────○ │ │ ← 슬라이더 │ │ 10,000원 ~ 5,000,000원│ │ │ └─────────────────────┘ │ │ │ │ 🎁 추천 경품 Top 5 │ │ │ │ ┌─────────────────────┐ │ │ │ ○ 1. 치킨세트 무료 │ │ │ │ └ 💰 50만원 │ │ │ │ └ 📊 예상 참여율 │ │ │ │ ████████░░ 85% │ │ │ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ │ │ │ ○ 2. KT 멤버십 포인트│ │ │ │ └ 💰 40만원 │ │ │ │ └ 📊 예상 참여율 │ │ │ │ ███████░░░ 72% │ │ │ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ │ │ │ ○ 3. 커피 쿠폰 10매 │ │ │ │ └ 💰 30만원 │ │ │ │ └ 📊 예상 참여율 │ │ │ │ ██████░░░░ 68% │ │ │ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ │ │ │ ○ 4. 영화 예매권 │ │ │ │ └ 💰 25만원 │ │ │ │ └ 📊 예상 참여율 │ │ │ │ █████░░░░░ 65% │ │ │ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ │ │ │ ○ 5. 편의점 상품권 │ │ │ │ └ 💰 20만원 │ │ │ │ └ 📊 예상 참여율 │ │ │ │ ████░░░░░░ 60% │ │ │ └─────────────────────┘ │ │ │ ├─────────────────────────────┤ │ [ 선택 완료 ] │ └─────────────────────────────┘ ``` **인터랙션** - 예산 슬라이더 조정 → 실시간 경품 목록 업데이트 (1초 디바운스) - 경품 카드 터치 → 라디오 버튼 선택 + 상세 정보 확장 - 경품 이미지 - 타겟 고객층 매력도 - 유사 이벤트 성공 사례 - `선택 완료` → AI 참여방법 설계 시작 (로딩 2초) → `06-AI참여방법설계` #### 06-AI참여방법설계 **개요** - 목적: 참여 난이도와 바이럴 효과를 고려한 참여 방법 선택 - 관련 유저스토리: UFR-PLAN-040 - 비즈니스 중요도: ⭐⭐⭐⭐ **주요 기능** - 3가지 참여 방법 옵션 제시 - 난이도 및 예상 참여율 표시 **UI 구성요소** ``` ┌─────────────────────────────┐ │ ← 참여 방법 설계 │ ├─────────────────────────────┤ │ │ │ 🎯 참여 방법을 선택하세요 │ │ │ │ ┌─────────────────────┐ │ │ │ ○ 옵션 1: 간편 참여 │ │ │ │ │ │ │ │ QR 코드 스캔 → │ │ │ │ 정보 입력 → 완료 │ │ │ │ │ │ │ │ 난이도: ⭐ 쉬움 │ │ │ │ 예상 참여율: 75% │ │ │ │ 바이럴 효과: 낮음 │ │ │ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ │ │ │ ○ 옵션 2: 재방문 유도│ │ │ │ │ │ │ │ 매장 방문 → │ │ │ │ 리뷰 작성 → 응모 │ │ │ │ │ │ │ │ 난이도: ⭐⭐ 보통 │ │ │ │ 예상 참여율: 58% │ │ │ │ 바이럴 효과: 중간 │ │ │ │ 🎁 재방문 가산점 │ │ │ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ │ │ │ ○ 옵션 3: 바이럴형 │ │ │ │ │ │ │ │ SNS 공유 → │ │ │ │ 친구 3명 태그 → 응모│ │ │ │ │ │ │ │ 난이도: ⭐⭐⭐ 어려움│ │ │ │ 예상 참여율: 42% │ │ │ │ 바이럴 효과: 높음 │ │ │ │ 🔥 확산력 3.2배 │ │ │ └─────────────────────┘ │ │ │ ├─────────────────────────────┤ │ [ 선택 완료 ] │ └─────────────────────────────┘ ``` **인터랙션** - 옵션 카드 터치 → 라디오 버튼 선택 + 상세 시나리오 확장 - 각 옵션별 예상 시나리오 애니메이션 - `선택 완료` → AI 홍보문구 생성 시작 (로딩 2초) → `07-AI홍보문구생성` #### 07-AI홍보문구생성 **개요** - 목적: 매력적인 홍보 문구 및 해시태그 생성 - 관련 유저스토리: UFR-PLAN-050 - 비즈니스 중요도: ⭐⭐⭐⭐ **주요 기능** - AI 생성 홍보 문구 5가지 버전 - SNS 해시태그 자동 생성 - 플랫폼별 최적화 미리보기 **UI 구성요소** ``` ┌─────────────────────────────┐ │ ← AI 홍보 문구 생성 │ ├─────────────────────────────┤ │ │ │ ✨ AI가 만든 홍보 문구 │ │ │ │ ┌─────────────────────┐ │ │ │ ○ 버전 1 (친근함) │ │ │ │ │ │ │ │ "🎃 할로윈 특별 이벤트!│ │ │ │ 치킨 먹고 경품 받자~ │ │ │ │ 지금 바로 참여하세요!"│ │ │ │ │ │ │ │ [미리보기] │ │ │ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ │ │ │ ○ 버전 2 (공식적) │ │ │ │ │ │ │ │ "왕갈비통닭의 가을 │ │ │ │ 고객 감사 이벤트. │ │ │ │ 총 500만원 상당의 │ │ │ │ 경품을 드립니다." │ │ │ │ │ │ │ │ [미리보기] │ │ │ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ │ │ │ ○ 버전 3 (트렌디) │ │ │ │ │ │ │ │ "요즘 핫한 우리 매장💯│ │ │ │ 이벤트로 더 핫하게! │ │ │ │ 놓치면 후회할걸?🔥" │ │ │ │ │ │ │ │ [미리보기] │ │ │ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ │ │ │ ○ 버전 4 (감성적) │ │ │ │ ... │ │ │ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ │ │ │ ○ 버전 5 (유머러스) │ │ │ │ ... │ │ │ └─────────────────────┘ │ │ │ │ 📱 추천 해시태그 │ │ #왕갈비통닭 #수원맛집 │ │ #할로윈이벤트 #치킨이벤트 │ │ #영통구맛집 │ │ │ ├─────────────────────────────┤ │ [문구 직접 편집] [선택 완료]│ └─────────────────────────────┘ ``` **인터랙션** - 버전 카드 터치 → 라디오 버튼 선택 - `미리보기` 버튼 → 플랫폼별 미리보기 모달 - Instagram 피드 모의 화면 - Naver Blog 게시글 형식 - Kakao Channel 메시지 형식 - `문구 직접 편집` → 텍스트 에디터 모달 - `선택 완료` → `08-이벤트기획안승인` #### 08-이벤트기획안승인 **개요** - 목적: 완성된 기획안 최종 검토 및 승인 - 관련 유저스토리: UFR-PLAN-060 - 비즈니스 중요도: ⭐⭐⭐⭐⭐ **주요 기능** - 전체 기획 내용 요약 표시 - 수정 및 승인 기능 - 예상 효과 제시 **UI 구성요소** ``` ┌─────────────────────────────┐ │ ← 기획안 최종 검토 │ ├─────────────────────────────┤ │ │ │ ✅ 이벤트 기획이 완료되었어요│ │ │ │ 📋 기획안 요약 │ │ ┌─────────────────────┐ │ │ │ 🎯 목적: 신규고객 유치│ │ │ │ [수정] │ │ │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ 🎁 경품: 치킨세트 무료│ │ │ │ 예산: 500,000원 │ │ │ │ [수정] │ │ │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ 🎯 참여방법: QR 스캔 │ │ │ │ 난이도: 쉬움 │ │ │ │ [수정] │ │ │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ ✨ 홍보문구 │ │ │ │ "🎃 할로윈 특별..." │ │ │ │ [수정] │ │ │ └─────────────────────┘ │ │ │ │ 📊 예상 효과 │ │ ┌─────────────────────┐ │ │ │ 예상 참여자: 500명 │ │ │ │ 예상 ROI: 245% │ │ │ │ 매출 증가: +35% │ │ │ └─────────────────────┘ │ │ │ │ ⏱️ 기획 소요 시간: 9초 │ │ │ ├─────────────────────────────┤ │ [이전 단계] [기획안 승인] │ └─────────────────────────────┘ ``` **인터랙션** - 각 섹션 `수정` 버튼 → 해당 단계로 이동 - `이전 단계` → `07-AI홍보문구생성` - `기획안 승인` → 기획안 DB 저장 + 이벤트 ID 생성 → `09-AI이미지생성` --- ### 3.4 Content Generation 서비스 #### 09-AI이미지생성 **개요** - 목적: 브랜드 컬러/로고 기반 홍보 이미지 생성 - 관련 유저스토리: UFR-CONT-010 - 비즈니스 중요도: ⭐⭐⭐⭐⭐ **주요 기능** - 브랜드 컬러 설정 - 로고 업로드 - AI 이미지 3종 생성 **UI 구성요소** ``` ┌─────────────────────────────┐ │ ← AI 이미지 생성 │ ├─────────────────────────────┤ │ │ │ 🎨 브랜드 설정 │ │ ┌─────────────────────┐ │ │ │ 브랜드 컬러 │ │ │ │ [🔴] #FF5733 │ │ ← 컬러 피커 │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ 로고 업로드 │ │ │ │ [📁 파일 선택] │ │ │ │ PNG, JPG (최대 5MB) │ │ │ └─────────────────────┘ │ │ │ │ 🤖 AI 이미지 생성 중... │ │ [████████████░░░] 85% │ │ 예상 소요 시간: 15초 남음 │ │ │ │ ✅ 생성 완료! │ │ │ │ 📸 생성된 이미지 (3종) │ │ ┌─────────────────────┐ │ │ │ ○ 1. 심플 스타일 │ │ │ │ [ 이미지 ]│ │ │ │ 미니멀 디자인 │ │ │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ ○ 2. 화려한 스타일 │ │ │ │ [ 이미지 ]│ │ │ │ 풍성한 그래픽 │ │ │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ ○ 3. 트렌디 스타일 │ │ │ │ [ 이미지 ]│ │ │ │ 최신 디자인 트렌드 │ │ │ └─────────────────────┘ │ │ │ ├─────────────────────────────┤ │ [재생성] [선택 완료] │ └─────────────────────────────┘ ``` **인터랙션** - 컬러 피커 → HEX 코드 입력 또는 팔레트 선택 - `파일 선택` → 로컬 파일 업로드 (5MB 제한) - 생성 중 프로그레스 바 표시 (90초) - 이미지 카드 터치 → 전체 화면 미리보기 - `재생성` → 다시 AI 생성 (동일 설정) - `선택 완료` → 선택한 이미지 저장 → `10-AI영상제작` (병렬 처리) #### 10-AI영상제작 **개요** - 목적: 15초 홍보 영상 자동 제작 - 관련 유저스토리: UFR-CONT-020 - 비즈니스 중요도: ⭐⭐⭐⭐⭐ **주요 기능** - 배경 음악 선택 - 텍스트 오버레이 편집 - 15초 영상 생성 **UI 구성요소** ``` ┌─────────────────────────────┐ │ ← AI 영상 제작 │ ├─────────────────────────────┤ │ │ │ 🎬 영상 설정 │ │ ┌─────────────────────┐ │ │ │ 배경 음악 선택 🎵 │ │ │ │ [드롭다운 ▼] │ │ │ │ • 경쾌한 팝 │ │ │ │ • 차분한 재즈 │ │ │ │ • 신나는 일렉 │ │ │ │ [미리듣기 ▶️] │ │ │ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ │ │ │ 텍스트 오버레이 │ │ │ │ [________________] │ │ │ │ "🎃 할로윈 특별..." │ │ ← 기획안 연동 │ │ [편집] │ │ │ └─────────────────────┘ │ │ │ │ 🤖 AI 영상 제작 중... │ │ [██████████░░░░] 70% │ │ 예상 소요 시간: 27초 남음 │ │ │ │ ✅ 제작 완료! │ │ │ │ 🎥 영상 미리보기 │ │ ┌─────────────────────┐ │ │ │ │ │ │ │ [ ▶️ 재생 ] │ │ │ │ │ │ │ │ 00:00 ━━●━━ 00:15 │ │ │ └─────────────────────┘ │ │ │ │ 💾 다운로드 가능 │ │ • 영상 파일 (MP4) │ │ • 자막 파일 (SRT) │ │ │ ├─────────────────────────────┤ │ [재제작] [다음 단계] │ └─────────────────────────────┘ ``` **인터랙션** - 배경 음악 드롭다운 → 목록 선택 - `미리듣기` → 음악 재생 (5초 미리듣기) - 텍스트 오버레이 `편집` → 텍스트 에디터 모달 - 생성 중 프로그레스 바 (90초, 이미지 생성과 병렬) - 영상 재생 컨트롤 (재생/일시정지, 시크바) - `재제작` → 설정 변경 후 다시 생성 - `다음 단계` → `11-SNS콘텐츠생성` #### 11-SNS콘텐츠생성 **개요** - 목적: 플랫폼별 최적화 콘텐츠 생성 - 관련 유저스토리: UFR-CONT-030 - 비즈니스 중요도: ⭐⭐⭐⭐ **주요 기능** - 플랫폼 선택 - 자동 해상도 조정 - 게시 텍스트 생성 **UI 구성요소** ``` ┌─────────────────────────────┐ │ ← SNS 콘텐츠 생성 │ ├─────────────────────────────┤ │ │ │ 📱 플랫폼 선택 │ │ ┌─────────────────────┐ │ │ │ ✅ Instagram (필수) │ │ │ │ 1080x1080 정사각형 │ │ │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ ☐ Naver Blog │ │ │ │ 800x600 가로형 │ │ │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ ☐ Kakao Channel │ │ │ │ 800x800 정사각형 │ │ │ └─────────────────────┘ │ │ │ │ 🎨 생성 완료! (2종) │ │ │ │ 📸 Instagram │ │ ┌─────────────────────┐ │ │ │ [ 이미지 ] │ │ │ │ 1080x1080px │ │ │ └─────────────────────┘ │ │ 📝 게시 텍스트 │ │ "🎃 할로윈 특별 이벤트! │ │ #왕갈비통닭 #수원맛집..." │ │ [미리보기] │ │ │ │ 📸 Naver Blog │ │ ┌─────────────────────┐ │ │ │ [ 이미지 ] │ │ │ │ 800x600px │ │ │ └─────────────────────┘ │ │ 📝 게시 텍스트 │ │ "수원 왕갈비통닭의..." │ │ [미리보기] │ │ │ ├─────────────────────────────┤ │ [💾 전체 다운로드] [다음] │ └─────────────────────────────┘ ``` **인터랙션** - 플랫폼 체크박스 → 선택/해제 - Instagram은 필수 선택 (비활성화) - 플랫폼 선택 변경 → 자동 재생성 (20초) - `미리보기` → 플랫폼별 게시 화면 모의 - `전체 다운로드` → ZIP 파일 다운로드 - `다음` → `12-QR포스터생성` #### 12-QR포스터생성 **개요** - 목적: 오프라인 홍보용 QR 포스터 생성 - 관련 유저스토리: UFR-CONT-040 - 비즈니스 중요도: ⭐⭐⭐ **주요 기능** - QR 코드 생성 - 포스터 크기 선택 - 인쇄 최적화 **UI 구성요소** ``` ┌─────────────────────────────┐ │ ← QR 포스터 생성 │ ├─────────────────────────────┤ │ │ │ 📋 포스터 설정 │ │ ┌─────────────────────┐ │ │ │ 크기 선택 │ │ │ │ ○ A4 (210x297mm) │ │ │ │ ○ A3 (297x420mm) │ │ │ └─────────────────────┘ │ │ │ │ 🔗 QR 연결 URL │ │ https://event.kt.com/... │ ← 자동 생성 │ │ │ ✅ 생성 완료! │ │ │ │ 🖼️ 포스터 미리보기 │ │ ┌─────────────────────┐ │ │ │ │ │ │ │ [배경 이미지] │ │ │ │ │ │ │ │ 🎃 할로윈 특별 이벤트│ │ │ │ │ │ │ │ [QR 코드] │ │ │ │ 스캔하고 참여하세요! │ │ │ │ │ │ │ │ 기간: 10/20~10/31 │ │ │ │ 경품: 치킨세트 무료 │ │ │ │ │ │ │ └─────────────────────┘ │ │ │ │ 💾 다운로드 가능 │ │ • A4 포스터 PDF │ │ • QR 코드 단독 PNG │ │ │ ├─────────────────────────────┤ │ [다운로드] [다음 단계] │ └─────────────────────────────┘ ``` **인터랙션** - 크기 라디오 버튼 → 선택 변경 시 재생성 - QR URL 자동 생성 (이벤트 참여 페이지) - 포스터 미리보기 → 확대/축소 가능 - `다운로드` → PDF 파일 다운로드 - `다음 단계` → `13-콘텐츠편집` 또는 `14-콘텐츠최종승인` #### 13-콘텐츠편집 **개요** - 목적: 생성된 콘텐츠 개인화 수정 - 관련 유저스토리: UFR-CONT-050 - 비즈니스 중요도: ⭐⭐⭐ **주요 기능** - 텍스트 편집 - 색상 조정 - 레이아웃 변경 **UI 구성요소** ``` ┌─────────────────────────────┐ │ ← 콘텐츠 편집 │ ├─────────────────────────────┤ │ │ │ ✏️ 편집할 콘텐츠 선택 │ │ ┌─────────────────────┐ │ │ │ 📸 이미지 편집 │ │ │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ 🎥 영상 편집 │ │ │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ 📱 SNS 텍스트 편집 │ │ │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ 🖼️ 포스터 편집 │ │ │ └─────────────────────┘ │ │ │ │ [예: 이미지 편집 모드] │ │ ┌─────────────────────┐ │ │ │ [ 이미지 ] │ │ │ └─────────────────────┘ │ │ │ │ 🎨 편집 도구 │ │ ┌─────────────────────┐ │ │ │ T 텍스트 │ │ │ │ [할로윈 특별 이벤트] │ │ │ │ 폰트 [맑은 고딕 ▼] │ │ │ │ 크기 [24px ▼] │ │ │ │ 색상 [🔴 #FF5733] │ │ │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ 🎨 배경 색상 │ │ │ │ [🟠 #FFA500] │ │ │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ 📐 레이아웃 │ │ │ │ [템플릿 1] [템플릿 2]│ │ │ └─────────────────────┘ │ │ │ │ 📜 편집 이력 (최대 3개) │ │ [원본으로 되돌리기] │ │ │ ├─────────────────────────────┤ │ [취소] [저장] │ └─────────────────────────────┘ ``` **인터랙션** - 콘텐츠 카드 선택 → 해당 편집 모드 진입 - 텍스트 편집 → 실시간 미리보기 반영 - 색상 변경 → 컬러 피커 - 레이아웃 템플릿 → 여러 레이아웃 옵션 - `원본으로 되돌리기` → 편집 전 상태로 복원 - `취소` → 편집 내용 버리고 이전 화면 - `저장` → 수정사항 적용 → `14-콘텐츠최종승인` #### 14-콘텐츠최종승인 **개요** - 목적: 완성된 콘텐츠 최종 검토 - 관련 유저스토리: UFR-CONT-060 - 비즈니스 중요도: ⭐⭐⭐⭐⭐ **주요 기능** - 전체 콘텐츠 미리보기 - 콘텐츠 승인 및 저장 **UI 구성요소** ``` ┌─────────────────────────────┐ │ ← 콘텐츠 최종 승인 │ ├─────────────────────────────┤ │ │ │ ✅ 모든 콘텐츠가 준비되었어요│ │ │ │ 📦 생성된 콘텐츠 (6종) │ │ │ │ ┌─────────────────────┐ │ │ │ 📸 이미지 (심플) │ │ │ │ [썸네일] [미리보기]│ │ │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ 🎥 15초 영상 │ │ │ │ [썸네일] [재생 ▶️] │ │ │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ 📱 Instagram 콘텐츠 │ │ │ │ [썸네일] [미리보기]│ │ │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ 📱 Naver Blog 콘텐츠 │ │ │ │ [썸네일] [미리보기]│ │ │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ 🖼️ A4 QR 포스터 │ │ │ │ [썸네일] [미리보기]│ │ │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ 🖼️ A3 QR 포스터 │ │ │ │ [썸네일] [미리보기]│ │ │ └─────────────────────┘ │ │ │ │ ⏱️ 콘텐츠 생성 시간: 2분 45초│ │ │ ├─────────────────────────────┤ │ [수정하기] [콘텐츠 승인] │ └─────────────────────────────┘ ``` **인터랙션** - `미리보기` / `재생` → 전체 화면 모드 - `수정하기` → `13-콘텐츠편집` - `콘텐츠 승인` → 콘텐츠 DB 저장 + 콘텐츠 ID 생성 → `15-다중채널배포설정` --- ### 3.5 Distribution 서비스 #### 15-다중채널배포설정 **개요** - 목적: 여러 채널 동시 배포 설정 - 관련 유저스토리: UFR-DIST-010 - 비즈니스 중요도: ⭐⭐⭐⭐⭐ **주요 기능** - 배포 채널 선택 - 채널별 세부 설정 - 배포 일정 설정 **UI 구성요소** ``` ┌─────────────────────────────┐ │ ← 배포 채널 설정 │ ├─────────────────────────────┤ │ │ │ 📡 배포 채널 선택 │ │ │ │ KT 서비스 │ │ ┌─────────────────────┐ │ │ │ ☐ 우리동네TV ⚙️ │ │ │ │ 지역 타겟 광고 │ │ │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ ☐ 링고비즈 연결음 ⚙️ │ │ │ │ 전화 연결음 업데이트 │ │ │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ ☐ 지니TV 광고 ⚙️ │ │ │ │ 가정용 TV 광고 │ │ │ └─────────────────────┘ │ │ │ │ SNS 플랫폼 │ │ ┌─────────────────────┐ │ │ │ ✅ Instagram (필수) │ │ │ │ 계정 연동 완료 ✓ │ │ │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ ☐ Naver Blog ⚙️ │ │ │ │ [계정 연동 필요] │ │ │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ ☐ Kakao Channel ⚙️ │ │ │ │ [계정 연동 필요] │ │ │ └─────────────────────┘ │ │ │ │ 🕐 배포 일시 │ │ ○ 즉시 배포 │ │ ○ 예약 배포 │ │ [2025-10-20] [14:00] │ │ │ │ 📊 선택된 채널: 1개 │ │ │ ├─────────────────────────────┤ │ [ 배포 시작 ] │ └─────────────────────────────┘ ``` **인터랙션** - 채널 체크박스 → 선택/해제, 선택 수 업데이트 - ⚙️ 설정 아이콘 → 채널별 상세 설정 모달 - 우리동네TV: 반경 (500m/1km), 송출 시간대 - 링고비즈: 연결음 미리듣기 - 지니TV: 타겟 지역, 노출 시간대, 예산 - SNS: 계정 OAuth 연동, 예약 시간 - Instagram 필수 체크 (비활성화) - 예약 배포 선택 → 날짜/시간 선택기 - `배포 시작` → 배포 요청 발송 → `16-배포진행상태` #### 16-배포진행상태 **개요** - 목적: 채널별 배포 진행 상황 모니터링 - 관련 유저스토리: UFR-DIST-020~050 - 비즈니스 중요도: ⭐⭐⭐⭐ **주요 기능** - 실시간 배포 상태 표시 - 배포 완료/실패 확인 - 재시도 기능 **UI 구성요소** ``` ┌─────────────────────────────┐ │ ← 배포 진행 상황 │ ├─────────────────────────────┤ │ │ │ 📡 배포 진행중... (2/4) │ │ [████████░░░░░░] 50% │ │ │ │ ✅ 배포 완료 │ │ ┌─────────────────────┐ │ │ │ Instagram │ │ │ │ ✓ 포스팅 완료 │ │ │ │ 🔗 게시물 보기 │ │ │ │ 완료 시각: 14:02 │ │ │ └─────────────────────┘ │ │ │ │ 🔄 배포 중 │ │ ┌─────────────────────┐ │ │ │ 우리동네TV │ │ │ │ ⏳ 영상 업로드 중... │ │ │ │ [██████░░░░] 60% │ │ │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ 지니TV │ │ │ │ ⏳ 광고 예약 중... │ │ │ │ [████░░░░░░] 40% │ │ │ └─────────────────────┘ │ │ │ │ ⏸️ 대기중 │ │ ┌─────────────────────┐ │ │ │ Naver Blog │ │ │ │ ⏸️ 순서 대기 │ │ │ └─────────────────────┘ │ │ │ │ ❌ 배포 실패 (재시도 가능) │ │ ┌─────────────────────┐ │ │ │ 링고비즈 │ │ │ │ ❌ API 연결 오류 │ │ │ │ [재시도 1/3] │ │ │ └─────────────────────┘ │ │ │ ├─────────────────────────────┤ │ [배포 취소] [완료 대기] │ └─────────────────────────────┘ ``` **인터랙션** - 실시간 진행 상태 업데이트 (폴링 5초) - `게시물 보기` 링크 → 해당 플랫폼 게시물 새 탭 - `재시도` 버튼 → 실패한 채널 재배포 (최대 3회) - 모든 배포 완료 → 자동으로 `17-오프라인자료다운로드` - `배포 취소` → 진행중인 배포 중단 확인 다이얼로그 #### 17-오프라인자료다운로드 **개요** - 목적: 오프라인 홍보 자료 다운로드 - 관련 유저스토리: UFR-DIST-060 - 비즈니스 중요도: ⭐⭐⭐ **주요 기능** - QR 포스터 다운로드 - 인쇄용 파일 제공 - 다운로드 이력 관리 **UI 구성요소** ``` ┌─────────────────────────────┐ │ ← 오프라인 자료 다운로드 │ ├─────────────────────────────┤ │ │ │ ✅ 배포가 완료되었습니다! │ │ │ │ 💾 다운로드 가능 파일 │ │ │ │ 📋 포스터 │ │ ┌─────────────────────┐ │ │ │ A4 QR 포스터 (PDF) │ │ │ │ 210x297mm, 300dpi │ │ │ │ [📥 다운로드] │ │ │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ A3 QR 포스터 (PDF) │ │ │ │ 297x420mm, 300dpi │ │ │ │ [📥 다운로드] │ │ │ └─────────────────────┘ │ │ │ │ 🖼️ 이미지 │ │ ┌─────────────────────┐ │ │ │ QR 코드 (PNG) │ │ │ │ 단독 이미지, 1080px │ │ │ │ [📥 다운로드] │ │ │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ 홍보 이미지 (PNG) │ │ │ │ 고해상도, 1080x1080 │ │ │ │ [📥 다운로드] │ │ │ └─────────────────────┘ │ │ │ │ 📦 전체 파일 │ │ ┌─────────────────────┐ │ │ │ 모든 파일 (ZIP) │ │ │ │ 4개 파일, 12.5MB │ │ │ │ [📥 일괄 다운로드] │ │ │ └─────────────────────┘ │ │ │ ├─────────────────────────────┤ │ [대시보드로 이동] │ └─────────────────────────────┘ ``` **인터랙션** - `다운로드` 버튼 → 해당 파일 다운로드 - `일괄 다운로드` → ZIP 파일 생성 후 다운로드 - 다운로드 이력 자동 기록 - `대시보드로 이동` → `21-실시간대시보드` --- ### 3.6 Participation 서비스 #### 18-이벤트참여신청 (고객용) **개요** - 목적: 고객의 간편한 이벤트 참여 - 관련 유저스토리: UFR-PART-010 - 비즈니스 중요도: ⭐⭐⭐⭐⭐ **주요 기능** - 이벤트 정보 표시 - 참여 정보 입력 - 중복 참여 방지 **UI 구성요소** ``` ┌─────────────────────────────┐ │ │ │ [ 이벤트 배너 이미지 ] │ │ │ │ 🎃 할로윈 특별 이벤트 │ │ 왕갈비통닭 │ │ │ │ 📅 기간: 2025.10.20 ~ 10.31│ │ 🎁 경품: 치킨세트 무료 (10명)│ │ │ │ 🎯 참여 방법 │ │ 1️⃣ 정보 입력 │ │ 2️⃣ 참여 완료 │ │ 3️⃣ 당첨자 발표 (11/1) │ │ │ │ ──────────────────── │ │ │ │ 👤 고객명 * │ │ [___________________] │ │ │ │ 📱 전화번호 * │ │ [010-____-____] │ │ │ │ 📍 참여 경로 * │ │ ○ Instagram │ │ ○ Naver Blog │ │ ○ QR 코드 스캔 │ │ ○ 우리동네TV │ │ ○ 지니TV │ │ ○ 기타 │ │ │ │ ┌─────────────────────┐ │ │ │ ☐ 개인정보 수집 및 │ │ │ │ 이용 동의 (필수) │ │ │ │ [약관 보기] │ │ │ └─────────────────────┘ │ │ │ │ [ 참여하기 ] │ │ │ └─────────────────────────────┘ ``` **인터랙션** - 입력 필드 실시간 검증 - 고객명: 2자 이상 - 전화번호: 010-XXXX-XXXX 형식 - 참여 경로 자동 추적 (URL 파라미터) - `약관 보기` → 개인정보 처리방침 모달 - 동의 체크박스 필수 - `참여하기` 버튼 → 중복 체크 → `19-참여완료` 또는 중복 알림 #### 19-참여완료 **개요** - 목적: 응모번호 발급 및 안내 - 관련 유저스토리: UFR-PART-010 - 비즈니스 중요도: ⭐⭐⭐⭐ **주요 기능** - 응모번호 발급 - 당첨 발표일 안내 - 참여 정보 확인 **UI 구성요소** ``` ┌─────────────────────────────┐ │ │ │ ✅ 참여가 완료되었습니다! │ │ │ │ 🎟️ 응모번호 │ │ ┌─────────────────────┐ │ │ │ │ │ │ │ EV-20251020-1523 │ │ │ │ │ │ │ └─────────────────────┘ │ │ │ │ 👤 홍길동님 │ │ 📱 010-1234-5678 │ │ │ │ 📅 당첨 발표일 │ │ 2025년 11월 1일 (금) │ │ 오후 2시 │ │ │ │ 📩 당첨 시 SMS로 알림을 │ │ 보내드립니다 │ │ │ │ 🎁 경품 │ │ 치킨세트 무료 (10명) │ │ 수령 기한: 당첨 발표 후 7일 │ │ 수령 장소: 왕갈비통닭 매장 │ │ │ │ ──────────────────── │ │ │ │ 📱 SNS에 공유하고 │ │ 친구들도 초대하세요! │ │ [Instagram 공유] │ │ [Kakao 공유] │ │ │ └─────────────────────────────┘ ``` **인터랙션** - 응모번호 자동 발급 및 표시 - `Instagram 공유` → 공유 시트 (이벤트 페이지 링크) - `Kakao 공유` → 카카오톡 공유 API - 화면 스크린샷 저장 가능 #### 20-당첨자명단관리 **개요** - 목적: 소상공인의 당첨자 관리 및 경품 지급 추적 - 관련 유저스토리: UFR-PART-050 - 비즈니스 중요도: ⭐⭐⭐⭐ **주요 기능** - 당첨자 명단 조회 - 경품 지급 상태 관리 - 명단 다운로드 **UI 구성요소** ``` ┌─────────────────────────────┐ │ ← 당첨자 명단 관리 │ ├─────────────────────────────┤ │ │ │ 🏆 이벤트: 할로윈 특별 이벤트│ │ 당첨자: 10명 │ │ │ │ 📥 [엑셀 다운로드] │ │ │ │ ┌─────────────────────┐ │ │ │ 1. 홍길동 │ │ │ │ 📱 010-1234-5678 │ │ │ │ 🎟️ EV-1523 │ │ │ │ ☐ 경품 지급 완료 │ │ │ │ 참여일: 10/20 14:32 │ │ │ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ │ │ │ 2. 김철수 │ │ │ │ 📱 010-2345-6789 │ │ │ │ 🎟️ EV-1587 │ │ │ │ ✅ 경품 지급 완료 │ │ │ │ 지급일: 11/2 10:15 │ │ │ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ │ │ │ 3. 이영희 │ │ │ │ 📱 010-3456-7890 │ │ │ │ 🎟️ EV-1612 │ │ │ │ ☐ 경품 지급 완료 │ │ │ │ 참여일: 10/21 11:08 │ │ │ └─────────────────────┘ │ │ │ │ ... (7명 더) │ │ │ │ 📊 지급 현황: 2/10 (20%) │ │ [██░░░░░░░░] │ │ │ ├─────────────────────────────┤ │ [참여자 전체 명단 다운로드] │ └─────────────────────────────┘ ``` **인터랙션** - 당첨자 카드 체크박스 → 경품 지급 상태 업데이트 - 체크 시 지급 일시 자동 기록 - 당첨자에게 확인 문자 발송 (옵션) - `엑셀 다운로드` → 당첨자 명단 Excel 파일 - `참여자 전체 명단 다운로드` → 전체 참여자 Excel (분석용) - 지급 현황 자동 업데이트 --- ### 3.7 Analytics 서비스 #### 21-실시간대시보드 **개요** - 목적: 이벤트 성과 실시간 모니터링 - 관련 유저스토리: UFR-ANAL-010 - 비즈니스 중요도: ⭐⭐⭐⭐⭐ **주요 기능** - 핵심 지표 실시간 표시 - 채널별 노출/참여 현황 - 자동/수동 새로고침 **UI 구성요소** ``` ┌─────────────────────────────┐ │ ← 실시간 대시보드 │ 🔄 ├─────────────────────────────┤ │ │ │ 🎃 할로윈 특별 이벤트 │ │ 진행중 · D-7 │ │ 마지막 업데이트: 2분 전 │ │ │ │ ──────────────────── │ │ │ │ 📊 핵심 지표 │ │ ┌─────────┬─────────┐ │ │ │ 👥 참여자 │ 📺 노출수│ │ │ │ │ │ │ │ │ 1,523 │ 45,892 │ │ │ │ ↑ +152 │ ↑ +2.3K │ │ │ │ (+11%) │ (+5%) │ │ │ └─────────┴─────────┘ │ │ ┌─────────┬─────────┐ │ │ │ 🏪 방문↑ │ 💰 ROI │ │ │ │ │ │ │ │ │ +32% │ 245% │ │ │ │ vs 평균 │ 예상치 │ │ │ └─────────┴─────────┘ │ │ │ │ 📈 시간대별 참여 추이 │ │ ┌─────────────────────┐ │ │ │ ▁▃▅▇█▇▅▃▁ │ │ │ │ 09 12 15 18 21 시 │ │ │ └─────────────────────┘ │ │ │ │ 탭: [전체] 채널별 ROI │ │ │ │ 🎯 참여 채널 분석 │ │ Instagram 45% ████▌ │ │ 우리동네TV 28% ██▊ │ │ QR 코드 18% █▊ │ │ Naver Blog 9% ▉ │ │ │ │ ──────────────────── │ │ │ │ [📊 상세 분석 보기] │ │ │ ├─────────────────────────────┤ │ 🏠 홈 │ 🎪 이벤트 │ 📊 분석 │ 👤 │ └─────────────────────────────┘ ``` **인터랙션** - 자동 새로고침 (5분 간격) - 수동 새로고침 (우상단 🔄 아이콘 또는 당겨서 새로고침) - 지표 카드 터치 → 해당 지표 상세 팝업 - 그래프 터치 → 시간대별 상세 데이터 - 탭 전환 → `22-채널별성과분석`, `23-ROI분석` - `상세 분석 보기` → 전체 분석 대시보드 (데스크톱 최적화) #### 22-채널별성과분석 **개요** - 목적: 채널별 효율성 비교 - 관련 유저스토리: UFR-ANAL-020 - 비즈니스 중요도: ⭐⭐⭐⭐ **주요 기능** - 채널별 노출/참여/전환 비교 - 채널 효율성 순위 **UI 구성요소** ``` ┌─────────────────────────────┐ │ ← 채널별 성과 분석 │ ├─────────────────────────────┤ │ │ │ 탭: 전체 [채널별] ROI │ │ │ │ 📊 채널 성과 비교 │ │ │ │ 🥇 가장 효과적인 채널 │ │ ┌─────────────────────┐ │ │ │ Instagram │ │ │ │ 📊 노출 20,642회 │ │ │ │ 👥 참여 685명 │ │ │ │ 🏪 방문 214명 │ │ │ │ 💡 참여율: 3.3% │ │ │ │ 💡 전환율: 31.2% │ │ │ │ 💰 CPA: 2,190원 │ │ │ └─────────────────────┘ │ │ │ │ 🥈 2위 │ │ ┌─────────────────────┐ │ │ │ 우리동네TV │ │ │ │ 📊 노출 12,850회 │ │ │ │ 👥 참여 427명 │ │ │ │ 🏪 방문 165명 │ │ │ │ 💡 참여율: 3.3% │ │ │ │ 💡 전환율: 38.6% │ │ │ │ 💰 CPA: 2,800원 │ │ │ └─────────────────────┘ │ │ │ │ 🥉 3위: QR 코드 │ │ 4위: Naver Blog │ │ 5위: 지니TV │ │ 6위: Kakao Channel │ │ │ │ 📈 비교 그래프 │ │ [막대 그래프 시각화] │ │ │ ├─────────────────────────────┤ │ [이전] [다음] │ └─────────────────────────────┘ ``` **인터랙션** - 채널 카드 터치 → 상세 데이터 확장 - 시간대별 노출 추이 - 일별 참여율 변화 - 비용 상세 내역 - 그래프 인터랙션 (확대/축소) - 순위 정렬 변경 (노출수/참여율/전환율/CPA) #### 23-ROI분석 **개요** - 목적: 투자 대비 수익 분석 - 관련 유저스토리: UFR-ANAL-030 - 비즈니스 중요도: ⭐⭐⭐⭐⭐ **주요 기능** - 비용/수익 계산 - ROI 자동 계산 - 손익분기점 표시 **UI 구성요소** ``` ┌─────────────────────────────┐ │ ← ROI 분석 │ ├─────────────────────────────┤ │ │ │ 탭: 전체 채널별 [ROI] │ │ │ │ 💰 투자 대비 수익 분석 │ │ │ │ 📊 ROI │ │ ┌─────────────────────┐ │ │ │ │ │ │ │ 245% │ │ │ │ ↑ +12% │ │ │ │ │ │ │ └─────────────────────┘ │ │ │ │ 💸 총 투자 비용 │ │ ┌─────────────────────┐ │ │ │ 경품 비용 500,000원│ │ │ │ 우리동네TV 300,000원│ │ │ │ 지니TV 400,000원│ │ │ │ Instagram 0원 │ │ │ │ 기타 채널 50,000원│ │ │ │ ───────────────── │ │ │ │ 합계 1,250,000원│ │ │ └─────────────────────┘ │ │ │ │ 💵 총 수익 │ │ ┌─────────────────────┐ │ │ │ 매출 증가 2,800,000원│ │ │ │ (이벤트 기간 vs 평균) │ │ │ │ │ │ │ │ 신규 고객 LTV │ │ │ │ 243명 × 4,500원 │ │ │ │ = 1,093,500원 │ │ │ │ ───────────────── │ │ │ │ 합계 3,893,500원│ │ │ └─────────────────────┘ │ │ │ │ 📈 손익 분기 │ │ ✅ 달성 (D-3에 달성) │ │ 순이익: +2,643,500원 │ │ │ │ 📊 ROI 추이 그래프 │ │ [꺾은선 그래프] │ │ │ ├─────────────────────────────┤ │ [PDF 리포트 생성] │ └─────────────────────────────┘ ``` **인터랙션** - 비용/수익 카드 → 상세 내역 확장 - 그래프 → 일별 ROI 추이 - `PDF 리포트 생성` → `24-분석리포트` #### 24-분석리포트 **개요** - 목적: 종합 분석 리포트 생성 및 다운로드 - 관련 유저스토리: UFR-ANAL-040 - 비즈니스 중요도: ⭐⭐⭐ **주요 기능** - PDF 리포트 자동 생성 - 리포트 미리보기 - 이메일 발송 **UI 구성요소** ``` ┌─────────────────────────────┐ │ ← 분석 리포트 생성 │ ├─────────────────────────────┤ │ │ │ 📄 종합 분석 리포트 │ │ │ │ 🤖 리포트 생성 중... │ │ [██████████░░░░] 70% │ │ │ │ ✅ 생성 완료! │ │ │ │ 📋 리포트 내용 │ │ • 이벤트 개요 │ │ • 참여 통계 │ │ • 노출 통계 │ │ • 매출 분석 │ │ • ROI 분석 │ │ • 채널별 성과 비교 │ │ • 업종 평균 대비 벤치마킹 │ │ • 시각화 차트 12종 │ │ │ │ 📄 미리보기 │ │ ┌─────────────────────┐ │ │ │ [ PDF 썸네일 ] │ │ │ │ 1/8 페이지 │ │ │ └─────────────────────┘ │ │ [◀️ 이전] [다음 ▶️] │ │ │ │ 📥 다운로드 옵션 │ │ ┌─────────────────────┐ │ │ │ [📥 PDF 다운로드] │ │ │ │ 할로윈이벤트_리포트.pdf│ │ │ │ 2.8MB, 8페이지 │ │ │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ [📧 이메일 발송] │ │ │ │ 등록된 이메일로 전송 │ │ │ └─────────────────────┘ │ │ │ ├─────────────────────────────┤ │ [대시보드로] │ └─────────────────────────────┘ ``` **인터랙션** - 리포트 생성 프로그레스 표시 - 미리보기 페이지 네비게이션 - `PDF 다운로드` → PDF 파일 다운로드 - `이메일 발송` → 등록 이메일로 리포트 전송 - `대시보드로` → `21-실시간대시보드` --- ### 3.8 AI Learning 서비스 #### 25-AI개선안제안 **개요** - 목적: AI 기반 이벤트 개선안 제시 - 관련 유저스토리: UFR-AIMPR-010 - 비즈니스 중요도: ⭐⭐⭐⭐ **주요 기능** - 성공/실패 요인 분석 - 3가지 개선안 제시 - 예상 효과 표시 **UI 구성요소** ``` ┌─────────────────────────────┐ │ ← AI 개선안 제안 │ ├─────────────────────────────┤ │ │ │ 🤖 AI가 분석한 개선안 │ │ │ │ ✅ 성공 요인 │ │ • Instagram 채널 효율 우수 │ │ • 참여 방법 간편성 │ │ • 시즌 트렌드 반영 우수 │ │ │ │ ❗ 개선 포인트 │ │ • 지니TV 채널 참여율 저조 │ │ • 경품 매력도 부족 │ │ • 홍보 문구 클릭률 낮음 │ │ │ │ 💡 AI 추천 개선안 (Top 3) │ │ │ │ ┌─────────────────────┐ │ │ │ 1순위 🥇 │ │ │ │ │ │ │ │ 경품 변경 │ │ │ │ 치킨세트 → 상품권 │ │ │ │ (50,000원 상당) │ │ │ │ │ │ │ │ 📊 예상 효과: │ │ │ │ 참여율 +45% ↑ │ │ │ │ ROI +67% ↑ │ │ │ │ │ │ │ │ 근거: 유사 업종에서 │ │ │ │ 상품권 경품 참여율 │ │ │ │ 평균 62% 높음 │ │ │ │ │ │ │ │ [이 개선안으로 시작] │ │ │ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ │ │ │ 2순위 🥈 │ │ │ │ 참여 방법 단순화 │ │ │ │ [상세 보기 ▼] │ │ │ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ │ │ │ 3순위 🥉 │ │ │ │ 배포 채널 조정 │ │ │ │ [상세 보기 ▼] │ │ │ └─────────────────────┘ │ │ │ ├─────────────────────────────┤ │ [피드백 제공] [다음 아이디어]│ └─────────────────────────────┘ ``` **인터랙션** - 개선안 카드 `상세 보기` → 확장하여 근거 및 상세 설명 표시 - `이 개선안으로 시작` → 해당 개선안 반영하여 `03-이벤트목적선택` (새 이벤트) - `피드백 제공` → 개선안 평가 모달 (도움됨/도움 안됨) - `다음 아이디어` → `26-다음이벤트아이디어` #### 26-다음이벤트아이디어 **개요** - 목적: 시즌별 이벤트 아이디어 제안 - 관련 유저스토리: UFR-AIMPR-020 - 비즈니스 중요도: ⭐⭐⭐ **주요 기능** - 시즌 트렌드 반영 - 5가지 아이디어 제안 - 빠른 기획 시작 **UI 구성요소** ``` ┌─────────────────────────────┐ │ ← 다음 이벤트 아이디어 │ ├─────────────────────────────┤ │ │ │ ✨ 11월 추천 이벤트 아이디어 │ │ │ │ 🤖 AI가 학습한 결과를 바탕으로│ │ 제안합니다 │ │ │ │ ┌─────────────────────┐ │ │ │ 1. 🍂 가을 감사제 │ │ │ │ │ │ │ │ 📅 추천 기간: │ │ │ │ 11/1 ~ 11/15 │ │ │ │ │ │ │ │ 🎯 목적: 재방문 유도 │ │ │ │ │ │ │ │ 📊 예상 성과: │ │ │ │ 참여 700명 │ │ │ │ ROI 280% │ │ │ │ │ │ │ │ 💡 핵심 전략: │ │ │ │ 단골 고객 특별 할인 │ │ │ │ 친구 초대 이벤트 │ │ │ │ │ │ │ │ [이 아이디어로 시작] │ │ │ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ │ │ │ 2. 🎄 연말 특별 이벤트│ │ │ │ [상세 보기 ▼] │ │ │ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ │ │ │ 3. 🏃 일일 한정 특가 │ │ │ │ [상세 보기 ▼] │ │ │ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ │ │ │ 4. 👨‍👩‍👧 가족 이벤트 │ │ │ │ [상세 보기 ▼] │ │ │ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ │ │ │ 5. 🎁 럭키드로우 │ │ │ │ [상세 보기 ▼] │ │ │ └─────────────────────┘ │ │ │ ├─────────────────────────────┤ │ [메인으로] │ └─────────────────────────────┘ ``` **인터랙션** - 아이디어 카드 `상세 보기` → 확장하여 상세 전략 및 예시 표시 - `이 아이디어로 시작` → 해당 아이디어 기본 설정으로 `03-이벤트목적선택` - 시즌 변경 시 자동으로 트렌드 업데이트 - `메인으로` → `00-메인대시보드` --- ### 3.9 공통 화면 #### 99-마이페이지 **개요** - 목적: 사용자 정보 및 설정 관리 - 비즈니스 중요도: ⭐⭐⭐ **주요 기능** - 매장 정보 수정 - 알림 설정 - 계정 관리 **UI 구성요소** ``` ┌─────────────────────────────┐ │ ← 마이페이지 │ ├─────────────────────────────┤ │ │ │ 👤 사장님 정보 │ │ ┌─────────────────────┐ │ │ │ 홍길동 │ │ │ │ 010-1234-5678 │ │ │ │ hong@example.com │ │ │ │ [수정] │ │ │ └─────────────────────┘ │ │ │ │ 🏪 매장 정보 │ │ ┌─────────────────────┐ │ │ │ 왕갈비통닭 │ │ │ │ 음식점 (치킨) │ │ │ │ 수원시 영통구... │ │ │ │ [수정] │ │ │ └─────────────────────┘ │ │ │ │ 🔔 알림 설정 │ │ ┌─────────────────────┐ │ │ │ ✅ 이벤트 시작 알림 │ │ │ │ ✅ 참여자 알림 │ │ │ │ ✅ 당첨자 발표 알림 │ │ │ │ ☐ 마케팅 정보 수신 │ │ │ └─────────────────────┘ │ │ │ │ 💳 결제 정보 │ │ [무료 체험 쿠폰: 0회 남음] │ │ [결제 수단 등록] │ │ │ │ ℹ️ 기타 │ │ • 이용 약관 │ │ • 개인정보 처리방침 │ │ • 고객 지원 │ │ • 버전 정보 (v1.0.0) │ │ │ │ [로그아웃] │ │ │ └─────────────────────────────┘ ``` **인터랙션** - `수정` 버튼 → 해당 정보 수정 모달 - 알림 토글 → 실시간 반영 - `결제 수단 등록` → 결제 정보 입력 모달 - 각 메뉴 터치 → 해당 상세 페이지 - `로그아웃` → 확인 다이얼로그 → 로그인 화면 --- ## 4. 화면간 전환 및 네비게이션 ### 4.1 네비게이션 구조 **하단 탭 네비게이션 (소상공인 앱)** ``` ┌──────┬──────┬──────┬──────┐ │ 🏠 │ 🎪 │ 📊 │ 👤 │ │ 홈 │이벤트│ 분석 │ 마이 │ └──────┴──────┴──────┴──────┘ ``` - **홈 (🏠)**: `00-메인대시보드` - **이벤트 (🎪)**: 이벤트 생성 플로우 (`03-이벤트목적선택`) - **분석 (📊)**: `21-실시간대시보드` - **마이 (👤)**: `99-마이페이지` ### 4.2 전환 애니메이션 **화면 전환 규칙 (Mobile First)** - 순차 진행: 슬라이드 인 (좌→우) - 이전 단계: 슬라이드 아웃 (우→좌) - 탭 전환: 페이드 인/아웃 - 모달: 바텀 시트 (아래→위) ### 4.3 백 버튼 동작 **Android 백 버튼 / iOS 스와이프 백** - 순차 플로우 내: 이전 단계로 - 메인 화면: 앱 종료 확인 - 모달: 모달 닫기 --- ## 5. 반응형 설계 전략 ### 5.1 브레이크포인트 **Mobile (320px ~ 767px)** - 기본 디자인 - 단일 컬럼 레이아웃 - 스택형 UI - 터치 친화적 인터페이스 (최소 44x44px) - 폰트 크기: 14px (본문), 16px (입력 필드), 20px (제목) **Tablet (768px ~ 1023px)** - 확장 디자인 - 2열 그리드 (카드형 콘텐츠) - 사이드바 네비게이션 (접이식) - 확장된 대시보드 (6개 지표 카드) - 폰트 크기: 16px (본문), 18px (입력 필드), 24px (제목) **Desktop (1024px+)** - 완전 확장 - 3열 그리드 - 고정 사이드바 네비게이션 - 전체 대시보드 (12개 지표 + 고급 차트) - 멀티 패널 (리스트 + 상세 동시 표시) - 폰트 크기: 16px (본문), 18px (입력 필드), 28px (제목) ### 5.2 Progressive Enhancement **Mobile (필수 기능)** - 이벤트 생성 (AI 기획 ~ 배포) - 실시간 대시보드 (핵심 지표 4개) - 당첨자 관리 - 간단한 차트 (막대/선 그래프) **Tablet (향상 기능)** - 채널별 비교 분석 - 확장된 대시보드 (6개 지표) - 드래그 앤 드롭 콘텐츠 편집 - 인터랙티브 차트 (확대/축소) **Desktop (고급 기능)** - 전체 분석 대시보드 (12개 지표) - 고급 차트 (히트맵, 퍼널 분석) - 멀티 패널 워크플로우 - 키보드 단축키 지원 ### 5.3 터치/마우스 최적화 **Mobile/Tablet (터치)** - 최소 터치 영역: 44x44px - 스와이프 제스처 (화면 전환, 새로고침) - 롱 프레스 (상세 정보, 컨텍스트 메뉴) - 핀치 줌 (차트, 이미지) **Desktop (마우스/키보드)** - 호버 효과 (툴팁, 미리보기) - 우클릭 컨텍스트 메뉴 - 키보드 네비게이션 (Tab, Enter, ESC) - 드래그 앤 드롭 (콘텐츠 편집, 순서 변경) --- ## 6. 접근성 보장 방안 (WCAG 2.1 AA) ### 6.1 시각적 접근성 **색상 대비** - 본문 텍스트: 최소 4.5:1 대비율 - 대형 텍스트 (18px+): 최소 3:1 대비율 - UI 컴포넌트: 최소 3:1 대비율 - 색상만으로 정보 전달 금지 (아이콘, 패턴 병행) **폰트** - 최소 폰트 크기: 14px (본문), 16px (입력 필드) - 줄 간격: 최소 1.5 (본문), 1.2 (제목) - 글자 간격 조정 가능 - 고대비 모드 지원 ### 6.2 청각적 접근성 **영상 콘텐츠** - 자막 파일 제공 (SRT) - 영상 내 텍스트 오버레이 - 시각적 피드백 (로딩, 완료) ### 6.3 운동 능력 접근성 **터치/클릭** - 최소 터치 영역: 44x44px - 충분한 요소 간 간격 (8px 이상) - 드래그 앤 드롭 대안 제공 (버튼 클릭) - 시간 제한 없음 또는 연장 가능 ### 6.4 인지적 접근성 **명확성** - 간결한 언어 사용 - 명확한 레이블 및 안내 - 에러 메시지 구체적으로 제공 - 아이콘 + 텍스트 병행 **일관성** - 일관된 네비게이션 구조 - 일관된 인터랙션 패턴 - 예측 가능한 동작 ### 6.5 스크린 리더 지원 **ARIA 레이블** - 모든 버튼에 `aria-label` - 폼 필드에 `aria-describedby` (도움말) - 에러 메시지에 `aria-live="polite"` - 로딩 상태에 `aria-busy="true"` **키보드 네비게이션** - 모든 인터랙티브 요소 Tab 접근 가능 - 포커스 표시 명확 (파란색 테두리 2px) - Skip to content 링크 - Escape 키로 모달 닫기 --- ## 7. 성능 최적화 방안 ### 7.1 로딩 성능 **First Contentful Paint (FCP): < 1.5초** - Critical CSS 인라인 - 폰트 preload - 이미지 최적화 (WebP, AVIF) - 코드 스플리팅 (라우트별) **Time to Interactive (TTI): < 3초** - JavaScript 번들 최소화 - 불필요한 폴리필 제거 - Tree shaking - 서버 사이드 렌더링 (SSR) 또는 정적 생성 (SSG) ### 7.2 런타임 성능 **AI 처리 시간 최적화** - API 병렬 호출 (기획안 10초 목표) - 응답 캐싱 (Redis, 24시간) - 프롬프트 최적화 (토큰 수 감소) - 스켈레톤 UI (로딩 중 사용자 경험) **콘텐츠 생성 최적화** - 이미지/영상 병렬 생성 (3분 목표) - GPU 가속 활용 - 웹 워커 활용 (메인 스레드 차단 방지) **실시간 데이터** - 폴링 간격 최적화 (5분, 사용자 액션 시 즉시) - WebSocket 활용 (실시간 업데이트) - 데이터 증분 업데이트 (전체 재로드 방지) ### 7.3 네트워크 최적화 **이미지** - Lazy loading (스크롤 시 로드) - Responsive images (`srcset`, `sizes`) - WebP/AVIF 포맷 사용 - CDN 활용 **API 호출** - 요청 배치 (batch API) - 응답 캐싱 (Service Worker) - 중복 요청 제거 (debounce, throttle) ### 7.4 오프라인 지원 (PWA) **Service Worker** - 핵심 에셋 캐싱 (HTML, CSS, JS) - API 응답 캐싱 (stale-while-revalidate) - 오프라인 폴백 페이지 **IndexedDB** - 작성 중인 이벤트 로컬 저장 - 네트워크 복구 시 동기화 --- ## 8. 변경 이력 | 버전 | 날짜 | 변경 내용 | 작성자 | |------|------|-----------|--------| | 1.0 | 2025-10-17 | 초기 UI/UX 설계서 작성 | 박민지 (픽셀) | --- ## 부록: KT 사장님Easy 벤치마킹 결과 ### 주요 인사이트 1. **AI 중심 설계**: AI Agent, AI 이미지 제작 등 AI 기능 전면 배치 2. **통합 관리**: 하나의 앱에서 로봇, CCTV, 주문 시스템 등 통합 관리 3. **데이터 기반**: 매출 비교, 유동인구 분석 등 데이터 분석 제공 4. **실용적 혜택**: 무료 체험, 포인트 등 실질적 혜택 강조 5. **인사이트 콘텐츠**: 사장님을 위한 고민 해결 팁, 트렌드 콘텐츠 제공 ### 적용 사항 - AI 기능을 전면에 배치 (기획, 콘텐츠 생성, 개선안) - 실시간 데이터 분석 대시보드 - 무료 체험 쿠폰 제공 - 간편한 UI (Mobile First) - 인사이트 제공 (AI 개선안, 다음 이벤트 아이디어) --- **문서 끝**