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 14:46:23 +00:00
Code Issues Packages Projects Releases Wiki Activity
kt-event-marketing/design/uiux/uiux.md
cherry2250 e38f8776bb push uiux
2025-10-21 15:12:22 +09:00

2474 lines
101 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 설계서
## 문서 정보
- **프로젝트명**: 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([외부 채널<br/>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
<img src="image.webp" loading="lazy" alt="이벤트 포스터">
```
**Responsive Images**:
```html
<img
src="image-800.webp"
srcset="image-400.webp 400w,
image-800.webp 800w,
image-1200.webp 1200w"
sizes="(max-width: 768px) 100vw, 50vw"
alt="이벤트 포스터"
>
```
**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
<script src="analytics.js" defer></script>
<script src="chat.js" async></script>
```
### 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. 사용성 테스트 결과 (추후 추가 예정)
- 테스트 참가자 정보
- 주요 발견 사항
- 개선 권장 사항
---
**문서 끝**
Reference in New Issue View Git Blame Copy Permalink