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