userstory
This commit is contained in:
cherry2250
@@ -0,0 +1,339 @@
|
||||
# 프로토타입 분석 보고서
|
||||
|
||||
**분석일**: 2025-10-21
|
||||
**분석자**: Frontend Architect
|
||||
**분석 범위**: design/uiux/prototype/ 디렉토리 (01번~17번 화면)
|
||||
|
||||
---
|
||||
|
||||
## 📊 전체 화면 구성
|
||||
|
||||
프로토타입은 총 **17개 화면**으로 구성되어 있으며, 다음과 같은 주요 영역으로 분류됩니다:
|
||||
|
||||
### 1. 인증 영역 (01~04)
|
||||
- **01-로그인.html**: 이메일/비밀번호 로그인
|
||||
- **02-회원가입.html**: 신규 사용자 등록
|
||||
- **03-프로필.html**: 사용자 프로필 관리
|
||||
- **04-로그아웃확인.html**: 로그아웃 확인 모달
|
||||
|
||||
### 2. 대시보드 영역 (05~06)
|
||||
- **05-대시보드.html**: 메인 홈 화면
|
||||
- KPI 요약 (진행 중 이벤트, 총 참여자, 평균 ROI)
|
||||
- 빠른 시작 (새 이벤트, 분석)
|
||||
- 진행 중인 이벤트 목록
|
||||
- 최근 활동 타임라인
|
||||
- **06-이벤트목록.html**: 전체 이벤트 목록 및 필터링
|
||||
|
||||
### 3. 이벤트 생성 플로우 (07~12)
|
||||
- **07-이벤트목적선택.html**: 이벤트 목적 선택 (신규고객 유치, 재방문 유도, 브랜드 인지도, 고객 데이터 수집)
|
||||
- **08-AI이벤트추천.html**: AI 트렌드 분석 및 예산별 이벤트 추천 (저/중/고비용, 온라인/오프라인)
|
||||
- **09-콘텐츠미리보기.html**: SNS 이미지 스타일 선택 (카드 선택 UI)
|
||||
- **10-콘텐츠편집.html**: 텍스트 편집 및 색상 조정
|
||||
- **11-배포채널선택.html**: 배포 채널 선택 (우리동네TV, 링고비즈, SNS, QR코드)
|
||||
- **12-최종승인.html**: 이벤트 최종 검토 및 승인
|
||||
|
||||
### 4. 이벤트 관리 및 모니터링 (13~17)
|
||||
- **13-이벤트상세.html**: 이벤트 상세 정보 및 실시간 KPI
|
||||
- **14-참여자목록.html**: 참여자 관리 및 필터링
|
||||
- **15-이벤트참여.html**: 사용자 이벤트 참여 화면 (고객용)
|
||||
- **16-당첨자추첨.html**: 당첨자 추첨 및 관리
|
||||
- **17-성과분석.html**: 실시간 대시보드 및 성과 분석
|
||||
|
||||
---
|
||||
|
||||
## 🔄 화면 흐름도
|
||||
|
||||
```
|
||||
[로그인/회원가입]
|
||||
↓
|
||||
[대시보드] ←→ [프로필]
|
||||
↓
|
||||
├─ [이벤트목록] → [이벤트상세] → [참여자목록] → [당첨자추첨]
|
||||
│ ↓
|
||||
│ [성과분석]
|
||||
│
|
||||
└─ [새 이벤트 생성 플로우]
|
||||
↓
|
||||
[목적선택]
|
||||
↓
|
||||
[AI추천]
|
||||
↓
|
||||
[콘텐츠미리보기] (스타일 선택)
|
||||
↓
|
||||
[콘텐츠편집]
|
||||
↓
|
||||
[배포채널선택]
|
||||
↓
|
||||
[최종승인]
|
||||
↓
|
||||
[이벤트상세]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 주요 UI/UX 패턴
|
||||
|
||||
### Bottom Navigation
|
||||
- **구성**: 홈, 이벤트, 분석, 프로필
|
||||
- **특징**: 모든 메인 화면에서 일관되게 표시
|
||||
- **네비게이션**:
|
||||
- 홈 → 05-대시보드.html
|
||||
- 이벤트 → 06-이벤트목록.html
|
||||
- 분석 → 17-성과분석.html
|
||||
- 프로필 → 03-프로필.html
|
||||
|
||||
### Header
|
||||
- **구성**: 타이틀, 뒤로가기 버튼, 프로필 버튼
|
||||
- **특징**:
|
||||
- 대시보드에서는 뒤로가기 없음
|
||||
- 이벤트 생성 플로우에서는 프로필 버튼 숨김
|
||||
|
||||
### FAB (Floating Action Button)
|
||||
- **위치**: 우측 하단 고정
|
||||
- **기능**: 새 이벤트 생성 (07-이벤트목적선택.html로 이동)
|
||||
|
||||
### 카드 기반 UI
|
||||
- 옵션 선택, 이벤트 목록, KPI 표시 등 대부분의 콘텐츠가 카드 형식
|
||||
- 일관된 그림자, 라운드 모서리, 패딩 적용
|
||||
|
||||
---
|
||||
|
||||
## 🔧 최근 변경사항 (세션 기록)
|
||||
|
||||
### 1. 09-콘텐츠미리보기.html
|
||||
**변경**: Radio 버튼 → 카드 선택 UI
|
||||
- **Before**: 전통적인 Radio 버튼 리스트
|
||||
- **After**:
|
||||
- 각 스타일을 카드로 표시
|
||||
- 선택 시 카드 테두리 강조 (빨간색)
|
||||
- 우측 상단에 체크 배지 표시
|
||||
- 이미지 클릭 시 전체화면 모달로 확대
|
||||
|
||||
**영향**: 사용자 경험 개선, 시각적 명확성 향상
|
||||
|
||||
### 2. 10-콘텐츠편집.html
|
||||
**변경**: 로고 위치 섹션 삭제 + 색상 조정
|
||||
- **삭제**: 로고 위치 선택 (상단, 하단, 중앙) 섹션 제거
|
||||
- **유지**: 텍스트 편집, 색상 조정 기능
|
||||
- **이유**: 간소화 및 사용자 복잡도 감소
|
||||
|
||||
### 3. 05-대시보드.html
|
||||
**변경**: AI추천, 템플릿 버튼 삭제
|
||||
- **삭제 항목**:
|
||||
- "AI 추천" 버튼
|
||||
- "템플릿" 버튼
|
||||
- **유지**: 새 이벤트, 분석 버튼만 유지
|
||||
- **이유**: 기능 중복 제거 (AI 추천은 이벤트 생성 플로우에 통합)
|
||||
|
||||
### 4. 햄버거 메뉴 제거
|
||||
**변경**: 전체 화면에서 햄버거 메뉴 제거
|
||||
- **대체**: Bottom Navigation으로 모든 주요 기능 접근
|
||||
- **영향**: 모바일 친화적인 네비게이션 구조
|
||||
|
||||
### 5. Bottom Navigation 연결 수정
|
||||
**변경**: 분석 탭 연결
|
||||
- **Before**: 미정의 또는 다른 경로
|
||||
- **After**: 17-성과분석.html
|
||||
- **영향**: 네비게이션 일관성 확보
|
||||
|
||||
### 6. 13-이벤트상세.html
|
||||
**변경**: Bottom Nav focus
|
||||
- **수정**: Bottom Navigation의 포커스를 'events'로 설정
|
||||
- **이유**: 이벤트 상세는 이벤트 섹션의 하위 화면
|
||||
|
||||
---
|
||||
|
||||
## 🎯 핵심 기능별 화면 매핑
|
||||
|
||||
### AI 기반 이벤트 생성
|
||||
1. **목적 인식** (07-이벤트목적선택.html)
|
||||
- 신규고객 유치, 재방문 유도, 브랜드 인지도, 데이터 수집
|
||||
2. **AI 추천** (08-AI이벤트추천.html)
|
||||
- 업종/지역/시즌 트렌드 분석
|
||||
- 예산별 온라인/오프라인 이벤트 추천
|
||||
3. **콘텐츠 생성** (09-콘텐츠미리보기.html, 10-콘텐츠편집.html)
|
||||
- 이미지 스타일 선택
|
||||
- 텍스트 및 색상 편집
|
||||
4. **배포 설정** (11-배포채널선택.html)
|
||||
- 다중 채널 선택 및 옵션 설정
|
||||
5. **최종 검토** (12-최종승인.html)
|
||||
- 전체 설정 확인 및 이벤트 생성
|
||||
|
||||
### 이벤트 관리
|
||||
- **목록 조회** (06-이벤트목록.html): 검색, 필터링, 정렬
|
||||
- **상세 모니터링** (13-이벤트상세.html): 실시간 KPI, 참여 추이
|
||||
- **참여자 관리** (14-참여자목록.html): 검색, 필터링, 엑셀 다운로드
|
||||
- **당첨 관리** (16-당첨자추첨.html): 자동 추첨 및 결과 관리
|
||||
|
||||
### 성과 분석
|
||||
- **대시보드** (17-성과분석.html)
|
||||
- 전체 이벤트 요약 통계
|
||||
- 이벤트별 성과 비교
|
||||
- ROI 상세 분석
|
||||
- 채널별 효율성
|
||||
|
||||
---
|
||||
|
||||
## 📱 반응형 디자인
|
||||
|
||||
### 브레이크포인트
|
||||
- **Mobile**: 기본
|
||||
- **Tablet**: 768px 이상 (grid-cols 조정)
|
||||
- **Desktop**: 1024px 이상 (side-by-side 레이아웃)
|
||||
|
||||
### 주요 반응형 패턴
|
||||
1. **그리드 시스템**: 모바일(1열) → 태블릿(2열) → 데스크탑(3-4열)
|
||||
2. **카드 레이아웃**: 세로 스택 → 가로 배치
|
||||
3. **네비게이션**: Bottom Nav 고정 (모든 화면)
|
||||
4. **콘텐츠 편집** (10번): 모바일(세로 스택) → 데스크탑(좌우 분할)
|
||||
|
||||
---
|
||||
|
||||
## 🔍 삭제된 기능
|
||||
|
||||
### 1. 햄버거 메뉴
|
||||
- **삭제 이유**: Bottom Navigation으로 대체
|
||||
- **영향**: 네비게이션 복잡도 감소
|
||||
|
||||
### 2. 대시보드 AI추천/템플릿 버튼
|
||||
- **삭제 이유**: 기능 중복 (이벤트 생성 플로우에 통합)
|
||||
- **영향**: 화면 간소화
|
||||
|
||||
### 3. 로고 위치 선택
|
||||
- **삭제 이유**: 편집 기능 단순화
|
||||
- **영향**: 사용자 설정 옵션 감소
|
||||
|
||||
---
|
||||
|
||||
## ➕ 추가/변경된 기능
|
||||
|
||||
### 1. 카드 선택 UI (09-콘텐츠미리보기.html)
|
||||
- **추가**: 비주얼 중심의 스타일 선택
|
||||
- **기능**:
|
||||
- 카드 클릭 선택
|
||||
- 이미지 전체화면 보기
|
||||
- 선택 상태 시각적 피드백
|
||||
|
||||
### 2. 성과 분석 탭 연결
|
||||
- **추가**: Bottom Nav에서 17-성과분석.html 직접 접근
|
||||
- **영향**: 주요 기능으로 성과 분석 격상
|
||||
|
||||
### 3. 실시간 KPI 업데이트
|
||||
- **추가**: 이벤트 상세(13번)에서 실시간 데이터 표시
|
||||
- **기능**: 참여자, 조회수, ROI, 전환율 실시간 갱신
|
||||
|
||||
---
|
||||
|
||||
## 🎨 UI/UX 개선 포인트
|
||||
|
||||
### 강점
|
||||
1. ✅ **일관된 디자인 시스템**: 색상, 타이포그래피, 컴포넌트
|
||||
2. ✅ **모바일 우선 설계**: Bottom Navigation, FAB
|
||||
3. ✅ **명확한 정보 계층**: 카드, 헤더, 섹션 구분
|
||||
4. ✅ **시각적 피드백**: 버튼 상태, 카드 선택, 로딩 상태
|
||||
5. ✅ **접근성 고려**: Material Icons, 명확한 레이블
|
||||
|
||||
### 개선 권장사항
|
||||
1. ⚠️ **키보드 네비게이션**: 접근성 개선 필요
|
||||
2. ⚠️ **에러 상태 처리**: 일부 화면에서 에러 메시지 미비
|
||||
3. ⚠️ **로딩 상태**: 비동기 작업 시 로딩 인디케이터 추가 권장
|
||||
4. ⚠️ **빈 상태**: 데이터 없을 때 처리 개선
|
||||
|
||||
---
|
||||
|
||||
## 📋 유저스토리 업데이트 핵심 사항
|
||||
|
||||
### 1. 화면 구성 변경
|
||||
- **대시보드**: AI추천/템플릿 버튼 삭제 → "새 이벤트", "분석" 2개만
|
||||
- **네비게이션**: 햄버거 메뉴 제거 → Bottom Navigation 4개 탭
|
||||
|
||||
### 2. 이벤트 생성 플로우 수정
|
||||
- **09번 화면**: Radio 버튼 → 카드 선택 UI
|
||||
- **10번 화면**: 로고 위치 섹션 삭제
|
||||
- **흐름**: 07 → 08 → 09 → 10 → 11 → 12
|
||||
|
||||
### 3. 분석 기능 강화
|
||||
- **Bottom Nav**: "분석" 탭 추가 (17-성과분석.html)
|
||||
- **실시간 모니터링**: 이벤트 상세에서 실시간 KPI
|
||||
|
||||
### 4. 주요 화면 번호
|
||||
```
|
||||
01: 로그인
|
||||
02: 회원가입
|
||||
03: 프로필
|
||||
04: 로그아웃 확인
|
||||
05: 대시보드
|
||||
06: 이벤트목록
|
||||
07: 이벤트목적선택
|
||||
08: AI이벤트추천
|
||||
09: 콘텐츠미리보기 (스타일 선택)
|
||||
10: 콘텐츠편집
|
||||
11: 배포채널선택
|
||||
12: 최종승인
|
||||
13: 이벤트상세
|
||||
14: 참여자목록
|
||||
15: 이벤트참여 (고객용)
|
||||
16: 당첨자추첨
|
||||
17: 성과분석
|
||||
```
|
||||
|
||||
### 5. 네비게이션 구조
|
||||
```
|
||||
Bottom Navigation (모든 주요 화면):
|
||||
- 홈: 05-대시보드.html
|
||||
- 이벤트: 06-이벤트목록.html
|
||||
- 분석: 17-성과분석.html
|
||||
- 프로필: 03-프로필.html
|
||||
|
||||
FAB (새 이벤트):
|
||||
- 07-이벤트목적선택.html
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔄 화면 간 의존성
|
||||
|
||||
### 순차적 플로우
|
||||
1. **이벤트 생성**: 07 → 08 → 09 → 10 → 11 → 12 → 13
|
||||
2. **참여자 관리**: 13 → 14 → 16
|
||||
3. **성과 분석**: 13 → 17
|
||||
|
||||
### 독립적 화면
|
||||
- 05 (대시보드)
|
||||
- 06 (이벤트목록)
|
||||
- 17 (성과분석)
|
||||
|
||||
---
|
||||
|
||||
## 📊 완성도 평가
|
||||
|
||||
| 영역 | 완성도 | 비고 |
|
||||
|------|--------|------|
|
||||
| 화면 디자인 | ✅ 95% | 일관된 디자인 시스템 |
|
||||
| 화면 흐름 | ✅ 90% | 명확한 사용자 여정 |
|
||||
| 반응형 | ✅ 85% | 주요 브레이크포인트 지원 |
|
||||
| 접근성 | ⚠️ 70% | 키보드 네비게이션 개선 필요 |
|
||||
| 에러 처리 | ⚠️ 60% | 에러 상태 보완 필요 |
|
||||
| 로딩 상태 | ⚠️ 65% | 비동기 작업 피드백 추가 권장 |
|
||||
|
||||
---
|
||||
|
||||
## ✅ 결론
|
||||
|
||||
프로토타입은 **17개 화면**으로 구성되어 있으며, AI 기반 이벤트 자동 생성의 전체 사용자 여정을 잘 표현하고 있습니다.
|
||||
|
||||
**주요 강점**:
|
||||
- 명확한 정보 구조와 화면 흐름
|
||||
- 일관된 디자인 시스템
|
||||
- 모바일 친화적 네비게이션
|
||||
|
||||
**개선 영역**:
|
||||
- 접근성 (키보드 네비게이션, 스크린 리더)
|
||||
- 에러 및 로딩 상태 처리
|
||||
- 빈 상태 디자인
|
||||
|
||||
**유저스토리 업데이트 필요 사항**:
|
||||
1. 화면 번호 및 명칭 정리 (01~17번)
|
||||
2. 네비게이션 구조 변경 (햄버거 메뉴 제거, Bottom Nav 4개 탭)
|
||||
3. 이벤트 생성 플로우 상세화 (7단계: 목적→AI추천→스타일→편집→배포→승인→상세)
|
||||
4. 분석 기능 강화 (Bottom Nav 추가, 실시간 KPI)
|
||||
Reference in New Issue
Block a user