mirror of
https://github.com/ktds-dg0501/kt-event-marketing-fe.git
synced 2025-12-06 21:26:24 +00:00
3f6e005026
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
101 KiB
101 KiB
KT AI 기반 소상공인 이벤트 자동 생성 서비스 UI/UX 설계서
문서 정보
- 프로젝트명: KT AI 기반 소상공인 이벤트 자동 생성 서비스
- 작성일: 2025-10-21
- 버전: 1.0
- 작성자: UI/UX Designer
목차
- 프로젝트 개요
- 설계 원칙
- 프로토타입 화면 목록
- 화면 간 사용자 플로우
- 화면별 상세 설계
- 화면 간 전환 및 네비게이션
- 반응형 설계 전략
- 접근성 보장 방안
- 성능 최적화 방안
- 변경 이력
1. 프로젝트 개요
1.1 서비스 목적
소상공인 및 중소기업의 이벤트 기획·제작·운영 역량과 시간 부족 문제를 해결하기 위한 AI 기반 이벤트 자동 생성 서비스
1.2 핵심 가치 제안
- AI 트렌드 분석: 업종/지역/시즌 트렌드 자동 분석
- 3가지 이벤트 추천: 목적에 맞는 최적화된 이벤트 기획안
- 자동 콘텐츠 생성: SNS 이미지 3가지 스타일 자동 생성
- 다중 채널 배포: 우리동네TV, 링고비즈, 지니TV, SNS 동시 배포
- 실시간 성과 측정: 통합 대시보드로 투자대비수익률 분석
1.3 타겟 사용자
- 주 사용자: 소상공인 (음식점, 카페, 소매점 운영자)
- 사용 환경: 모바일 중심 (60%), 데스크톱 (40%)
- 사용 시간: 매장 운영 중 짧은 시간 활용 (5-10분 내 이벤트 생성)
1.4 마이크로서비스 구성
- User - 사용자 인증 및 매장정보 관리
- Event - 이벤트 기획 및 관리
- AI - AI 기반 트렌드 분석 및 이벤트 추천
- Content - SNS 콘텐츠 생성
- Distribution - 다중 채널 배포 관리
- Participation - 이벤트 참여 및 당첨자 관리
- 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. 화면 간 사용자 플로우
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+)
┌─────────────────────────────────────┐
│ │
│ [서비스 로고 + 설명] │
│ │
│ ┌──────────────────────┐ │
│ │ 전화번호 입력 │ │
│ └──────────────────────┘ │
│ ┌──────────────────────┐ │
│ │ 비밀번호 입력 │ │
│ └──────────────────────┘ │
│ │
│ ☐ 로그인 유지 │
│ │
│ ┌──────────────────────┐ │
│ │ 로그인 버튼 │ │
│ └──────────────────────┘ │
│ │
│ 비밀번호 찾기 | 회원가입 │
│ │
└─────────────────────────────────────┘
인터랙션
- 포커스 이동: Enter 키로 다음 입력 필드 이동
- 입력 검증: 실시간 형식 검증 (전화번호 형식, 비밀번호 최소 길이)
- 비밀번호 표시: 눈 아이콘 클릭으로 비밀번호 보기/숨기기
- 로그인 실패: 오류 메시지 입력 필드 하단에 빨간색으로 표시
- 로딩 상태: 버튼 비활성화 + 스피너 표시
반응형 처리
- 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 │ │
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ │
│ │ 검증하기 │ │
│ └─────────────────┘ │
│ │
│ [검증 결과 영역] │
│ ✓ 정상 사업자 │
│ 업체명: 왕갈비통닭 │
│ 대표자: 홍길동 │
│ │
│ ┌─────────────────┐ │
│ │ 회원가입 완료 │ │
│ └─────────────────┘ │
└─────────────────────┘
인터랙션
- 진행바: 현재 단계 표시, 클릭으로 이전 단계 이동 가능
- 필수 필드: 별표(*) 표시, 미입력 시 다음 버튼 비활성화
- 실시간 검증:
- 전화번호: 010-0000-0000 형식 자동 포맷
- 이메일: @ 포함 여부 확인
- 비밀번호: 8자 이상, 영문/숫자/특수문자 포함 여부 표시
- 주소 검색: Daum 주소 API 팝업 또는 Bottom Sheet
- 사업자번호 검증:
- 로딩 인디케이터 (3초 이내)
- 성공: 녹색 체크 + 업체 정보 표시
- 실패: 빨간색 X + 오류 메시지
- 뒤로 가기: 이전 입력 값 유지
반응형 처리
- 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 추가
└─────────────────────┘
인터랙션
- 아코디언: 각 섹션 클릭으로 접기/펼치기
- 전화번호 변경: 재인증 다이얼로그 표시 (SMS 인증)
- 저장 확인: "변경사항을 저장하시겠습니까?" 다이얼로그
- 취소 확인: 변경사항이 있을 경우 "저장하지 않고 나가시겠습니까?" 다이얼로그
- 성공 토스트: "프로필이 성공적으로 업데이트되었습니다" (2초)
반응형 처리
- Mobile: 전체 화면, 아코디언 형태
- Tablet/Desktop: 중앙 카드 (최대 너비 720px), 저장 버튼 하단 고정
04-로그아웃확인
개요
- 목적: 안전한 로그아웃
- 관련 유저스토리: UFR-USER-040
- 비즈니스 중요도: S/3 (권장, 낮은 복잡도)
주요 기능
- 로그아웃 확인 다이얼로그
- 세션 종료
- 로그인 화면 이동
UI 구성요소
Mobile (320-767px)
┌─────────────────────┐
│ │
│ [어두운 배경] │
│ │
│ ┌─────────────────┐ │
│ │ 로그아웃 │ │
│ ├─────────────────┤ │
│ │ │ │
│ │ 로그아웃 하시겠 │ │
│ │ 습니까? │ │
│ │ │ │
│ ├─────────────────┤ │
│ │ ┌─────┐┌─────┐│ │
│ │ │취소 ││확인 ││ │
│ │ └─────┘└─────┘│ │
│ └─────────────────┘ │
│ │
└─────────────────────┘
인터랙션
- 다이얼로그 표시: 프로필 메뉴 → 로그아웃 선택
- 확인: 세션 종료 + 로그인 화면 이동 (애니메이션)
- 취소: 다이얼로그 닫기, 이전 화면 유지
- 배경 클릭: 취소와 동일
반응형 처리
- 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│ │
│ └──────┘└──────┘ │
│ │
└─────────────────────────────────────┘
인터랙션
- 이벤트 카드 클릭: 이벤트 상세 화면 이동
- FAB 클릭: 이벤트 목적 선택 화면 이동
- 더보기: 이벤트 목록 화면 이동
- 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 > │
└─────────────────────────────────────┘
인터랙션
- 검색: 입력 중 실시간 검색 결과 업데이트
- 필터 적용: 상태/기간 선택 시 즉시 목록 갱신
- 정렬: 드롭다운 선택 시 정렬 기준 변경
- 카드/행 클릭: 이벤트 상세 화면으로 이동
- 페이지네이션: 페이지당 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개만 선택 가능
- 카드 클릭: 전체 카드 영역 클릭으로 선택
- 다음 단계: 선택 후 버튼 활성화, AI 이벤트 추천 화면 이동
- 애니메이션: 선택 시 카드 하이라이트 효과
반응형 처리
- 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) │
│ │
└─────────────────────┘
인터랙션
- 로딩:
- AI 아이콘 애니메이션 (회전)
- 진행 바 0% → 100% (10초)
- 완료 시 부드러운 전환
- 트렌드 분석 접기/펼치기: 아코디언 형태
- 제목/경품 편집:
- 연필 아이콘 클릭 → 인라인 편집 모드
- 최대 글자수 표시 (제목 50자, 경품 30자)
- Enter/저장 시 변경사항 저장
- 옵션 선택: 라디오 버튼, 1개만 선택 가능
- 다음 단계: 선택 후 버튼 활성화, 콘텐츠 생성 화면 이동
반응형 처리
- 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
└─────────────────────┘
인터랙션
- 생성 로딩:
- Skeleton Screen (이미지 영역)
- 스피너 + 진행 메시지
- 이미지 선택: 라디오 버튼, 1개 선택
- 크게보기: 풀스크린 모달, 핀치 줌 가능
- 건너뛰기: 이미지 없이 다음 단계 (콘텐츠 편집 스킵)
- 다음: 선택한 이미지로 콘텐츠 편집 화면 이동
반응형 처리
- 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+)
┌─────────────────────────────────────┐
│ ← 콘텐츠 편집 [프로필]│
├─────────────────────────────────────┤
│ [사이드바] ┌────────┐ ┌──────────┐│
│ │미리보기 │ │편집 패널 ││
│ • 대시보드 │ │ │ ││
│ • 이벤트 │ │ │📝 텍스트 ││
│ • 분석 │[실시간 │ │제목: ││
│ • 프로필 │ 미리보기]│ │[입력창] ││
│ │ │ │ ││
│ │ │ │경품: ││
│ │ │ │[입력창] ││
│ │ │ │ ││
│ │ │ │🎨 색상 ││
│ │ │ │배경: [■] ││
│ │ │ │텍스트:[■] ││
│ │ │ │강조: [■] ││
│ │ │ │ ││
│ │ │ │🏢 로고 ││
│ │ │ │위치/크기 ││
│ └────────┘ └──────────┘│
│ │
│ ┌────────┐ ┌──────────┐ │
│ │ 저장 │ │다음 단계 │ │
│ └────────┘ └──────────┘ │
└─────────────────────────────────────┘
인터랙션
- 텍스트 편집: 입력 시 실시간 미리보기 업데이트
- 색상 선택: 컬러 피커 팝업, 선택 시 즉시 반영
- 로고 위치: 드래그 앤 드롭 또는 화살표 버튼
- 저장: 편집 내용 저장, 현재 화면 유지
- 다음 단계: 배포 채널 선택 화면으로 이동
반응형 처리
- 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개 선택 시 버튼 활성화, 최종 승인 화면 이동
반응형 처리
- 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 추가
└─────────────────────┘
인터랙션
- 수정 버튼: 각 섹션별 이전 단계 화면 이동
- 승인 확인: "이벤트를 승인하고 배포하시겠습니까?" 다이얼로그
- 승인 완료:
- 로딩 인디케이터 (배포 중...)
- 성공 토스트: "이벤트가 성공적으로 배포되었습니다"
- 대시보드 화면 이동 + 새 이벤트 카드 추가
반응형 처리
- 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) │
│ ... │
│ │
│ ┌──────┐┌──────┐┌──────┐ │
│ │효과측정││수정 ││종료 │ │
│ └──────┘└──────┘└──────┘ │
└─────────────────────────────────────┘
인터랙션
- 실시간 통계: 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 > │
│ │
│ ┌──────────────┐ │
│ │엑셀 다운로드 │ │
│ └──────────────┘ │
└─────────────────────────────────────┘
인터랙션
- 검색: 입력 중 실시간 검색 결과 업데이트
- 필터 적용: 경로/당첨여부 선택 시 즉시 목록 갱신
- 카드/행 클릭: 참여자 상세 정보 모달 표시
- 엑셀 다운로드: 현재 필터 기준 참여자 목록 다운로드
- 페이지네이션: 페이지당 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 (월) │
│ │
│ ┌─────────────────┐│
│ │ 확인 ││
│ └─────────────────┘│
│ │
└─────────────────────┘
인터랙션
- 폼 검증:
- 이름: 2자 이상
- 전화번호: 010-0000-0000 형식 자동 포맷
- 개인정보 동의: 필수 체크
- 전문보기: Bottom Sheet로 개인정보 처리방침 표시
- 참여하기:
- 중복 참여 체크
- 로딩 (1초)
- 애니메이션 (체크 아이콘 + 축하 메시지)
- 확인: 참여 완료 화면 닫기
반응형 처리
- 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% ││ ││
│ └──────────────────┘└──────────────┘│
│ │
│ ┌──────────────────┐┌──────────────┐│
│ │💰 투자대비수익률 ││👥 참여자 프로필││
│ │ ││ ││
│ │ [상세 테이블] ││ [차트] ││
│ │ ││ ││
│ └──────────────────┘└──────────────┘│
│ │
└─────────────────────────────────────┘
인터랙션
- 실시간 업데이트:
- 5분 간격 자동 폴링
- 변경 사항 하이라이트 (숫자 카운터 애니메이션)
- 차트 인터랙션:
- 파이 차트: 호버/클릭 시 상세 정보 툴팁
- 라인 차트: 호버 시 시간대별 정확한 수치 표시
- 새로고침: Pull to Refresh (모바일)
- 상세보기: 각 섹션 클릭 시 확장/축소
반응형 처리
- 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 브레이크포인트
/* 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 타이포그래피
/* 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:
<img src="image.webp" loading="lazy" alt="이벤트 포스터">
Responsive Images:
<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:
// 페이지별 번들 분리
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:
<script src="analytics.js" defer></script>
<script src="chat.js" async></script>
9.4 데이터 최적화
Pagination:
- 목록은 20개씩 페이징
- Infinite Scroll (모바일)
Debouncing:
// 검색 입력 시 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. 사용성 테스트 결과 (추후 추가 예정)
- 테스트 참가자 정보
- 주요 발견 사항
- 개선 권장 사항
문서 끝