From e68aaa3983b35bf7e4274eb8ad321c99451b02ce Mon Sep 17 00:00:00 2001 From: cherry2250 Date: Fri, 17 Oct 2025 13:49:39 +0900 Subject: [PATCH] add uiux --- design/uiux/uiux.md | 1330 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 1330 insertions(+) create mode 100644 design/uiux/uiux.md diff --git a/design/uiux/uiux.md b/design/uiux/uiux.md new file mode 100644 index 0000000..d34983b --- /dev/null +++ b/design/uiux/uiux.md @@ -0,0 +1,1330 @@ +# 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 매핑됩니다. + +--- + +## 2. 디자인 원칙 + +### 2.1 사용자 중심 설계 +- **간결함**: 최소한의 클릭으로 작업 완료 +- **명확함**: 현재 위치와 다음 단계를 명확히 표시 +- **피드백**: 모든 액션에 즉각적인 피드백 제공 +- **AI 투명성**: AI 처리 과정과 결과를 명확히 표시 + +### 2.2 시각적 디자인 +- **색상**: KT 브랜드 컬러 기반 (Primary: #E60012, Secondary: #000000, Background: #FFFFFF) +- **타이포그래피**: 명확한 계층 구조 (Heading 1~3, Body, Caption) +- **여백**: 충분한 여백으로 가독성 확보 +- **아이콘**: 직관적인 아이콘 사용 + +### 2.3 반응형 디자인 +- **Desktop**: 1920px 최적화 (주요 작업 환경) +- **Tablet**: 768px - 1024px 지원 (조회 및 간단한 작업) +- **Mobile**: 375px - 767px 지원 (조회 중심) + +--- + +## 3. 공통 UI 컴포넌트 + +### 3.1 기본 컴포넌트 + +#### Button +- **Primary Button**: 주요 액션 (배경: #E60012, 텍스트: #FFFFFF) +- **Secondary Button**: 보조 액션 (배경: #000000, 텍스트: #FFFFFF) +- **Outline Button**: 취소/뒤로가기 (테두리: #CCCCCC, 텍스트: #333333) +- **크기**: Large (48px), Medium (40px), Small (32px) + +#### Input Fields +- **Text Input**: 단일 텍스트 입력 +- **Number Input**: 숫자 입력 (예산, 인원) +- **Select Dropdown**: 선택 옵션 +- **Textarea**: 긴 텍스트 입력 +- **상태**: Default, Focus, Error, Disabled + +#### Card +- **그림자**: Box-shadow (0 2px 8px rgba(0,0,0,0.1)) +- **모서리**: Border-radius 8px +- **패딩**: 24px +- **호버 효과**: 그림자 확대 + +### 3.2 복합 컴포넌트 + +#### Header +- **높이**: 64px +- **구성**: 로고 + 메인 메뉴 + 사용자 정보 +- **고정**: 스크롤 시 상단 고정 + +#### Sidebar +- **너비**: 240px (접힘 시 64px) +- **구성**: 아이콘 + 메뉴명 +- **활성 표시**: 선택된 메뉴 강조 + +#### StepIndicator +- **구성**: 단계 번호 + 단계명 + 연결선 +- **상태**: Completed (체크), Active (강조), Inactive (회색) + +#### DataCard +- **구성**: 제목 + 큰 숫자 + 변화율 + 미니 차트 +- **크기**: 280px × 160px + +#### AIProcessing +- **구성**: 진행 바 + 진행률 (%) + 현재 단계 설명 +- **애니메이션**: 진행 바 애니메이션 + 펄스 효과 + +--- + +## 4. 화면별 상세 설계 + +### 4.1 인증 및 온보딩 + +#### 01-회원가입 + +**관련 유저스토리**: UFR-USER-010 + +**레이아웃**: +``` +┌─────────────────────────────────────────┐ +│ KT 로고 │ +│ │ +│ 회원가입 │ +│ │ +│ ┌─────────────────────────────────┐ │ +│ │ 이름 [ ] │ │ +│ │ 전화번호 [ ] │ │ +│ │ 이메일 [ ] │ │ +│ │ │ │ +│ │ [ 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 알림: "이미 가입된 전화번호입니다" + +--- + +#### 02-매장정보등록 + +**관련 유저스토리**: UFR-USER-020 + +**레이아웃**: +``` +┌─────────────────────────────────────────┐ +│ Step 2/2 │ +│ 매장 정보 등록 │ +│ │ +│ ┌─────────────────────────────────┐ │ +│ │ 매장명 [ ] │ │ +│ │ 업종 [ ▼ 선택 ] │ │ +│ │ 주소 [ 🔍 검색 ] │ │ +│ │ 영업시간 │ │ +│ │ 월-금 [09:00] ~ [18:00] │ │ +│ │ 토-일 [10:00] ~ [17:00] │ │ +│ │ │ │ +│ │ 사업자번호 [ - - ] │ │ +│ │ [ 사업자번호 검증하기 ] │ │ +│ │ │ │ +│ │ [이전] [등록 완료] │ │ +│ └─────────────────────────────────┘ │ +│ │ +│ 💡 첫 1회 무료 체험 쿠폰을 드립니다! │ +└─────────────────────────────────────────┘ +``` + +**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 형식 +- 휴폐업 여부 확인 +- 매장명과 사업자 정보 일치 확인 + +--- + +### 4.2 메인 화면 + +#### 03-대시보드 + +**관련 유저스토리**: 진행 중인 이벤트 현황, UFR-ANAL-010 일부 + +**레이아웃**: +``` +┌─────────────────────────────────────────────────────────┐ +│ [로고] 대시보드 | 이벤트 관리 | 참여자 | 분석 [👤] │ +├─────────────────────────────────────────────────────────┤ +│ │ +│ 안녕하세요, [매장명] 사장님! 👋 │ +│ │ +│ ┌───────────────┐ ┌───────────────┐ ┌──────────────┐ │ +│ │ 진행중 │ │ 총 참여자 │ │ 이번달 ROI │ │ +│ │ 3건 │ │ 1,247명 │ │ 245% │ │ +│ │ 📊 +2 │ │ 📈 +120 │ │ 💰 ↑15% │ │ +│ └───────────────┘ └───────────────┘ └──────────────┘ │ +│ │ +│ 빠른 실행 │ +│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ +│ │ 🎯 │ │ 📊 │ │ 💡 │ │ +│ │ 새 이벤트 │ │ 실시간 │ │ AI 제안 │ │ +│ │ 만들기 │ │ 분석 │ │ 보기 │ │ +│ └──────────┘ └──────────┘ └──────────┘ │ +│ │ +│ 진행 중인 이벤트 │ +│ ┌─────────────────────────────────────────────────┐ │ +│ │ 🎉 여름 할인 이벤트 │ │ +│ │ 상태: 배포 완료 | 참여자: 523명 | D-5 │ │ +│ │ ────────────────────■───── 85% │ │ +│ │ [상세보기] [참여자관리] [실시간분석] │ │ +│ └─────────────────────────────────────────────────┘ │ +│ │ +│ 최근 완료된 이벤트 │ +│ • 봄맞이 이벤트 (5/15 종료) - ROI: 180% │ +│ • 신메뉴 출시 이벤트 (4/30 종료) - ROI: 220% │ +│ │ +└─────────────────────────────────────────────────────────┘ +``` + +**UI 컴포넌트**: +- Header (고정) +- Greeting: "안녕하세요, [매장명] 사장님!" +- DataCard × 3: 진행중 이벤트, 총 참여자, 이번달 ROI +- QuickAction Card × 3: 새 이벤트, 실시간 분석, AI 제안 +- EventCard: 진행 중인 이벤트 (제목, 상태, 진행률, 액션 버튼) +- List: 최근 완료된 이벤트 + +**주요 인터랙션**: +1. "새 이벤트 만들기" 클릭 → 이벤트목적선택 화면 +2. "실시간 분석" 클릭 → 실시간분석 화면 +3. "AI 제안 보기" 클릭 → AI개선제안 화면 +4. EventCard 클릭 → 해당 이벤트 상세 화면 +5. 5분마다 DataCard 자동 업데이트 + +--- + +### 4.3 이벤트 기획 + +#### 04-이벤트목적선택 + +**관련 유저스토리**: UFR-PLAN-010 + +**레이아웃**: +``` +┌─────────────────────────────────────────────────────────┐ +│ ← 대시보드 Step 1/3 │ +├─────────────────────────────────────────────────────────┤ +│ │ +│ 이벤트 목적을 선택해주세요 │ +│ 선택한 목적에 맞춰 AI가 최적의 이벤트를 기획합니다 │ +│ │ +│ ┌──────────────────┐ ┌──────────────────┐ │ +│ │ 🎯 신규고객 유치 │ │ 🔄 재방문 유도 │ │ +│ │ │ │ │ │ +│ │ 새로운 고객을 │ │ 기존 고객의 │ │ +│ │ 확보합니다 │ │ 재방문을 촉진 │ │ +│ │ │ │ │ │ +│ │ 예상 참여율 8% │ │ 예상 참여율 15% │ │ +│ └──────────────────┘ └──────────────────┘ │ +│ │ +│ ┌──────────────────┐ ┌──────────────────┐ │ +│ │ 💰 매출 증대 │ │ 📢 인지도 향상 │ │ +│ │ │ │ │ │ +│ │ 단기 매출을 │ │ 브랜드 인지도를 │ │ +│ │ 향상시킵니다 │ │ 높입니다 │ │ +│ │ │ │ │ │ +│ │ 예상 참여율 10% │ │ 예상 참여율 12% │ │ +│ └──────────────────┘ └──────────────────┘ │ +│ │ +│ [다음 단계] │ +└─────────────────────────────────────────────────────────┘ +``` + +**UI 컴포넌트**: +- Back Button: "← 대시보드" +- StepIndicator: "Step 1/3" +- Heading: "이벤트 목적을 선택해주세요" +- SelectionCard × 4: 각 목적별 카드 + - 아이콘 + 제목 + 설명 + 예상 참여율 + - 선택 시 테두리 강조 (Primary 색상) +- Primary Button: "다음 단계" (선택 전 비활성화) + +**주요 인터랙션**: +1. 카드 클릭 → 선택 상태 (단일 선택) +2. 호버 시 카드 확대 애니메이션 +3. 선택 후 "다음 단계" 버튼 활성화 +4. "다음 단계" 클릭 → AI기획진행 화면 + AI 분석 시작 + +**툴팁**: +- 각 목적 카드에 "?" 아이콘 → 상세 설명 툴팁 + +--- + +#### 05-AI기획진행 + +**관련 유저스토리**: UFR-PLAN-020, 030, 040, 050 + +**레이아웃**: +``` +┌─────────────────────────────────────────────────────────┐ +│ ← 이전 Step 2/3 │ +├─────────────────────────────────────────────────────────┤ +│ │ +│ AI가 이벤트를 기획하고 있습니다 🤖 │ +│ │ +│ ┌─────────────────────────────────────────────────┐ │ +│ │ ████████████████████░░░░░░░░░░ 65% │ │ +│ └─────────────────────────────────────────────────┘ │ +│ │ +│ ┌─────────────────────────────────────────────────┐ │ +│ │ ✅ 업종 트렌드 분석 완료 │ │ +│ │ → 카페 업종, 강남 지역, 여름 시즌 분석 │ │ +│ │ │ │ +│ │ ⏳ 최적 경품 추천 중... │ │ +│ │ 💡 예산 300,000원 기준 분석 중 │ │ +│ │ │ │ +│ │ ⏸️ 참여 방법 설계 대기 중 │ │ +│ │ │ │ +│ │ ⏸️ 홍보 문구 생성 대기 중 │ │ +│ └─────────────────────────────────────────────────┘ │ +│ │ +│ 예상 소요 시간: 약 10초 │ +│ │ +└─────────────────────────────────────────────────────────┘ +``` + +**UI 컴포넌트**: +- Back Button: "← 이전" +- StepIndicator: "Step 2/3" +- Heading: "AI가 이벤트를 기획하고 있습니다 🤖" +- Progress Bar: 전체 진행률 (0% → 100%) +- StatusList: 각 단계별 진행 상태 + - ✅ 완료: 초록색 + 결과 요약 + - ⏳ 진행 중: 노란색 + 애니메이션 + - ⏸️ 대기 중: 회색 +- Text: 예상 소요 시간 + +**주요 인터랙션**: +1. 자동 진행 (사용자 액션 없음) +2. 각 단계 완료 시: + - 진행 바 업데이트 (25% 씩 증가) + - 상태 아이콘 변경 + - 결과 요약 표시 +3. 전체 완료 (100%) 시 → 자동으로 기획안검토 화면 이동 + +**에러 처리**: +- AI API 오류 시: "잠시 후 다시 시도해주세요" Toast + 재시도 버튼 + +**성능 요구사항**: +- 전체 기획 과정 10초 이내 완료 + +--- + +#### 06-기획안검토 + +**관련 유저스토리**: UFR-PLAN-060 + +**레이아웃**: +``` +┌─────────────────────────────────────────────────────────┐ +│ ← 이전 Step 3/3 │ +├─────────────────────────────────────────────────────────┤ +│ │ +│ 완성된 기획안을 검토해주세요 │ +│ │ +│ ┌─────────────────────────────────────────────────┐ │ +│ │ 📋 이벤트 개요 │ │ +│ │ • 목적: 신규고객 유치 │ │ +│ │ • 예상 기간: 7일 │ │ +│ │ • 예상 예산: 300,000원 │ │ +│ └─────────────────────────────────────────────────┘ │ +│ │ +│ ┌─────────────────────────────────────────────────┐ │ +│ │ 🎁 선택된 경품 │ │ +│ │ • 스타벅스 아메리카노 Tall (30명) │ │ +│ │ • 예상 매력도: ⭐⭐⭐⭐ │ │ +│ │ [경품 변경하기] │ │ +│ └─────────────────────────────────────────────────┘ │ +│ │ +│ ┌─────────────────────────────────────────────────┐ │ +│ │ 🎯 참여 방법 │ │ +│ │ • QR 코드 스캔 후 정보 입력 │ │ +│ │ • 예상 참여율: 8% │ │ +│ │ [참여 방법 변경하기] │ │ +│ └─────────────────────────────────────────────────┘ │ +│ │ +│ ┌─────────────────────────────────────────────────┐ │ +│ │ 📢 홍보 문구 │ │ +│ │ "여름맞이 특별 이벤트! 아메리카노 받고 시원하게│ │ +│ │ 여름나기 ☕🌊 지금 바로 참여하세요!" │ │ +│ │ #여름이벤트 #카페 #강남맛집 │ │ +│ │ [홍보 문구 변경하기] │ │ +│ └─────────────────────────────────────────────────┘ │ +│ │ +│ ┌─────────────────────────────────────────────────┐ │ +│ │ 📊 예상 효과 │ │ +│ │ • 예상 참여자: 약 200명 │ │ +│ │ • 예상 ROI: 150% │ │ +│ └─────────────────────────────────────────────────┘ │ +│ │ +│ [수정하기] [승인하고 다음] │ +└─────────────────────────────────────────────────────────┘ +``` + +**UI 컴포넌트**: +- Back Button: "← 이전" +- StepIndicator: "Step 3/3" +- Summary Card × 5: 이벤트 개요, 경품, 참여방법, 홍보문구, 예상효과 + - 각 카드에 [변경하기] 버튼 +- Outline Button: "수정하기" (전체 수정) +- Primary Button: "승인하고 다음" + +**주요 인터랙션**: +1. [변경하기] 버튼 클릭 → 해당 섹션 수정 모달 +2. "수정하기" 클릭 → 이전 단계로 돌아가기 +3. "승인하고 다음" 클릭 → 기획안 저장 + 콘텐츠생성진행 화면 + +**수정 모달**: +- 경품 변경: AI 추천 Top 5 중 재선택 +- 참여 방법 변경: 3가지 옵션 중 재선택 +- 홍보 문구 변경: 5개 버전 중 재선택 또는 직접 편집 + +--- + +### 4.4 콘텐츠 생성 + +#### 07-콘텐츠생성진행 + +**관련 유저스토리**: UFR-CONT-010, 020, 030, 040 + +**레이아웃**: +``` +┌─────────────────────────────────────────────────────────┐ +│ ← 대시보드 Step 1/3 │ +├─────────────────────────────────────────────────────────┤ +│ │ +│ AI가 콘텐츠를 생성하고 있습니다 🎨 │ +│ │ +│ ┌─────────────────────────────────────────────────┐ │ +│ │ ██████████████████░░░░░░░░ 70% │ │ +│ └─────────────────────────────────────────────────┘ │ +│ │ +│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ +│ │ 🖼️ 이미지 │ │ 🎬 영상 │ │ 📱 SNS │ │ +│ │ │ │ │ │ │ │ +│ │ ✅ 심플 │ │ ⏳ 제작 중 │ │ ⏸️ 대기 │ │ +│ │ ✅ 화려 │ │ 15초/15초 │ │ │ │ +│ │ ✅ 트렌디 │ │ │ │ │ │ +│ └──────────────┘ └──────────────┘ └──────────────┘ │ +│ │ +│ ┌──────────────────────────────────────────────┐ │ +│ │ 📄 QR 포스터 │ │ +│ │ ⏸️ 대기 중 │ │ +│ └──────────────────────────────────────────────┘ │ +│ │ +│ 예상 소요 시간: 약 3분 │ +│ │ +└─────────────────────────────────────────────────────────┘ +``` + +**UI 컴포넌트**: +- Back Button +- StepIndicator: "Step 1/3" +- Progress Bar: 전체 진행률 +- ContentCard × 4: 이미지(3종), 영상, SNS, QR포스터 + - 상태: ✅ 완료, ⏳ 진행 중, ⏸️ 대기 중 + - 진행 중일 때: 미니 프로그레스 바 +- Text: 예상 소요 시간 + +**주요 인터랙션**: +1. 자동 진행 (병렬 처리) +2. 각 콘텐츠 완료 시: + - 썸네일 미리보기 표시 + - 상태 업데이트 +3. 전체 완료 시 → 콘텐츠편집 화면 (자동 또는 [다음] 버튼) + +**성능 요구사항**: +- 전체 콘텐츠 생성 3분 이내 완료 + +--- + +#### 08-콘텐츠편집 + +**관련 유저스토리**: UFR-CONT-050 + +**레이아웃**: +``` +┌─────────────────────────────────────────────────────────┐ +│ ← 이전 Step 2/3 │ +├─────────────────────────────────────────────────────────┤ +│ │ +│ ┌─────────────┐ ┌──────────────────────────────┐ │ +│ │ 이미지 - 심플│ │ [미리보기 영역] │ │ +│ │ │ │ │ │ +│ │ 이미지 - 화려│ │ │ │ +│ │ │ │ 생성된 콘텐츠 │ │ +│ │ 이미지-트렌디│ │ 미리보기 │ │ +│ │ │ │ │ │ +│ │ 영상 15초 │ │ │ │ +│ │ │ └──────────────────────────────┘ │ +│ │ SNS-Insta │ │ +│ │ │ ┌──────────────────────────────┐ │ +│ │ SNS-Naver │ │ 편집 도구 │ │ +│ │ │ │ ┌─────┐ ┌─────┐ ┌─────┐ │ │ +│ │ SNS-Kakao │ │ │텍스트│ │색상 │ │레이아웃│ │ │ +│ │ │ │ └─────┘ └─────┘ └─────┘ │ │ +│ │ QR 포스터 │ │ │ │ +│ └─────────────┘ │ 텍스트: [_______________] │ │ +│ │ 색상: ⬜🔴🔵⚫ │ │ +│ │ 크기: [━━━━●────] 14px │ │ +│ │ │ │ +│ │ [원본으로 되돌리기] │ │ +│ └──────────────────────────────┘ │ +│ │ +│ [건너뛰기] [저장하고 다음] │ +└─────────────────────────────────────────────────────────┘ +``` + +**UI 컴포넌트**: +- Sidebar: 콘텐츠 목록 (선택 가능) +- Preview Area: 선택한 콘텐츠 미리보기 +- Edit Toolbar: 텍스트, 색상, 레이아웃 편집 도구 +- Button: "원본으로 되돌리기" +- Outline Button: "건너뛰기" +- Primary Button: "저장하고 다음" + +**주요 인터랙션**: +1. 사이드바에서 콘텐츠 선택 → 미리보기 영역에 표시 +2. 편집 도구로 실시간 수정 → 미리보기 즉시 반영 +3. "원본으로 되돌리기" → 수정사항 취소 +4. "저장하고 다음" → 수정사항 적용 + 콘텐츠승인 화면 + +**편집 기능**: +- 텍스트: 내용, 폰트, 크기, 색상 +- 색상: 브랜드 컬러 변경 +- 레이아웃: 템플릿 변경 + +--- + +#### 09-콘텐츠승인 + +**관련 유저스토리**: UFR-CONT-060 + +**레이아웃**: +``` +┌─────────────────────────────────────────────────────────┐ +│ ← 이전 Step 3/3 │ +├─────────────────────────────────────────────────────────┤ +│ │ +│ 완성된 콘텐츠를 확인해주세요 │ +│ │ +│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ +│ │ [이미지1] │ │ [이미지2] │ │ [이미지3] │ │ +│ │ 심플 │ │ 화려 │ │ 트렌디 │ │ +│ └──────────┘ └──────────┘ └──────────┘ │ +│ │ +│ ┌──────────────────────────────────┐ │ +│ │ [영상 미리보기] │ │ +│ │ 15초 영상 │ │ +│ │ ▶️ 재생 │ │ +│ └──────────────────────────────────┘ │ +│ │ +│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ +│ │Instagram│ │Naver Blog│ │ Kakao │ │ +│ │[미리보기]│ │[미리보기]│ │[미리보기]│ │ +│ └─────────┘ └─────────┘ └─────────┘ │ +│ │ +│ ┌──────────────────────────────────┐ │ +│ │ QR 포스터 (A4) │ │ +│ │ [미리보기 및 다운로드] │ │ +│ └──────────────────────────────────┘ │ +│ │ +│ [수정하기] [승인하고 배포하기] │ +└─────────────────────────────────────────────────────────┘ +``` + +**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 배포 관리 + +#### 10-배포채널설정 + +**관련 유저스토리**: 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: "배포 시작" + +**주요 인터랙션**: +1. Checkbox 선택/해제 → 해당 채널 설정 활성화/비활성화 +2. 각 채널별 상세 설정 입력 +3. "배포 시작" 클릭 → 확인 모달 → 배포 시작 + 배포현황 화면 + +**검증**: +- 최소 1개 채널 선택 필수 +- 예산 범위 확인 (지니TV) +- SNS 계정 연동 확인 + +--- + +#### 11-배포현황 + +**관련 유저스토리**: UFR-DIST-060, 배포 진행 상태 + +**레이아웃**: +``` +┌─────────────────────────────────────────────────────────┐ +│ ← 대시보드 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)] │ │ +│ └─────────────────────────────────────────────────┘ │ +│ │ +│ [실시간 분석 보기] [참여자 관리] [완료] │ +└─────────────────────────────────────────────────────────┘ +``` + +**UI 컴포넌트**: +- Progress Bar: 전체 배포 진행률 +- StatusCard × 4: 각 채널별 배포 상태 + - ✅ 완료, ⏳ 진행 중, ❌ 실패 + - 배포 ID, 시작 시각 + - 게시물 링크 (SNS) +- Download Section: 오프라인 자료 다운로드 +- Action Buttons: 실시간 분석, 참여자 관리, 완료 + +**주요 인터랙션**: +1. 실시간 업데이트 (10초 간격) +2. 각 채널 상태 변경 시 Toast 알림 +3. 실패 시: 재시도 버튼 표시 +4. "실시간 분석 보기" → 실시간분석 화면 +5. "참여자 관리" → 참여자관리 화면 +6. "완료" → 대시보드 + +**에러 처리**: +- 배포 실패 시: 재시도 버튼 (최대 3회) +- 실패 사유 표시 + +**성능 요구사항**: +- 전체 배포 1분 이내 완료 + +--- + +### 4.6 참여 및 분석 + +#### 12-참여자관리 + +**관련 유저스토리**: UFR-PART-050, 030, 040 + +**레이아웃**: +``` +┌─────────────────────────────────────────────────────────┐ +│ ← 대시보드 │ +├─────────────────────────────────────────────────────────┤ +│ │ +│ 여름 할인 이벤트 > 참여자 관리 │ +│ │ +│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ +│ │ 총 참여자 │ │ 당첨자 │ │ 경품 지급 │ │ +│ │ 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 [다음] │ +│ │ +└─────────────────────────────────────────────────────────┘ +``` + +**UI 컴포넌트**: +- Breadcrumb: "여름 할인 이벤트 > 참여자 관리" +- DataCard × 3: 총 참여자, 당첨자, 경품 지급 완료 +- Search Input: 이름/전화번호 검색 +- Dropdown: 필터 (전체/당첨/미당첨) +- Button: 엑셀 다운로드, 자동 추첨 +- Table: 참여자 목록 + - 번호, 이름, 전화번호(마스킹), 참여일시, 상태 + - 상태: 당첨(빨강), 참여(회색) +- Pagination: 페이지 네비게이션 + +**주요 인터랙션**: +1. 검색 입력 → 실시간 필터링 +2. 필터 선택 → 테이블 필터링 +3. "자동 추첨" 클릭 → 추첨 확인 모달 → 추첨 실행 + - 추첨 중: 로딩 애니메이션 + - 완료: "추첨이 완료되었습니다. 당첨자 30명에게 알림이 발송됩니다." Toast +4. 당첨자 행 클릭 → 상세 정보 모달 (경품 지급 상태 변경 가능) +5. "엑셀 다운로드" → 참여자 전체 명단 다운로드 + +**추첨 알고리즘**: +- 중복 참여자 제외 +- 매장 방문 고객 가산점 적용 +- 난수 기반 무작위 추첨 + +--- + +#### 13-실시간분석 + +**관련 유저스토리**: UFR-ANAL-010, 020, 030 + +**레이아웃**: +``` +┌─────────────────────────────────────────────────────────┐ +│ ← 대시보드 🔄 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 개선 제안 보기] │ +└─────────────────────────────────────────────────────────┘ +``` + +**UI 컴포넌트**: +- Auto-refresh Indicator: "🔄 5분 전" (마지막 업데이트 시각) +- DataCard × 4: 총 참여자, 총 노출, 참여율, ROI + - 실시간 변화 표시 (▲▼ + 증감량) +- Line Chart: 시간별 참여자 추이 +- Pie Chart: 채널별 성과 분포 +- Summary Card: 비용 대비 효과 +- Action Buttons: 상세 리포트, AI 개선 제안 + +**주요 인터랙션**: +1. 5분마다 자동 새로고침 +2. 차트 호버 → 상세 수치 툴팁 +3. "상세 리포트 다운로드" → PDF 생성 + 다운로드 +4. "AI 개선 제안 보기" → AI개선제안 화면 + +**데이터 수집**: +- KT 채널 API (우리동네TV, 지니TV) +- SNS API (Instagram, Naver, Kakao) +- POS 시스템 (매출 데이터) +- 참여자 DB + +**성능 요구사항**: +- 5분 간격 실시간 데이터 수집 및 업데이트 + +--- + +#### 14-상세리포트 + +**관련 유저스토리**: 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 구성**: +- 표지 (이벤트명, 기간) +- 목차 +- 각 섹션별 상세 내용 + 그래프 +- 종합 의견 및 제언 + +--- + +### 4.7 AI 제안 + +#### 15-AI개선제안 + +**관련 유저스토리**: 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 학습**: +- 이벤트 결과 데이터 자동 학습 +- 성공 패턴 축적 +- 실패 요인 회피 로직 +- 개인화 추천 강화 + +--- + +## 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