2474 lines
101 KiB
Markdown
2474 lines
101 KiB
Markdown
# 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. 사용성 테스트 결과 (추후 추가 예정)
|
||
- 테스트 참가자 정보
|
||
- 주요 발견 사항
|
||
- 개선 권장 사항
|
||
|
||
---
|
||
|
||
**문서 끝**
|