# 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