diff --git a/.playwright-mcp/kt-sajangeasy-page.png b/.playwright-mcp/kt-sajangeasy-page.png new file mode 100644 index 0000000..6130ab8 Binary files /dev/null and b/.playwright-mcp/kt-sajangeasy-page.png differ diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6b665aa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/design/uiux/style-guide.md b/design/uiux/style-guide.md deleted file mode 100644 index c87f02a..0000000 --- a/design/uiux/style-guide.md +++ /dev/null @@ -1,1035 +0,0 @@ -# KT AI 기반 소상공인 이벤트 자동 생성 서비스 - 스타일 가이드 - -## 문서 정보 - -**버전**: 1.0 -**작성일**: 2025-08-15 -**작성자**: UI/UX Designer -**적용 범위**: KT AI 기반 소상공인 이벤트 자동 생성 서비스 전체 - ---- - -## 목차 - -1. [브랜드 아이덴티티](#1-브랜드-아이덴티티) -2. [디자인 원칙](#2-디자인-원칙) -3. [컬러 시스템](#3-컬러-시스템) -4. [타이포그래피](#4-타이포그래피) -5. [간격 시스템](#5-간격-시스템) -6. [컴포넌트 스타일](#6-컴포넌트-스타일) -7. [반응형 브레이크포인트](#7-반응형-브레이크포인트) -8. [대상 서비스 특화 컴포넌트](#8-대상-서비스-특화-컴포넌트) -9. [인터랙션 패턴](#9-인터랙션-패턴) -10. [변경 이력](#10-변경-이력) - ---- - -## 1. 브랜드 아이덴티티 - -### 1.1 서비스 컨셉 - -**"AI가 만드는 성공 이벤트, 클릭 한 번으로 시작하세요"** - -KT AI 기반 소상공인 이벤트 자동 생성 서비스는 복잡한 이벤트 기획, 콘텐츠 제작, 다중 채널 배포를 AI 기술로 자동화하여 소상공인이 손쉽게 효과적인 마케팅 이벤트를 실행할 수 있도록 지원하는 통합 마케팅 플랫폼입니다. - -### 1.2 타겟 사용자 - -**주요 사용자**: 소상공인 및 중소기업 사장님 -**특징**: -- 마케팅 전문 지식이 부족함 -- 시간과 예산이 제한적 -- 빠르고 확실한 결과를 원함 -- 복잡한 기술보다 직관적인 사용성 선호 - -### 1.3 브랜드 퍼스널리티 - -- **전문적 (Professional)**: KT의 신뢰성과 기술력 기반 -- **혁신적 (Innovative)**: 최신 AI 기술로 자동화 구현 -- **접근 가능한 (Accessible)**: 누구나 쉽게 사용 가능 -- **결과 중심 (Result-Oriented)**: 명확한 성과 측정과 개선 - -### 1.4 디자인 철학 - -**"KT의 신뢰 + 현대적 웹 UI"** - -- **KT 브랜드 헤리티지**: KT Red (#E60012)를 주요 색상으로 활용하여 브랜드 정체성 유지 -- **클린하고 직관적**: 불필요한 요소 제거, 핵심 기능에 집중 -- **AI 투명성**: AI 처리 과정을 명확히 표시하여 신뢰 구축 -- **데이터 시각화**: 복잡한 분석 결과를 이해하기 쉬운 차트와 카드로 표현 - -### 1.5 참고 디자인 - -**KT 사장이지 플랫폼** (https://product.kt.com/wDic/soho/marketing.do?itemCode=sajangeasy) -- 카드 기반 정보 구조 -- 명확한 섹션 구분 -- 큰 CTA 버튼과 직관적 아이콘 -- KT 브랜드 컬러 일관성 - -**뤼튼 디자인 시스템** (https://wwit.design/2024/12/24/wrtn/) -- 깔끔한 배경 색상 체계 -- 일관된 컴포넌트 패딩 및 간격 -- 명확한 타이포그래피 위계 - ---- - -## 2. 디자인 원칙 - -### 2.1 간결함 (Simplicity) - -**"최소한의 클릭으로 작업 완료"** - -- 3클릭 이내 주요 작업 완료 목표 -- 복잡한 설정은 스마트 기본값 제공 -- 불필요한 옵션 숨기기 (고급 설정은 접기/펼치기) - -**적용 예시**: -- 이벤트 기획: 목적 선택 → AI 자동 기획 → 승인 (3단계) -- 배포: 채널 선택 → 배포 시작 (2단계) - -### 2.2 명확함 (Clarity) - -**"현재 위치와 다음 단계를 명확히 표시"** - -- 모든 다단계 프로세스에 StepIndicator 표시 -- 현재 상태와 가능한 액션을 명확히 구분 -- 에러 메시지는 구체적이고 해결 방법 포함 - -**적용 예시**: -- StepIndicator: "Step 2/3" 표시 -- 진행률 표시: "████████░░ 65%" -- 상태 표시: ✅ 완료, ⏳ 진행 중, ⏸️ 대기 중 - -### 2.3 피드백 (Feedback) - -**"모든 액션에 즉각적인 피드백 제공"** - -- 버튼 클릭 시 로딩 상태 표시 -- 성공/실패 시 Toast 알림 -- 실시간 데이터는 자동 업데이트 (5분 간격) - -**적용 예시**: -- 버튼: "처리 중..." + 스피너 -- Toast: "배포가 완료되었습니다" (3초 표시) -- 실시간 분석: "🔄 5분 전" 표시 - -### 2.4 AI 투명성 (AI Transparency) - -**"AI 처리 과정과 결과를 명확히 표시"** - -- AI 처리 중: 현재 단계와 진행률 표시 -- 완료 후: AI가 도출한 근거 설명 -- 수정 가능: AI 결과를 사용자가 직접 편집 가능 - -**적용 예시**: -- AI 기획 진행: "⏳ 최적 경품 추천 중... 💡 예산 300,000원 기준 분석 중" -- AI 개선 제안: "✅ 성공 요인: 참여율이 업종 평균보다 21% 높습니다" - ---- - -## 3. 컬러 시스템 - -### 3.1 Primary 색상 - -#### KT Red (주요 액션) -``` -색상: #E60012 -용도: 주요 버튼, 중요 강조, 선택 상태 -명도: 100%, 90%, 80% (호버, 활성화 상태) -``` - -**사용 가이드**: -- Primary Button 배경색 -- 선택된 카드 테두리 -- 중요 알림 아이콘 -- 진행 바 활성 영역 - -**접근성**: 흰색 텍스트와 대비율 4.5:1 이상 충족 - -#### Black (보조 액션) -``` -색상: #000000 -용도: Secondary Button, 헤더, 강조 텍스트 -``` - -**사용 가이드**: -- Secondary Button 배경색 -- 헤더 및 네비게이션 -- 제목 텍스트 (Heading) - -### 3.2 배경 및 중립 색상 - -#### White (기본 배경) -``` -색상: #FFFFFF -용도: 페이지 배경, 카드 배경, 버튼 텍스트 -``` - -#### Grey Scale (보조 및 구분) -``` -Grey-100: #F5F5F5 → 배경 구분, 비활성 영역 -Grey-200: #EEEEEE → 입력 필드 배경 -Grey-300: #CCCCCC → 테두리, 비활성 텍스트 -Grey-500: #999999 → 보조 텍스트 -Grey-700: #666666 → Caption, 힌트 텍스트 -Grey-900: #333333 → 본문 텍스트 -``` - -### 3.3 기능적 색상 (Functional Colors) - -#### Success (성공) -``` -색상: #00C73C -용도: 완료 상태, 성공 메시지, 긍정 지표 -아이콘: ✅ -``` - -**사용 예시**: -- 배포 완료: "✅ 우리동네TV 배포 완료" -- 검증 성공: "사업자번호 검증 완료 ✅" - -#### Warning (경고) -``` -색상: #FFC107 -용도: 주의 필요, 확인 요청 -아이콘: ⚠️ -``` - -**사용 예시**: -- "⚠️ 예산이 부족할 수 있습니다" -- 검토 필요 상태 표시 - -#### Error (오류) -``` -색상: #FF0000 -용도: 오류 상태, 실패 메시지, 필수 입력 -아이콘: ❌ -``` - -**사용 예시**: -- 입력 오류: "전화번호 형식이 올바르지 않습니다" -- 배포 실패: "❌ 지니TV 배포 실패" - -#### Info (정보) -``` -색상: #2196F3 -용도: 안내 메시지, 도움말, 팁 -아이콘: 💡, ℹ️ -``` - -**사용 예시**: -- "💡 첫 1회 무료 체험 쿠폰을 드립니다!" -- 툴팁 배경색 - -### 3.4 색상 사용 우선순위 - -1. **Primary (KT Red)**: 주요 액션 1개만 (페이지당) -2. **Secondary (Black)**: 보조 액션 -3. **Outline (Grey)**: 취소, 뒤로가기 -4. **Functional**: 상태 표시 전용 - ---- - -## 4. 타이포그래피 - -### 4.1 글꼴 (Font Family) - -``` -Primary Font: 'Noto Sans KR', sans-serif -Fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif -``` - -**선정 이유**: -- 한글 가독성 최적화 -- 웹 폰트로 빠른 로딩 -- 다양한 굵기 지원 (100-900) -- 무료 라이선스 - -### 4.2 타이포그래피 스케일 - -#### Heading 1 (대제목) -``` -크기: 32px -굵기: 700 (Bold) -행간: 48px (1.5) -용도: 페이지 타이틀 -예시: "이벤트 목적을 선택해주세요" -``` - -#### Heading 2 (중제목) -``` -크기: 24px -굵기: 700 (Bold) -행간: 36px (1.5) -용도: 섹션 타이틀 -예시: "진행 중인 이벤트" -``` - -#### Heading 3 (소제목) -``` -크기: 18px -굵기: 700 (Bold) -행간: 27px (1.5) -용도: 카드 제목, 서브 섹션 -예시: "📋 이벤트 개요" -``` - -#### Body (본문) -``` -크기: 14px -굵기: 400 (Regular) -행간: 22.4px (1.6) -용도: 일반 텍스트, 설명 -예시: "선택한 목적에 맞춰 AI가 최적의 이벤트를 기획합니다" -``` - -#### Caption (캡션) -``` -크기: 12px -굵기: 400 (Regular) -행간: 18px (1.5) -용도: 힌트, 보조 정보, 날짜 -예시: "예상 소요 시간: 약 10초" -``` - -### 4.3 폰트 굵기 (Font Weight) - -``` -Light: 300 → 거의 사용하지 않음 -Regular: 400 → Body, Caption (기본) -Medium: 500 → 강조할 Body 텍스트 -Bold: 700 → Heading 전체, 버튼 텍스트 -``` - -### 4.4 텍스트 색상 - -``` -Primary Text (제목, 본문): Grey-900 (#333333) -Secondary Text (보조): Grey-700 (#666666) -Disabled Text (비활성): Grey-300 (#CCCCCC) -Link Text (링크): Primary (#E60012) -``` - -### 4.5 반응형 타이포그래피 - -#### Desktop (1920px) -- 위 스케일 그대로 적용 - -#### Tablet (768-1024px) -``` -H1: 28px -H2: 20px -H3: 16px -Body: 14px -Caption: 12px -``` - -#### Mobile (375-767px) -``` -H1: 24px -H2: 18px -H3: 16px -Body: 14px -Caption: 12px -``` - ---- - -## 5. 간격 시스템 - -### 5.1 기본 그리드 - -**Base Unit**: 4px - -모든 간격은 4px의 배수로 설정하여 일관성 유지 - -### 5.2 간격 스케일 (Spacing Scale) - -``` -Space-0: 0px → 간격 없음 -Space-1: 4px → 최소 간격 (아이콘-텍스트) -Space-2: 8px → 작은 간격 (버튼 내부 패딩) -Space-3: 12px → 기본 간격 (입력 필드 사이) -Space-4: 16px → 중간 간격 (카드 내부 요소) -Space-5: 20px → - -Space-6: 24px → 큰 간격 (카드 패딩, 섹션 사이) -Space-8: 32px → 더 큰 간격 (버튼 패딩) -Space-10: 40px → 섹션 구분 -Space-12: 48px → 페이지 상하 여백 -``` - -### 5.3 컴포넌트별 간격 가이드 - -#### 버튼 -``` -내부 패딩 (Padding): -- Large: 16px 32px (상하 좌우) -- Medium: 12px 24px -- Small: 8px 16px - -버튼 간 간격 (Margin): -- 가로 배치: 12px -- 세로 배치: 16px -``` - -#### 카드 (Card) -``` -내부 패딩: 24px -카드 간 간격: 16px (가로), 24px (세로) -카드와 섹션 간: 32px -``` - -#### 입력 필드 (Input) -``` -내부 패딩: 12px 16px -레이블과 필드 간: 8px -필드 간 간격: 16px -``` - -#### 섹션 구분 -``` -페이지 여백: 48px (상하) -섹션 간 여백: 40px -서브 섹션 간: 24px -``` - -### 5.4 레이아웃 그리드 - -#### Desktop (1920px) -``` -Container: max-width 1440px, 중앙 정렬 -좌우 여백: 48px -컬럼: 12 column grid -Gutter: 24px -``` - -#### Tablet (768-1024px) -``` -Container: 100% -좌우 여백: 32px -컬럼: 8 column grid -Gutter: 16px -``` - -#### Mobile (375-767px) -``` -Container: 100% -좌우 여백: 16px -컬럼: 4 column grid -Gutter: 12px -``` - ---- - -## 6. 컴포넌트 스타일 - -### 6.1 버튼 (Button) - -#### Primary Button (주요 액션) -```css -배경: #E60012 -텍스트: #FFFFFF -패딩: 16px 32px (Large), 12px 24px (Medium), 8px 16px (Small) -테두리: 없음 -모서리: border-radius 4px -그림자: 없음 -폰트: 14px, Bold - -상태: -- Hover: 배경 #CC0010 (10% 어둡게) -- Active: 배경 #B3000E (20% 어둡게) -- Disabled: 배경 #CCCCCC, 텍스트 #999999 -``` - -**사용 예시**: "승인하고 다음", "배포 시작", "회원가입" - -#### Secondary Button (보조 액션) -```css -배경: #000000 -텍스트: #FFFFFF -패딩: 16px 32px (Large), 12px 24px (Medium), 8px 16px (Small) -테두리: 없음 -모서리: border-radius 4px - -상태: -- Hover: 배경 #333333 -- Active: 배경 #555555 -- Disabled: 배경 #CCCCCC, 텍스트 #999999 -``` - -**사용 예시**: "사업자번호 검증하기", "원본으로 되돌리기" - -#### Outline Button (취소/뒤로가기) -```css -배경: 투명 (#FFFFFF) -텍스트: #333333 -패딩: 16px 32px (Large), 12px 24px (Medium), 8px 16px (Small) -테두리: 1px solid #CCCCCC -모서리: border-radius 4px - -상태: -- Hover: 배경 #F5F5F5, 테두리 #999999 -- Active: 배경 #EEEEEE -- Disabled: 텍스트 #CCCCCC, 테두리 #EEEEEE -``` - -**사용 예시**: "이전", "건너뛰기", "수정하기" - -#### Icon Button (아이콘만) -```css -크기: 40px × 40px -배경: 투명 -아이콘 색상: #666666 - -상태: -- Hover: 배경 #F5F5F5 -- Active: 아이콘 색상 #E60012 -``` - -**사용 예시**: 검색 버튼, 설정 아이콘 - -### 6.2 입력 필드 (Input Fields) - -#### Text Input (텍스트 입력) -```css -높이: 40px -패딩: 12px 16px -배경: #FFFFFF -테두리: 1px solid #CCCCCC -모서리: border-radius 4px -폰트: 14px, Regular -플레이스홀더: Grey-500 (#999999) - -상태: -- Focus: 테두리 #E60012 (2px) -- Error: 테두리 #FF0000, 배경 #FFF5F5 -- Disabled: 배경 #F5F5F5, 텍스트 #CCCCCC -``` - -#### Number Input (숫자 입력) -```css -Text Input과 동일 -추가: 우측 증감 버튼 (▲▼) -``` - -#### Textarea (긴 텍스트) -```css -최소 높이: 120px -패딩: 12px 16px -기타: Text Input과 동일 -``` - -#### Select Dropdown (선택) -```css -높이: 40px -패딩: 12px 16px -배경: #FFFFFF -테두리: 1px solid #CCCCCC -모서리: border-radius 4px -아이콘: ▼ (우측) - -상태: -- Focus: 테두리 #E60012 -- Open: 드롭다운 메뉴 표시 (아래로 슬라이드) -``` - -#### Checkbox (체크박스) -```css -크기: 20px × 20px -테두리: 1px solid #CCCCCC -모서리: border-radius 4px - -상태: -- Checked: 배경 #E60012, 체크 아이콘 (#FFFFFF) -- Hover: 테두리 #E60012 -``` - -#### Radio Button (라디오 버튼) -```css -크기: 20px × 20px (원형) -테두리: 1px solid #CCCCCC - -상태: -- Selected: 내부 원 #E60012 (12px) -- Hover: 테두리 #E60012 -``` - -### 6.3 카드 (Card) - -#### 기본 카드 -```css -배경: #FFFFFF -패딩: 24px -모서리: border-radius 8px -그림자: 0 2px 8px rgba(0,0,0,0.1) - -상태: -- Hover: 그림자 0 4px 16px rgba(0,0,0,0.15) - transform translateY(-2px) -- Active: 테두리 2px solid #E60012 -``` - -#### Selection Card (선택 카드) -```css -기본 카드 + 테두리 2px solid transparent - -상태: -- Selected: 테두리 2px solid #E60012 - 배경 #FFF5F5 (옅은 빨강) -- Hover: 그림자 확대, 약간 상승 -``` - -**사용 예시**: 이벤트 목적 선택 카드 - -### 6.4 모달 (Modal) - -```css -배경 오버레이: rgba(0,0,0,0.5) -모달 박스: - - 배경: #FFFFFF - - 패딩: 32px - - 모서리: border-radius 8px - - 최대 너비: 600px - - 그림자: 0 4px 24px rgba(0,0,0,0.2) - -애니메이션: Scale + Fade-in (200ms) -닫기 버튼: 우측 상단 ✕ -``` - -### 6.5 Toast 알림 - -```css -배경: #333333 (일반), #00C73C (성공), #FF0000 (오류) -텍스트: #FFFFFF -패딩: 16px 24px -모서리: border-radius 4px -위치: 화면 상단 중앙 또는 하단 중앙 -그림자: 0 2px 8px rgba(0,0,0,0.2) - -애니메이션: Slide-up (250ms) -표시 시간: 3초 (자동 닫힘) -``` - -### 6.6 Progress Bar (진행 바) - -```css -높이: 8px -배경: #EEEEEE -진행 영역: #E60012 -모서리: border-radius 4px -애니메이션: 진행 애니메이션 (smooth) - -텍스트: 65% (우측 표시) -``` - -**사용 예시**: AI 기획 진행, 콘텐츠 생성 진행 - -### 6.7 Table (테이블) - -```css -헤더: - - 배경: #F5F5F5 - - 텍스트: Grey-900, Bold - - 패딩: 12px 16px - - 테두리: 1px solid #EEEEEE - -행 (Row): - - 배경: #FFFFFF - - 텍스트: Grey-900, Regular - - 패딩: 12px 16px - - 테두리: 1px solid #EEEEEE - -상태: - - Hover: 배경 #F5F5F5 - - Selected: 배경 #FFF5F5 -``` - ---- - -## 7. 반응형 브레이크포인트 - -### 7.1 브레이크포인트 정의 - -```css -Desktop: 1920px (주요 작업 환경) -Tablet: 768px - 1024px -Mobile: 375px - 767px -``` - -### 7.2 레이아웃 조정 - -#### Desktop (1920px) -``` -그리드: 3-4 컬럼 -Sidebar: 고정 표시 (240px) -카드: 280px × 160px -기능: 전체 사용 가능 -``` - -#### Tablet (768-1024px) -``` -그리드: 2 컬럼 -Sidebar: 접기 가능 (햄버거 메뉴) -카드: 200px × 140px -기능: 주요 기능 사용 가능 (일부 제한) -``` - -#### Mobile (375-767px) -``` -그리드: 1 컬럼 -Sidebar: 오버레이 방식 -카드: 전체 너비 (세로 배치) -테이블: 카드 리스트로 변경 -기능: 조회 중심 (이벤트 생성은 Desktop 권장) -``` - -### 7.3 터치 최적화 (Mobile/Tablet) - -``` -버튼 최소 크기: 44px × 44px -터치 타겟 간격: 8px 이상 -스와이프: 좌우 스와이프로 카드 이동 -드롭다운: 바텀 시트로 변경 -``` - ---- - -## 8. 대상 서비스 특화 컴포넌트 - -### 8.1 AIProcessing (AI 처리 표시) - -**용도**: AI 기획 진행, 콘텐츠 생성 진행 화면 - -```css -구성: - - 전체 진행 바 (Progress Bar) - - 단계별 상태 리스트 - ✅ 완료: 초록색 아이콘 + 결과 요약 - ⏳ 진행 중: 노란색 아이콘 + 애니메이션 + 현재 작업 설명 - ⏸️ 대기 중: 회색 아이콘 - - 예상 소요 시간 텍스트 - -애니메이션: - - 진행 바: 부드러운 전환 (transition: width 0.5s ease) - - 진행 중 아이콘: 회전 또는 펄스 효과 - -색상: - - 완료: #00C73C - - 진행 중: #FFC107 - - 대기: #CCCCCC -``` - -**사용 화면**: 05-AI기획진행, 07-콘텐츠생성진행 - -### 8.2 DataCard (데이터 카드) - -**용도**: 대시보드, 실시간 분석 화면의 주요 지표 표시 - -```css -크기: 280px × 160px -배경: #FFFFFF -패딩: 24px -모서리: border-radius 8px -그림자: 0 2px 8px rgba(0,0,0,0.1) - -구성: - - 아이콘: 좌측 상단 (24px) - - 제목: 12px, Grey-700 - - 큰 숫자: 32px, Bold, Grey-900 - - 변화율: 14px, 색상은 증감에 따라 - 상승: #00C73C ↑ - 하락: #FF0000 ↓ - - 미니 차트 (선택): 하단 (Sparkline) - -상태: - - Hover: 그림자 확대 -``` - -**예시**: -``` -┌──────────────────┐ -│ 📊 총 참여자 │ -│ 523명 │ -│ 📈 +12 │ -└──────────────────┘ -``` - -### 8.3 ChannelCard (배포 채널 카드) - -**용도**: 배포 채널 설정 및 현황 표시 - -```css -크기: 전체 너비 -배경: #FFFFFF -패딩: 24px -모서리: border-radius 8px -테두리: 1px solid #EEEEEE - -구성: - - 체크박스: 좌측 상단 - - 채널명: 18px, Bold - - 설정 옵션: 채널별 상이 (Select, Input 등) - - 예상 효과: 우측 하단 (Caption) - -상태: - - Selected: 테두리 2px solid #E60012 - - Disabled: 배경 #F5F5F5 -``` - -**사용 화면**: 10-배포채널설정, 11-배포현황 - -### 8.4 EventCard (이벤트 카드) - -**용도**: 진행 중인 이벤트 표시 - -```css -크기: 전체 너비 -배경: #FFFFFF -패딩: 24px -모서리: border-radius 8px -그림자: 0 2px 8px rgba(0,0,0,0.1) - -구성: - - 이벤트 아이콘: 🎉 (좌측) - - 이벤트명: 18px, Bold - - 상태 정보: 14px, Grey-700 - "상태: 배포 완료 | 참여자: 523명 | D-5" - - 진행 바: Progress Bar (전체 너비) - - 액션 버튼: 3개 (Primary, Secondary, Outline) - -상태: - - Hover: 그림자 확대, 약간 상승 -``` - -**사용 화면**: 03-대시보드 - -### 8.5 StepIndicator (단계 표시) - -**용도**: 다단계 프로세스의 현재 위치 표시 - -```css -구성: - - 단계 번호 + 단계명 + 연결선 - - 원형 아이콘 (32px) - -상태: - - Completed: 배경 #00C73C, 체크 아이콘 ✓ - - Active: 배경 #E60012, 흰색 숫자 - - Inactive: 배경 #CCCCCC, 회색 숫자 - -연결선: - - Completed: #00C73C - - Active/Inactive: #CCCCCC -``` - -**예시**: "Step 2/3" - -### 8.6 StatusList (상태 목록) - -**용도**: AI 처리 단계별 상태 표시 - -```css -구성: - - 상태 아이콘 (좌측) - - 단계명: 16px, Bold - - 상세 설명: 14px, Grey-700 - - 간격: 16px (항목 간) - -아이콘: - - ✅ 완료: #00C73C - - ⏳ 진행 중: #FFC107 + 회전 애니메이션 - - ⏸️ 대기: #CCCCCC -``` - ---- - -## 9. 인터랙션 패턴 - -### 9.1 전환 효과 (Transitions) - -#### 페이지 전환 -```css -애니메이션: Fade-in -지속 시간: 300ms -Easing: ease-in-out -``` - -#### 모달 -```css -애니메이션: Scale (0.95 → 1.0) + Fade-in -지속 시간: 200ms -Easing: cubic-bezier(0.4, 0, 0.2, 1) -배경: Fade-in 150ms -``` - -#### 드롭다운 -```css -애니메이션: Slide-down -지속 시간: 150ms -Easing: ease-out -``` - -#### Toast 알림 -```css -애니메이션: Slide-up (하단) 또는 Slide-down (상단) -지속 시간: 250ms -Easing: ease-out -자동 닫힘: 3초 후 -``` - -### 9.2 호버 효과 (Hover States) - -#### 버튼 -```css -변화: 배경색 10% 어둡게 -커서: pointer -지속 시간: 150ms -Easing: ease -``` - -#### 카드 -```css -변화: 그림자 확대 (0 2px 8px → 0 4px 16px) - 약간 상승 (translateY: -2px) -지속 시간: 200ms -Easing: ease -``` - -#### 링크 -```css -변화: 밑줄 표시 (text-decoration: underline) -색상: #E60012 (Primary) -``` - -#### 아이콘 버튼 -```css -변화: 배경 #F5F5F5 - 아이콘 색상 변화 (#666666 → #E60012) -지속 시간: 150ms -``` - -### 9.3 로딩 상태 (Loading States) - -#### 버튼 로딩 -```css -상태: 비활성화 (disabled) -텍스트: "처리 중..." -아이콘: 회전하는 스피너 (좌측) -스피너 색상: #FFFFFF -``` - -#### 페이지 로딩 -```css -위치: 화면 중앙 -스피너: 큰 원형 스피너 (48px) -색상: #E60012 -배경: 반투명 오버레이 (rgba(255,255,255,0.8)) -``` - -#### AI 처리 로딩 -```css -진행 바: Progress Bar (애니메이션) -상태 텍스트: 현재 단계 설명 -아이콘: ⏳ + 회전 애니메이션 -``` - -#### 데이터 로드 -```css -스켈레톤 UI: 콘텐츠 모양의 회색 박스 -애니메이션: 좌→우 그라데이션 이동 (Shimmer effect) -색상: #EEEEEE → #F5F5F5 → #EEEEEE -``` - -### 9.4 포커스 상태 (Focus States) - -```css -모든 인터랙티브 요소: - - 아웃라인: 2px solid #E60012 - - 오프셋: 2px - - 모서리: border-radius 유지 -``` - -**접근성**: 키보드 네비게이션 시 명확한 포커스 표시 - -### 9.5 스크롤 애니메이션 - -```css -요소 등장: Fade-in + Slide-up (20px) -지속 시간: 400ms -Easing: ease-out -Trigger: 요소가 화면에 50% 진입 시 -``` - ---- - -## 10. 변경 이력 - -### Version 1.0 (2025-08-15) - -**초기 버전 생성** - -**작성 내용**: -- 브랜드 아이덴티티 정의 -- 4가지 핵심 디자인 원칙 수립 -- 컬러 시스템 (Primary, Functional, Grey Scale) -- 타이포그래피 시스템 (Noto Sans KR 기반) -- 4px 기반 간격 시스템 -- 기본 및 복합 컴포넌트 스타일 정의 -- 반응형 브레이크포인트 (Desktop/Tablet/Mobile) -- 서비스 특화 컴포넌트 8종 (AIProcessing, DataCard 등) -- 인터랙션 패턴 및 애니메이션 정의 - -**참고 자료**: -- KT 사장이지 플랫폼 디자인 -- 뤼튼 디자인 시스템 -- UI/UX 설계서 (design/uiux/uiux.md) -- 유저스토리 (design/userstory.md) - -**작성 원칙 준수**: -✅ 39개 유저스토리와 완전히 매칭 -✅ 불필요한 추가 설계 없음 -✅ KT 브랜드 아이덴티티 유지 -✅ 실무 구현 가능한 명세 - ---- - -## 부록: 빠른 참조 - -### 주요 색상 -``` -Primary: #E60012 -Secondary: #000000 -Success: #00C73C -Warning: #FFC107 -Error: #FF0000 -Info: #2196F3 -``` - -### 타이포그래피 -``` -H1: 32px Bold -H2: 24px Bold -H3: 18px Bold -Body: 14px Regular -Caption: 12px Regular -``` - -### 간격 -``` -Space-2: 8px -Space-4: 16px -Space-6: 24px -Space-8: 32px -Space-12: 48px -``` - -### 컴포넌트 크기 -``` -버튼 높이: 48px (L), 40px (M), 32px (S) -입력 필드: 40px -카드 모서리: 8px -버튼 모서리: 4px -``` - ---- - -**문서 끝** diff --git a/design/uiux/uiux.md b/design/uiux/uiux.md index d34983b..5076604 100644 --- a/design/uiux/uiux.md +++ b/design/uiux/uiux.md @@ -1,1330 +1,2221 @@ # KT AI 기반 소상공인 이벤트 자동 생성 서비스 - UI/UX 설계서 -## 1. 개요 - -### 1.1 설계 목적 -본 문서는 KT AI 기반 소상공인 이벤트 자동 생성 서비스의 UI/UX 설계를 정의합니다. -사용자 친화적이고 직관적인 인터페이스를 통해 소상공인이 복잡한 이벤트 기획, 콘텐츠 생성, 다중 채널 배포를 쉽고 빠르게 수행할 수 있도록 설계되었습니다. - -### 1.2 참고 사이트 분석 -**참고**: KT 사장이지 플랫폼 (https://product.kt.com/wDic/soho/marketing.do?itemCode=sajangeasy) - -**주요 디자인 특징:** -- 클린한 카드 기반 레이아웃 -- KT 브랜드 컬러 (빨강/검정/흰색) 활용 -- 명확한 섹션 구분 및 시각적 계층 구조 -- 큰 CTA 버튼과 직관적인 아이콘 -- 실시간 미리보기 및 진행 상태 표시 - -### 1.3 화면 구성 -총 15개의 화면으로 구성되며, 각 화면은 유저스토리와 1:1 또는 1:N 매핑됩니다. +## 문서 정보 +- 작성일: 2025-10-17 +- 버전: 1.0 +- 설계 원칙: Mobile First, 유저스토리 기반, 우선순위 중심 --- -## 2. 디자인 원칙 +## 1. 프로토타입 화면 목록 정의 -### 2.1 사용자 중심 설계 -- **간결함**: 최소한의 클릭으로 작업 완료 -- **명확함**: 현재 위치와 다음 단계를 명확히 표시 -- **피드백**: 모든 액션에 즉각적인 피드백 제공 -- **AI 투명성**: AI 처리 과정과 결과를 명확히 표시 +### 1.1 소상공인용 앱/웹 (26개 화면) -### 2.2 시각적 디자인 -- **색상**: KT 브랜드 컬러 기반 (Primary: #E60012, Secondary: #000000, Background: #FFFFFF) -- **타이포그래피**: 명확한 계층 구조 (Heading 1~3, Body, Caption) -- **여백**: 충분한 여백으로 가독성 확보 -- **아이콘**: 직관적인 아이콘 사용 +#### User 서비스 +1. **01-회원가입** - 소상공인 회원가입 (UFR-USER-010) +2. **02-매장정보등록** - 매장 정보 및 사업자번호 검증 (UFR-USER-020) -### 2.3 반응형 디자인 -- **Desktop**: 1920px 최적화 (주요 작업 환경) -- **Tablet**: 768px - 1024px 지원 (조회 및 간단한 작업) -- **Mobile**: 375px - 767px 지원 (조회 중심) +#### 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-마이페이지** - 사용자 설정 및 정보 --- -## 3. 공통 UI 컴포넌트 +## 2. 화면 간 사용자 플로우 정의 -### 3.1 기본 컴포넌트 +### 2.1 신규 가입 플로우 +``` +01-회원가입 + → KT 본인 인증 + → 02-매장정보등록 + → 사업자번호 검증 + → 무료 체험 쿠폰 발급 + → 00-메인대시보드 +``` -#### Button -- **Primary Button**: 주요 액션 (배경: #E60012, 텍스트: #FFFFFF) -- **Secondary Button**: 보조 액션 (배경: #000000, 텍스트: #FFFFFF) -- **Outline Button**: 취소/뒤로가기 (테두리: #CCCCCC, 텍스트: #333333) -- **크기**: Large (48px), Medium (40px), Small (32px) +### 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-실시간대시보드 +``` -#### Input Fields -- **Text Input**: 단일 텍스트 입력 -- **Number Input**: 숫자 입력 (예산, 인원) -- **Select Dropdown**: 선택 옵션 -- **Textarea**: 긴 텍스트 입력 -- **상태**: Default, Focus, Error, Disabled +**총 소요 시간:** 기획 10초 + 콘텐츠 3분 + 배포 1분 = 약 4분 10초 -#### Card -- **그림자**: Box-shadow (0 2px 8px rgba(0,0,0,0.1)) -- **모서리**: Border-radius 8px -- **패딩**: 24px -- **호버 효과**: 그림자 확대 +### 2.3 이벤트 관리 플로우 +``` +00-메인대시보드 + → 21-실시간대시보드 (진행중 이벤트 선택) + → [탭 전환] 22-채널별성과분석 + → [탭 전환] 23-ROI분석 + → 24-분석리포트 (PDF 다운로드) + → 20-당첨자명단관리 + → 25-AI개선안제안 + → 26-다음이벤트아이디어 + → [순환] 03-이벤트목적선택 (새 이벤트) +``` -### 3.2 복합 컴포넌트 - -#### Header -- **높이**: 64px -- **구성**: 로고 + 메인 메뉴 + 사용자 정보 -- **고정**: 스크롤 시 상단 고정 - -#### Sidebar -- **너비**: 240px (접힘 시 64px) -- **구성**: 아이콘 + 메뉴명 -- **활성 표시**: 선택된 메뉴 강조 - -#### StepIndicator -- **구성**: 단계 번호 + 단계명 + 연결선 -- **상태**: Completed (체크), Active (강조), Inactive (회색) - -#### DataCard -- **구성**: 제목 + 큰 숫자 + 변화율 + 미니 차트 -- **크기**: 280px × 160px - -#### AIProcessing -- **구성**: 진행 바 + 진행률 (%) + 현재 단계 설명 -- **애니메이션**: 진행 바 애니메이션 + 펄스 효과 +### 2.4 고객 참여 플로우 (별도 고객용 페이지) +``` +이벤트 발견 (SNS/QR/TV/Blog) + → 18-이벤트참여신청 + → 정보 입력 (이름, 전화번호) + → 중복 체크 + → 19-참여완료 (응모번호 발급) + → 당첨 발표일 대기 + → SMS/알림톡 수신 +``` --- -## 4. 화면별 상세 설계 +## 3. 화면별 상세 설계 -### 4.1 인증 및 온보딩 +### 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 +**개요** +- 목적: 소상공인 신규 회원 가입 +- 관련 유저스토리: UFR-USER-010 +- 비즈니스 중요도: ⭐⭐⭐⭐ -**레이아웃**: +**주요 기능** +- 기본 정보 입력 +- KT 본인 인증 +- 중복 가입 방지 + +**UI 구성요소** ``` -┌─────────────────────────────────────────┐ -│ KT 로고 │ -│ │ -│ 회원가입 │ -│ │ -│ ┌─────────────────────────────────┐ │ -│ │ 이름 [ ] │ │ -│ │ 전화번호 [ ] │ │ -│ │ 이메일 [ ] │ │ -│ │ │ │ -│ │ [ KT 본인 인증하기 ] │ │ -│ │ │ │ -│ │ [ 회원가입 ] │ │ -│ └─────────────────────────────────┘ │ -│ │ -│ 이미 계정이 있으신가요? [로그인] │ -└─────────────────────────────────────────┘ +┌─────────────────────────────┐ +│ ← 회원가입 │ +├─────────────────────────────┤ +│ │ +│ 환영합니다! 👋 │ +│ 사장님의 이벤트 성공을 │ +│ 함께 만들어갑니다 │ +│ │ +│ ┌─────────────────────┐ │ +│ │ 이름 * │ │ +│ │ [_______________] │ │ +│ └─────────────────────┘ │ +│ │ +│ ┌─────────────────────┐ │ +│ │ 전화번호 * │ │ +│ │ [010-____-____] │ │ +│ └─────────────────────┘ │ +│ │ +│ ┌─────────────────────┐ │ +│ │ 이메일 * │ │ +│ │ [________@_____] │ │ +│ └─────────────────────┘ │ +│ │ +│ ┌─────────────────────┐ │ +│ │ 📱 KT 본인 인증 │ │ +│ └─────────────────────┘ │ +│ │ +├─────────────────────────────┤ +│ [ 다음 단계로 ] │ +└─────────────────────────────┘ ``` -**UI 컴포넌트**: -- Logo (KT 브랜드) -- Heading: "회원가입" -- Text Input: 이름, 전화번호, 이메일 -- Primary Button: "KT 본인 인증하기" -- Primary Button: "회원가입" -- Text Link: "로그인" - -**주요 인터랙션**: -1. 입력 필드 실시간 유효성 검사 - - 이름: 2자 이상 - - 전화번호: 010-XXXX-XXXX 형식 - - 이메일: example@domain.com 형식 -2. "KT 본인 인증하기" 클릭 → KT 인증 팝업 -3. 인증 완료 후 "회원가입" 버튼 활성화 -4. 회원가입 성공 → 매장정보등록 화면으로 이동 - -**에러 처리**: -- 입력 오류 시 Input 하단에 빨간색 에러 메시지 -- 중복 가입 시 Toast 알림: "이미 가입된 전화번호입니다" - ---- +**인터랙션** +- 입력 필드 실시간 검증 (형식 확인) + - 이름: 2자 이상 + - 전화번호: 010-XXXX-XXXX + - 이메일: example@domain.com +- `KT 본인 인증` 버튼 → KT 인증 시스템 연동 +- 인증 완료 시 인증 토큰 저장 +- `다음 단계로` → `02-매장정보등록` +- 중복 가입 시 "이미 가입된 전화번호입니다" 알림 #### 02-매장정보등록 -**관련 유저스토리**: UFR-USER-020 +**개요** +- 목적: 맞춤형 이벤트를 위한 매장 정보 수집 +- 관련 유저스토리: UFR-USER-020 +- 비즈니스 중요도: ⭐⭐⭐⭐ -**레이아웃**: +**주요 기능** +- 매장 기본 정보 입력 +- 사업자번호 검증 +- 무료 체험 쿠폰 자동 발급 + +**UI 구성요소** ``` -┌─────────────────────────────────────────┐ -│ Step 2/2 │ -│ 매장 정보 등록 │ -│ │ -│ ┌─────────────────────────────────┐ │ -│ │ 매장명 [ ] │ │ -│ │ 업종 [ ▼ 선택 ] │ │ -│ │ 주소 [ 🔍 검색 ] │ │ -│ │ 영업시간 │ │ -│ │ 월-금 [09:00] ~ [18:00] │ │ -│ │ 토-일 [10:00] ~ [17:00] │ │ -│ │ │ │ -│ │ 사업자번호 [ - - ] │ │ -│ │ [ 사업자번호 검증하기 ] │ │ -│ │ │ │ -│ │ [이전] [등록 완료] │ │ -│ └─────────────────────────────────┘ │ -│ │ -│ 💡 첫 1회 무료 체험 쿠폰을 드립니다! │ -└─────────────────────────────────────────┘ +┌─────────────────────────────┐ +│ ← 매장정보 등록 │ +├─────────────────────────────┤ +│ 매장명 * │ +│ [___________________] │ +│ │ +│ 업종 * ℹ️ │ +│ [드롭다운 ▼] │ +│ 음식점 / 카페 / 소매업... │ +│ │ +│ 주소 * 🔍 │ +│ [___________________] │ +│ [도로명 주소 검색] │ +│ │ +│ 영업시간 │ +│ 월 [09:00] ~ [21:00] ✓ │ +│ 화 [09:00] ~ [21:00] ✓ │ +│ 수 [09:00] ~ [21:00] ✓ │ +│ ... │ +│ │ +│ 사업자번호 * ℹ️ │ +│ [___-__-_____] │ +│ [검증하기] │ +│ │ +│ ✅ 사업자번호 확인 완료 │ +│ 매장명: OO치킨 │ +│ 대표자: 홍길동 │ +│ │ +├─────────────────────────────┤ +│ [ 등록 완료 ] │ +└─────────────────────────────┘ ``` -**UI 컴포넌트**: -- StepIndicator: "Step 2/2" -- Text Input: 매장명, 사업자번호 -- Select Dropdown: 업종 (음식점, 카페, 소매업 등) -- Search Button: 주소 검색 (도로명 주소 API) -- Time Picker: 영업시간 (요일별) -- Secondary Button: "사업자번호 검증하기" -- Outline Button: "이전" -- Primary Button: "등록 완료" -- Info Box: 무료 체험 쿠폰 안내 - -**주요 인터랙션**: -1. 주소 검색 버튼 클릭 → 주소 검색 팝업 -2. 사업자번호 입력 후 "검증하기" 클릭 → 검증 API 호출 - - 성공: 초록색 체크 아이콘 표시 - - 실패: 빨간색 에러 메시지 표시 -3. "등록 완료" 클릭 → 무료 체험 쿠폰 발급 + 대시보드 이동 - -**검증 처리**: -- 사업자번호 유효성: XXX-XX-XXXXX 형식 -- 휴폐업 여부 확인 -- 매장명과 사업자 정보 일치 확인 +**인터랙션** +- 업종 드롭다운 → 카테고리 리스트 표시 +- 주소 검색 버튼 → 도로명 주소 API 모달 +- 영업시간 체크박스 → 요일별 활성화/비활성화 +- `검증하기` 버튼 → 국세청 API 연동 + - 형식 검증 (XXX-XX-XXXXX) + - 사업자번호 유효성 확인 + - 휴폐업 여부 확인 + - 매장명 일치 확인 +- 검증 성공 → ✅ 표시 및 사업자 정보 자동 입력 +- 검증 실패 → ❌ 오류 메시지 (유효하지 않은 번호 / 휴폐업 등) +- `등록 완료` → 무료 체험 쿠폰 발급 알림 → `00-메인대시보드` --- -### 4.2 메인 화면 +### 3.3 Event Planning 서비스 -#### 03-대시보드 +#### 03-이벤트목적선택 -**관련 유저스토리**: 진행 중인 이벤트 현황, UFR-ANAL-010 일부 +**개요** +- 목적: 이벤트 방향성 설정 +- 관련 유저스토리: UFR-PLAN-010 +- 비즈니스 중요도: ⭐⭐⭐⭐⭐ -**레이아웃**: +**주요 기능** +- 4가지 목적 중 선택 +- 목적별 설명 및 효과 제시 + +**UI 구성요소** ``` -┌─────────────────────────────────────────────────────────┐ -│ [로고] 대시보드 | 이벤트 관리 | 참여자 | 분석 [👤] │ -├─────────────────────────────────────────────────────────┤ -│ │ -│ 안녕하세요, [매장명] 사장님! 👋 │ -│ │ -│ ┌───────────────┐ ┌───────────────┐ ┌──────────────┐ │ -│ │ 진행중 │ │ 총 참여자 │ │ 이번달 ROI │ │ -│ │ 3건 │ │ 1,247명 │ │ 245% │ │ -│ │ 📊 +2 │ │ 📈 +120 │ │ 💰 ↑15% │ │ -│ └───────────────┘ └───────────────┘ └──────────────┘ │ -│ │ -│ 빠른 실행 │ -│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ -│ │ 🎯 │ │ 📊 │ │ 💡 │ │ -│ │ 새 이벤트 │ │ 실시간 │ │ AI 제안 │ │ -│ │ 만들기 │ │ 분석 │ │ 보기 │ │ -│ └──────────┘ └──────────┘ └──────────┘ │ -│ │ -│ 진행 중인 이벤트 │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ 🎉 여름 할인 이벤트 │ │ -│ │ 상태: 배포 완료 | 참여자: 523명 | D-5 │ │ -│ │ ────────────────────■───── 85% │ │ -│ │ [상세보기] [참여자관리] [실시간분석] │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ 최근 완료된 이벤트 │ -│ • 봄맞이 이벤트 (5/15 종료) - ROI: 180% │ -│ • 신메뉴 출시 이벤트 (4/30 종료) - ROI: 220% │ -│ │ -└─────────────────────────────────────────────────────────┘ +┌─────────────────────────────┐ +│ ← 이벤트 목적 선택 │ +├─────────────────────────────┤ +│ │ +│ 어떤 목적의 이벤트를 │ +│ 만드실 건가요? 🎯 │ +│ │ +│ ┌─────────────────────┐ │ +│ │ 👥 신규고객 유치 ℹ️ │ │ +│ │ 새로운 고객을 확보하고│ │ +│ │ 매장 인지도를 높입니다│ │ +│ │ 예상 효과: 신규 방문 │ │ +│ │ +25% ↑ │ │ +│ └─────────────────────┘ │ +│ │ +│ ┌─────────────────────┐ │ +│ │ 🔄 재방문 유도 ℹ️ │ │ +│ │ 기존 고객의 재방문을 │ │ +│ │ 촉진합니다 │ │ +│ │ 예상 효과: 재방문율 │ │ +│ │ +40% ↑ │ │ +│ └─────────────────────┘ │ +│ │ +│ ┌─────────────────────┐ │ +│ │ 💰 매출 증대 ℹ️ │ │ +│ │ 단기 매출 향상에 │ │ +│ │ 집중합니다 │ │ +│ │ 예상 효과: 매출 │ │ +│ │ +35% ↑ │ │ +│ └─────────────────────┘ │ +│ │ +│ ┌─────────────────────┐ │ +│ │ 📢 인지도 향상 ℹ️ │ │ +│ │ 브랜드 인지도를 │ │ +│ │ 제고합니다 │ │ +│ │ 예상 효과: SNS 공유 │ │ +│ │ +50% ↑ │ │ +│ └─────────────────────┘ │ +│ │ +├─────────────────────────────┤ +│ [ 다음 ] │ +└─────────────────────────────┘ ``` -**UI 컴포넌트**: -- Header (고정) -- Greeting: "안녕하세요, [매장명] 사장님!" -- DataCard × 3: 진행중 이벤트, 총 참여자, 이번달 ROI -- QuickAction Card × 3: 새 이벤트, 실시간 분석, AI 제안 -- EventCard: 진행 중인 이벤트 (제목, 상태, 진행률, 액션 버튼) -- List: 최근 완료된 이벤트 +**인터랙션** +- 카드 터치 → 라디오 버튼 선택 + 카드 강조 (테두리 색상) +- ℹ️ 아이콘 터치 → 상세 설명 모달 + - 예시 이벤트 + - 성공 사례 + - 권장 경품 유형 +- 선택 전: `다음` 버튼 비활성화 (회색) +- 선택 후: `다음` 버튼 활성화 (파란색) +- `다음` 버튼 → AI 트렌드 분석 시작 (로딩 3초) → `04-AI트렌드분석결과` -**주요 인터랙션**: -1. "새 이벤트 만들기" 클릭 → 이벤트목적선택 화면 -2. "실시간 분석" 클릭 → 실시간분석 화면 -3. "AI 제안 보기" 클릭 → AI개선제안 화면 -4. EventCard 클릭 → 해당 이벤트 상세 화면 -5. 5분마다 DataCard 자동 업데이트 +#### 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이미지생성` --- -### 4.3 이벤트 기획 +### 3.4 Content Generation 서비스 -#### 04-이벤트목적선택 +#### 09-AI이미지생성 -**관련 유저스토리**: UFR-PLAN-010 +**개요** +- 목적: 브랜드 컬러/로고 기반 홍보 이미지 생성 +- 관련 유저스토리: UFR-CONT-010 +- 비즈니스 중요도: ⭐⭐⭐⭐⭐ -**레이아웃**: +**주요 기능** +- 브랜드 컬러 설정 +- 로고 업로드 +- AI 이미지 3종 생성 + +**UI 구성요소** ``` -┌─────────────────────────────────────────────────────────┐ -│ ← 대시보드 Step 1/3 │ -├─────────────────────────────────────────────────────────┤ -│ │ -│ 이벤트 목적을 선택해주세요 │ -│ 선택한 목적에 맞춰 AI가 최적의 이벤트를 기획합니다 │ -│ │ -│ ┌──────────────────┐ ┌──────────────────┐ │ -│ │ 🎯 신규고객 유치 │ │ 🔄 재방문 유도 │ │ -│ │ │ │ │ │ -│ │ 새로운 고객을 │ │ 기존 고객의 │ │ -│ │ 확보합니다 │ │ 재방문을 촉진 │ │ -│ │ │ │ │ │ -│ │ 예상 참여율 8% │ │ 예상 참여율 15% │ │ -│ └──────────────────┘ └──────────────────┘ │ -│ │ -│ ┌──────────────────┐ ┌──────────────────┐ │ -│ │ 💰 매출 증대 │ │ 📢 인지도 향상 │ │ -│ │ │ │ │ │ -│ │ 단기 매출을 │ │ 브랜드 인지도를 │ │ -│ │ 향상시킵니다 │ │ 높입니다 │ │ -│ │ │ │ │ │ -│ │ 예상 참여율 10% │ │ 예상 참여율 12% │ │ -│ └──────────────────┘ └──────────────────┘ │ -│ │ -│ [다음 단계] │ -└─────────────────────────────────────────────────────────┘ +┌─────────────────────────────┐ +│ ← AI 이미지 생성 │ +├─────────────────────────────┤ +│ │ +│ 🎨 브랜드 설정 │ +│ ┌─────────────────────┐ │ +│ │ 브랜드 컬러 │ │ +│ │ [🔴] #FF5733 │ │ ← 컬러 피커 +│ └─────────────────────┘ │ +│ ┌─────────────────────┐ │ +│ │ 로고 업로드 │ │ +│ │ [📁 파일 선택] │ │ +│ │ PNG, JPG (최대 5MB) │ │ +│ └─────────────────────┘ │ +│ │ +│ 🤖 AI 이미지 생성 중... │ +│ [████████████░░░] 85% │ +│ 예상 소요 시간: 15초 남음 │ +│ │ +│ ✅ 생성 완료! │ +│ │ +│ 📸 생성된 이미지 (3종) │ +│ ┌─────────────────────┐ │ +│ │ ○ 1. 심플 스타일 │ │ +│ │ [ 이미지 ]│ │ +│ │ 미니멀 디자인 │ │ +│ └─────────────────────┘ │ +│ ┌─────────────────────┐ │ +│ │ ○ 2. 화려한 스타일 │ │ +│ │ [ 이미지 ]│ │ +│ │ 풍성한 그래픽 │ │ +│ └─────────────────────┘ │ +│ ┌─────────────────────┐ │ +│ │ ○ 3. 트렌디 스타일 │ │ +│ │ [ 이미지 ]│ │ +│ │ 최신 디자인 트렌드 │ │ +│ └─────────────────────┘ │ +│ │ +├─────────────────────────────┤ +│ [재생성] [선택 완료] │ +└─────────────────────────────┘ ``` -**UI 컴포넌트**: -- Back Button: "← 대시보드" -- StepIndicator: "Step 1/3" -- Heading: "이벤트 목적을 선택해주세요" -- SelectionCard × 4: 각 목적별 카드 - - 아이콘 + 제목 + 설명 + 예상 참여율 - - 선택 시 테두리 강조 (Primary 색상) -- Primary Button: "다음 단계" (선택 전 비활성화) +**인터랙션** +- 컬러 피커 → HEX 코드 입력 또는 팔레트 선택 +- `파일 선택` → 로컬 파일 업로드 (5MB 제한) +- 생성 중 프로그레스 바 표시 (90초) +- 이미지 카드 터치 → 전체 화면 미리보기 +- `재생성` → 다시 AI 생성 (동일 설정) +- `선택 완료` → 선택한 이미지 저장 → `10-AI영상제작` (병렬 처리) -**주요 인터랙션**: -1. 카드 클릭 → 선택 상태 (단일 선택) -2. 호버 시 카드 확대 애니메이션 -3. 선택 후 "다음 단계" 버튼 활성화 -4. "다음 단계" 클릭 → AI기획진행 화면 + 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-다중채널배포설정` --- -#### 05-AI기획진행 +### 3.5 Distribution 서비스 -**관련 유저스토리**: UFR-PLAN-020, 030, 040, 050 +#### 15-다중채널배포설정 -**레이아웃**: +**개요** +- 목적: 여러 채널 동시 배포 설정 +- 관련 유저스토리: UFR-DIST-010 +- 비즈니스 중요도: ⭐⭐⭐⭐⭐ + +**주요 기능** +- 배포 채널 선택 +- 채널별 세부 설정 +- 배포 일정 설정 + +**UI 구성요소** ``` -┌─────────────────────────────────────────────────────────┐ -│ ← 이전 Step 2/3 │ -├─────────────────────────────────────────────────────────┤ -│ │ -│ AI가 이벤트를 기획하고 있습니다 🤖 │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ ████████████████████░░░░░░░░░░ 65% │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ ✅ 업종 트렌드 분석 완료 │ │ -│ │ → 카페 업종, 강남 지역, 여름 시즌 분석 │ │ -│ │ │ │ -│ │ ⏳ 최적 경품 추천 중... │ │ -│ │ 💡 예산 300,000원 기준 분석 중 │ │ -│ │ │ │ -│ │ ⏸️ 참여 방법 설계 대기 중 │ │ -│ │ │ │ -│ │ ⏸️ 홍보 문구 생성 대기 중 │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ 예상 소요 시간: 약 10초 │ -│ │ -└─────────────────────────────────────────────────────────┘ +┌─────────────────────────────┐ +│ ← 배포 채널 설정 │ +├─────────────────────────────┤ +│ │ +│ 📡 배포 채널 선택 │ +│ │ +│ KT 서비스 │ +│ ┌─────────────────────┐ │ +│ │ ☐ 우리동네TV ⚙️ │ │ +│ │ 지역 타겟 광고 │ │ +│ └─────────────────────┘ │ +│ ┌─────────────────────┐ │ +│ │ ☐ 링고비즈 연결음 ⚙️ │ │ +│ │ 전화 연결음 업데이트 │ │ +│ └─────────────────────┘ │ +│ ┌─────────────────────┐ │ +│ │ ☐ 지니TV 광고 ⚙️ │ │ +│ │ 가정용 TV 광고 │ │ +│ └─────────────────────┘ │ +│ │ +│ SNS 플랫폼 │ +│ ┌─────────────────────┐ │ +│ │ ✅ Instagram (필수) │ │ +│ │ 계정 연동 완료 ✓ │ │ +│ └─────────────────────┘ │ +│ ┌─────────────────────┐ │ +│ │ ☐ Naver Blog ⚙️ │ │ +│ │ [계정 연동 필요] │ │ +│ └─────────────────────┘ │ +│ ┌─────────────────────┐ │ +│ │ ☐ Kakao Channel ⚙️ │ │ +│ │ [계정 연동 필요] │ │ +│ └─────────────────────┘ │ +│ │ +│ 🕐 배포 일시 │ +│ ○ 즉시 배포 │ +│ ○ 예약 배포 │ +│ [2025-10-20] [14:00] │ +│ │ +│ 📊 선택된 채널: 1개 │ +│ │ +├─────────────────────────────┤ +│ [ 배포 시작 ] │ +└─────────────────────────────┘ ``` -**UI 컴포넌트**: -- Back Button: "← 이전" -- StepIndicator: "Step 2/3" -- Heading: "AI가 이벤트를 기획하고 있습니다 🤖" -- Progress Bar: 전체 진행률 (0% → 100%) -- StatusList: 각 단계별 진행 상태 - - ✅ 완료: 초록색 + 결과 요약 - - ⏳ 진행 중: 노란색 + 애니메이션 - - ⏸️ 대기 중: 회색 -- Text: 예상 소요 시간 +**인터랙션** +- 채널 체크박스 → 선택/해제, 선택 수 업데이트 +- ⚙️ 설정 아이콘 → 채널별 상세 설정 모달 + - 우리동네TV: 반경 (500m/1km), 송출 시간대 + - 링고비즈: 연결음 미리듣기 + - 지니TV: 타겟 지역, 노출 시간대, 예산 + - SNS: 계정 OAuth 연동, 예약 시간 +- Instagram 필수 체크 (비활성화) +- 예약 배포 선택 → 날짜/시간 선택기 +- `배포 시작` → 배포 요청 발송 → `16-배포진행상태` -**주요 인터랙션**: -1. 자동 진행 (사용자 액션 없음) -2. 각 단계 완료 시: - - 진행 바 업데이트 (25% 씩 증가) - - 상태 아이콘 변경 - - 결과 요약 표시 -3. 전체 완료 (100%) 시 → 자동으로 기획안검토 화면 이동 +#### 16-배포진행상태 -**에러 처리**: -- AI API 오류 시: "잠시 후 다시 시도해주세요" Toast + 재시도 버튼 +**개요** +- 목적: 채널별 배포 진행 상황 모니터링 +- 관련 유저스토리: UFR-DIST-020~050 +- 비즈니스 중요도: ⭐⭐⭐⭐ -**성능 요구사항**: -- 전체 기획 과정 10초 이내 완료 +**주요 기능** +- 실시간 배포 상태 표시 +- 배포 완료/실패 확인 +- 재시도 기능 + +**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-실시간대시보드` --- -#### 06-기획안검토 +### 3.6 Participation 서비스 -**관련 유저스토리**: UFR-PLAN-060 +#### 18-이벤트참여신청 (고객용) -**레이아웃**: +**개요** +- 목적: 고객의 간편한 이벤트 참여 +- 관련 유저스토리: UFR-PART-010 +- 비즈니스 중요도: ⭐⭐⭐⭐⭐ + +**주요 기능** +- 이벤트 정보 표시 +- 참여 정보 입력 +- 중복 참여 방지 + +**UI 구성요소** ``` -┌─────────────────────────────────────────────────────────┐ -│ ← 이전 Step 3/3 │ -├─────────────────────────────────────────────────────────┤ -│ │ -│ 완성된 기획안을 검토해주세요 │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ 📋 이벤트 개요 │ │ -│ │ • 목적: 신규고객 유치 │ │ -│ │ • 예상 기간: 7일 │ │ -│ │ • 예상 예산: 300,000원 │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ 🎁 선택된 경품 │ │ -│ │ • 스타벅스 아메리카노 Tall (30명) │ │ -│ │ • 예상 매력도: ⭐⭐⭐⭐ │ │ -│ │ [경품 변경하기] │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ 🎯 참여 방법 │ │ -│ │ • QR 코드 스캔 후 정보 입력 │ │ -│ │ • 예상 참여율: 8% │ │ -│ │ [참여 방법 변경하기] │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ 📢 홍보 문구 │ │ -│ │ "여름맞이 특별 이벤트! 아메리카노 받고 시원하게│ │ -│ │ 여름나기 ☕🌊 지금 바로 참여하세요!" │ │ -│ │ #여름이벤트 #카페 #강남맛집 │ │ -│ │ [홍보 문구 변경하기] │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ 📊 예상 효과 │ │ -│ │ • 예상 참여자: 약 200명 │ │ -│ │ • 예상 ROI: 150% │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ [수정하기] [승인하고 다음] │ -└─────────────────────────────────────────────────────────┘ +┌─────────────────────────────┐ +│ │ +│ [ 이벤트 배너 이미지 ] │ +│ │ +│ 🎃 할로윈 특별 이벤트 │ +│ 왕갈비통닭 │ +│ │ +│ 📅 기간: 2025.10.20 ~ 10.31│ +│ 🎁 경품: 치킨세트 무료 (10명)│ +│ │ +│ 🎯 참여 방법 │ +│ 1️⃣ 정보 입력 │ +│ 2️⃣ 참여 완료 │ +│ 3️⃣ 당첨자 발표 (11/1) │ +│ │ +│ ──────────────────── │ +│ │ +│ 👤 고객명 * │ +│ [___________________] │ +│ │ +│ 📱 전화번호 * │ +│ [010-____-____] │ +│ │ +│ 📍 참여 경로 * │ +│ ○ Instagram │ +│ ○ Naver Blog │ +│ ○ QR 코드 스캔 │ +│ ○ 우리동네TV │ +│ ○ 지니TV │ +│ ○ 기타 │ +│ │ +│ ┌─────────────────────┐ │ +│ │ ☐ 개인정보 수집 및 │ │ +│ │ 이용 동의 (필수) │ │ +│ │ [약관 보기] │ │ +│ └─────────────────────┘ │ +│ │ +│ [ 참여하기 ] │ +│ │ +└─────────────────────────────┘ ``` -**UI 컴포넌트**: -- Back Button: "← 이전" -- StepIndicator: "Step 3/3" -- Summary Card × 5: 이벤트 개요, 경품, 참여방법, 홍보문구, 예상효과 - - 각 카드에 [변경하기] 버튼 -- Outline Button: "수정하기" (전체 수정) -- Primary Button: "승인하고 다음" +**인터랙션** +- 입력 필드 실시간 검증 + - 고객명: 2자 이상 + - 전화번호: 010-XXXX-XXXX 형식 +- 참여 경로 자동 추적 (URL 파라미터) +- `약관 보기` → 개인정보 처리방침 모달 +- 동의 체크박스 필수 +- `참여하기` 버튼 → 중복 체크 → `19-참여완료` 또는 중복 알림 -**주요 인터랙션**: -1. [변경하기] 버튼 클릭 → 해당 섹션 수정 모달 -2. "수정하기" 클릭 → 이전 단계로 돌아가기 -3. "승인하고 다음" 클릭 → 기획안 저장 + 콘텐츠생성진행 화면 +#### 19-참여완료 -**수정 모달**: -- 경품 변경: AI 추천 Top 5 중 재선택 -- 참여 방법 변경: 3가지 옵션 중 재선택 -- 홍보 문구 변경: 5개 버전 중 재선택 또는 직접 편집 +**개요** +- 목적: 응모번호 발급 및 안내 +- 관련 유저스토리: 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 (분석용) +- 지급 현황 자동 업데이트 --- -### 4.4 콘텐츠 생성 +### 3.7 Analytics 서비스 -#### 07-콘텐츠생성진행 +#### 21-실시간대시보드 -**관련 유저스토리**: UFR-CONT-010, 020, 030, 040 +**개요** +- 목적: 이벤트 성과 실시간 모니터링 +- 관련 유저스토리: UFR-ANAL-010 +- 비즈니스 중요도: ⭐⭐⭐⭐⭐ -**레이아웃**: +**주요 기능** +- 핵심 지표 실시간 표시 +- 채널별 노출/참여 현황 +- 자동/수동 새로고침 + +**UI 구성요소** ``` -┌─────────────────────────────────────────────────────────┐ -│ ← 대시보드 Step 1/3 │ -├─────────────────────────────────────────────────────────┤ -│ │ -│ AI가 콘텐츠를 생성하고 있습니다 🎨 │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ ██████████████████░░░░░░░░ 70% │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ -│ │ 🖼️ 이미지 │ │ 🎬 영상 │ │ 📱 SNS │ │ -│ │ │ │ │ │ │ │ -│ │ ✅ 심플 │ │ ⏳ 제작 중 │ │ ⏸️ 대기 │ │ -│ │ ✅ 화려 │ │ 15초/15초 │ │ │ │ -│ │ ✅ 트렌디 │ │ │ │ │ │ -│ └──────────────┘ └──────────────┘ └──────────────┘ │ -│ │ -│ ┌──────────────────────────────────────────────┐ │ -│ │ 📄 QR 포스터 │ │ -│ │ ⏸️ 대기 중 │ │ -│ └──────────────────────────────────────────────┘ │ -│ │ -│ 예상 소요 시간: 약 3분 │ -│ │ -└─────────────────────────────────────────────────────────┘ +┌─────────────────────────────┐ +│ ← 실시간 대시보드 │ 🔄 +├─────────────────────────────┤ +│ │ +│ 🎃 할로윈 특별 이벤트 │ +│ 진행중 · 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% ▉ │ +│ │ +│ ──────────────────── │ +│ │ +│ [📊 상세 분석 보기] │ +│ │ +├─────────────────────────────┤ +│ 🏠 홈 │ 🎪 이벤트 │ 📊 분석 │ 👤 │ +└─────────────────────────────┘ ``` -**UI 컴포넌트**: -- Back Button -- StepIndicator: "Step 1/3" -- Progress Bar: 전체 진행률 -- ContentCard × 4: 이미지(3종), 영상, SNS, QR포스터 - - 상태: ✅ 완료, ⏳ 진행 중, ⏸️ 대기 중 - - 진행 중일 때: 미니 프로그레스 바 -- Text: 예상 소요 시간 +**인터랙션** +- 자동 새로고침 (5분 간격) +- 수동 새로고침 (우상단 🔄 아이콘 또는 당겨서 새로고침) +- 지표 카드 터치 → 해당 지표 상세 팝업 +- 그래프 터치 → 시간대별 상세 데이터 +- 탭 전환 → `22-채널별성과분석`, `23-ROI분석` +- `상세 분석 보기` → 전체 분석 대시보드 (데스크톱 최적화) -**주요 인터랙션**: -1. 자동 진행 (병렬 처리) -2. 각 콘텐츠 완료 시: - - 썸네일 미리보기 표시 - - 상태 업데이트 -3. 전체 완료 시 → 콘텐츠편집 화면 (자동 또는 [다음] 버튼) +#### 22-채널별성과분석 -**성능 요구사항**: -- 전체 콘텐츠 생성 3분 이내 완료 +**개요** +- 목적: 채널별 효율성 비교 +- 관련 유저스토리: 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-실시간대시보드` --- -#### 08-콘텐츠편집 +### 3.8 AI Learning 서비스 -**관련 유저스토리**: UFR-CONT-050 +#### 25-AI개선안제안 -**레이아웃**: +**개요** +- 목적: AI 기반 이벤트 개선안 제시 +- 관련 유저스토리: UFR-AIMPR-010 +- 비즈니스 중요도: ⭐⭐⭐⭐ + +**주요 기능** +- 성공/실패 요인 분석 +- 3가지 개선안 제시 +- 예상 효과 표시 + +**UI 구성요소** ``` -┌─────────────────────────────────────────────────────────┐ -│ ← 이전 Step 2/3 │ -├─────────────────────────────────────────────────────────┤ -│ │ -│ ┌─────────────┐ ┌──────────────────────────────┐ │ -│ │ 이미지 - 심플│ │ [미리보기 영역] │ │ -│ │ │ │ │ │ -│ │ 이미지 - 화려│ │ │ │ -│ │ │ │ 생성된 콘텐츠 │ │ -│ │ 이미지-트렌디│ │ 미리보기 │ │ -│ │ │ │ │ │ -│ │ 영상 15초 │ │ │ │ -│ │ │ └──────────────────────────────┘ │ -│ │ SNS-Insta │ │ -│ │ │ ┌──────────────────────────────┐ │ -│ │ SNS-Naver │ │ 편집 도구 │ │ -│ │ │ │ ┌─────┐ ┌─────┐ ┌─────┐ │ │ -│ │ SNS-Kakao │ │ │텍스트│ │색상 │ │레이아웃│ │ │ -│ │ │ │ └─────┘ └─────┘ └─────┘ │ │ -│ │ QR 포스터 │ │ │ │ -│ └─────────────┘ │ 텍스트: [_______________] │ │ -│ │ 색상: ⬜🔴🔵⚫ │ │ -│ │ 크기: [━━━━●────] 14px │ │ -│ │ │ │ -│ │ [원본으로 되돌리기] │ │ -│ └──────────────────────────────┘ │ -│ │ -│ [건너뛰기] [저장하고 다음] │ -└─────────────────────────────────────────────────────────┘ +┌─────────────────────────────┐ +│ ← AI 개선안 제안 │ +├─────────────────────────────┤ +│ │ +│ 🤖 AI가 분석한 개선안 │ +│ │ +│ ✅ 성공 요인 │ +│ • Instagram 채널 효율 우수 │ +│ • 참여 방법 간편성 │ +│ • 시즌 트렌드 반영 우수 │ +│ │ +│ ❗ 개선 포인트 │ +│ • 지니TV 채널 참여율 저조 │ +│ • 경품 매력도 부족 │ +│ • 홍보 문구 클릭률 낮음 │ +│ │ +│ 💡 AI 추천 개선안 (Top 3) │ +│ │ +│ ┌─────────────────────┐ │ +│ │ 1순위 🥇 │ │ +│ │ │ │ +│ │ 경품 변경 │ │ +│ │ 치킨세트 → 상품권 │ │ +│ │ (50,000원 상당) │ │ +│ │ │ │ +│ │ 📊 예상 효과: │ │ +│ │ 참여율 +45% ↑ │ │ +│ │ ROI +67% ↑ │ │ +│ │ │ │ +│ │ 근거: 유사 업종에서 │ │ +│ │ 상품권 경품 참여율 │ │ +│ │ 평균 62% 높음 │ │ +│ │ │ │ +│ │ [이 개선안으로 시작] │ │ +│ └─────────────────────┘ │ +│ │ +│ ┌─────────────────────┐ │ +│ │ 2순위 🥈 │ │ +│ │ 참여 방법 단순화 │ │ +│ │ [상세 보기 ▼] │ │ +│ └─────────────────────┘ │ +│ │ +│ ┌─────────────────────┐ │ +│ │ 3순위 🥉 │ │ +│ │ 배포 채널 조정 │ │ +│ │ [상세 보기 ▼] │ │ +│ └─────────────────────┘ │ +│ │ +├─────────────────────────────┤ +│ [피드백 제공] [다음 아이디어]│ +└─────────────────────────────┘ ``` -**UI 컴포넌트**: -- Sidebar: 콘텐츠 목록 (선택 가능) -- Preview Area: 선택한 콘텐츠 미리보기 -- Edit Toolbar: 텍스트, 색상, 레이아웃 편집 도구 -- Button: "원본으로 되돌리기" -- Outline Button: "건너뛰기" -- Primary Button: "저장하고 다음" +**인터랙션** +- 개선안 카드 `상세 보기` → 확장하여 근거 및 상세 설명 표시 +- `이 개선안으로 시작` → 해당 개선안 반영하여 `03-이벤트목적선택` (새 이벤트) +- `피드백 제공` → 개선안 평가 모달 (도움됨/도움 안됨) +- `다음 아이디어` → `26-다음이벤트아이디어` -**주요 인터랙션**: -1. 사이드바에서 콘텐츠 선택 → 미리보기 영역에 표시 -2. 편집 도구로 실시간 수정 → 미리보기 즉시 반영 -3. "원본으로 되돌리기" → 수정사항 취소 -4. "저장하고 다음" → 수정사항 적용 + 콘텐츠승인 화면 +#### 26-다음이벤트아이디어 -**편집 기능**: -- 텍스트: 내용, 폰트, 크기, 색상 -- 색상: 브랜드 컬러 변경 -- 레이아웃: 템플릿 변경 +**개요** +- 목적: 시즌별 이벤트 아이디어 제안 +- 관련 유저스토리: UFR-AIMPR-020 +- 비즈니스 중요도: ⭐⭐⭐ + +**주요 기능** +- 시즌 트렌드 반영 +- 5가지 아이디어 제안 +- 빠른 기획 시작 + +**UI 구성요소** +``` +┌─────────────────────────────┐ +│ ← 다음 이벤트 아이디어 │ +├─────────────────────────────┤ +│ │ +│ ✨ 11월 추천 이벤트 아이디어 │ +│ │ +│ 🤖 AI가 학습한 결과를 바탕으로│ +│ 제안합니다 │ +│ │ +│ ┌─────────────────────┐ │ +│ │ 1. 🍂 가을 감사제 │ │ +│ │ │ │ +│ │ 📅 추천 기간: │ │ +│ │ 11/1 ~ 11/15 │ │ +│ │ │ │ +│ │ 🎯 목적: 재방문 유도 │ │ +│ │ │ │ +│ │ 📊 예상 성과: │ │ +│ │ 참여 700명 │ │ +│ │ ROI 280% │ │ +│ │ │ │ +│ │ 💡 핵심 전략: │ │ +│ │ 단골 고객 특별 할인 │ │ +│ │ 친구 초대 이벤트 │ │ +│ │ │ │ +│ │ [이 아이디어로 시작] │ │ +│ └─────────────────────┘ │ +│ │ +│ ┌─────────────────────┐ │ +│ │ 2. 🎄 연말 특별 이벤트│ │ +│ │ [상세 보기 ▼] │ │ +│ └─────────────────────┘ │ +│ │ +│ ┌─────────────────────┐ │ +│ │ 3. 🏃 일일 한정 특가 │ │ +│ │ [상세 보기 ▼] │ │ +│ └─────────────────────┘ │ +│ │ +│ ┌─────────────────────┐ │ +│ │ 4. 👨‍👩‍👧 가족 이벤트 │ │ +│ │ [상세 보기 ▼] │ │ +│ └─────────────────────┘ │ +│ │ +│ ┌─────────────────────┐ │ +│ │ 5. 🎁 럭키드로우 │ │ +│ │ [상세 보기 ▼] │ │ +│ └─────────────────────┘ │ +│ │ +├─────────────────────────────┤ +│ [메인으로] │ +└─────────────────────────────┘ +``` + +**인터랙션** +- 아이디어 카드 `상세 보기` → 확장하여 상세 전략 및 예시 표시 +- `이 아이디어로 시작` → 해당 아이디어 기본 설정으로 `03-이벤트목적선택` +- 시즌 변경 시 자동으로 트렌드 업데이트 +- `메인으로` → `00-메인대시보드` --- -#### 09-콘텐츠승인 +### 3.9 공통 화면 -**관련 유저스토리**: UFR-CONT-060 +#### 99-마이페이지 -**레이아웃**: +**개요** +- 목적: 사용자 정보 및 설정 관리 +- 비즈니스 중요도: ⭐⭐⭐ + +**주요 기능** +- 매장 정보 수정 +- 알림 설정 +- 계정 관리 + +**UI 구성요소** ``` -┌─────────────────────────────────────────────────────────┐ -│ ← 이전 Step 3/3 │ -├─────────────────────────────────────────────────────────┤ -│ │ -│ 완성된 콘텐츠를 확인해주세요 │ -│ │ -│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ -│ │ [이미지1] │ │ [이미지2] │ │ [이미지3] │ │ -│ │ 심플 │ │ 화려 │ │ 트렌디 │ │ -│ └──────────┘ └──────────┘ └──────────┘ │ -│ │ -│ ┌──────────────────────────────────┐ │ -│ │ [영상 미리보기] │ │ -│ │ 15초 영상 │ │ -│ │ ▶️ 재생 │ │ -│ └──────────────────────────────────┘ │ -│ │ -│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ -│ │Instagram│ │Naver Blog│ │ Kakao │ │ -│ │[미리보기]│ │[미리보기]│ │[미리보기]│ │ -│ └─────────┘ └─────────┘ └─────────┘ │ -│ │ -│ ┌──────────────────────────────────┐ │ -│ │ QR 포스터 (A4) │ │ -│ │ [미리보기 및 다운로드] │ │ -│ └──────────────────────────────────┘ │ -│ │ -│ [수정하기] [승인하고 배포하기] │ -└─────────────────────────────────────────────────────────┘ +┌─────────────────────────────┐ +│ ← 마이페이지 │ +├─────────────────────────────┤ +│ │ +│ 👤 사장님 정보 │ +│ ┌─────────────────────┐ │ +│ │ 홍길동 │ │ +│ │ 010-1234-5678 │ │ +│ │ hong@example.com │ │ +│ │ [수정] │ │ +│ └─────────────────────┘ │ +│ │ +│ 🏪 매장 정보 │ +│ ┌─────────────────────┐ │ +│ │ 왕갈비통닭 │ │ +│ │ 음식점 (치킨) │ │ +│ │ 수원시 영통구... │ │ +│ │ [수정] │ │ +│ └─────────────────────┘ │ +│ │ +│ 🔔 알림 설정 │ +│ ┌─────────────────────┐ │ +│ │ ✅ 이벤트 시작 알림 │ │ +│ │ ✅ 참여자 알림 │ │ +│ │ ✅ 당첨자 발표 알림 │ │ +│ │ ☐ 마케팅 정보 수신 │ │ +│ └─────────────────────┘ │ +│ │ +│ 💳 결제 정보 │ +│ [무료 체험 쿠폰: 0회 남음] │ +│ [결제 수단 등록] │ +│ │ +│ ℹ️ 기타 │ +│ • 이용 약관 │ +│ • 개인정보 처리방침 │ +│ • 고객 지원 │ +│ • 버전 정보 (v1.0.0) │ +│ │ +│ [로그아웃] │ +│ │ +└─────────────────────────────┘ ``` -**UI 컴포넌트**: -- Gallery View: 이미지 3종 썸네일 -- Video Player: 영상 미리보기 (재생 버튼) -- SNS Preview Card × 3: 플랫폼별 미리보기 -- Poster Preview: QR 포스터 미리보기 -- Outline Button: "수정하기" -- Primary Button: "승인하고 배포하기" - -**주요 인터랙션**: -1. 이미지/영상 클릭 → 확대 모달 -2. SNS 미리보기 클릭 → 플랫폼별 게시물 미리보기 -3. "수정하기" → 콘텐츠편집 화면 -4. "승인하고 배포하기" → 콘텐츠 저장 + 배포채널설정 화면 - -**다운로드 기능**: -- 각 콘텐츠 개별 다운로드 -- 전체 콘텐츠 일괄 다운로드 (ZIP) +**인터랙션** +- `수정` 버튼 → 해당 정보 수정 모달 +- 알림 토글 → 실시간 반영 +- `결제 수단 등록` → 결제 정보 입력 모달 +- 각 메뉴 터치 → 해당 상세 페이지 +- `로그아웃` → 확인 다이얼로그 → 로그인 화면 --- -### 4.5 배포 관리 +## 4. 화면간 전환 및 네비게이션 -#### 10-배포채널설정 +### 4.1 네비게이션 구조 -**관련 유저스토리**: UFR-DIST-010, 020, 030, 040, 050 - -**레이아웃**: +**하단 탭 네비게이션 (소상공인 앱)** ``` -┌─────────────────────────────────────────────────────────┐ -│ ← 대시보드 Step 1/2 │ -├─────────────────────────────────────────────────────────┤ -│ │ -│ 배포할 채널을 선택하고 설정해주세요 │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ ☑️ 우리동네TV │ │ -│ │ 반경: ◯ 500m ● 1km │ │ -│ │ 시간대: [평일 저녁 6-9시 ▼] │ │ -│ │ 예상 노출: ~2,000명 │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ ☑️ 링고비즈 (연결음) │ │ -│ │ 전화번호: 02-1234-5678 (자동) │ │ -│ │ [연결음 미리듣기] │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ ☑️ 지니TV 광고 │ │ -│ │ 타겟 지역: [반경 3km ▼] │ │ -│ │ 노출 시간대: [저녁 7-11시 ▼] │ │ -│ │ 예산: [100,000원] │ │ -│ │ 예상 노출: ~1,500가구 │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ ☑️ SNS 자동 포스팅 │ │ -│ │ ☑️ Instagram ☑️ Naver Blog ☑️ Kakao │ │ -│ │ 예약 시간: [즉시 배포 ▼] │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ 📄 오프라인 홍보 자료 │ │ -│ │ QR 포스터 다운로드 가능 │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ [배포 시작] │ -└─────────────────────────────────────────────────────────┘ +┌──────┬──────┬──────┬──────┐ +│ 🏠 │ 🎪 │ 📊 │ 👤 │ +│ 홈 │이벤트│ 분석 │ 마이 │ +└──────┴──────┴──────┴──────┘ ``` -**UI 컴포넌트**: -- ChannelCard × 5: 각 배포 채널 - - Checkbox: 채널 선택/해제 - - 설정 옵션: 각 채널별 상세 설정 - - 예상 효과: 예상 노출 수 -- Primary Button: "배포 시작" +- **홈 (🏠)**: `00-메인대시보드` +- **이벤트 (🎪)**: 이벤트 생성 플로우 (`03-이벤트목적선택`) +- **분석 (📊)**: `21-실시간대시보드` +- **마이 (👤)**: `99-마이페이지` -**주요 인터랙션**: -1. Checkbox 선택/해제 → 해당 채널 설정 활성화/비활성화 -2. 각 채널별 상세 설정 입력 -3. "배포 시작" 클릭 → 확인 모달 → 배포 시작 + 배포현황 화면 +### 4.2 전환 애니메이션 -**검증**: -- 최소 1개 채널 선택 필수 -- 예산 범위 확인 (지니TV) -- SNS 계정 연동 확인 +**화면 전환 규칙 (Mobile First)** +- 순차 진행: 슬라이드 인 (좌→우) +- 이전 단계: 슬라이드 아웃 (우→좌) +- 탭 전환: 페이드 인/아웃 +- 모달: 바텀 시트 (아래→위) + +### 4.3 백 버튼 동작 + +**Android 백 버튼 / iOS 스와이프 백** +- 순차 플로우 내: 이전 단계로 +- 메인 화면: 앱 종료 확인 +- 모달: 모달 닫기 --- -#### 11-배포현황 +## 5. 반응형 설계 전략 -**관련 유저스토리**: UFR-DIST-060, 배포 진행 상태 +### 5.1 브레이크포인트 -**레이아웃**: -``` -┌─────────────────────────────────────────────────────────┐ -│ ← 대시보드 Step 2/2 │ -├─────────────────────────────────────────────────────────┤ -│ │ -│ 배포 진행 상황 │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ ████████████████████████████████ 100% │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ ✅ 우리동네TV │ │ -│ │ 배포 ID: #UDTV-20250815-001 │ │ -│ │ 송출 시작: 2025-08-15 18:00 │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ ✅ 링고비즈 │ │ -│ │ 업데이트 완료: 2025-08-15 17:45 │ │ -│ │ [연결음 확인하기] │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ ✅ 지니TV │ │ -│ │ 광고 ID: #GTV-20250815-042 │ │ -│ │ 노출 시작: 2025-08-15 19:00 │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ ✅ SNS 포스팅 │ │ -│ │ ✅ Instagram: [게시물 보기] │ │ -│ │ ✅ Naver Blog: [게시물 보기] │ │ -│ │ ✅ Kakao Channel: [게시물 보기] │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ 📄 오프라인 홍보 자료 │ │ -│ │ [QR 포스터 다운로드 (A4)] │ │ -│ │ [QR 포스터 다운로드 (A3)] │ │ -│ │ [전체 자료 다운로드 (ZIP)] │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ [실시간 분석 보기] [참여자 관리] [완료] │ -└─────────────────────────────────────────────────────────┘ -``` +**Mobile (320px ~ 767px)** - 기본 디자인 +- 단일 컬럼 레이아웃 +- 스택형 UI +- 터치 친화적 인터페이스 (최소 44x44px) +- 폰트 크기: 14px (본문), 16px (입력 필드), 20px (제목) -**UI 컴포넌트**: -- Progress Bar: 전체 배포 진행률 -- StatusCard × 4: 각 채널별 배포 상태 - - ✅ 완료, ⏳ 진행 중, ❌ 실패 - - 배포 ID, 시작 시각 - - 게시물 링크 (SNS) -- Download Section: 오프라인 자료 다운로드 -- Action Buttons: 실시간 분석, 참여자 관리, 완료 +**Tablet (768px ~ 1023px)** - 확장 디자인 +- 2열 그리드 (카드형 콘텐츠) +- 사이드바 네비게이션 (접이식) +- 확장된 대시보드 (6개 지표 카드) +- 폰트 크기: 16px (본문), 18px (입력 필드), 24px (제목) -**주요 인터랙션**: -1. 실시간 업데이트 (10초 간격) -2. 각 채널 상태 변경 시 Toast 알림 -3. 실패 시: 재시도 버튼 표시 -4. "실시간 분석 보기" → 실시간분석 화면 -5. "참여자 관리" → 참여자관리 화면 -6. "완료" → 대시보드 +**Desktop (1024px+)** - 완전 확장 +- 3열 그리드 +- 고정 사이드바 네비게이션 +- 전체 대시보드 (12개 지표 + 고급 차트) +- 멀티 패널 (리스트 + 상세 동시 표시) +- 폰트 크기: 16px (본문), 18px (입력 필드), 28px (제목) -**에러 처리**: -- 배포 실패 시: 재시도 버튼 (최대 3회) -- 실패 사유 표시 +### 5.2 Progressive Enhancement -**성능 요구사항**: -- 전체 배포 1분 이내 완료 +**Mobile (필수 기능)** +- 이벤트 생성 (AI 기획 ~ 배포) +- 실시간 대시보드 (핵심 지표 4개) +- 당첨자 관리 +- 간단한 차트 (막대/선 그래프) + +**Tablet (향상 기능)** +- 채널별 비교 분석 +- 확장된 대시보드 (6개 지표) +- 드래그 앤 드롭 콘텐츠 편집 +- 인터랙티브 차트 (확대/축소) + +**Desktop (고급 기능)** +- 전체 분석 대시보드 (12개 지표) +- 고급 차트 (히트맵, 퍼널 분석) +- 멀티 패널 워크플로우 +- 키보드 단축키 지원 + +### 5.3 터치/마우스 최적화 + +**Mobile/Tablet (터치)** +- 최소 터치 영역: 44x44px +- 스와이프 제스처 (화면 전환, 새로고침) +- 롱 프레스 (상세 정보, 컨텍스트 메뉴) +- 핀치 줌 (차트, 이미지) + +**Desktop (마우스/키보드)** +- 호버 효과 (툴팁, 미리보기) +- 우클릭 컨텍스트 메뉴 +- 키보드 네비게이션 (Tab, Enter, ESC) +- 드래그 앤 드롭 (콘텐츠 편집, 순서 변경) --- -### 4.6 참여 및 분석 +## 6. 접근성 보장 방안 (WCAG 2.1 AA) -#### 12-참여자관리 +### 6.1 시각적 접근성 -**관련 유저스토리**: UFR-PART-050, 030, 040 +**색상 대비** +- 본문 텍스트: 최소 4.5:1 대비율 +- 대형 텍스트 (18px+): 최소 3:1 대비율 +- UI 컴포넌트: 최소 3:1 대비율 +- 색상만으로 정보 전달 금지 (아이콘, 패턴 병행) -**레이아웃**: -``` -┌─────────────────────────────────────────────────────────┐ -│ ← 대시보드 │ -├─────────────────────────────────────────────────────────┤ -│ │ -│ 여름 할인 이벤트 > 참여자 관리 │ -│ │ -│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ -│ │ 총 참여자 │ │ 당첨자 │ │ 경품 지급 │ │ -│ │ 523명 │ │ 30명 │ │ 28명 │ │ -│ └─────────────┘ └─────────────┘ └─────────────┘ │ -│ │ -│ [🔍 검색] [필터 ▼] [엑셀 다운로드] [자동 추첨] │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ No │ 이름 │ 전화번호 │ 참여일시 │상태│ │ -│ ├────┼──────┼──────────────┼───────────┼────┤ │ -│ │ 1 │김OO │ 010-1234-**** │ 08/15 14:32│당첨│ │ -│ │ 2 │이OO │ 010-5678-**** │ 08/15 15:10│당첨│ │ -│ │ 3 │박OO │ 010-9012-**** │ 08/15 16:22│참여│ │ -│ │ 4 │최OO │ 010-3456-**** │ 08/15 17:45│참여│ │ -│ │ ... (더 보기) │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ [이전] 1 2 3 4 5 ... 53 [다음] │ -│ │ -└─────────────────────────────────────────────────────────┘ -``` +**폰트** +- 최소 폰트 크기: 14px (본문), 16px (입력 필드) +- 줄 간격: 최소 1.5 (본문), 1.2 (제목) +- 글자 간격 조정 가능 +- 고대비 모드 지원 -**UI 컴포넌트**: -- Breadcrumb: "여름 할인 이벤트 > 참여자 관리" -- DataCard × 3: 총 참여자, 당첨자, 경품 지급 완료 -- Search Input: 이름/전화번호 검색 -- Dropdown: 필터 (전체/당첨/미당첨) -- Button: 엑셀 다운로드, 자동 추첨 -- Table: 참여자 목록 - - 번호, 이름, 전화번호(마스킹), 참여일시, 상태 - - 상태: 당첨(빨강), 참여(회색) -- Pagination: 페이지 네비게이션 +### 6.2 청각적 접근성 -**주요 인터랙션**: -1. 검색 입력 → 실시간 필터링 -2. 필터 선택 → 테이블 필터링 -3. "자동 추첨" 클릭 → 추첨 확인 모달 → 추첨 실행 - - 추첨 중: 로딩 애니메이션 - - 완료: "추첨이 완료되었습니다. 당첨자 30명에게 알림이 발송됩니다." Toast -4. 당첨자 행 클릭 → 상세 정보 모달 (경품 지급 상태 변경 가능) -5. "엑셀 다운로드" → 참여자 전체 명단 다운로드 +**영상 콘텐츠** +- 자막 파일 제공 (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 키로 모달 닫기 --- -#### 13-실시간분석 +## 7. 성능 최적화 방안 -**관련 유저스토리**: UFR-ANAL-010, 020, 030 +### 7.1 로딩 성능 -**레이아웃**: -``` -┌─────────────────────────────────────────────────────────┐ -│ ← 대시보드 🔄 5분 전 │ -├─────────────────────────────────────────────────────────┤ -│ │ -│ 여름 할인 이벤트 > 실시간 분석 │ -│ │ -│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌─────────┐ │ -│ │ 총 참여자│ │ 총 노출 │ │ 참여율 │ │ ROI │ │ -│ │ 523명 │ │ 8,234회 │ │ 6.3% │ │ 180% │ │ -│ │ 📈 +12 │ │ 📊 +342 │ │ ⬆️ 0.2% │ │ 💰 +5% │ │ -│ └──────────┘ └──────────┘ └──────────┘ └─────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ 📊 참여자 추이 (시간별) │ │ -│ │ │ │ -│ │ 100 ┤ ● │ │ -│ │ 80 ┤ ● │ │ -│ │ 60 ┤ ● │ │ -│ │ 40 ┤ ● │ │ -│ │ 20 ┤ ● │ │ -│ │ 0 └───────────────────────────────────── │ │ -│ │ 10시 12시 14시 16시 18시 20시 │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ ┌──────────────────┐ ┌──────────────────────────┐ │ -│ │ 📺 채널별 성과 │ │ 💰 비용 대비 효과 │ │ -│ │ │ │ │ │ -│ │ 우리동네TV 35% │ │ 총 투자: 300,000원 │ │ -│ │ 지니TV 28% │ │ 매출 증가: 540,000원 │ │ -│ │ Instagram 22% │ │ ROI: 180% │ │ -│ │ Naver Blog 10% │ │ 손익 분기: 달성 ✅ │ │ -│ │ Kakao 5% │ │ │ │ -│ └──────────────────┘ └──────────────────────────┘ │ -│ │ -│ [상세 리포트 다운로드] [AI 개선 제안 보기] │ -└─────────────────────────────────────────────────────────┘ -``` +**First Contentful Paint (FCP): < 1.5초** +- Critical CSS 인라인 +- 폰트 preload +- 이미지 최적화 (WebP, AVIF) +- 코드 스플리팅 (라우트별) -**UI 컴포넌트**: -- Auto-refresh Indicator: "🔄 5분 전" (마지막 업데이트 시각) -- DataCard × 4: 총 참여자, 총 노출, 참여율, ROI - - 실시간 변화 표시 (▲▼ + 증감량) -- Line Chart: 시간별 참여자 추이 -- Pie Chart: 채널별 성과 분포 -- Summary Card: 비용 대비 효과 -- Action Buttons: 상세 리포트, AI 개선 제안 +**Time to Interactive (TTI): < 3초** +- JavaScript 번들 최소화 +- 불필요한 폴리필 제거 +- Tree shaking +- 서버 사이드 렌더링 (SSR) 또는 정적 생성 (SSG) -**주요 인터랙션**: -1. 5분마다 자동 새로고침 -2. 차트 호버 → 상세 수치 툴팁 -3. "상세 리포트 다운로드" → PDF 생성 + 다운로드 -4. "AI 개선 제안 보기" → AI개선제안 화면 +### 7.2 런타임 성능 -**데이터 수집**: -- KT 채널 API (우리동네TV, 지니TV) -- SNS API (Instagram, Naver, Kakao) -- POS 시스템 (매출 데이터) -- 참여자 DB +**AI 처리 시간 최적화** +- API 병렬 호출 (기획안 10초 목표) +- 응답 캐싱 (Redis, 24시간) +- 프롬프트 최적화 (토큰 수 감소) +- 스켈레톤 UI (로딩 중 사용자 경험) -**성능 요구사항**: -- 5분 간격 실시간 데이터 수집 및 업데이트 +**콘텐츠 생성 최적화** +- 이미지/영상 병렬 생성 (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** +- 작성 중인 이벤트 로컬 저장 +- 네트워크 복구 시 동기화 --- -#### 14-상세리포트 +## 8. 변경 이력 -**관련 유저스토리**: UFR-ANAL-040 - -**레이아웃**: -``` -┌─────────────────────────────────────────────────────────┐ -│ ← 실시간 분석 │ -├─────────────────────────────────────────────────────────┤ -│ │ -│ 여름 할인 이벤트 > 상세 리포트 │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ 📋 이벤트 개요 │ │ -│ │ • 기간: 2025-08-15 ~ 2025-08-22 (7일) │ │ -│ │ • 목적: 신규고객 유치 │ │ -│ │ • 경품: 스타벅스 아메리카노 (30명) │ │ -│ │ • 투자 비용: 300,000원 │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ 📊 참여 통계 │ │ -│ │ • 총 참여자: 523명 │ │ -│ │ • 채널별 참여: │ │ -│ │ - 우리동네TV: 183명 (35%) │ │ -│ │ - 지니TV: 146명 (28%) │ │ -│ │ - Instagram: 115명 (22%) │ │ -│ │ - Naver Blog: 52명 (10%) │ │ -│ │ - Kakao: 27명 (5%) │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ 📺 노출 통계 │ │ -│ │ • 총 노출: 8,234회 │ │ -│ │ • 도달률: 62% │ │ -│ │ • 참여율: 6.3% │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ 💰 매출 분석 │ │ -│ │ • 이벤트 기간 매출: 2,140,000원 │ │ -│ │ • 평균 매출: 1,600,000원 │ │ -│ │ • 매출 증가율: +34% │ │ -│ │ • 객단가 변화: 28,000원 → 31,500원 (+12%) │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ 📈 ROI 분석 │ │ -│ │ • 총 투자: 300,000원 │ │ -│ │ • 총 수익: 540,000원 (매출 증가분) │ │ -│ │ • ROI: 180% │ │ -│ │ • 손익 분기: 달성 ✅ │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ 📊 업종 평균 대비 벤치마킹 │ │ -│ │ • 참여율: 6.3% (업종 평균: 5.2%) ⬆️ 21% │ │ -│ │ • ROI: 180% (업종 평균: 150%) ⬆️ 20% │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ [PDF 다운로드] │ -└─────────────────────────────────────────────────────────┘ -``` - -**UI 컴포넌트**: -- Summary Cards × 5: 이벤트 개요, 참여 통계, 노출 통계, 매출 분석, ROI 분석 -- Benchmark Card: 업종 평균 대비 비교 -- Charts: 막대 그래프, 파이 차트 (각 섹션에 포함) -- Primary Button: "PDF 다운로드" - -**주요 인터랙션**: -1. 스크롤하여 전체 리포트 확인 -2. "PDF 다운로드" 클릭 → 리포트 PDF 생성 + 다운로드 - - 파일명: "여름할인이벤트_분석리포트_20250822.pdf" -3. 이메일 발송 옵션 (선택) - -**PDF 구성**: -- 표지 (이벤트명, 기간) -- 목차 -- 각 섹션별 상세 내용 + 그래프 -- 종합 의견 및 제언 +| 버전 | 날짜 | 변경 내용 | 작성자 | +|------|------|-----------|--------| +| 1.0 | 2025-10-17 | 초기 UI/UX 설계서 작성 | 박민지 (픽셀) | --- -### 4.7 AI 제안 +## 부록: KT 사장님Easy 벤치마킹 결과 -#### 15-AI개선제안 +### 주요 인사이트 +1. **AI 중심 설계**: AI Agent, AI 이미지 제작 등 AI 기능 전면 배치 +2. **통합 관리**: 하나의 앱에서 로봇, CCTV, 주문 시스템 등 통합 관리 +3. **데이터 기반**: 매출 비교, 유동인구 분석 등 데이터 분석 제공 +4. **실용적 혜택**: 무료 체험, 포인트 등 실질적 혜택 강조 +5. **인사이트 콘텐츠**: 사장님을 위한 고민 해결 팁, 트렌드 콘텐츠 제공 -**관련 유저스토리**: UFR-AIMPR-010, 020 - -**레이아웃**: -``` -┌─────────────────────────────────────────────────────────┐ -│ ← 대시보드 │ -├─────────────────────────────────────────────────────────┤ -│ │ -│ AI 개선 제안 │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ 🤖 여름 할인 이벤트 분석 결과 │ │ -│ │ │ │ -│ │ ✅ 성공 요인 │ │ -│ │ • 참여율이 업종 평균보다 21% 높습니다 │ │ -│ │ • 우리동네TV 채널이 가장 효과적이었습니다 │ │ -│ │ • 경품 매력도가 높았습니다 (⭐⭐⭐⭐) │ │ -│ │ │ │ -│ │ ⚠️ 개선 필요 영역 │ │ -│ │ • Kakao 채널 참여율이 낮습니다 (5%) │ │ -│ │ • 저녁 시간대 참여가 집중되어 있습니다 │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ 🎯 AI 개선 제안 (우선순위 순) │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ 1️⃣ 경품 다양화 │ │ -│ │ 현재 단일 경품보다 1등, 2등, 3등 구성 추천 │ │ -│ │ 예상 효과: 참여율 +15% 증가 │ │ -│ │ [이 제안으로 기획하기] │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ 2️⃣ 참여 방법 단순화 │ │ -│ │ 정보 입력 항목 축소 (이름, 전화번호만) │ │ -│ │ 예상 효과: 참여율 +10% 증가 │ │ -│ │ [이 제안으로 기획하기] │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ 3️⃣ 채널 집중 전략 │ │ -│ │ 효율 낮은 채널(Kakao) 제외, 우리동네TV 집중 │ │ -│ │ 예상 효과: ROI +20% 증가 │ │ -│ │ [이 제안으로 기획하기] │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ 💡 다음 이벤트 아이디어 (시즌별) │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ 🍂 가을 신메뉴 출시 이벤트 │ │ -│ │ 타겟: 신규고객 유치 │ │ -│ │ 경품: 신메뉴 무료 제공권 │ │ -│ │ 예상 성과: 참여율 7%, ROI 160% │ │ -│ │ [이 아이디어로 기획하기] │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────┐ │ -│ │ 🎃 핼러윈 특별 이벤트 │ │ -│ │ 타겟: 재방문 유도 │ │ -│ │ 경품: 핼러윈 한정 굿즈 │ │ -│ │ 예상 성과: 참여율 9%, ROI 180% │ │ -│ │ [이 아이디어로 기획하기] │ │ -│ └─────────────────────────────────────────────────┘ │ -│ │ -│ ... (총 5개 아이디어) │ -│ │ -└─────────────────────────────────────────────────────────┘ -``` - -**UI 컴포넌트**: -- Analysis Summary Card: 성공 요인 + 개선 필요 영역 -- Recommendation Card × 3: AI 개선 제안 (우선순위 순) - - 제목, 설명, 예상 효과 - - [이 제안으로 기획하기] 버튼 -- Idea Card × 5: 다음 이벤트 아이디어 - - 시즌, 타겟, 경품, 예상 성과 - - [이 아이디어로 기획하기] 버튼 - -**주요 인터랙션**: -1. Recommendation Card 확장 → 상세 내용 표시 -2. "이 제안으로 기획하기" 클릭 → 제안 내용 반영하여 이벤트목적선택 화면 (자동 입력) -3. Idea Card 클릭 → 아이디어 상세 보기 -4. "이 아이디어로 기획하기" → 아이디어 기반으로 새 이벤트 시작 - -**AI 학습**: -- 이벤트 결과 데이터 자동 학습 -- 성공 패턴 축적 -- 실패 요인 회피 로직 -- 개인화 추천 강화 +### 적용 사항 +- AI 기능을 전면에 배치 (기획, 콘텐츠 생성, 개선안) +- 실시간 데이터 분석 대시보드 +- 무료 체험 쿠폰 제공 +- 간편한 UI (Mobile First) +- 인사이트 제공 (AI 개선안, 다음 이벤트 아이디어) --- -## 5. 네비게이션 플로우 - -### 5.1 메인 플로우 - -``` -회원가입 (01) - ↓ -매장정보등록 (02) - ↓ -대시보드 (03) ←──────────────────────┐ - ↓ │ -이벤트목적선택 (04) │ - ↓ │ -AI기획진행 (05) │ - ↓ │ -기획안검토 (06) │ - ↓ │ -콘텐츠생성진행 (07) │ - ↓ │ -콘텐츠편집 (08) │ - ↓ │ -콘텐츠승인 (09) │ - ↓ │ -배포채널설정 (10) │ - ↓ │ -배포현황 (11) ────┬───────────────────┤ - ↓ ↓ │ -참여자관리 (12) 실시간분석 (13) ─────┤ - ↓ │ - 상세리포트 (14) │ - ↓ │ - AI개선제안 (15) ─────────┘ -``` - -### 5.2 메뉴 구조 - -``` -대시보드 (03) -│ -├─ 이벤트 관리 -│ ├─ 새 이벤트 만들기 (04) -│ ├─ 진행 중인 이벤트 (리스트) -│ └─ 완료된 이벤트 (리스트) -│ -├─ 참여자 관리 (12) -│ -├─ 분석 및 리포트 -│ ├─ 실시간 분석 (13) -│ └─ 상세 리포트 (14) -│ -├─ AI 제안 (15) -│ -└─ 설정 - ├─ 매장 정보 수정 - ├─ 계정 설정 - └─ 채널 연동 관리 -``` - ---- - -## 6. 반응형 디자인 - -### 6.1 브레이크포인트 - -- **Desktop**: 1920px (주요 작업 환경) -- **Tablet**: 768px - 1024px -- **Mobile**: 375px - 767px - -### 6.2 레이아웃 조정 - -#### Desktop (1920px) -- 3-4 컬럼 그리드 -- Sidebar 고정 표시 (240px) -- 모든 기능 사용 가능 - -#### Tablet (768px - 1024px) -- 2 컬럼 그리드 -- Sidebar 접기 가능 (햄버거 메뉴) -- DataCard 크기 축소 -- 주요 기능 사용 가능 (일부 제한) - -#### Mobile (375px - 767px) -- 1 컬럼 그리드 -- Sidebar 오버레이 방식 -- 조회 중심 (이벤트 생성은 Desktop 권장) -- 카드 세로 배치 -- 테이블 → 카드 리스트로 변경 - -### 6.3 터치 최적화 (Mobile/Tablet) - -- 버튼 최소 크기: 44px × 44px -- 터치 타겟 간격: 8px 이상 -- 스와이프 제스처 지원 -- 드롭다운 → 바텀 시트 - ---- - -## 7. 성능 및 접근성 - -### 7.1 성능 요구사항 - -- **초기 로딩**: 3초 이내 -- **페이지 전환**: 1초 이내 -- **AI 처리**: 10초 이내 (기획), 3분 이내 (콘텐츠) -- **배포**: 1분 이내 -- **실시간 업데이트**: 5분 간격 - -### 7.2 접근성 (WCAG 2.1 AA) - -- **색상 대비**: 최소 4.5:1 -- **키보드 네비게이션**: Tab 순서 지원 -- **스크린 리더**: ARIA 레이블 적용 -- **포커스 표시**: 명확한 포커스 링 -- **에러 메시지**: 명확하고 구체적 - -### 7.3 브라우저 지원 - -- Chrome 90+ -- Firefox 88+ -- Safari 14+ -- Edge 90+ - ---- - -## 8. UI 컴포넌트 스펙 - -### 8.1 색상 팔레트 - -``` -Primary: #E60012 (KT Red) -Secondary: #000000 (Black) -Background: #FFFFFF (White) -Grey-100: #F5F5F5 -Grey-200: #EEEEEE -Grey-300: #CCCCCC -Grey-500: #999999 -Grey-700: #666666 -Grey-900: #333333 -Success: #00C73C -Warning: #FFC107 -Error: #FF0000 -Info: #2196F3 -``` - -### 8.2 타이포그래피 - -``` -Font Family: 'Noto Sans KR', sans-serif - -Heading 1: 32px, Bold, Line-height 1.5 -Heading 2: 24px, Bold, Line-height 1.5 -Heading 3: 18px, Bold, Line-height 1.5 -Body: 14px, Regular, Line-height 1.6 -Caption: 12px, Regular, Line-height 1.5 -``` - -### 8.3 간격 시스템 - -``` -Space-0: 0px -Space-1: 4px -Space-2: 8px -Space-3: 12px -Space-4: 16px -Space-5: 20px -Space-6: 24px -Space-8: 32px -Space-10: 40px -Space-12: 48px -``` - -### 8.4 그림자 - -``` -Shadow-1: 0 1px 3px rgba(0,0,0,0.12) -Shadow-2: 0 2px 8px rgba(0,0,0,0.15) -Shadow-3: 0 4px 16px rgba(0,0,0,0.20) -``` - ---- - -## 9. 인터랙션 및 애니메이션 - -### 9.1 전환 효과 - -- **페이지 전환**: Fade-in (300ms) -- **모달**: Scale + Fade (200ms) -- **드롭다운**: Slide-down (150ms) -- **Toast**: Slide-up (250ms) - -### 9.2 호버 효과 - -- **버튼**: 색상 어둡게 (10%), 커서 포인터 -- **카드**: 그림자 확대, 약간 상승 -- **링크**: 밑줄 표시 - -### 9.3 로딩 상태 - -- **버튼**: 스피너 + "처리 중..." 텍스트 -- **페이지**: 중앙 로딩 스피너 -- **AI 처리**: 진행 바 + 애니메이션 -- **데이터 로드**: 스켈레톤 UI - ---- - -## 10. 검토 결과 - -### 10.1 유저스토리 매핑 완료 -✅ 모든 39개 유저스토리가 15개 화면에 완전히 매핑됨 -✅ 각 화면이 명확한 목적과 유저스토리를 가짐 - -### 10.2 참고 사이트 디자인 반영 -✅ KT 브랜드 컬러 및 디자인 언어 적용 -✅ 카드 기반 레이아웃 및 클린한 UI -✅ 명확한 CTA 및 진행 상태 표시 - -### 10.3 기술적 실현 가능성 -✅ 모든 화면이 현재 기술로 구현 가능 -✅ 성능 요구사항이 명확히 정의됨 -✅ 반응형 디자인 및 접근성 고려 - -### 10.4 사용자 경험 -✅ 직관적인 네비게이션 플로우 -✅ 명확한 피드백 및 에러 처리 -✅ AI 투명성 및 진행 상태 표시 - ---- - -## 부록: 화면 목록 요약 - -| 번호 | 화면명 | 관련 유저스토리 | 주요 기능 | -|------|--------|------------------|-----------| -| 01 | 회원가입 | UFR-USER-010 | 회원가입, KT 본인 인증 | -| 02 | 매장정보등록 | UFR-USER-020 | 매장 정보, 사업자번호 검증 | -| 03 | 대시보드 | - | 현황 조회, 빠른 실행 | -| 04 | 이벤트목적선택 | UFR-PLAN-010 | 목적 선택 | -| 05 | AI기획진행 | UFR-PLAN-020~050 | AI 자동 기획 (10초) | -| 06 | 기획안검토 | UFR-PLAN-060 | 기획안 검토 및 승인 | -| 07 | 콘텐츠생성진행 | UFR-CONT-010~040 | AI 콘텐츠 생성 (3분) | -| 08 | 콘텐츠편집 | UFR-CONT-050 | 콘텐츠 수정 | -| 09 | 콘텐츠승인 | UFR-CONT-060 | 콘텐츠 최종 승인 | -| 10 | 배포채널설정 | UFR-DIST-010~050 | 다중 채널 설정 | -| 11 | 배포현황 | UFR-DIST-060 | 배포 진행 상태 (1분) | -| 12 | 참여자관리 | UFR-PART-030,040,050 | 참여자 조회, 추첨, 관리 | -| 13 | 실시간분석 | UFR-ANAL-010,020,030 | 실시간 대시보드 (5분 간격) | -| 14 | 상세리포트 | UFR-ANAL-040 | 종합 리포트 PDF | -| 15 | AI개선제안 | UFR-AIMPR-010,020 | AI 개선안 및 아이디어 | - ---- - -**작성일**: 2025-08-15 -**버전**: 1.0 -**작성자**: UI/UX Designer +**문서 끝**