userstory

This commit is contained in:
cherry2250 2025-10-21 16:53:33 +09:00
parent e8e3dce69c
commit 726c6b629a
3 changed files with 382 additions and 34 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

View File

@ -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)

View File

@ -70,7 +70,7 @@ UFR-USER-020: [로그인] 소상공인으로서 | 나는 이벤트를 관리하
UFR-USER-030: [프로필관리] 소상공인으로서 | 나는 내 정보를 최신 상태로 유지하기 위해 | 프로필 정보를 편집하고 싶다.
- 시나리오: 프로필 정보 수정
로그인한 상태에서 프로필 편집 화면에 접근한 상황에서 | 변경할 정보를 수정하고 저장 버튼을 클릭하면 | 변경사항이 저장되고 확인 메시지가 표시된다.
Bottom Navigation의 "프로필" 탭을 클릭하여 프로필 편집 화면에 접근한 상황에서 | 변경할 정보를 수정하고 저장 버튼을 클릭하면 | 변경사항이 저장되고 확인 메시지가 표시된다.
[수정 가능 항목]
- 기본 정보
@ -97,7 +97,7 @@ UFR-USER-030: [프로필관리] 소상공인으로서 | 나는 내 정보를 최
UFR-USER-040: [로그아웃] 소상공인으로서 | 나는 보안을 위해 | 서비스 사용 후 안전하게 로그아웃하고 싶다.
- 시나리오: 안전한 로그아웃
로그인된 상태에서 프로필 메뉴의 로그아웃을 선택한 상황에서 | 로그아웃 확인 다이얼로그에서 확인을 클릭하면 | 세션이 종료되고 로그인 화면으로 이동한다.
Bottom Navigation의 "프로필" 탭에서 로그아웃 버튼을 선택한 상황에서 | 로그아웃 확인 다이얼로그에서 확인을 클릭하면 | 세션이 종료되고 로그인 화면으로 이동한다.
[로그아웃 요구사항]
- 확인 다이얼로그
@ -116,7 +116,7 @@ UFR-USER-040: [로그아웃] 소상공인으로서 | 나는 보안을 위해 |
1) 이벤트 관리
UFR-EVENT-010: [대시보드] 소상공인으로서 | 나는 내 이벤트를 효율적으로 관리하기 위해 | 대시보드에서 진행중/예정/종료된 이벤트를 한눈에 확인하고 싶다.
- 시나리오: 대시보드에서 이벤트 목록 확인
로그인한 상태에서 대시보드에 접근한 상황에서 | 이벤트 목록 영역을 확인하면 | 내 이벤트들이 상태별로 구분되어 표시된다.
로그인한 상태에서 Bottom Navigation의 "홈" 탭을 클릭하거나, 최초 로그인 시 대시보드에 접근한 상황에서 | 이벤트 목록 영역을 확인하면 | 내 이벤트들이 상태별로 구분되어 표시된다.
[표시 요구사항]
- 이벤트 상태별 섹션 구성
@ -357,7 +357,7 @@ UFR-EVENT-060: [이벤트상세조회] 소상공인으로서 | 나는 진행 중
UFR-EVENT-070: [이벤트목록관리] 소상공인으로서 | 나는 모든 이벤트를 관리하기 위해 | 전체 이벤트 목록을 조회하고 필터링/검색하고 싶다.
- 시나리오: 전체 이벤트 목록 조회
대시보드에서 "전체보기" 링크를 클릭한 상황에서 | 이벤트 목록 화면에 접근하면 | 모든 이벤트가 테이블 형태로 표시된다.
Bottom Navigation의 "이벤트" 탭을 클릭하거나, 대시보드에서 "전체보기" 링크를 클릭한 상황에서 | 이벤트 목록 화면에 접근하면 | 모든 이벤트가 테이블 형태로 표시된다.
[목록 표시 요구사항]
- 테이블 컬럼
@ -471,7 +471,7 @@ UFR-AI-010: [AI트렌드분석및이벤트추천] AI 시스템으로서 | 나는
1) 콘텐츠 생성
UFR-CONT-010: [SNS이미지생성] 소상공인으로서 | 나는 SNS에 게시할 이벤트 이미지를 쉽게 만들기 위해 | AI가 자동으로 3가지 스타일의 이미지를 생성하기를 원한다.
- 시나리오: SNS 이미지 자동 생성
이벤트 추천을 완료한 상황에서 | 콘텐츠 생성 화면에 접근하면 | AI가 3가지 스타일의 SNS 이미지를 자동 생성한다.
이벤트 추천을 완료한 상황에서 | SNS 이미지 생성 화면에 접근하면 | AI가 3가지 스타일의 SNS 이미지를 자동 생성한다.
[이미지 생성 입력]
- 이벤트 제목
@ -479,21 +479,24 @@ UFR-CONT-010: [SNS이미지생성] 소상공인으로서 | 나는 SNS에 게시
- 브랜드 컬러 (프로필에서 가져옴)
- 로고 이미지 (업로드된 경우)
[3가지 스타일]
[3가지 스타일 카드 선택]
1. 심플 스타일
- 깔끔한 디자인
- 텍스트 중심
- 읽기 쉬운 구성
- 카드 형태로 제공 (선택 가능)
2. 화려한 스타일
- 눈에 띄는 디자인
- 이미지 강조
- 풍부한 색상
- 카드 형태로 제공 (선택 가능)
3. 트렌디 스타일
- 최신 트렌드 반영
- SNS 최적화
- MZ세대 타겟
- 카드 형태로 제공 (선택 가능)
[플랫폼별 최적화]
- Instagram: 1080x1080
@ -501,13 +504,16 @@ UFR-CONT-010: [SNS이미지생성] 소상공인으로서 | 나는 SNS에 게시
- Kakao Channel: 800x800
[생성 프로세스]
- 생성 진행 표시 (로딩 인디케이터)
- 예상 소요 시간: 30초 이내
- 생성 완료 시 미리보기 제공
- 생성 진행 표시 (스피너 애니메이션)
- "딥러닝 모델이 이벤트에 어울리는 이미지를 생성하고 있어요..." 안내
- 예상 소요 시간: 5초 이내
- 생성 완료 시 3가지 스타일 카드 표시
[이미지 선택]
- 3가지 중 1개 선택 가능
- 또는 "다시 생성" 옵션 (최대 3회)
[이미지 선택 및 미리보기]
- 3가지 스타일 중 1개 선택 가능 (카드 선택 방식)
- 각 카드 클릭 시 풀스크린 미리보기 제공
- "다시 생성" 옵션 (최대 3회)
- 선택 완료 시 "다음" 버튼 활성화
- M/21
@ -515,32 +521,31 @@ UFR-CONT-010: [SNS이미지생성] 소상공인으로서 | 나는 SNS에 게시
UFR-CONT-020: [콘텐츠편집] 소상공인으로서 | 나는 생성된 이미지를 내 스타일에 맞게 조정하기 위해 | 간단한 편집 기능을 사용하고 싶다.
- 시나리오: 생성된 콘텐츠 편집
SNS 이미지가 생성된 상황에서 | 편집 화면에서 텍스트나 색상을 수정하면 | 실시간으로 미리보기가 업데이트된다.
SNS 이미지 스타일을 선택한 상황에서 | 콘텐츠 편집 화면에서 텍스트나 색상을 수정하면 | 실시간으로 미리보기가 업데이트된다.
[편집 가능 항목]
- 텍스트 수정
- 제목 텍스트
- 경품 정보 텍스트
- 참여 안내 텍스트
- 제목 텍스트 (인라인 편집)
- 경품 정보 텍스트 (인라인 편집)
- 참여 안내 텍스트 (인라인 편집)
- 색상 조정
- 배경색
- 텍스트 색상
- 강조 색상
- 로고 위치
- 위치 이동
- 크기 조절
- 배경색 (컬러 피커)
- 텍스트 색상 (컬러 피커)
- 강조 색상 (컬러 피커)
[편집 제약사항]
- 레이아웃 변경 불가
- 이미지 교체 불가 (다시 생성으로만 가능)
- 로고 위치/크기 조절 불가
- 이미지 교체 불가 (이전 화면의 "다시 생성"으로만 가능)
[실시간 미리보기]
- 수정사항 즉시 반영
- 플랫폼별 미리보기 전환 가능
- 플랫폼별 미리보기 전환 가능 (Instagram/Naver/Kakao)
- 모바일 상단에 미리보기 영역 표시
[저장 및 완료]
- "저장" 버튼: 편집 내용 저장
- "완료" 버튼: 배포 채널 선택 화면으로 이동
- "저장" 버튼: 편집 내용 임시 저장
- "다음" 버튼: 배포 채널 선택 화면으로 이동
- S/13
@ -708,9 +713,9 @@ UFR-PART-030: [당첨자추첨] 소상공인으로서 | 나는 공정한 당첨
7. Analytics 서비스
1) 효과 측정
UFR-ANAL-010: [실시간통합대시보드] 소상공인으로서 | 나는 이벤트 성과를 한눈에 파악하기 위해 | 모든 지표가 통합된 실시간 대시보드를 보고 싶다.
- 시나리오: 통합 대시보드 조회
이벤트 상세 화면에서 "효과 측정 대시보드" 버튼을 클릭한 상황에서 | 통합 대시보드 화면에 접근하면 | 모든 핵심 지표가 하나의 화면에 실시간으로 표시된다.
UFR-ANAL-010: [성과분석] 소상공인으로서 | 나는 이벤트 성과를 한눈에 파악하기 위해 | 모든 지표가 통합된 실시간 성과분석 대시보드를 보고 싶다.
- 시나리오: 성과분석 대시보드 조회
Bottom Navigation의 "분석" 탭을 클릭하거나, 이벤트 상세 화면에서 "성과분석" 버튼을 클릭한 상황에서 | 성과분석 대시보드 화면에 접근하면 | 모든 핵심 지표가 하나의 화면에 실시간으로 표시된다.
[대시보드 구성]
@ -950,11 +955,15 @@ UFR-ANAL-010: [실시간통합대시보드] 소상공인으로서 | 나는 이
8. ✅ PDF / Excel 내보내기/다운로드 기능 삭제됨
**[이벤트 생성 플로우 (최종)]**
1. 이벤트 목적 선택
2. AI 트렌드 분석 및 이벤트 추천 (3가지, 제목/경품 간단 수정 가능)
3. 콘텐츠 생성
4. 배포채널 선택
5. 최종승인
1. 이벤트 목적 선택 (07-이벤트목적선택)
2. AI 트렌드 분석 및 이벤트 추천 (08-AI이벤트추천)
- 3가지 추천, 제목/경품 간단 수정 가능
3. SNS 이미지 생성 (09-SNS이미지생성)
- 3가지 스타일 카드 중 선택
4. 콘텐츠 편집 (10-콘텐츠편집)
- 텍스트, 색상 편집
5. 배포채널 선택 (11-배포채널선택)
6. 최종승인 (12-최종승인)
**[서비스 간 의존성]**
- User → Event: 사용자 인증 정보 제공