# KT AI 기반 소상공인 이벤트 자동 생성 서비스 UI/UX 설계서
## 문서 정보
- **프로젝트명**: KT AI 기반 소상공인 이벤트 자동 생성 서비스
- **작성일**: 2025-10-21
- **버전**: 1.0
- **작성자**: UI/UX Designer
---
## 목차
1. [프로젝트 개요](#1-프로젝트-개요)
2. [설계 원칙](#2-설계-원칙)
3. [프로토타입 화면 목록](#3-프로토타입-화면-목록)
4. [화면 간 사용자 플로우](#4-화면-간-사용자-플로우)
5. [화면별 상세 설계](#5-화면별-상세-설계)
6. [화면 간 전환 및 네비게이션](#6-화면-간-전환-및-네비게이션)
7. [반응형 설계 전략](#7-반응형-설계-전략)
8. [접근성 보장 방안](#8-접근성-보장-방안)
9. [성능 최적화 방안](#9-성능-최적화-방안)
10. [변경 이력](#10-변경-이력)
---
## 1. 프로젝트 개요
### 1.1 서비스 목적
소상공인 및 중소기업의 이벤트 기획·제작·운영 역량과 시간 부족 문제를 해결하기 위한 AI 기반 이벤트 자동 생성 서비스
### 1.2 핵심 가치 제안
- **AI 트렌드 분석**: 업종/지역/시즌 트렌드 자동 분석
- **3가지 이벤트 추천**: 목적에 맞는 최적화된 이벤트 기획안
- **자동 콘텐츠 생성**: SNS 이미지 3가지 스타일 자동 생성
- **다중 채널 배포**: 우리동네TV, 링고비즈, 지니TV, SNS 동시 배포
- **실시간 성과 측정**: 통합 대시보드로 투자대비수익률 분석
### 1.3 타겟 사용자
- **주 사용자**: 소상공인 (음식점, 카페, 소매점 운영자)
- **사용 환경**: 모바일 중심 (60%), 데스크톱 (40%)
- **사용 시간**: 매장 운영 중 짧은 시간 활용 (5-10분 내 이벤트 생성)
### 1.4 마이크로서비스 구성
1. **User** - 사용자 인증 및 매장정보 관리
2. **Event** - 이벤트 기획 및 관리
3. **AI** - AI 기반 트렌드 분석 및 이벤트 추천
4. **Content** - SNS 콘텐츠 생성
5. **Distribution** - 다중 채널 배포 관리
6. **Participation** - 이벤트 참여 및 당첨자 관리
7. **Analytics** - 실시간 효과 측정 및 통합 대시보드
---
## 2. 설계 원칙
### 2.1 Mobile First 디자인 철학
#### 우선순위 중심 설계 (Priority-Driven Design)
- **Above the Fold 최적화**: 스크롤 없이 핵심 정보 확인
- **Single Column Layout**: 모바일에서 단일 컬럼으로 정보 수직 배치
- **Progressive Disclosure**: 상세 정보는 탭/아코디언으로 숨김
#### 점진적 향상 (Progressive Enhancement)
```
Mobile (320-767px) → 핵심 기능만 제공
Tablet (768-1023px) → 부가 정보 추가
Desktop (1024px+) → 전체 기능 및 상세 분석
```
#### 성능 최적화 (Performance Optimization)
- **First Contentful Paint**: < 1.5s
- **Time to Interactive**: < 3s
- **Lighthouse Score**: > 90
### 2.2 유저스토리 기반 설계
- **불필요한 추가 설계 금지**: 20개 유저스토리와 정확히 매칭
- **우선순위 반영**: M(Must) > S(Should) > C(Could) > W(Won't) 순서로 개발
### 2.3 사용성 원칙
- **3 Tap Rule**: 모든 주요 기능은 3번 탭 내 도달 가능
- **터치 영역**: 최소 44x44px (애플 권장)
- **가독성**: 최소 글꼴 크기 14px (모바일), 16px (데스크톱)
- **색상 대비**: WCAG AA 등급 이상 (4.5:1)
---
## 3. 프로토타입 화면 목록
### 총 17개 화면
| No | 화면명 | 유저스토리 | 우선순위 | 마이크로서비스 | Mobile 중요도 |
|----|--------|----------|---------|--------------|-------------|
| **인증 및 사용자 관리** |
| 01 | 로그인 | UFR-USER-020 | M/8 | User | ⭐⭐⭐ |
| 02 | 회원가입 | UFR-USER-010 | M/21 | User | ⭐⭐⭐ |
| 03 | 프로필편집 | UFR-USER-030 | C/8 | User | ⭐ |
| 04 | 로그아웃확인 | UFR-USER-040 | S/3 | User | ⭐ |
| **메인 및 대시보드** |
| 05 | 대시보드 | UFR-EVENT-010 | S/13 | Event | ⭐⭐⭐ |
| 06 | 이벤트목록 | UFR-EVENT-070 | S/13 | Event | ⭐⭐ |
| **이벤트 생성 플로우** |
| 07 | 이벤트목적선택 | UFR-EVENT-020 | M/5 | Event | ⭐⭐⭐ |
| 08 | AI이벤트추천 | UFR-EVENT-030 | M/34 | AI | ⭐⭐⭐ |
| 09 | SNS이미지생성 | UFR-CONT-010 | M/21 | Content | ⭐⭐⭐ |
| 10 | 콘텐츠편집 | UFR-CONT-020 | S/13 | Content | ⭐⭐ |
| 11 | 배포채널선택 | UFR-EVENT-040 | M/13 | Event | ⭐⭐ |
| 12 | 최종승인 | UFR-EVENT-050 | M/13 | Event | ⭐⭐⭐ |
| **이벤트 관리** |
| 13 | 이벤트상세 | UFR-EVENT-060 | S/13 | Event | ⭐⭐⭐ |
| 14 | 참여자목록 | UFR-PART-020 | S/8 | Participation | ⭐ |
| **참여자 관리** |
| 15 | 이벤트참여 | UFR-PART-010 | M/13 | Participation | ⭐⭐⭐ |
| 16 | 당첨자추첨 | UFR-PART-030 | M/13 | Participation | ⭐ |
| **성과 분석** |
| 17 | 실시간대시보드 | UFR-ANAL-010 | M/34 | Analytics | ⭐⭐ |
---
## 4. 화면 간 사용자 플로우
```mermaid
graph TD
Start([시작]) --> Login{로그인 여부}
%% 최초 사용자 플로우
Login -->|미로그인| SignUp[02-회원가입]
SignUp --> Login01[01-로그인]
Login01 --> Dashboard[05-대시보드]
Login -->|로그인됨| Dashboard
%% 메인 대시보드 액션
Dashboard --> EventList[06-이벤트목록]
Dashboard --> EventDetail[13-이벤트상세]
Dashboard --> Profile[03-프로필편집]
Dashboard --> CreateEvent[07-이벤트목적선택]
Dashboard --> Logout[04-로그아웃확인]
%% 이벤트 생성 플로우 (핵심)
CreateEvent --> AIRecommend[08-AI이벤트추천]
AIRecommend --> ImageGen[09-SNS이미지생성]
ImageGen --> ContentEdit[10-콘텐츠편집]
ContentEdit --> ChannelSelect[11-배포채널선택]
ChannelSelect --> FinalApproval[12-최종승인]
FinalApproval --> Dashboard
%% 이벤트 관리 플로우
EventDetail --> ParticipantList[14-참여자목록]
EventDetail --> DrawWinner[16-당첨자추첨]
EventDetail --> Analytics[17-실시간대시보드]
EventList --> EventDetail
%% 고객 참여 플로우 (별도)
External([외부 채널
SNS/TV/연결음]) --> Participate[15-이벤트참여]
Participate --> ThankYou([참여 완료])
%% 프로필 편집
Profile --> Dashboard
%% 로그아웃
Logout --> Login01
style Dashboard fill:#4A90E2,color:#fff
style CreateEvent fill:#7ED321,color:#fff
style AIRecommend fill:#7ED321,color:#fff
style FinalApproval fill:#7ED321,color:#fff
style Analytics fill:#F5A623,color:#fff
style Participate fill:#BD10E0,color:#fff
```
---
## 5. 화면별 상세 설계
### 5.1 인증 및 사용자 관리
#### 01-로그인
**개요**
- **목적**: 기존 사용자의 안전한 서비스 접근
- **관련 유저스토리**: UFR-USER-020
- **비즈니스 중요도**: M/8 (필수, 낮은 복잡도)
**주요 기능**
- 전화번호/비밀번호 입력
- 로그인 유지 옵션
- 비밀번호 찾기
- 회원가입 링크
**UI 구성요소**
*Mobile (320-767px)*
```
┌─────────────────────┐
│ │
│ [서비스 로고] │
│ │
│ ┌─────────────────┐ │
│ │ 전화번호 입력 │ │
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │ 비밀번호 입력 │ │
│ └─────────────────┘ │
│ │
│ ☐ 로그인 유지 │
│ │
│ ┌─────────────────┐ │
│ │ 로그인 버튼 │ │
│ └─────────────────┘ │
│ │
│ 비밀번호 찾기 | 회원가입 │
│ │
└─────────────────────┘
```
*Desktop (1024px+)*
```
┌─────────────────────────────────────┐
│ │
│ [서비스 로고 + 설명] │
│ │
│ ┌──────────────────────┐ │
│ │ 전화번호 입력 │ │
│ └──────────────────────┘ │
│ ┌──────────────────────┐ │
│ │ 비밀번호 입력 │ │
│ └──────────────────────┘ │
│ │
│ ☐ 로그인 유지 │
│ │
│ ┌──────────────────────┐ │
│ │ 로그인 버튼 │ │
│ └──────────────────────┘ │
│ │
│ 비밀번호 찾기 | 회원가입 │
│ │
└─────────────────────────────────────┘
```
**인터랙션**
1. **포커스 이동**: Enter 키로 다음 입력 필드 이동
2. **입력 검증**: 실시간 형식 검증 (전화번호 형식, 비밀번호 최소 길이)
3. **비밀번호 표시**: 눈 아이콘 클릭으로 비밀번호 보기/숨기기
4. **로그인 실패**: 오류 메시지 입력 필드 하단에 빨간색으로 표시
5. **로딩 상태**: 버튼 비활성화 + 스피너 표시
**반응형 처리**
- Mobile: 세로 전체 화면, 버튼 하단 고정
- Tablet: 중앙 카드 형태 (최대 너비 480px)
- Desktop: 좌측 브랜딩 + 우측 로그인 폼 (50:50 레이아웃)
**접근성**
- Label과 Input 연결 (for/id 속성)
- 오류 메시지는 aria-live="assertive"
- Tab 키 순서: 전화번호 → 비밀번호 → 로그인 유지 → 로그인 버튼
---
#### 02-회원가입
**개요**
- **목적**: 신규 소상공인 사용자 온보딩
- **관련 유저스토리**: UFR-USER-010
- **비즈니스 중요도**: M/21 (필수, 중간 복잡도)
**주요 기능**
- 다단계 폼 (3단계)
- Step 1: 기본 정보 (이름, 전화번호, 이메일, 비밀번호)
- Step 2: 매장 정보 (매장명, 업종, 주소, 영업시간)
- Step 3: 사업자번호 검증
- 진행 인디케이터
- 단계별 유효성 검증
- 사업자번호 국세청 DB 연동 검증
**UI 구성요소**
*Mobile (320-767px) - Step 1*
```
┌─────────────────────┐
│ ← 회원가입 │
├─────────────────────┤
│ ●──○──○ (진행바) │
│ │
│ 기본 정보 입력 │
│ │
│ ┌─────────────────┐ │
│ │ 이름 * │ │
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │ 전화번호 * │ │
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │ 이메일 * │ │
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │ 비밀번호 * │ │
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │ 비밀번호 확인 * │ │
│ └─────────────────┘ │
│ │
│ 비밀번호는 8자 이상, │
│ 영문/숫자/특수문자 │
│ 포함 │
│ │
│ ┌─────────────────┐ │
│ │ 다음 단계 │ │
│ └─────────────────┘ │
└─────────────────────┘
```
*Mobile (320-767px) - Step 2*
```
┌─────────────────────┐
│ ← 회원가입 │
├─────────────────────┤
│ ○──●──○ (진행바) │
│ │
│ 매장 정보 입력 │
│ │
│ ┌─────────────────┐ │
│ │ 매장명 * │ │
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │ 업종 선택 * │ │ (드롭다운)
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │ 주소 검색 * │ │
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │ 상세 주소 │ │
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │ 영업시간 │ │ (선택)
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ │
│ │ 다음 단계 │ │
│ └─────────────────┘ │
└─────────────────────┘
```
*Mobile (320-767px) - Step 3*
```
┌─────────────────────┐
│ ← 회원가입 │
├─────────────────────┤
│ ○──○──● (진행바) │
│ │
│ 사업자번호 검증 │
│ │
│ ┌─────────────────┐ │
│ │ 사업자번호 * │ │
│ │ 000-00-00000 │ │
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ │
│ │ 검증하기 │ │
│ └─────────────────┘ │
│ │
│ [검증 결과 영역] │
│ ✓ 정상 사업자 │
│ 업체명: 왕갈비통닭 │
│ 대표자: 홍길동 │
│ │
│ ┌─────────────────┐ │
│ │ 회원가입 완료 │ │
│ └─────────────────┘ │
└─────────────────────┘
```
**인터랙션**
1. **진행바**: 현재 단계 표시, 클릭으로 이전 단계 이동 가능
2. **필수 필드**: 별표(*) 표시, 미입력 시 다음 버튼 비활성화
3. **실시간 검증**:
- 전화번호: 010-0000-0000 형식 자동 포맷
- 이메일: @ 포함 여부 확인
- 비밀번호: 8자 이상, 영문/숫자/특수문자 포함 여부 표시
4. **주소 검색**: Daum 주소 API 팝업 또는 Bottom Sheet
5. **사업자번호 검증**:
- 로딩 인디케이터 (3초 이내)
- 성공: 녹색 체크 + 업체 정보 표시
- 실패: 빨간색 X + 오류 메시지
6. **뒤로 가기**: 이전 입력 값 유지
**반응형 처리**
- Mobile: 전체 화면, 단계별 스크롤
- Tablet: 중앙 카드 (최대 너비 600px)
- Desktop: 좌측 진행바 + 우측 폼 (30:70 레이아웃)
**접근성**
- 진행바는 aria-label="회원가입 진행 단계"
- 필수 필드는 aria-required="true"
- 검증 결과는 aria-live="polite"
---
#### 03-프로필편집
**개요**
- **목적**: 사용자 정보 수정
- **관련 유저스토리**: UFR-USER-030
- **비즈니스 중요도**: C/8 (선택, 낮은 복잡도)
**주요 기능**
- 기본 정보 수정 (이름, 전화번호, 이메일)
- 매장 정보 수정 (매장명, 업종, 주소, 영업시간)
- 비밀번호 변경 (현재 비밀번호 확인 필수)
- 변경사항 저장 확인 다이얼로그
**UI 구성요소**
*Mobile (320-767px)*
```
┌─────────────────────┐
│ ☰ 프로필 편집 👤│ ← Header 추가
├─────────────────────┤
│ │
│ ▼ 기본 정보 │
│ 이름: [홍길동 ] │
│ 전화번호: [010-...] │
│ 이메일: [hong@...]│
│ │
│ ▼ 매장 정보 │
│ 매장명: [왕갈비...]│
│ 업종: [음식점 ] │
│ 주소: [수원시...] │
│ 영업시간: [10:00~]│
│ │
│ ▼ 비밀번호 변경 │
│ 현재 비밀번호: [ ] │
│ 새 비밀번호: [ ] │
│ 비밀번호 확인: [ ] │
│ │
│ ┌─────────────────┐ │
│ │ 저장하기 │ │
│ └─────────────────┘ │
├─────────────────────┤
│ 홈 이벤트 분석 프로필│ ← Nav Bottom 추가
└─────────────────────┘
```
**인터랙션**
1. **아코디언**: 각 섹션 클릭으로 접기/펼치기
2. **전화번호 변경**: 재인증 다이얼로그 표시 (SMS 인증)
3. **저장 확인**: "변경사항을 저장하시겠습니까?" 다이얼로그
4. **취소 확인**: 변경사항이 있을 경우 "저장하지 않고 나가시겠습니까?" 다이얼로그
5. **성공 토스트**: "프로필이 성공적으로 업데이트되었습니다" (2초)
**반응형 처리**
- Mobile: 전체 화면, 아코디언 형태
- Tablet/Desktop: 중앙 카드 (최대 너비 720px), 저장 버튼 하단 고정
---
#### 04-로그아웃확인
**개요**
- **목적**: 안전한 로그아웃
- **관련 유저스토리**: UFR-USER-040
- **비즈니스 중요도**: S/3 (권장, 낮은 복잡도)
**주요 기능**
- 로그아웃 확인 다이얼로그
- 세션 종료
- 로그인 화면 이동
**UI 구성요소**
*Mobile (320-767px)*
```
┌─────────────────────┐
│ │
│ [어두운 배경] │
│ │
│ ┌─────────────────┐ │
│ │ 로그아웃 │ │
│ ├─────────────────┤ │
│ │ │ │
│ │ 로그아웃 하시겠 │ │
│ │ 습니까? │ │
│ │ │ │
│ ├─────────────────┤ │
│ │ ┌─────┐┌─────┐│ │
│ │ │취소 ││확인 ││ │
│ │ └─────┘└─────┘│ │
│ └─────────────────┘ │
│ │
└─────────────────────┘
```
**인터랙션**
1. **다이얼로그 표시**: 프로필 메뉴 → 로그아웃 선택
2. **확인**: 세션 종료 + 로그인 화면 이동 (애니메이션)
3. **취소**: 다이얼로그 닫기, 이전 화면 유지
4. **배경 클릭**: 취소와 동일
**반응형 처리**
- Mobile: Bottom Sheet 형태
- Tablet/Desktop: 중앙 Modal Dialog (최대 너비 400px)
---
### 5.2 메인 및 대시보드
#### 05-대시보드
**개요**
- **목적**: 메인 허브, 이벤트 현황 한눈에 파악
- **관련 유저스토리**: UFR-EVENT-010
- **비즈니스 중요도**: S/13 (권장, 중간 복잡도)
**주요 기능**
- 진행중 이벤트 3개 표시 (모바일)
- 예정/종료 이벤트 개수
- "새 이벤트 만들기" 버튼 (FAB)
- Bottom Navigation (홈, 이벤트, 분석, 프로필)
**UI 구성요소**
*Mobile (320-767px)*
```
┌─────────────────────┐
│ ☰ 대시보드 👤 │ ← Header
├─────────────────────┤
│ │
│ 안녕하세요, 홍길동님!│
│ │
│ ┌─────────────────┐ │
│ │ 진행중 3 | 예정 1│ │
│ │ 종료 5 | 총 9개 │ │
│ └─────────────────┘ │
│ │
│ 진행중 이벤트 │
│ ┌─────────────────┐ │
│ │ 신규고객 이벤트 │ │
│ │ 참여자: 128명 │ │
│ │ D-5 종료까지 │ │
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │ 재방문 이벤트 │ │
│ │ 참여자: 56명 │ │
│ │ D-12 종료까지 │ │
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │ 매출증대 이벤트 │ │
│ │ 참여자: 89명 │ │
│ │ D-20 종료까지 │ │
│ └─────────────────┘ │
│ │
│ 더보기 > │
│ │
├─────────────────────┤
│ 홈 이벤트 분석 프로필 │ ← Nav Bottom
└─────────────────────┘
[+] ← FAB
```
*Desktop (1024px+)*
```
┌─────────────────────────────────────┐
│ [로고] 대시보드 [프로필] │
├─────────────────────────────────────┤
│ [사이드바] 안녕하세요, 홍길동님! │
│ ┌────────────────────────┐│
│ • 대시보드 │ 진행중 5 | 예정 2 | 종료 10 ││
│ • 이벤트 └────────────────────────┘│
│ • 분석 │
│ • 프로필 진행중 이벤트 │
│ ┌──────┐┌──────┐┌──────┐│
│ │이벤트1││이벤트2││이벤트3││
│ │참여128││참여56││참여89││
│ │D-5 ││D-12 ││D-20 ││
│ └──────┘└──────┘└──────┘│
│ ┌──────┐┌──────┐ │
│ │이벤트4││이벤트5│ │
│ │... ││... │ │
│ └──────┘└──────┘ │
│ │
│ 예정 이벤트 │
│ ┌──────┐┌──────┐ │
│ │이벤트1││이벤트2│ │
│ └──────┘└──────┘ │
│ │
└─────────────────────────────────────┘
```
**인터랙션**
1. **이벤트 카드 클릭**: 이벤트 상세 화면 이동
2. **FAB 클릭**: 이벤트 목적 선택 화면 이동
3. **더보기**: 이벤트 목록 화면 이동
4. **Bottom Navigation**: 메뉴 전환 (애니메이션)
**반응형 처리**
- Mobile: 카드 1열, Bottom Navigation
- Tablet: 카드 2열, Bottom Navigation
- Desktop: 카드 3열, Side Navigation
---
#### 06-이벤트목록
**개요**
- **목적**: 전체 이벤트 목록 조회 및 관리
- **관련 유저스토리**: UFR-EVENT-070
- **비즈니스 중요도**: S/13 (권장, 중간 복잡도)
**주요 기능**
- 전체 이벤트 목록 테이블
- 상태별 필터 (전체/진행중/예정/종료)
- 기간별 필터 (최근 1개월/3개월/6개월/1년/전체)
- 이벤트명 검색
- 정렬 기능 (최신순/참여자순/투자대비수익률순)
**UI 구성요소**
*Mobile (320-767px)*
```
┌─────────────────────┐
│ ☰ 이벤트 목록 👤│ ← Header
├─────────────────────┤
│ [검색창] │
│ 🔍 이벤트명 검색... │
│ │
│ 📂 필터 │
│ [전체▼] [최근1개월▼]│
│ │
│ 정렬: [최신순 ▼] │
│ │
│ ┌─────────────────┐ │
│ │ 신규고객 이벤트 │ │
│ │ 진행중 | D-5 │ │
│ │ 참여 128명 │ │
│ │ 투자대비수익률: 450%│ │
│ │ 2025-11-01~15 │ │
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ │
│ │ 재방문 이벤트 │ │
│ │ 진행중 | D-12 │ │
│ │ 참여 56명 │ │
│ │ 투자대비수익률: 320%│ │
│ │ 2025-11-05~20 │ │
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ │
│ │ 매출증대 이벤트 │ │
│ │ 종료 │ │
│ │ 참여 234명 │ │
│ │ 투자대비수익률: 580%│ │
│ │ 2025-10-15~31 │ │
│ └─────────────────┘ │
│ │
│ [더보기...] │
│ │
├─────────────────────┤
│ 홈 이벤트 분석 프로필│ ← Nav Bottom
└─────────────────────┘
```
*Desktop (1024px+)*
```
┌─────────────────────────────────────┐
│ [로고] 이벤트 목록 [프로필] │
├─────────────────────────────────────┤
│ [사이드바] 🔍 [검색창] 📂 필터│
│ 이벤트명 검색... [전체▼] │
│ • 대시보드 [최근1개월▼]│
│ • 이벤트 정렬: [최신순 ▼] │
│ • 분석 ────────────────────────│
│ • 프로필 │이벤트명│기간│상태│참여자│투자대비수익률│
│ ├──────┼────┼──┼────┼────┤
│ │신규고객│11/1~│진행│128명│450% │
│ │이벤트 │11/15│중 │ │ │
│ ├──────┼────┼──┼────┼────┤
│ │재방문 │11/5~│진행│56명 │320% │
│ │이벤트 │11/20│중 │ │ │
│ ├──────┼────┼──┼────┼────┤
│ │매출증대│10/15│종료│234명│580% │
│ │이벤트 │~10/31│ │ │ │
│ ├──────┼────┼──┼────┼────┤
│ │... │... │... │... │... │
│ └──────┴────┴──┴────┴────┘
│ │
│ [1] 2 3 4 5 ... 10 > │
└─────────────────────────────────────┘
```
**인터랙션**
1. **검색**: 입력 중 실시간 검색 결과 업데이트
2. **필터 적용**: 상태/기간 선택 시 즉시 목록 갱신
3. **정렬**: 드롭다운 선택 시 정렬 기준 변경
4. **카드/행 클릭**: 이벤트 상세 화면으로 이동
5. **페이지네이션**: 페이지당 20개 표시
**반응형 처리**
- Mobile: 카드 형태 1열 표시
- Tablet: 카드 형태 2열 표시
- Desktop: 테이블 형태 표시
---
### 5.3 이벤트 생성 플로우
#### 07-이벤트목적선택
**개요**
- **목적**: 이벤트 목적 선택으로 AI 추천 최적화
- **관련 유저스토리**: UFR-EVENT-020
- **비즈니스 중요도**: M/5 (필수, 낮은 복잡도)
**주요 기능**
- 4가지 이벤트 목적 선택
- 각 목적별 설명 및 예상 효과 제공
- 목적 선택 후 AI 추천 자동 진행
**UI 구성요소**
*Mobile (320-767px)*
```
┌─────────────────────┐
│ ☰ 이벤트 목적 선택 👤│ ← Header
├─────────────────────┤
│ │
│ 이벤트 목적을 선택해 │
│ 주세요 │
│ │
│ ┌─────────────────┐ │
│ │ ○ 신규 고객 유치 │ │
│ │ ────────────────│ │
│ │ 새로운 고객 확보 │ │
│ │ 예상: 참여율 높음│ │
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ │
│ │ ○ 재방문 유도 │ │
│ │ ────────────────│ │
│ │ 기존 고객 재방문 │ │
│ │ 예상: 충성도 향상│ │
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ │
│ │ ○ 매출 증대 │ │
│ │ ────────────────│ │
│ │ 단기 매출 향상 │ │
│ │ 예상: 즉각적 효과│ │
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ │
│ │ ○ 인지도 향상 │ │
│ │ ────────────────│ │
│ │ 브랜드 인지도 제고│ │
│ │ 예상: 장기적 효과│ │
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ │
│ │ 다음 단계 │ │ ← 선택 후 활성화
│ └─────────────────┘ │
├─────────────────────┤
│ 홈 이벤트 분석 프로필 │ ← Nav Bottom
└─────────────────────┘
```
*Tablet/Desktop (768px+)*
```
┌─────────────────────────────────────┐
│ ← 이벤트 목적 선택 │
├─────────────────────────────────────┤
│ │
│ 이벤트 목적을 선택해주세요 │
│ │
│ ┌──────────┐┌──────────┐ │
│ │○신규고객 ││○재방문 │ │
│ │ 유치 ││ 유도 │ │
│ │──────────││──────────│ │
│ │새로운 고객││기존 고객 │ │
│ │확보 ││재방문 │ │
│ │참여율 높음││충성도 향상│ │
│ └──────────┘└──────────┘ │
│ │
│ ┌──────────┐┌──────────┐ │
│ │○매출 ││○인지도 │ │
│ │ 증대 ││ 향상 │ │
│ │──────────││──────────│ │
│ │단기 매출 ││브랜드 │ │
│ │향상 ││인지도 제고│ │
│ │즉각적효과││장기적효과│ │
│ └──────────┘└──────────┘ │
│ │
│ ┌──────────┐ │
│ │ 다음 단계 │ │
│ └──────────┘ │
└─────────────────────────────────────┘
```
**인터랙션**
1. **목적 선택**: 라디오 버튼, 1개만 선택 가능
2. **카드 클릭**: 전체 카드 영역 클릭으로 선택
3. **다음 단계**: 선택 후 버튼 활성화, AI 이벤트 추천 화면 이동
4. **애니메이션**: 선택 시 카드 하이라이트 효과
**반응형 처리**
- Mobile: 카드 1열 세로 배치
- Tablet/Desktop: 카드 2×2 그리드 배치
---
#### 08-AI이벤트추천
**개요**
- **목적**: AI 트렌드 분석 + 3가지 이벤트 추천
- **관련 유저스토리**: UFR-EVENT-030 (통합)
- **비즈니스 중요도**: M/34 (필수, 최고 복잡도)
**주요 기능**
- 트렌드 분석 결과 표시 (업종/지역/시즌)
- 3가지 예산 수준별 이벤트 추천 (저비용/중비용/고비용)
- 각 예산별 온/오프라인 방식 2가지 추천 (온라인 1개, 오프라인 1개)
- 제목/경품 간편 수정 (인라인 편집)
- 로딩 인디케이터 (10초 이내)
**UI 구성요소**
*Mobile (320-767px) - 로딩 상태*
```
┌─────────────────────┐
│ ☰ AI 이벤트 추천 👤│ ← Header 추가
├─────────────────────┤
│ │
│ │
│ [AI 아이콘 애니메이션]│
│ │
│ AI가 트렌드를 분석하고│
│ 최적의 이벤트를 │
│ 추천하고 있어요... │
│ │
│ [진행 바 50%] │
│ │
│ │
├─────────────────────┤
│ 홈 이벤트 분석 프로필│ ← Nav Bottom 추가
└─────────────────────┘
```
*Mobile (320-767px) - 완료 상태*
```
┌─────────────────────┐
│ ☰ AI 이벤트 추천 👤│ ← Header
├─────────────────────┤
│ ▼ 트렌드 분석 결과 │
│ (접기/펼치기) │
│ │
│ 예산별 추천 이벤트 │
│ (각 예산별 2가지 방식)│
│ │
│ ┌─────────────────┐ │
│ │ 💰 옵션 1: 저비용│ │
│ │ ────────────────│ │
│ │ 🌐 온라인 방식 │ │
│ │ [SNS 팔로우..✏] │ │ ← 제목 인라인 편집
│ │ 경품: [커피 쿠폰✏]│ │ ← 경품 인라인 편집
│ │ 참여: SNS 팔로우 │ │
│ │ 예상: 180명 │ │
│ │ 비용: 25만원 │ │
│ │ 투자대비수익률: 520%│ │
│ │ ○ 선택 │ │
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ │
│ │ 🏪 오프라인 방식 │ │
│ │ [전화번호 등록..✏]│ │
│ │ 경품: [커피 쿠폰✏]│ │
│ │ 참여: 전화번호 │ │
│ │ 예상: 150명 │ │
│ │ 비용: 30만원 │ │
│ │ 투자대비수익률: 450%│ │
│ │ ○ 선택 │ │
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ │
│ │ 💳 옵션 2: 중비용│ │
│ │ ────────────────│ │
│ │ 🌐 온라인 방식 │ │
│ │ [인스타 댓글..✏]│ │
│ │ 경품: [상품권1만✏]│ │
│ │ 참여: SNS 댓글 │ │
│ │ 예상: 250명 │ │
│ │ 비용: 48만원 │ │
│ │ 투자대비수익률: 380%│ │
│ │ ○ 선택 │ │
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ │
│ │ 🏪 오프라인 방식 │ │
│ │ [재방문 이벤트✏]│ │
│ │ 경품: [상품권1만✏]│ │
│ │ 참여: 영수증제출 │ │
│ │ 예상: 200명 │ │
│ │ 비용: 50만원 │ │
│ │ 투자대비수익률: 320%│ │
│ │ ○ 선택 │ │
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ │
│ │ 💎 옵션 3: 고비용│ │
│ │ ────────────────│ │
│ │ 🌐 온라인 방식 │ │
│ │ [유튜브 구독..✏]│ │
│ │ 경품: [상품권5만✏]│ │
│ │ 참여: 유튜브구독 │ │
│ │ 예상: 400명 │ │
│ │ 비용: 95만원 │ │
│ │ 투자대비수익률: 280%│ │
│ │ ○ 선택 │ │
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ │
│ │ 🏪 오프라인 방식 │ │
│ │ [VIP초대 이벤트✏]│ │
│ │ 경품: [고급상품✏]│ │
│ │ 참여: VIP 초대장│ │
│ │ 예상: 300명 │ │
│ │ 비용: 100만원 │ │
│ │ 투자대비수익률: 250%│ │
│ │ ○ 선택 │ │
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ │
│ │ 다음 단계 │ │ ← 선택 후 활성화
│ └─────────────────┘ │
├─────────────────────┤
│ 홈 이벤트 분석 프로필│ ← Nav Bottom
└─────────────────────┘
```
*트렌드 분석 결과 펼침 상태*
```
┌─────────────────────┐
│ ▼ 트렌드 분석 결과 │
│ ────────────────────│
│ │
│ 📊 업종 트렌드 │
│ • 최근 성공 유형: │
│ 할인 쿠폰 (참여율 │
│ 35% ↑) │
│ • 선호 경품: │
│ 커피/상품권 │
│ • 효과적 참여방법: │
│ 전화번호 > SNS │
│ │
│ 📍 지역 특성 │
│ • 지역 성공률: │
│ 수원 지역 28% ↑ │
│ • 지역 고객 특성: │
│ 20-30대 여성 주력│
│ │
│ 🗓️ 시즌 특성 │
│ • 추천 이벤트: │
│ 봄 신메뉴 프로모션│
│ • 특별 시즌: │
│ 화이트데이 (3/14) │
│ │
└─────────────────────┘
```
**인터랙션**
1. **로딩**:
- AI 아이콘 애니메이션 (회전)
- 진행 바 0% → 100% (10초)
- 완료 시 부드러운 전환
2. **트렌드 분석 접기/펼치기**: 아코디언 형태
3. **제목/경품 편집**:
- 연필 아이콘 클릭 → 인라인 편집 모드
- 최대 글자수 표시 (제목 50자, 경품 30자)
- Enter/저장 시 변경사항 저장
4. **옵션 선택**: 라디오 버튼, 1개만 선택 가능
5. **다음 단계**: 선택 후 버튼 활성화, 콘텐츠 생성 화면 이동
**반응형 처리**
- Mobile: 세로 스크롤, 카드 1열
- Tablet: 카드 1열 유지, 너비 증가
- Desktop: 좌측 트렌드 분석 (30%) + 우측 추천안 (70%)
---
#### 09-SNS이미지생성
**개요**
- **목적**: 3가지 스타일 SNS 이미지 자동 생성
- **관련 유저스토리**: UFR-CONT-010
- **비즈니스 중요도**: M/21 (필수, 중간 복잡도)
**주요 기능**
- 이벤트 정보 기반 이미지 생성
- 3가지 스타일 제공 (심플/화려/트렌디)
- 생성 중 로딩 (5초 이내)
- 이미지 풀스크린 미리보기
**UI 구성요소**
*Mobile (320-767px) - 생성 중*
```
┌─────────────────────┐
│ ☰ SNS 이미지 생성 👤│ ← Header 추가
├─────────────────────┤
│ │
│ [AI 이미지 생성 중] │
│ │
│ 딥러닝 모델이 │
│ 이벤트에 어울리는 │
│ 이미지를 생성하고 │
│ 있어요... │
│ │
│ [스피너 애니메이션] │
│ │
│ 예상 시간: 5초 │
│ │
├─────────────────────┤
│ 홈 이벤트 분석 프로필│ ← Nav Bottom 추가
└─────────────────────┘
```
*Mobile (320-767px) - 완료*
```
┌─────────────────────┐
│ ☰ SNS 이미지 생성 👤│ ← Header
├─────────────────────┤
│ 스타일 1: 심플 │
│ ┌─────────────────┐ │
│ │ │ │
│ │ [이미지 미리보기]│ │
│ │ │ │
│ │ [이벤트 제목] │ │
│ │ [경품 정보] │ │
│ │ │ │
│ └─────────────────┘ │
│ ○ 선택 | 🔍 크게보기 │
│ │
│ 스타일 2: 화려 │
│ ┌─────────────────┐ │
│ │ [이미지...] │ │
│ └─────────────────┘ │
│ ○ 선택 | 🔍 크게보기 │
│ │
│ 스타일 3: 트렌디 │
│ ┌─────────────────┐ │
│ │ [이미지...] │ │
│ └─────────────────┘ │
│ ○ 선택 | 🔍 크게보기 │
│ │
│ ┌─────────────────┐ │
│ │ 건너뛰기 | 다음 │ │
│ └─────────────────┘ │
├─────────────────────┤
│ 홈 이벤트 분석 프로필│ ← Nav Bottom
└─────────────────────┘
```
**인터랙션**
1. **생성 로딩**:
- Skeleton Screen (이미지 영역)
- 스피너 + 진행 메시지
2. **이미지 선택**: 라디오 버튼, 1개 선택
3. **크게보기**: 풀스크린 모달, 핀치 줌 가능
4. **건너뛰기**: 이미지 없이 다음 단계 (콘텐츠 편집 스킵)
5. **다음**: 선택한 이미지로 콘텐츠 편집 화면 이동
**반응형 처리**
- Mobile: 이미지 1열, 세로 스크롤
- Tablet: 이미지 2열 (1+2 또는 3열)
- Desktop: 이미지 3열 가로 배치
---
#### 10-콘텐츠편집
**개요**
- **목적**: 생성된 SNS 이미지 커스터마이징
- **관련 유저스토리**: UFR-CONT-020
- **비즈니스 중요도**: S/13 (권장, 중간 복잡도)
**주요 기능**
- 텍스트 수정 (제목, 경품, 참여안내)
- 색상 조정 (배경색, 텍스트색, 강조색)
- 로고 위치 조정
- 실시간 미리보기
**UI 구성요소**
*Mobile (320-767px)*
```
┌─────────────────────┐
│ ☰ 콘텐츠 편집 👤│ ← Header
├─────────────────────┤
│ 미리보기 │
│ ┌─────────────────┐ │
│ │ │ │
│ │ [실시간 미리보기]│ │
│ │ │ │
│ │ [수정된 내용 │ │
│ │ 즉시 반영] │ │
│ │ │ │
│ └─────────────────┘ │
│ │
│ 📝 텍스트 편집 │
│ 제목: │
│ [신규고객 이벤트...] │
│ │
│ 경품: │
│ [커피 쿠폰 100매...]│
│ │
│ 참여안내: │
│ [전화번호 입력...] │
│ │
│ 🎨 색상 조정 │
│ 배경색: [■ 선택] │
│ 텍스트: [■ 선택] │
│ 강조색: [■ 선택] │
│ │
│ 🏢 로고 위치 │
│ [◀ 위치이동 ▶] │
│ [- 크기조절 +] │
│ │
│ ┌─────────────────┐ │
│ │ 저장 | 다음 단계 │ │
│ └─────────────────┘ │
├─────────────────────┤
│ 홈 이벤트 분석 프로필 │ ← Nav Bottom
└─────────────────────┘
```
*Desktop (1024px+)*
```
┌─────────────────────────────────────┐
│ ← 콘텐츠 편집 [프로필]│
├─────────────────────────────────────┤
│ [사이드바] ┌────────┐ ┌──────────┐│
│ │미리보기 │ │편집 패널 ││
│ • 대시보드 │ │ │ ││
│ • 이벤트 │ │ │📝 텍스트 ││
│ • 분석 │[실시간 │ │제목: ││
│ • 프로필 │ 미리보기]│ │[입력창] ││
│ │ │ │ ││
│ │ │ │경품: ││
│ │ │ │[입력창] ││
│ │ │ │ ││
│ │ │ │🎨 색상 ││
│ │ │ │배경: [■] ││
│ │ │ │텍스트:[■] ││
│ │ │ │강조: [■] ││
│ │ │ │ ││
│ │ │ │🏢 로고 ││
│ │ │ │위치/크기 ││
│ └────────┘ └──────────┘│
│ │
│ ┌────────┐ ┌──────────┐ │
│ │ 저장 │ │다음 단계 │ │
│ └────────┘ └──────────┘ │
└─────────────────────────────────────┘
```
**인터랙션**
1. **텍스트 편집**: 입력 시 실시간 미리보기 업데이트
2. **색상 선택**: 컬러 피커 팝업, 선택 시 즉시 반영
3. **로고 위치**: 드래그 앤 드롭 또는 화살표 버튼
4. **저장**: 편집 내용 저장, 현재 화면 유지
5. **다음 단계**: 배포 채널 선택 화면으로 이동
**반응형 처리**
- Mobile: 세로 배치 (미리보기 → 편집 옵션)
- Tablet: 세로 배치 유지, 입력 영역 확대
- Desktop: 좌우 분할 (미리보기 60% + 편집 패널 40%)
---
#### 11-배포채널선택
**개요**
- **목적**: 다중 채널 선택 및 배포 설정
- **관련 유저스토리**: UFR-EVENT-040
- **비즈니스 중요도**: M/13 (필수, 중간 복잡도)
**주요 기능**
- 4가지 배포 채널 선택 (우리동네TV, 링고비즈, 지니TV, SNS)
- 채널별 예상 노출 수 표시
- 채널별 비용 안내
- 총 예상 비용 합계
**UI 구성요소**
*Mobile (320-767px)*
```
┌─────────────────────┐
│ ☰ 배포 채널 선택 👤│ ← Header
├─────────────────────┤
│ │
│ 배포 채널을 선택해 │
│ 주세요 (최소 1개) │
│ │
│ ┌─────────────────┐ │
│ │ ☑ 우리동네TV │ │
│ │ ────────────────│ │
│ │ 반경: [500m ▼] │ │
│ │ 시간: [저녁 ▼] │ │
│ │ 예상: 5만명 노출 │ │
│ │ 비용: 8만원 │ │
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ │
│ │ ☑ 링고비즈 │ │
│ │ ────────────────│ │
│ │ 매장 전화번호: │ │
│ │ 010-1234-5678 │ │
│ │ 연결음 업데이트 │ │
│ │ 비용: 무료 │ │
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ │
│ │ ☐ 지니TV 광고 │ │
│ │ ────────────────│ │
│ │ 지역: [수원 ▼] │ │
│ │ 시간: [전체 ▼] │ │
│ │ 예산: [입력...] │ │
│ │ 예상: 계산중... │ │
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ │
│ │ ☑ SNS │ │
│ │ ────────────────│ │
│ │ ☑ Instagram │ │
│ │ ☑ Naver Blog │ │
│ │ ☐ Kakao Channel │ │
│ │ 예약: [즉시 ▼] │ │
│ │ 비용: 무료 │ │
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ │
│ │ 총 예상 비용: │ │
│ │ 8만원 │ │
│ │ 총 예상 노출: │ │
│ │ 5만명+ │ │
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ │
│ │ 다음 단계 │ │
│ └─────────────────┘ │
├─────────────────────┤
│ 홈 이벤트 분석 프로필 │ ← Nav Bottom
└─────────────────────┘
```
*Desktop (1024px+)*
```
┌─────────────────────────────────────┐
│ ← 배포 채널 선택 [프로필]│
├─────────────────────────────────────┤
│ [사이드바] │
│ 배포 채널을 선택해주세요 │
│ • 대시보드 (최소 1개 이상) │
│ • 이벤트 ─────────────────────────│
│ • 분석 ┌───────┐┌───────┐ │
│ • 프로필 │☑우리동네││☑링고비즈│ │
│ │ TV ││ │ │
│ │───────││───────│ │
│ │반경: ││전화번호││ │
│ │[500m▼]││자동연동││ │
│ │시간: ││ │ │
│ │[저녁▼]││연결음 ││ │
│ │5만명 ││업데이트││ │
│ │8만원 ││무료 ││ │
│ └───────┘└───────┘ │
│ │
│ ┌───────┐┌───────┐ │
│ │☐지니TV││☑ SNS │ │
│ │ 광고 ││ │ │
│ │───────││───────│ │
│ │지역: ││☑Insta │ │
│ │[수원▼]││☑Naver │ │
│ │시간: ││☐Kakao │ │
│ │[전체▼]││예약:즉시│ │
│ │예산: ││무료 │ │
│ │[입력...]││ │ │
│ └───────┘└───────┘ │
│ │
│ ┌────────────────┐ │
│ │총 예상 비용: 8만원│ │
│ │총 예상 노출: 5만명+│ │
│ └────────────────┘ │
│ │
│ ┌──────────┐ │
│ │다음 단계 │ │
│ └──────────┘ │
└─────────────────────────────────────┘
```
**인터랙션**
1. **채널 선택**: 체크박스, 다중 선택 가능
2. **옵션 설정**: 각 채널별 세부 옵션 입력
3. **실시간 계산**: 선택/옵션 변경 시 비용/노출 수 자동 업데이트
4. **다음 단계**: 최소 1개 선택 시 버튼 활성화, 최종 승인 화면 이동
**반응형 처리**
- Mobile: 카드 1열 세로 배치
- Tablet: 카드 2열 배치
- Desktop: 카드 2×2 그리드 배치
---
#### 12-최종승인
**개요**
- **목적**: 모든 설정 최종 확인 및 승인
- **관련 유저스토리**: UFR-EVENT-050
- **비즈니스 중요도**: M/13 (필수, 중간 복잡도)
**주요 기능**
- 이벤트 정보 요약 (제목, 경품, 기간)
- SNS 이미지 미리보기
- 배포 채널 목록
- 수정 버튼 (각 섹션별 이전 단계 이동)
- 승인 및 배포 버튼
**UI 구성요소**
*Mobile (320-767px)*
```
┌─────────────────────┐
│ ☰ 최종 승인 👤│ ← Header 추가
├─────────────────────┤
│ │
│ ✓ 이벤트 정보 [수정]│
│ ────────────────────│
│ • 제목: 신규고객... │
│ • 경품: 커피 쿠폰 │
│ • 기간: 2025-11-01 ~ │
│ 2025-11-15 │
│ • 참여방법: 전화번호 │
│ │
│ ✓ SNS 이미지 [수정]│
│ ────────────────────│
│ ┌─────────────────┐ │
│ │ [선택한 이미지] │ │
│ │ (스타일 1: 심플) │ │
│ └─────────────────┘ │
│ │
│ ✓ 배포 채널 [수정]│
│ ────────────────────│
│ • 우리동네TV (예상 5만명)│
│ • 링고비즈 (예상 3만명) │
│ • SNS (네이버, 카카오) │
│ │
│ ✓ 예상 성과 │
│ ────────────────────│
│ • 총 참여자: 150명 │
│ • 총 비용: 30만원 │
│ • 투자대비수익률: 450%│
│ │
│ ⚠️ 주의사항 │
│ 배포 후에는 이벤트 제목,│
│ 경품, 기간을 변경할 수 │
│ 없습니다. │
│ │
│ ┌─────────────────┐ │
│ │ 승인 및 배포 │ │
│ └─────────────────┘ │
├─────────────────────┤
│ 홈 이벤트 분석 프로필│ ← Nav Bottom 추가
└─────────────────────┘
```
**인터랙션**
1. **수정 버튼**: 각 섹션별 이전 단계 화면 이동
2. **승인 확인**: "이벤트를 승인하고 배포하시겠습니까?" 다이얼로그
3. **승인 완료**:
- 로딩 인디케이터 (배포 중...)
- 성공 토스트: "이벤트가 성공적으로 배포되었습니다"
- 대시보드 화면 이동 + 새 이벤트 카드 추가
**반응형 처리**
- Mobile: 전체 화면, 세로 스크롤
- Tablet/Desktop: 중앙 카드 (최대 너비 800px), 좌우 여백
---
#### 13-이벤트상세
**개요**
- **목적**: 진행 중인 이벤트 상세 정보 조회
- **관련 유저스토리**: UFR-EVENT-060
- **비즈니스 중요도**: S/13 (권장, 중간 복잡도)
**주요 기능**
- 이벤트 기본 정보 표시
- 실시간 통계 (참여자, 노출수, 조회수, 공유수)
- 배포 채널 현황
- 최근 참여자 10명
- 이벤트 관리 액션 (수정, 종료)
**UI 구성요소**
*Mobile (320-767px)*
```
┌─────────────────────┐
│ ☰ 이벤트 상세 👤│ ← Header
├─────────────────────┤
│ 신규고객 유치 이벤트 │
│ 진행중 | D-5 │
│ │
│ 📊 실시간 통계 │
│ ┌────────┐┌────────┐│
│ │참여자수 ││노출수 ││
│ │ 128명 ││5.2만회 ││
│ └────────┘└────────┘│
│ ┌────────┐┌────────┐│
│ │조회수 ││공유수 ││
│ │ 3.8만회││ 156회 ││
│ └────────┘└────────┘│
│ │
│ 📋 기본 정보 │
│ 이벤트 기간: │
│ 2025-11-01~11-15 │
│ │
│ 경품: │
│ 커피 쿠폰 100매 │
│ │
│ 참여 방법: │
│ 전화번호 입력 │
│ │
│ 📺 배포 채널 현황 │
│ ✅ 우리동네TV │
│ 노출: 4.8만회 │
│ ✅ 링고비즈 │
│ 연결음 업데이트됨 │
│ ✅ SNS │
│ Instagram: 220회 │
│ Naver: 180회 │
│ │
│ 👥 최근 참여자 │
│ • 김** (010-****-1234)│
│ • 이** (010-****-5678)│
│ • 박** (010-****-9012)│
│ ... │
│ [전체 참여자 보기 >] │
│ │
│ ┌─────────────────┐ │
│ │ 효과측정 대시보드│ │
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │ 이벤트 수정 │ │
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │ 이벤트 종료 │ │
│ └─────────────────┘ │
├─────────────────────┤
│ 홈 이벤트 분석 프로필 │ ← Nav Bottom
└─────────────────────┘
```
*Desktop (1024px+)*
```
┌─────────────────────────────────────┐
│ ← 이벤트 상세 [프로필]│
├─────────────────────────────────────┤
│ [사이드바] 신규고객 유치 이벤트 │
│ 진행중 | D-5 │
│ • 대시보드 ─────────────────────────│
│ • 이벤트 📊 실시간 통계 │
│ • 분석 ┌──────┐┌──────┐┌──────┐│
│ • 프로필 │참여자 ││노출수 ││조회수 ││
│ │128명 ││5.2만회││3.8만회││
│ └──────┘└──────┘└──────┘│
│ ┌──────┐ │
│ │공유수 │ │
│ │156회 │ │
│ └──────┘ │
│ │
│ ┌────────────┐┌──────────┐│
│ │📋 기본 정보 ││📺 배포현황││
│ │ ││ ││
│ │기간: ││✅우리동네TV││
│ │11/1~11/15 ││ 4.8만회 ││
│ │ ││ ││
│ │경품: ││✅링고비즈││
│ │커피쿠폰100 ││ 업데이트││
│ │ ││ ││
│ │참여: ││✅SNS ││
│ │전화번호 ││ Insta:220││
│ │ ││ Naver:180││
│ └────────────┘└──────────┘│
│ │
│ 👥 최근 참여자 [전체보기 >] │
│ 김** (010-****-1234) │
│ 이** (010-****-5678) │
│ 박** (010-****-9012) │
│ ... │
│ │
│ ┌──────┐┌──────┐┌──────┐ │
│ │효과측정││수정 ││종료 │ │
│ └──────┘└──────┘└──────┘ │
└─────────────────────────────────────┘
```
**인터랙션**
1. **실시간 통계**: 5분 간격 자동 갱신
2. **전체 참여자 보기**: 참여자 목록 화면으로 이동
3. **효과측정 대시보드**: 실시간 대시보드 화면으로 이동
4. **이벤트 수정**: 제한적 수정 가능 (배포 후 제목/경품 수정 불가)
5. **이벤트 종료**: 확인 다이얼로그 후 즉시 종료
**반응형 처리**
- Mobile: 섹션별 세로 배치
- Tablet: 2열 배치 (기본정보 + 배포현황)
- Desktop: 그리드 배치 (통계 상단, 정보 2열, 참여자 하단)
---
#### 14-참여자목록
**개요**
- **목적**: 이벤트 참여자 목록 조회 및 관리
- **관련 유저스토리**: UFR-PART-020
- **비즈니스 중요도**: S/8 (권장, 낮은 복잡도)
**주요 기능**
- 참여자 테이블 (응모번호, 이름, 전화번호, 참여경로, 참여일시, 당첨여부)
- 참여 경로별 필터
- 당첨 여부 필터
- 이름/전화번호 검색
**UI 구성요소**
*Mobile (320-767px)*
```
┌─────────────────────┐
│ ☰ 참여자 목록 👤│ ← Header
├─────────────────────┤
│ [검색창] │
│ 🔍 이름/전화번호... │
│ │
│ 📂 필터 │
│ [전체경로▼] [전체▼] │
│ │
│ 총 128명 참여 │
│ │
│ ┌─────────────────┐ │
│ │ #0001 │ │
│ │ 김** │ │
│ │ 010-****-1234 │ │
│ │ SNS (Instagram) │ │
│ │ 2025-11-02 14:23│ │
│ │ 당첨 대기 │ │
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ │
│ │ #0002 │ │
│ │ 이** │ │
│ │ 010-****-5678 │ │
│ │ 우리동네TV │ │
│ │ 2025-11-02 15:45│ │
│ │ 당첨 대기 │ │
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ │
│ │ #0003 │ │
│ │ 박** │ │
│ │ 010-****-9012 │ │
│ │ 링고비즈 │ │
│ │ 2025-11-02 16:12│ │
│ │ 당첨 대기 │ │
│ └─────────────────┘ │
│ │
│ [더보기...] │
├─────────────────────┤
│ 홈 이벤트 분석 프로필 │ ← Nav Bottom
└─────────────────────┘
```
*Desktop (1024px+)*
```
┌─────────────────────────────────────┐
│ ← 참여자 목록 [프로필]│
├─────────────────────────────────────┤
│ [사이드바] 🔍 [검색창] 📂 필터 │
│ 이름/전화번호... [전체경로▼]│
│ • 대시보드 [전체▼] │
│ • 이벤트 총 128명 참여 │
│ • 분석 ──────────────────────────│
│ • 프로필 │번호│이름│전화번호│경로│일시│당첨│
│ ├────┼──┼────┼──┼──┼──┤
│ │0001│김**│010-****│SNS│11/2│대기│
│ │ │ │-1234 │ │14:23│ │
│ ├────┼──┼────┼──┼──┼──┤
│ │0002│이**│010-****│우리│11/2│대기│
│ │ │ │-5678 │동네│15:45│ │
│ ├────┼──┼────┼──┼──┼──┤
│ │0003│박**│010-****│링고│11/2│대기│
│ │ │ │-9012 │비즈│16:12│ │
│ ├────┼──┼────┼──┼──┼──┤
│ │... │...│... │... │... │...│
│ └────┴──┴────┴──┴──┴──┘
│ │
│ [1] 2 3 4 5 ... 7 > │
│ │
│ ┌──────────────┐ │
│ │엑셀 다운로드 │ │
│ └──────────────┘ │
└─────────────────────────────────────┘
```
**인터랙션**
1. **검색**: 입력 중 실시간 검색 결과 업데이트
2. **필터 적용**: 경로/당첨여부 선택 시 즉시 목록 갱신
3. **카드/행 클릭**: 참여자 상세 정보 모달 표시
4. **엑셀 다운로드**: 현재 필터 기준 참여자 목록 다운로드
5. **페이지네이션**: 페이지당 20개 표시
**반응형 처리**
- Mobile: 카드 형태 1열 표시
- Tablet: 카드 형태 2열 표시
- Desktop: 테이블 형태 표시
---
### 5.4 참여자 관리
#### 15-이벤트참여
**개요**
- **목적**: 고객이 이벤트에 참여하는 화면 (모바일 최적화 최우선)
- **관련 유저스토리**: UFR-PART-010
- **비즈니스 중요도**: M/13 (필수, 중간 복잡도)
**주요 기능**
- 이벤트 정보 표시 (제목, 경품, 기간)
- SNS 이미지 표시
- 참여 폼 (이름, 전화번호)
- 개인정보 동의 체크박스
- 참여 완료 애니메이션
**UI 구성요소**
*Mobile (320-767px)*
```
┌─────────────────────┐
│ │
│ ┌─────────────────┐ │
│ │ │ │
│ │ [이벤트 이미지] │ │
│ │ │ │
│ └─────────────────┘ │
│ │
│ 🎉 신규고객 유치 이벤트│
│ │
│ 경품: ☕ 커피 쿠폰 │
│ 기간: 2025-11-01 ~ │
│ 2025-11-15 │
│ │
│ ────────────────────│
│ │
│ 참여하기 │
│ │
│ ┌─────────────────┐ │
│ │ 이름 * │ │
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │ 전화번호 * │ │
│ │ 010-0000-0000 │ │
│ └─────────────────┘ │
│ │
│ ☐ 개인정보 수집 및 │
│ 이용에 동의합니다 │
│ [전문보기] │
│ │
│ ┌─────────────────┐ │
│ │ 참여하기 │ │
│ └─────────────────┘ │
│ │
│ 참여자: 128명 │
│ │
└─────────────────────┘
```
*참여 완료 상태*
```
┌─────────────────────┐
│ │
│ ┌────┐ │
│ │ ✓ │ │
│ └────┘ │
│ │
│ 참여가 완료되었습니다! │
│ │
│ 홍길동님의 행운을 │
│ 기원합니다! │
│ │
│ ────────────────── │
│ │
│ 당첨자 발표 │
│ 2025-11-16 (월) │
│ │
│ ┌─────────────────┐│
│ │ 확인 ││
│ └─────────────────┘│
│ │
└─────────────────────┘
```
**인터랙션**
1. **폼 검증**:
- 이름: 2자 이상
- 전화번호: 010-0000-0000 형식 자동 포맷
- 개인정보 동의: 필수 체크
2. **전문보기**: Bottom Sheet로 개인정보 처리방침 표시
3. **참여하기**:
- 중복 참여 체크
- 로딩 (1초)
- 애니메이션 (체크 아이콘 + 축하 메시지)
4. **확인**: 참여 완료 화면 닫기
**반응형 처리**
- Mobile: 전체 화면 (최적화)
- Tablet: 중앙 카드 (최대 너비 480px)
- Desktop: 중앙 카드 (최대 너비 600px)
**접근성**
- 이미지 alt 텍스트: "신규고객 유치 이벤트 포스터"
- 참여 버튼: aria-label="이벤트에 참여하기"
- 개인정보 동의: 필수 체크 aria-required="true"
---
#### 16-당첨자추첨
**개요**
- **목적**: 공정한 당첨자 자동 선정
- **관련 유저스토리**: UFR-PART-030
- **비즈니스 중요도**: M/13 (필수, 중간 복잡도)
**주요 기능**
- 당첨 인원 설정
- 매장 방문 고객 가산점 옵션
- 자동 추첨 실행
- 당첨자 목록 표시
- 재추첨 기능
- 추첨 이력 보관
**UI 구성요소**
**Mobile (320-767px)**
```
┌─────────────────────────────────┐
│ ☰ 당첨자 추첨 👤 │ Header
├─────────────────────────────────┤
│ │
│ 📋 이벤트 정보 │
│ ┌─────────────────────────────┐ │
│ │ 이벤트명: 신규고객 할인 이벤트 │ │
│ │ 총 참여자: 127명 │ │
│ │ 추첨 상태: 추첨 전 │ │
│ └─────────────────────────────┘ │
│ │
│ 🎯 추첨 설정 │
│ ┌─────────────────────────────┐ │
│ │ 당첨 인원 │ │
│ │ ┌───────┐ ┌──┐ ┌───────┐ │ │
│ │ │ - │ │ 5 │ │ + │ │ │
│ │ └───────┘ └──┘ └───────┘ │ │
│ │ │ │
│ │ ☑ 매장 방문 고객 가산점 │ │
│ │ (가중치: 1.5배) │ │
│ │ │ │
│ │ ℹ️ 추첨 방식: 난수 기반 무작위 │ │
│ │ 모든 추첨 과정은 자동 기록됩니다 │ │
│ └─────────────────────────────┘ │
│ │
│ ┌─────────────────────────────┐ │
│ │ 🎲 추첨 시작 │ │ Primary Action
│ └─────────────────────────────┘ │
│ │
│ 📜 추첨 이력 (최근 3건) │
│ ┌─────────────────────────────┐ │
│ │ 2024-01-15 14:30 │ │
│ │ 당첨자 5명 | 👁️ 상세보기 │ │
│ ├─────────────────────────────┤ │
│ │ 2024-01-15 14:25 (재추첨) │ │
│ │ 당첨자 5명 | 👁️ 상세보기 │ │
│ └─────────────────────────────┘ │
│ │
├─────────────────────────────────┤
│ 홈 이벤트 분석 프로필 │ Nav Bottom
└─────────────────────────────────┘
[추첨 후 화면]
┌─────────────────────────────────┐
│ ☰ 당첨자 추첨 👤 │
├─────────────────────────────────┤
│ │
│ 🎉 추첨 완료! │
│ 총 127명 중 5명 당첨 │
│ │
│ 🏆 당첨자 목록 │
│ ┌─────────────────────────────┐ │
│ │ 1위 (응모번호: #00042) │ │
│ │ 김** (010-****-1234) │ │
│ │ 참여: 우리동네TV 🌟 │ │
│ ├─────────────────────────────┤ │
│ │ 2위 (응모번호: #00089) │ │
│ │ 이** (010-****-5678) │ │
│ │ 참여: SNS │ │
│ ├─────────────────────────────┤ │
│ │ 3위 (응모번호: #00103) │ │
│ │ 박** (010-****-9012) │ │
│ │ 참여: 링고비즈 🌟 │ │
│ ├─────────────────────────────┤ │
│ │ 4위 (응모번호: #00012) │ │
│ │ 최** (010-****-3456) │ │
│ │ 참여: SNS │ │
│ ├─────────────────────────────┤ │
│ │ 5위 (응모번호: #00067) │ │
│ │ 정** (010-****-7890) │ │
│ │ 참여: 우리동네TV │ │
│ └─────────────────────────────┘ │
│ │
│ 🌟 매장 방문 고객 가산점 적용 │
│ │
│ ┌───────────┐ ┌───────────┐ │
│ │ 📥 엑셀다운 │ │ 🔄 재추첨 │ │
│ └───────────┘ └───────────┘ │
│ │
│ ┌─────────────────────────────┐ │
│ │ 당첨자에게 알림 전송 │ │ Primary
│ └─────────────────────────────┘ │
│ │
├─────────────────────────────────┤
│ 홈 이벤트 분석 프로필 │
└─────────────────────────────────┘
```
**Tablet (768-1023px)**
```
┌────────────────────────────────────────────┐
│ ☰ 당첨자 추첨 👤 │
├────────────────────────────────────────────┤
│ │
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ 📋 이벤트 정보 │ │ 🎯 추첨 설정 │ │
│ │ │ │ │ │
│ │ 이벤트명: │ │ 당첨 인원 │ │
│ │ 신규고객 할인 │ │ ┌─┐ ┌─┐ ┌─┐ │ │
│ │ │ │ │-│ │5│ │+│ │ │
│ │ 총 참여자: │ │ └─┘ └─┘ └─┘ │ │
│ │ 127명 │ │ │ │
│ │ │ │ ☑ 매장 방문 │ │
│ │ 추첨 상태: │ │ 가산점 1.5배 │ │
│ │ 추첨 전 │ │ │ │
│ │ │ │ ℹ️ 난수 기반 무작위 │ │
│ │ │ │ 추첨 과정 자동 기록 │ │
│ └──────────────────┘ │ │ │
│ │ ┌──────────────┐ │ │
│ │ │ 🎲 추첨 시작 │ │ │
│ │ └──────────────┘ │ │
│ └──────────────────┘ │
│ │
│ 📜 추첨 이력 │
│ ┌──────────────────────────────────────┐ │
│ │ 날짜 당첨자 상태 상세 │ │
│ ├──────────────────────────────────────┤ │
│ │ 2024-01-15 5명 완료 👁️ │ │
│ │ 2024-01-15 5명 재추첨 👁️ │ │
│ └──────────────────────────────────────┘ │
│ │
├────────────────────────────────────────────┤
│ 홈 이벤트 분석 프로필 │
└────────────────────────────────────────────┘
```
**Desktop (1024px+)**
```
┌──────────────────────────────────────────────────────────┐
│ ☰ 당첨자 추첨 👤 │
├──────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────┐ ┌───────────────────────────┐ │
│ │ 📋 이벤트 정보 │ │ 🎯 추첨 설정 │ │
│ │ │ │ │ │
│ │ 이벤트명: │ │ 당첨 인원 │ │
│ │ 신규고객 할인 이벤트 │ │ ┌───┐ ┌────┐ ┌───┐ │ │
│ │ │ │ │ - │ │ 5 │ │ + │ │ │
│ │ 이벤트 기간: │ │ └───┘ └────┘ └───┘ │ │
│ │ 2024-01-01 ~ 01-14 │ │ │ │
│ │ │ │ ☑ 매장 방문 고객 가산점 │ │
│ │ 총 참여자: 127명 │ │ (가중치: 1.5배) │ │
│ │ - 우리동네TV: 45명 │ │ │ │
│ │ - 링고비즈: 32명 │ │ ℹ️ 추첨 방식 │ │
│ │ - 지니TV: 28명 │ │ • 난수 기반 무작위 │ │
│ │ - SNS: 22명 │ │ • 추첨 과정 자동 기록 │ │
│ │ │ │ • 공정성 보장 │ │
│ │ 추첨 상태: 추첨 전 │ │ │ │
│ │ │ │ ┌─────────────────────┐ │ │
│ └───────────────────────┘ │ │ 🎲 추첨 시작 │ │ │
│ │ └─────────────────────┘ │ │
│ └───────────────────────────┘ │
│ │
│ 📜 추첨 이력 │
│ ┌────────────────────────────────────────────────────┐ │
│ │ 추첨 일시 당첨자 재추첨 추첨방식 상세 │ │
│ ├────────────────────────────────────────────────────┤ │
│ │ 2024-01-15 14:30 5명 - 무작위 👁️ │ │
│ │ 2024-01-15 14:25 5명 Y 무작위 👁️ │ │
│ │ 2024-01-15 14:20 5명 - 무작위 👁️ │ │
│ └────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────┘
[추첨 후 화면 - Desktop]
┌──────────────────────────────────────────────────────────┐
│ ☰ 당첨자 추첨 결과 👤 │
├──────────────────────────────────────────────────────────┤
│ │
│ 🎉 추첨 완료! 총 127명 중 5명 당첨 │
│ │
│ 🏆 당첨자 목록 ┌──────────────────────┐ │
│ ┌────────────────────────────┐ │ 📊 통계 │ │
│ │ 순위 응모번호 이름 전화번호 참여경로│ │ │ │
│ ├────────────────────────────┤ │ 채널별 당첨 분포: │ │
│ │ 1위 #00042 김** 010-****-1234 우리동네TV 🌟│ │ 우리동네TV: 2명 │ │
│ │ 2위 #00089 이** 010-****-5678 SNS │ │ 링고비즈: 1명 │ │
│ │ 3위 #00103 박** 010-****-9012 링고비즈 🌟│ │ SNS: 2명 │ │
│ │ 4위 #00012 최** 010-****-3456 SNS │ │ │ │
│ │ 5위 #00067 정** 010-****-7890 우리동네TV │ │ 가산점 적용: 2명 │ │
│ └────────────────────────────┘ │ │ │
│ │ 추첨 일시: │ │
│ 🌟 매장 방문 고객 가산점 적용 │ 2024-01-15 14:30 │ │
│ └──────────────────────┘ │
│ │
│ ┌────────────┐ ┌────────────┐ ┌────────────────────┐ │
│ │ 📥 엑셀다운 │ │ 🔄 재추첨 │ │ 당첨자에게 알림 전송 │ │
│ └────────────┘ └────────────┘ └────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────┘
```
**인터랙션**
**추첨 전 설정**
- 당첨 인원: +/- 버튼으로 조정 (1~100명)
- 가산점 옵션: 체크박스 토글
- 추첨 시작: 확인 다이얼로그 표시 → "총 127명 중 5명을 추첨하시겠습니까?"
**추첨 실행**
- 로딩 애니메이션: 3초간 슬롯머신 효과
- 진행 상황: "추첨 중... (난수 생성 중)" → "당첨자 선정 중..." → "완료!"
- 추첨 완료: 당첨자 목록 페이드인 애니메이션
**당첨자 목록**
- 순위별 하이라이트: 1위(금색), 2위(은색), 3위(동색)
- 가산점 적용 표시: 🌟 아이콘으로 매장 방문 고객 구분
- 개인정보 마스킹: 이름(김**), 전화번호(010-****-1234)
**재추첨**
- 재추첨 버튼: 경고 다이얼로그 표시
- "재추첨 시 현재 당첨자 정보가 변경됩니다. 계속하시겠습니까?"
- "이전 추첨 이력은 보관됩니다"
- 확인 시: 새로운 추첨 실행, 이전 결과는 이력에 "(재추첨)" 표시
**알림 전송**
- 알림 전송 버튼: 확인 다이얼로그 표시
- "5명의 당첨자에게 SMS 알림을 전송하시겠습니까?"
- "예상 비용: 500원 (100원/건)"
- 전송 완료: 토스트 메시지 "알림이 전송되었습니다"
**엑셀 다운로드**
- 파일명: `당첨자목록_[이벤트명]_[추첨일시].xlsx`
- 포함 정보: 순위, 응모번호, 이름, 전화번호, 참여경로, 가산점여부, 추첨일시
**추첨 이력 상세보기**
- 클릭 시: 모달로 해당 추첨의 당첨자 목록 표시
- 재추첨 여부, 추첨 설정 정보 포함
**반응형 처리**
**Mobile (320-767px)**
- 1열 레이아웃: 이벤트 정보 → 추첨 설정 → 추첨 버튼 → 이력
- 당첨자 목록: 카드형 (1명씩)
- 추첨 설정: 전체 너비 사용
- 버튼: 스택형 배치 (세로 정렬)
**Tablet (768-1023px)**
- 2열 레이아웃: 이벤트 정보 | 추첨 설정
- 당첨자 목록: 테이블 형식 (간소화)
- 추첨 이력: 테이블 형식
- 버튼: 수평 배치
**Desktop (1024px+)**
- 최적화된 테이블 레이아웃
- 당첨자 목록: 전체 정보 표시
- 우측에 통계 패널 추가
- 추첨 이력: 전체 정보 표시
- 버튼: 수평 배치, 우측 정렬
**터치/마우스 최적화**
- Mobile: 터치 영역 최소 44px
- Desktop: 호버 효과, 툴팁 표시
- 재추첨/알림 버튼: 경고색 (주의 필요)
**성능 최적화**
- 추첨 실행: 서버 사이드 처리 (공정성 보장)
- 로딩 상태: 스켈레톤 UI 표시
- 당첨자 목록: 페이징 (50명 이상 시)
- 추첨 이력: 최근 10건만 표시, "더보기" 옵션
**접근성**
- 추첨 시작 버튼: aria-label="추첨 시작, 127명 중 5명 선정"
- 재추첨 버튼: aria-label="재추첨, 주의 필요"
- 당첨자 정보: 스크린리더용 전체 정보 제공
- 키보드 네비게이션: Tab, Enter로 모든 기능 접근 가능
---
### 5.5 성과 분석
#### 17-실시간대시보드
**개요**
- **목적**: 이벤트 성과 실시간 측정 및 분석
- **관련 유저스토리**: UFR-ANAL-010
- **비즈니스 중요도**: M/34 (필수, 최고 복잡도)
**주요 기능**
- 요약 카드 4개 (참여자, 비용, 수익, 투자대비수익률)
- 채널별 성과 분석 (파이 차트)
- 시간대별 참여 추이 (라인 차트)
- 투자대비수익률 상세 분석 (테이블)
- 참여자 프로필 분석 (막대 차트)
- 실시간 업데이트 (5분 간격)
**UI 구성요소**
*Mobile (320-767px)*
```
┌─────────────────────┐
│ ☰ 실시간 대시보드 👤│ ← Header 추가
├─────────────────────┤
│ │
│ 📊 요약 (실시간) │
│ ┌────────┐┌────────┐│
│ │참여자수 ││총 비용 ││
│ │ 128명 ││ 30만원 ││
│ └────────┘└────────┘│
│ ┌────────┐┌────────┐│
│ │예상수익 ││투자대비││
│ │ 135만원││수익률 ││
│ │ ││ 450% ││
│ └────────┘└────────┘│
│ │
│ 📺 채널별 성과 │
│ ┌─────────────────┐ │
│ │ [파이 차트] │ │
│ │ 우리동네TV: 45% │ │
│ │ 링고비즈: 30% │ │
│ │ SNS: 25% │ │
│ └─────────────────┘ │
│ │
│ 📈 시간대별 참여 추이 │
│ ┌─────────────────┐ │
│ │ [라인 차트] │ │
│ │ 피크: 오후 2-4시 │ │
│ └─────────────────┘ │
│ │
│ 💰 투자대비수익률 상세│
│ ┌─────────────────┐ │
│ │총 비용: 30만원 │ │
│ │• 경품: 25만원 │ │
│ │• 채널: 5만원 │ │
│ │ │ │
│ │예상 수익: 135만원│ │
│ │• 매출 증가: 100만│ │
│ │• 신규 LTV: 35만 │ │
│ │ │ │
│ │투자대비수익률: │ │
│ │(135-30)/30×100 │ │
│ │= 450% │ │
│ └─────────────────┘ │
│ │
│ 👥 참여자 프로필 │
│ ┌─────────────────┐ │
│ │[막대 차트] │ │
│ │연령: 20대 35% │ │
│ │ 30대 40% │ │
│ │ 40대 25% │ │
│ │성별: 여 60% │ │
│ │ 남 40% │ │
│ └─────────────────┘ │
│ │
├─────────────────────┤
│ 홈 이벤트 분석 프로필│ ← Nav Bottom 추가
└─────────────────────┘
```
*Desktop (1024px+)*
```
┌─────────────────────────────────────┐
│ ← 실시간 대시보드 │
├─────────────────────────────────────┤
│ 📊 요약 (실시간 업데이트) │
│ ┌─────┐┌─────┐┌─────┐┌─────┐ │
│ │참여자││비용 ││수익 ││투자대││ │
│ │128명││30만 ││135만││비수익││ │
│ │ ││ ││ ││률450%││ │
│ └─────┘└─────┘└─────┘└─────┘ │
│ │
│ ┌──────────────────┐┌──────────────┐│
│ │📺 채널별 성과 ││📈 시간대별 추이││
│ │ ││ ││
│ │ [파이 차트] ││ [라인 차트] ││
│ │ ││ ││
│ │ • 우리동네TV 45% ││ 피크: 오후2-4 ││
│ │ • 링고비즈 30% ││ ││
│ │ • SNS 25% ││ ││
│ └──────────────────┘└──────────────┘│
│ │
│ ┌──────────────────┐┌──────────────┐│
│ │💰 투자대비수익률 ││👥 참여자 프로필││
│ │ ││ ││
│ │ [상세 테이블] ││ [차트] ││
│ │ ││ ││
│ └──────────────────┘└──────────────┘│
│ │
└─────────────────────────────────────┘
```
**인터랙션**
1. **실시간 업데이트**:
- 5분 간격 자동 폴링
- 변경 사항 하이라이트 (숫자 카운터 애니메이션)
2. **차트 인터랙션**:
- 파이 차트: 호버/클릭 시 상세 정보 툴팁
- 라인 차트: 호버 시 시간대별 정확한 수치 표시
3. **새로고침**: Pull to Refresh (모바일)
4. **상세보기**: 각 섹션 클릭 시 확장/축소
**반응형 처리**
- Mobile: 세로 스크롤, 카드 1열, 단순한 차트 (막대/파이)
- Tablet: 카드 2열, 차트 확장
- Desktop: 카드 4열, 복잡한 차트 (라인/영역), 2열 레이아웃
---
## 6. 화면 간 전환 및 네비게이션
### 6.1 네비게이션 구조
#### Mobile (Bottom Navigation)
```
┌─────────────────────┐
│ │
│ [화면 콘텐츠] │
│ │
├─────────────────────┤
│[홈][이벤트][분석][프로필]│
└─────────────────────┘
```
**메뉴 항목**:
- **홈**: 대시보드 (05-대시보드)
- **이벤트**: 이벤트 목록 (06-이벤트목록)
- **분석**: 실시간 대시보드 (17-실시간대시보드)
- **프로필**: 프로필 편집 (03-프로필편집)
#### Desktop (Side Navigation)
```
┌─────────────────────────────────────┐
│ [로고] [프로필] │
├──────┬──────────────────────────────┤
│ 메뉴 │ [화면 콘텐츠] │
│ │ │
│• 홈 │ │
│• 이벤트│ │
│• 분석 │ │
│• 프로필│ │
│ │ │
└──────┴──────────────────────────────┘
```
### 6.2 화면 전환 애니메이션
**Forward Navigation** (다음 단계):
- Slide Left (왼쪽으로 슬라이드)
- Duration: 300ms
- Easing: ease-out
**Backward Navigation** (이전 단계):
- Slide Right (오른쪽으로 슬라이드)
- Duration: 300ms
- Easing: ease-out
**Tab Navigation** (탭 전환):
- Fade In/Out
- Duration: 200ms
- Easing: ease-in-out
**Modal/Dialog**:
- Fade In + Scale Up (등장)
- Fade Out + Scale Down (퇴장)
- Duration: 250ms
- Easing: cubic-bezier(0.4, 0, 0.2, 1)
### 6.3 Floating Action Button (FAB)
**위치**: 우측 하단
**기능**: "새 이벤트 만들기"
**동작**: 07-이벤트목적선택 화면 이동
```
┌─────┐
│ + │
└─────┘
```
---
## 7. 반응형 설계 전략
### 7.1 브레이크포인트
```css
/* Mobile First Breakpoints */
/* Mobile: 320px ~ 767px (기본 스타일) */
@media (min-width: 768px) {
/* Tablet: 768px ~ 1023px */
}
@media (min-width: 1024px) {
/* Desktop: 1024px ~ 1439px */
}
@media (min-width: 1440px) {
/* Large Desktop: 1440px ~ */
/* 최대 너비 1280px, 중앙 정렬 */
}
```
### 7.2 레이아웃 전략
#### Grid System
**Mobile**:
- 1열 레이아웃
- 좌우 여백: 16px
- 요소 간 간격: 16px
**Tablet**:
- 2열 레이아웃 (50:50 또는 30:70)
- 좌우 여백: 24px
- 요소 간 간격: 24px
**Desktop**:
- 3열 레이아웃 (33:33:33 또는 20:60:20)
- 좌우 여백: 32px
- 요소 간 간격: 32px
- 최대 너비: 1280px (중앙 정렬)
### 7.3 타이포그래피
```css
/* Mobile */
h1: 24px / 1.2 / bold
h2: 20px / 1.3 / bold
h3: 18px / 1.4 / semibold
body: 14px / 1.5 / regular
small: 12px / 1.5 / regular
/* Desktop */
h1: 32px / 1.2 / bold
h2: 28px / 1.3 / bold
h3: 24px / 1.4 / semibold
body: 16px / 1.5 / regular
small: 14px / 1.5 / regular
```
### 7.4 터치 영역
**Mobile**:
- 최소 터치 영역: 44x44px (애플 권장)
- 버튼 높이: 48px
- 입력 필드 높이: 48px
**Desktop**:
- 최소 클릭 영역: 32x32px
- 버튼 높이: 40px
- 입력 필드 높이: 40px
---
## 8. 접근성 보장 방안
### 8.1 WCAG 2.1 AA 준수
**색상 대비**:
- 일반 텍스트: 4.5:1
- 큰 텍스트 (18px 이상): 3:1
- UI 컴포넌트: 3:1
**키보드 네비게이션**:
- 모든 기능 Tab 키로 접근 가능
- Focus Indicator 명확히 표시 (2px 파란색 테두리)
- Escape 키로 모달/다이얼로그 닫기
**스크린 리더**:
- 모든 이미지 alt 텍스트 제공
- 폼 Label과 Input 연결 (for/id)
- ARIA 속성 활용:
- aria-label
- aria-describedby
- aria-live (동적 콘텐츠)
- aria-required (필수 입력)
### 8.2 접근성 체크리스트
**이미지**:
- [ ] 모든 이미지 alt 속성 제공
- [ ] 장식용 이미지 alt="" 처리
**폼**:
- [ ] Label과 Input 연결
- [ ] 필수 필드 표시 (*, aria-required)
- [ ] 오류 메시지 스크린 리더 읽기
**네비게이션**:
- [ ] 키보드만으로 모든 기능 접근 가능
- [ ] Focus 순서 논리적
- [ ] Skip Navigation 링크 제공
**콘텐츠**:
- [ ] 제목 계층 구조 (h1 > h2 > h3)
- [ ] 색상만으로 정보 전달하지 않음
- [ ] 충분한 색상 대비
---
## 9. 성능 최적화 방안
### 9.1 이미지 최적화
**Lazy Loading**:
```html
```
**Responsive Images**:
```html
```
**WebP 포맷**:
- 압축률 30% 향상
- Fallback: JPEG/PNG
**이미지 CDN**:
- Cloudflare/AWS CloudFront
- 자동 리사이즈 및 포맷 변환
### 9.2 코드 최적화
**Code Splitting**:
```javascript
// 페이지별 번들 분리
const Dashboard = lazy(() => import('./Dashboard'));
const EventCreate = lazy(() => import('./EventCreate'));
```
**Tree Shaking**:
- 불필요한 코드 제거
- ES6 Module 사용
**Minification**:
- JS/CSS 압축
- Gzip/Brotli 압축
### 9.3 로딩 전략
**Skeleton Screen**:
```
┌─────────────────────┐
│ ┌─────────────────┐ │
│ │░░░░░░░░░░░░░░░░ │ │ ← Skeleton Card
│ │░░░░░░░░░░░░░░░░ │ │
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │░░░░░░░░░░░░░░░░ │ │
│ └─────────────────┘ │
└─────────────────────┘
```
**Critical CSS**:
- Above the Fold CSS 인라인 삽입
- 나머지 CSS 비동기 로드
**Defer/Async Script**:
```html
```
### 9.4 데이터 최적화
**Pagination**:
- 목록은 20개씩 페이징
- Infinite Scroll (모바일)
**Debouncing**:
```javascript
// 검색 입력 시 500ms 대기 후 API 호출
const debouncedSearch = debounce(search, 500);
```
**LocalStorage**:
- 임시 저장 (이벤트 생성 진행 상태)
- 오프라인 대응
### 9.5 성능 목표
**Core Web Vitals**:
- LCP (Largest Contentful Paint): < 2.5s
- FID (First Input Delay): < 100ms
- CLS (Cumulative Layout Shift): < 0.1
**추가 지표**:
- First Contentful Paint: < 1.5s
- Time to Interactive: < 3s
- Lighthouse Score: > 90
- 이미지 로딩: < 1s (per image)
- API 응답: < 500ms (평균)
---
## 10. 변경 이력
| 버전 | 날짜 | 변경 내용 | 작성자 |
|------|------|----------|--------|
| 1.0 | 2025-10-21 | 최초 작성 | UI/UX Designer |
---
## 부록
### A. 디자인 시스템 (추후 작성 예정)
- 컬러 팔레트
- 타이포그래피 시스템
- 스페이싱 시스템
- 아이콘 라이브러리
- 컴포넌트 라이브러리
### B. 프로토타입 링크 (추후 추가 예정)
- Figma 프로토타입 링크
- HTML 프로토타입 링크
### C. 사용성 테스트 결과 (추후 추가 예정)
- 테스트 참가자 정보
- 주요 발견 사항
- 개선 권장 사항
---
**문서 끝**