1331 lines
71 KiB
Markdown
1331 lines
71 KiB
Markdown
# 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
|