shared-dg05-dodari/kt-event-marketing
7
0
Fork 0
mirror of https://github.com/ktds-dg0501/kt-event-marketing.git synced 2025-12-06 19:26:23 +00:00
Code Issues Packages Projects Releases Wiki Activity
kt-event-marketing/design/uiux/uiux.md
cherry2250 e68aaa3983 add uiux
2025-10-17 13:49:39 +09:00

1331 lines
71 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 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
Reference in New Issue View Git Blame Copy Permalink