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 08:06:25 +00:00
Code Issues Packages Projects Releases Wiki Activity
kt-event-marketing/design/uiux/uiux.md
cherry2250 dbc5894427 push uiux
2025-10-21 14:20:32 +09:00

1449 lines
51 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

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)*
```
┌─────────────────────┐
│ ← 프로필 편집 │
├─────────────────────┤
│ │
│ ▼ 기본 정보 │
│ 이름: [홍길동 ] │
│ 전화번호: [010-...] │
│ 이메일: [hong@...]│
│ │
│ ▼ 매장 정보 │
│ 매장명: [왕갈비...]│
│ 업종: [음식점 ] │
│ 주소: [수원시...] │
│ 영업시간: [10:00~]│
│ │
│ ▼ 비밀번호 변경 │
│ 현재 비밀번호: [ ] │
│ 새 비밀번호: [ ] │
│ 비밀번호 확인: [ ] │
│ │
│ ┌─────────────────┐ │
│ │ 저장하기 │ │
│ └─────────────────┘ │
└─────────────────────┘
```
**인터랙션**
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가지 이벤트 추천 (저비용/중비용/고비용)
- 제목/경품 간편 수정 (인라인 편집)
- 로딩 인디케이터 (10초 이내)
**UI 구성요소**
*Mobile (320-767px) - 로딩 상태*
```
┌─────────────────────┐
│ ← AI 이벤트 추천 │
├─────────────────────┤
│ │
│ │
│ [AI 아이콘 애니메이션]│
│ │
│ AI가 트렌드를 분석하고│
│ 최적의 이벤트를 │
│ 추천하고 있어요... │
│ │
│ [진행 바 50%] │
│ │
│ │
└─────────────────────┘
```
*Mobile (320-767px) - 완료 상태*
```
┌─────────────────────┐
│ ← AI 이벤트 추천 │
├─────────────────────┤
│ ▼ 트렌드 분석 결과 │
│ (접기/펼치기) │
│ │
│ 추천 이벤트 3가지 │
│ │
│ ┌─────────────────┐ │
│ │ 옵션 1: 저비용 │ │
│ │ ────────────────│ │
│ │ [신규고객 유치..✏]│ │ ← 제목 인라인 편집
│ │ 경품: [커피 쿠폰✏]│ │ ← 경품 인라인 편집
│ │ 참여방법: 전화번호│ │
│ │ 예상 참여자: 150 │ │
│ │ 예상 비용: 30만원│ │
│ │ 투자대비수익률: 450%│ │
│ │ ○ 선택 │ │
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ │
│ │ 옵션 2: 중비용 │ │
│ │ ────────────────│ │
│ │ [재방문 이벤트..✏]│ │
│ │ 경품: [상품권 1만✏]│ │
│ │ 참여방법: SNS 공유│ │
│ │ 예상 참여자: 200 │ │
│ │ 예상 비용: 50만원│ │
│ │ 투자대비수익률: 320%│ │
│ │ ○ 선택 │ │
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ │
│ │ 옵션 3: 고비용 │ │
│ │ (스크롤...) │ │
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ │
│ │ 다음 단계 │ │ ← 선택 후 활성화
│ └─────────────────┘ │
└─────────────────────┘
```
*트렌드 분석 결과 펼침 상태*
```
┌─────────────────────┐
│ ▼ 트렌드 분석 결과 │
│ ────────────────────│
│ │
│ 📊 업종 트렌드 │
│ • 최근 성공 유형: │
│ 할인 쿠폰 (참여율 │
│ 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 이미지 생성 │
├─────────────────────┤
│ │
│ [AI 이미지 생성 중] │
│ │
│ 딥러닝 모델이 │
│ 이벤트에 어울리는 │
│ 이미지를 생성하고 │
│ 있어요... │
│ │
│ [스피너 애니메이션] │
│ │
│ 예상 시간: 5초 │
│ │
└─────────────────────┘
```
*Mobile (320-767px) - 완료*
```
┌─────────────────────┐
│ ← SNS 이미지 생성 │
├─────────────────────┤
│ 스타일 1: 심플 │
│ ┌─────────────────┐ │
│ │ │ │
│ │ [이미지 미리보기]│ │
│ │ │ │
│ │ [이벤트 제목] │ │
│ │ [경품 정보] │ │
│ │ │ │
│ └─────────────────┘ │
│ ○ 선택 | 🔍 크게보기 │
│ │
│ 스타일 2: 화려 │
│ ┌─────────────────┐ │
│ │ [이미지...] │ │
│ └─────────────────┘ │
│ ○ 선택 | 🔍 크게보기 │
│ │
│ 스타일 3: 트렌디 │
│ ┌─────────────────┐ │
│ │ [이미지...] │ │
│ └─────────────────┘ │
│ ○ 선택 | 🔍 크게보기 │
│ │
│ ┌─────────────────┐ │
│ │ 건너뛰기 | 다음 │ │
│ └─────────────────┘ │
└─────────────────────┘
```
**인터랙션**
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)*
```
┌─────────────────────┐
│ ← 최종 승인 │
├─────────────────────┤
│ │
│ ✓ 이벤트 정보 [수정]│
│ ────────────────────│
│ • 제목: 신규고객... │
│ • 경품: 커피 쿠폰 │
│ • 기간: 2025-11-01 ~ │
│ 2025-11-15 │
│ • 참여방법: 전화번호 │
│ │
│ ✓ SNS 이미지 [수정]│
│ ────────────────────│
│ ┌─────────────────┐ │
│ │ [선택한 이미지] │ │
│ │ (스타일 1: 심플) │ │
│ └─────────────────┘ │
│ │
│ ✓ 배포 채널 [수정]│
│ ────────────────────│
│ • 우리동네TV (예상 5만명)│
│ • 링고비즈 (예상 3만명) │
│ • SNS (네이버, 카카오) │
│ │
│ ✓ 예상 성과 │
│ ────────────────────│
│ • 총 참여자: 150명 │
│ • 총 비용: 30만원 │
│ • 투자대비수익률: 450%│
│ │
│ ⚠️ 주의사항 │
│ 배포 후에는 이벤트 제목,│
│ 경품, 기간을 변경할 수 │
│ 없습니다. │
│ │
│ ┌─────────────────┐ │
│ │ 승인 및 배포 │ │
│ └─────────────────┘ │
└─────────────────────┘
```
**인터랙션**
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)*
```
┌─────────────────────┐
│ ← 실시간 대시보드 │
├─────────────────────┤
│ │
│ 📊 요약 (실시간) │
│ ┌────────┐┌────────┐│
│ │참여자수 ││총 비용 ││
│ │ 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% │ │
│ └─────────────────┘ │
│ │
└─────────────────────┘
```
*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