edit uiux

2025-12-06 11:26:26 +00:00 · 2025-10-20 20:17:24 +09:00 · 2025-10-20 20:17:24 +09:00 · 50786d2b85
commit 50786d2b85
parent 01ec924a95
1 changed files with 780 additions and 49 deletions
--- a/design/uiux/uiux.md
+++ b/design/uiux/uiux.md
@ -527,7 +527,7 @@
 ---
-#### 03-이벤트목적선택
+#### 05-이벤트목적선택
 **개요**
 - **목적**: 이벤트 기획의 방향성 설정
@ -535,8 +535,10 @@
 - **비즈니스 중요도**: Must (M/3)
 **주요 기능**
-1. 4가지 목적 중 하나 선택 (라디오 버튼)
+1. 4가지 목적 중 하나 선택 (카드형 라디오 버튼)
-2. 각 목적별 설명 및 예상 효과 제시
+2. 각 목적별 아이콘, 설명, 예상 효과 제시
 3. 목적별 상세 정보 바텀 시트 제공 (주요 혜택, 추천 전략, 성공률)
 4. 선택 시 다음 단계(AI 분석) 자동 진행
 **UI 구성요소**
@ -545,77 +547,420 @@
 ┌─────────────────────────┐
 │ ← [닫기] 새 이벤트 기획  │
 ├─────────────────────────┤
-│ 단계 1/6: 목적 선택      │
+│ 단계 1/6 ●○○○○○        │
 │ ━━━━━━━━━━━━━━━━━━━━━ │
 │                         │
 │ 이벤트 목적을 선택하세요 │
 │                         │
 │ ┌─────────────────────┐│
-│ │ ○ 신규고객 유치      ││
+│ │ 👤                  ││
 │ │ 신규고객 유치        ││
 │ │ 새로운 고객 확보     ││
-│ │   예상효과: 👤+30%  ││
+│ │ 예상효과: +30%       ││
 │ │              [ℹ️]    ││
 │ └─────────────────────┘│
 │                         │
 │ ┌─────────────────────┐│
-│ │ ○ 재방문 유도        ││
+│ │ 🔄                  ││
 │ │ 재방문 유도          ││
 │ │ 기존 고객 재방문     ││
-│ │   예상효과: 🔄+25%  ││
+│ │ 예상효과: +25%       ││
 │ │              [ℹ️]    ││
 │ └─────────────────────┘│
 │                         │
 │ ┌─────────────────────┐│
-│ │ ○ 매출 증대          ││
+│ │ 💰                  ││
 │ │ 매출 증대            ││
 │ │ 단기 매출 향상       ││
-│ │   예상효과: 💰+40%  ││
+│ │ 예상효과: +40%       ││
 │ │              [ℹ️]    ││
 │ └─────────────────────┘│
 │                         │
 │ ┌─────────────────────┐│
-│ │ ○ 인지도 향상        ││
+│ │ 📢                  ││
 │ │ 인지도 향상          ││
 │ │ 브랜드 인지도 제고   ││
-│ │   예상효과: 📢+50%  ││
+│ │ 예상효과: +50%       ││
 │ │              [ℹ️]    ││
 │ └─────────────────────┘│
 │                         │
 ├─────────────────────────┤
 │ [     다음 (AI분석)  ]  │
 └─────────────────────────┘
 ```
 **목적별 상세 정보 (바텀 시트)**
 ```
 ┌─────────────────────────┐
 │ [━━]   신규고객 유치     │
 ├─────────────────────────┤
 │ 👤 예상효과: 신규 고객 +30% │
 │ 📊 성공률: 85%           │
 │                         │
 │ 💡 주요 혜택            │
 │ • 새로운 잠재고객 발굴   │
 │ • 고객 기반 확대         │
 │ • 시장 점유율 증가       │
 │                         │
 │ 🎯 추천 전략            │
 │ • 할인 쿠폰 제공         │
 │ • SNS 바이럴 마케팅      │
 │ • 신규 고객 전용 특전    │
 │                         │
 │ [   이 목적으로 진행   ] │
 └─────────────────────────┘
 ```
 **목적별 세부 정보**
 **1. 신규고객 유치**
 - 예상효과: +30%
 - 성공률: 85%
 - 주요 혜택:
  - 새로운 잠재고객 발굴
  - 고객 기반 확대
  - 시장 점유율 증가
 - 추천 전략:
  - 할인 쿠폰 제공
  - SNS 바이럴 마케팅
  - 신규 고객 전용 특전
 **2. 재방문 유도**
 - 예상효과: +25%
 - 성공률: 80%
 - 주요 혜택:
  - 고객 충성도 향상
  - 재구매율 증가
  - 고객 생애 가치(LTV) 상승
 - 추천 전략:
  - 재방문 쿠폰 증정
  - 포인트 적립 이벤트
  - VIP 고객 우대 프로그램
 **3. 매출 증대**
 - 예상효과: +40%
 - 성공률: 75%
 - 주요 혜택:
  - 단기 매출 급증
  - 재고 소진 효과
  - 객단가 상승
 - 추천 전략:
  - 한정 수량 프로모션
  - 세트 상품 할인
  - 시간대별 특가 이벤트
 **4. 인지도 향상**
 - 예상효과: +50%
 - 성공률: 90%
 - 주요 혜택:
  - 브랜드 노출 극대화
  - 입소문 효과
  - 잠재 고객층 확대
 - 추천 전략:
  - SNS 공유 이벤트
  - 해시태그 챌린지
  - 인플루언서 협업
 **인터랙션**
- 카드 선택 시 라디오 버튼 활성화 및 카드 하이라이트
+1. **카드 선택**:
- 선택 완료 시 "다음" 버튼 활성화
+   - 카드 탭 시 선택 상태 전환 (배경색 변경, 체크 표시)
- 각 카드 롱프레스/호버 시 상세 툴팁 표시
+   - 호버/롱프레스 시 카드 약간 확대 애니메이션
   - 선택된 카드는 Primary Color 배경, 미선택 카드는 회색 배경
 2. **상세 정보 보기** (ℹ️ 버튼):
   - 각 카드 우측 하단 ℹ️ 아이콘 탭
   - 바텀 시트 슬라이드업 애니메이션 (0.3초)
   - 상세 정보 표시 (주요 혜택, 추천 전략, 성공률)
   - 바텀 시트 내 "이 목적으로 진행" 버튼 탭 시:
     - 해당 목적 자동 선택
     - 바텀 시트 닫힘
     - 다음 단계(AI 트렌드 분석) 자동 진행
 3. **다음 단계 진행**:
   - 카드 직접 선택 시 즉시 다음 화면(06-AI트렌드분석결과)으로 자동 이동
   - 트랜지션: 페이드아웃 → 페이드인 (0.5초)
   - 선택한 목적 정보는 다음 단계로 전달
 4. **뒤로가기**:
   - 좌측 상단 X 버튼 또는 디바이스 뒤로가기
   - 확인 다이얼로그: "기획을 취소하시겠습니까?"
   - 확인 시 홈 화면(02)으로 이동
 **접근성**
 - 각 카드에 role="radio" 속성
 - aria-label: "신규고객 유치, 예상효과 30% 증가"
 - 키보드 네비게이션: Tab/Shift+Tab으로 카드 이동, Enter/Space로 선택
 - 스크린 리더: 목적명, 설명, 예상효과 순서로 읽기
 **성능**
 - 초기 로딩 < 1초
- 선택 즉시 다음 단계 준비 (프리페치)
+- 카드 선택 후 다음 화면 프리페치 (0.5초 이내)
 - 바텀 시트 애니메이션 60fps 유지
 - 이미지 아이콘 대신 유니코드 이모지 사용 (로딩 시간 절감)
 ---
-#### 04-AI트렌드분석결과
+#### 06-AI이벤트유형추천
 **개요**
- **목적**: AI가 분석한 업종/지역 트렌드 제시
+- **목적**: AI 기반 이벤트 유형 추천 및 선택
 - **관련 유저스토리**: UFR-PLAN-020
- **비즈니스 중요도**: Must (M/13)
+- **비즈니스 중요도**: Must (M/21)
 **주요 기능**
-1. 업종, 지역, 시즌 기반 트렌드 분석
+1. 선택한 목적에 맞는 7가지 이벤트 유형 AI 추천
-2. 주요 트렌드 3-5가지 제시
+2. 가성비 등급 표시 (S/A/B/C/D)
-3. 예상 성공률 표시
+3. 정렬 기능 (가성비순, 추천순, 난이도순, ROI순)
 4. 태그 필터링 (디지털/오프라인, SNS, 저예산 등)
 5. 각 이벤트 유형별 상세 정보 확인
 6. 이벤트 유형 선택 → 상세 정보 화면으로 이동
 **UI 구성요소**
 **모바일**
 ```
 ┌─────────────────────────┐
 │ ← [뒤로] AI 이벤트 추천  │
 ├─────────────────────────┤
 │ 단계 2/6 ●●○○○○        │
 │                         │
 │ 매장 유형에 맞는         │
 │ 이벤트를 추천해드려요    │
 │                         │
 │ [정렬: 가성비순 ▼]       │
 │ #전체 #디지털 #오프라인  │
 │                         │
 │ ┌─────────────────────┐│
 │ │ SNS 해시태그 이벤트  ││
 │ │ 가성비 [S] 난이도 ⭐ ││
 │ │ 💰 5만원~10만원      ││
 │ │ 📊 ROI: 1,700%       ││
 │ │                     ││
 │ │ 예상효과             ││
 │ │ • SNS 노출 +400%    ││
 │ │ • 신규 고객 +70%    ││
 │ │ • 인지도 +120%      ││
 │ │                     ││
 │ │ #디지털 #SNS #바이럴││
 │ │          [자세히 보기]││
 │ └─────────────────────┘│
 │                         │
 │ ┌─────────────────────┐│
 │ │ 명함형 쿠폰 배포     ││
 │ │ 가성비 [S] 난이도 ⭐ ││
 │ │ 💰 3만원~8만원       ││
 │ │ 📊 ROI: 2,592%       ││
 │ │                     ││
 │ │ 예상효과             ││
 │ │ • 재방문율 +350%    ││
 │ │ • 객단가 +45%       ││
 │ │ • 신규고객 +120%    ││
 │ │                     ││
 │ │ #오프라인 #쿠폰      ││
 │ │ #최고가성비          ││
 │ │          [자세히 보기]││
 │ └─────────────────────┘│
 │                         │
 │ ┌─────────────────────┐│
 │ │ 출석체크 이벤트      ││
 │ │ 가성비 [A] 난이도 ⭐⭐││
 │ │ 💰 8만원~15만원      ││
 │ │ 📊 ROI: 1,875%       ││
 │ │          [자세히 보기]││
 │ └─────────────────────┘│
 │                         │
 │ ... (스크롤로 더보기)    │
 │                         │
 └─────────────────────────┘
 ```
 **7가지 추천 이벤트 유형**
 **1. SNS 해시태그 이벤트**
 - 예산: 5만원 ~ 10만원
 - 가성비 등급: S (17.0점)
 - 난이도: ⭐ (1/5)
 - 추천점수: 8.3/10
 - 예상 ROI: 1,700%
 - 예상 효과:
  - SNS 노출 +400%
  - 신규 고객 +70%
  - 브랜드 인지도 +120%
 - 태그: #디지털 #SNS #바이럴 #저예산
 **2. 명함형 쿠폰 배포**
 - 예산: 3만원 ~ 8만원
 - 가성비 등급: S (25.9점)
 - 난이도: ⭐ (1/5)
 - 추천점수: 9.1/10
 - 예상 ROI: 2,592%
 - 예상 효과:
  - 재방문율 +350%
  - 객단가 +45%
  - 신규 고객 +120%
 - 태그: #오프라인 #쿠폰 #지역마케팅 #최고가성비
 **3. 출석체크 이벤트**
 - 예산: 8만원 ~ 15만원
 - 가성비 등급: A (15.0점)
 - 난이도: ⭐⭐ (2/5)
 - 추천점수: 7.8/10
 - 예상 ROI: 1,875%
 - 예상 효과:
  - 재방문율 +280%
  - 고객 충성도 +150%
  - 참여율 +65%
 - 태그: #디지털 #앱필요 #중기간
 **4. 룰렛 이벤트**
 - 예산: 10만원 ~ 20만원
 - 가성비 등급: B (12.5점)
 - 난이도: ⭐⭐ (2/5)
 - 추천점수: 7.5/10
 - 예상 ROI: 1,250%
 - 예상 효과:
  - 참여율 +200%
  - 재미 요소로 공유율 +180%
  - 신규 고객 +90%
 - 태그: #디지털 #게이미피케이션 #재미
 **5. 친구 초대 이벤트**
 - 예산: 15만원 ~ 30만원
 - 가성비 등급: B (10.0점)
 - 난이도: ⭐⭐⭐ (3/5)
 - 추천점수: 7.2/10
 - 예상 ROI: 1,000%
 - 예상 효과:
  - 신규 고객 +250%
  - 바이럴 효과 +300%
  - 고객 확보 비용 -40%
 - 태그: #디지털 #바이럴 #신규고객
 **6. 리뷰 작성 이벤트**
 - 예산: 12만원 ~ 25만원
 - 가성비 등급: C (8.3점)
 - 난이도: ⭐⭐⭐ (3/5)
 - 추천점수: 6.9/10
 - 예상 ROI: 833%
 - 예상 효과:
  - 리뷰 수 +400%
  - 신뢰도 +120%
  - 검색 노출 +80%
 - 태그: #디지털 #신뢰구축 #장기전략
 **7. 포토 콘테스트**
 - 예산: 20만원 ~ 50만원
 - 가성비 등급: C (5.0점)
 - 난이도: ⭐⭐⭐⭐ (4/5)
 - 추천점수: 6.5/10
 - 예상 ROI: 500%
 - 예상 효과:
  - UGC 콘텐츠 +500%
  - SNS 노출 +250%
  - 브랜드 이미지 +150%
 - 태그: #디지털 #SNS #고예산 #장기전략
 **가성비 등급 기준**
 - **S등급**: 20점 이상 (최고 가성비)
 - **A등급**: 15~19점 (매우 높은 가성비)
 - **B등급**: 10~14점 (높은 가성비)
 - **C등급**: 5~9점 (보통 가성비)
 - **D등급**: 5점 미만 (낮은 가성비)
 **인터랙션**
 1. **정렬 기능**:
   - 드롭다운 메뉴: 가성비순, 추천순, 난이도순, ROI순
   - 선택 시 카드 순서 즉시 재정렬 (애니메이션 0.3초)
   - 현재 정렬 기준 헤더에 표시
 2. **태그 필터링**:
   - 태그 칩 탭으로 필터 활성화/비활성화
   - 선택된 태그는 Primary Color 배경
   - 여러 태그 동시 선택 가능 (OR 조건)
   - 필터링 시 매칭되는 카드만 표시 (페이드 애니메이션)
 3. **카드 인터랙션**:
   - 카드 전체 탭 시 해당 이벤트 유형의 상세 정보 화면(06-2)으로 이동
   - "자세히 보기" 버튼 탭 시 상세 정보 화면으로 이동
   - 호버 시 카드 살짝 확대 효과 (스케일 1.02)
   - 스크롤 시 무한 스크롤 (7개 전체 로드)
 4. **AI 분석 프로세스**:
   - 이전 화면(05)에서 선택한 목적 기반 추천
   - 매장 업종, 지역, 시즌 정보 반영
   - 로딩: 스켈레톤 UI 표시 (1-2초)
   - 분석 완료 후 카드 순차 페이드인 (각 0.1초 간격)
 5. **트렌드 분석 보기** (옵션):
   - 우측 상단 "📊 트렌드 분석" 버튼
   - 탭 시 AI 트렌드 분석 결과 모달/바텀 시트 표시
   - 현재 계절, 업종별 트렌드 정보 제공
 **접근성**
 - 각 카드에 role="article" 속성
 - aria-label: "SNS 해시태그 이벤트, 가성비 S등급, 예상 ROI 1700%"
 - 키보드: Tab으로 카드 탐색, Enter로 상세 보기
 - 스크린 리더: 이벤트명, 가성비, 예산, 효과 순서로 읽기
 - 색맹 고려: 등급 표시에 색상 + 문자 병행 (S/A/B/C/D)
 **성능**
 - 초기 로딩 < 2초 (AI 추천 포함)
 - 카드 렌더링: 가상 스크롤 적용 (메모리 효율화)
 - 이미지 없이 아이콘/이모지만 사용 (빠른 렌더링)
 - 정렬/필터링 즉시 반영 (< 0.3초)
 - 다음 화면(상세 정보) 프리페치
 **AI 추천 로직**
 - 입력: 선택한 목적, 매장 업종, 지역, 계절, 예산 범위
 - Claude API 활용: 7가지 이벤트 유형 추천
 - 가성비 점수 계산: (예상 효과 / 예상 비용) × 가중치
 - 난이도 평가: 준비 시간, 기술 요구사항, 복잡도
 - ROI 예측: 동일 업종 과거 데이터 기반
 ---
 #### 06-1-AI트렌드분석결과
 **개요**
 - **목적**: AI가 분석한 업종/지역/시즌 트렌드 제시
 - **관련 유저스토리**: UFR-PLAN-020
 - **비즈니스 중요도**: Must (M/13)
 **주요 기능**
 1. 5단계 AI 분석 프로세스 시각화 (로딩 애니메이션)
 2. 업종, 지역, 시즌 기반 맞춤형 트렌드 분석
 3. 주요 트렌드 3-5가지 카드 형태로 제시
 4. 트렌드별 추천 이벤트 전략 제시
 5. 분석 완료 후 자동으로 다음 단계 진행
 **UI 구성요소**
 **모바일 - 분석 진행 중**
 ```
 ┌─────────────────────────┐
 │ AI 트렌드 분석          │
 ├─────────────────────────┤
 │                         │
 │       🤖               │
 │   AI가 분석중입니다      │
 │                         │
 │ ━━━━━━━━●━━━━━━━━━━━ │
 │         60%             │
 │                         │
 │ 시즌 패턴 학습 중...     │
 │                         │
 │ 분석 단계:              │
 │ ✅ 업종 데이터 수집      │
 │ ✅ 지역 트렌드 분석      │
 │ 🔄 시즌 패턴 학습       │
 │ ⏳ 최적 전략 계산       │
 │ ⏳ 분석 완료            │
 │                         │
 └─────────────────────────┘
 ```
 **모바일 - 분석 완료 후**
 ```
 ┌─────────────────────────┐
 │ ← [뒤로] AI 트렌드 분석  │
 ├─────────────────────────┤
 │ 단계 2/6: 트렌드 분석    │
 │ ━━━━━━━━━━━━━━━━━━━━━ │
 │                         │
 │ 🤖 AI가 분석중입니다... │
 │ [프로그레스 바]         │
 │                         │
 │ (분석 완료 후)          │
 │                         │
 │ 📊 분석 결과            │
 │                         │
@ -624,37 +969,423 @@
 │ 지역: 수원시 팔달구     │
 │ 시즌: 겨울 (12월)       │
 │                         │
 │ 주요 트렌드              │
 │                         │
 │ ┌─────────────────────┐│
 │ │ 주요 트렌드          ││
 │ │                     ││
 │ │ 1️⃣ 연말 모임 증가   ││
 │ │ → 단체 할인 이벤트  ││
 │ │   효과적             ││
 │ │                     ││
 │ │ 💡 추천 전략        ││
 │ │ 단체 할인 이벤트 효과││
 │ │ 적, 회식/송년회 수요││
 │ │ 급증으로 단체 예약  ││
 │ │ 고객 공략 필요      ││
 │ └─────────────────────┘│
 │                         │
 │ ┌─────────────────────┐│
 │ │ 2️⃣ 배달 주문 급증   ││
 │ │ → 배달 경품 추천    ││
 │ │                     ││
 │ │ 💡 추천 전략        ││
 │ │ 배달 경품 추천, 배달││
 │ │ 전용 할인 쿠폰 이벤트││
 │ │ 효과적               ││
 │ └─────────────────────┘│
 │                         │
 │ ┌─────────────────────┐│
 │ │ 3️⃣ SNS 공유 활발   ││
-│ │ → 바이럴 참여방법   ││
+│ │                     ││
-│ │   권장               ││
+│ │ 💡 추천 전략        ││
 │ │ 바이럴 참여방법 권장,││
 │ │ 해시태그 이벤트로   ││
 │ │ 노출 극대화          ││
 │ └─────────────────────┘│
 │                         │
 │ 예상 성공률: 78% 🎯    │
 │ (동일 업종 평균 대비)   │
 │                         │
 ├─────────────────────────┤
-│ [   다음 (경품추천)  ]  │
+│ [이벤트 유형 선택하기]  │
 └─────────────────────────┘
 ```
 **5단계 AI 분석 프로세스**
 **1단계: 업종 데이터 수집 (0-20%)**
 - 진행 메시지: "업종 데이터 수집 중..."
 - 처리 내용: 선택한 업종의 과거 이벤트 데이터 수집
 - 예상 시간: 0.5-1초
 **2단계: 지역 트렌드 분석 (20-40%)**
 - 진행 메시지: "지역 트렌드 분석 중..."
 - 처리 내용: 매장 지역의 인구통계 및 소비 패턴 분석
 - 예상 시간: 0.5-1초
 **3단계: 시즌 패턴 학습 (40-60%)**
 - 진행 메시지: "시즌 패턴 학습 중..."
 - 처리 내용: 현재 계절/월의 소비 트렌드 패턴 분석
 - 예상 시간: 1-2초
 **4단계: 최적 전략 계산 (60-80%)**
 - 진행 메시지: "최적 전략 계산 중..."
 - 처리 내용: AI가 최적의 이벤트 전략 도출
 - 예상 시간: 1-2초
 **5단계: 분석 완료 (80-100%)**
 - 진행 메시지: "분석 완료!"
 - 처리 내용: 결과 데이터 구조화 및 UI 렌더링 준비
 - 예상 시간: 0.5초
 **업종별 트렌드 예시**
 **치킨 전문점 (겨울)**
 1. 연말 모임 증가 → 단체 할인 이벤트 효과적
 2. 배달 주문 급증 → 배달 경품 추천
 3. SNS 공유 활발 → 바이럴 참여방법 권장
 **카페 (여름)**
 1. 아이스 음료 선호 → 시즌 메뉴 할인
 2. 학생 고객 증가 → 학생 할인 이벤트
 3. 포토존 수요 → 인스타그램 해시태그 이벤트
 **미용실 (봄)**
 1. 졸업/입학 시즌 → 패키지 할인
 2. 웨딩 성수기 → 신부 메이크업 특가
 3. 새학기 이미지 변신 → SNS 공유 이벤트
 **인터랙션**
- AI 분석 진행 시 애니메이션 표시 (3-13초 소요)
+1. **AI 분석 진행 중**:
- 분석 결과 순차적 페이드인 애니메이션
+   - 5단계 프로그레스 바 애니메이션 (0% → 100%)
- 각 트렌드 탭 시 상세 정보 바텀 시트
+   - 각 단계별 진행 메시지 실시간 업데이트
   - 체크마크(✅)/진행중(🔄)/대기중(⏳) 아이콘 변경
   - 부드러운 로딩 애니메이션 (펄스 효과)
   - 총 소요 시간: 3-7초
 2. **분석 완료 후**:
   - 결과 카드 순차 페이드인 애니메이션 (각 0.2초 간격)
   - 매장 정보 먼저 표시 → 트렌드 카드 순차 표시
   - 각 트렌드 카드에 슬라이드업 애니메이션
 3. **트렌드 카드 인터랙션**:
   - 각 카드 탭 시 확장되어 상세 설명 표시
   - 호버 시 카드 살짝 확대 (스케일 1.02)
   - 추천 전략 텍스트 강조 표시
 4. **다음 단계 진행**:
   - "이벤트 유형 선택하기" 버튼 탭
   - 화면 06(AI이벤트유형추천)으로 이동
   - 분석된 트렌드 정보는 다음 단계로 전달
 5. **에러 처리**:
   - 분석 실패 시: "분석에 실패했습니다" 메시지 + [재시도] 버튼
   - 타임아웃 (15초 초과): "분석 시간이 초과되었습니다" + [재시도] 버튼
 **접근성**
 - 로딩 진행 상태 aria-live="polite" 속성으로 스크린 리더 알림
 - 프로그레스 바 role="progressbar", aria-valuenow 동적 업데이트
 - 각 트렌드 카드 role="article", aria-label로 내용 요약
 - 키보드: Tab으로 트렌드 카드 탐색, Enter로 확장/축소
 **성능**
- AI 분석 시간: 목표 3초 이내
+- AI 분석 시간: 목표 3-7초 (Claude API 응답 시간 포함)
- 실패 시 재시도 버튼 제공
+- 로딩 애니메이션 60fps 유지
 - 타임아웃 설정: 15초 (초과 시 재시도 옵션)
 - 결과 캐싱: 동일 조건 재분석 시 즉시 표시
 - 다음 화면(이벤트 유형) 프리페치
 **AI 분석 로직**
 - 입력: 매장 업종, 지역, 현재 계절/월
 - Claude API 활용: 맞춤형 트렌드 분석 및 전략 추천
 - 분석 범위:
  - 동일 업종 과거 3년 이벤트 데이터
  - 지역 인구통계 및 소비 패턴
  - 계절별/월별 소비 트렌드
  - SNS 언급량 및 키워드 분석
 - 출력: 3-5개 주요 트렌드 + 각 트렌드별 추천 전략
 ---
 #### 06-2-이벤트상세정보
 **개요**
 - **목적**: 선택한 이벤트 유형의 상세 정보 제공
 - **관련 유저스토리**: UFR-PLAN-020
 - **비즈니스 중요도**: Must (M/21)
 **주요 기능**
 1. 4개 탭으로 구성된 상세 정보 제공
   - 개요: 이벤트 핵심 정보 및 예상 효과
   - 실행 가이드: 5단계 구현 타임라인
   - 비용 구조: 상세 비용 내역 및 예산 계획
   - 성공 사례: 실제 사례 및 성과 데이터
 2. 탭 전환으로 정보 탐색
 3. 이벤트 유형 선택 또는 돌아가기 기능
 **UI 구성요소**
 **모바일**
 ```
 ┌─────────────────────────┐
 │ ← [뒤로] SNS 해시태그 이벤트│
 ├─────────────────────────┤
 │ ┌─────┬─────┬─────┬───┐│
 │ │개요 │실행│비용│성공││
 │ │     │가이드│구조│사례││
 │ └─────┴─────┴─────┴───┘│
 │ ━━━━━━━━━━━━━━━━━━━━━ │
 │                         │
 │ [탭 1: 개요]            │
 │                         │
 │ 🎯 이벤트 핵심          │
 │                         │
 │ ┌─────────────────────┐│
 │ │ 가성비 [S]           ││
 │ │ 난이도 ⭐ (매우 쉬움)││
 │ │ 예산 5만원~10만원    ││
 │ │ 준비기간 1-2일       ││
 │ └─────────────────────┘│
 │                         │
 │ 📈 예상 효과            │
 │ • SNS 노출 +400%       │
 │ • 신규 고객 +70%       │
 │ • 브랜드 인지도 +120%  │
 │                         │
 │ 💡 이런 분들에게 추천   │
 │ • SNS 마케팅 중요 매장  │
 │ • 저예산 고효율 원하는  │
 │ • 빠른 시작 원하는      │
 │                         │
 ├─────────────────────────┤
 │ [  이 이벤트로 진행  ]  │
 │ [     다른 유형 보기  ]  │
 └─────────────────────────┘
 ```
 **탭 1: 개요**
 ```
 │ 🎯 이벤트 핵심          │
 │                         │
 │ ┌─────────────────────┐│
 │ │ 가성비 등급 [S]      ││
 │ │ 난이도 ⭐ (매우 쉬움)││
 │ │ 예상 예산 5만~10만원││
 │ │ 준비 기간 1-2일      ││
 │ │ 운영 기간 1-2주      ││
 │ │ 예상 ROI 1,700%     ││
 │ └─────────────────────┘│
 │                         │
 │ 📈 예상 효과            │
 │ • SNS 노출 +400%       │
 │ • 신규 고객 +70%       │
 │ • 브랜드 인지도 +120%  │
 │ • 참여율 15-25%        │
 │                         │
 │ 💡 이런 분들에게 추천   │
 │ • SNS 마케팅이 중요한  │
 │   매장                  │
 │ • 저예산으로 고효율을  │
 │   원하는 사장님         │
 │ • 빠르게 시작하고 싶은 │
 │   사장님                │
 │ • 바이럴 효과를 원하는 │
 │   사장님                │
 │                         │
 │ ⚠️ 주의사항             │
 │ • 해시태그 관리 필요    │
 │ • SNS 계정 준비 필수    │
 │ • 참여 검증 시간 소요  │
 ```
 **탭 2: 실행 가이드**
 ```
 │ 📋 5단계 실행 가이드    │
 │                         │
 │ ┌─────────────────────┐│
 │ │ [1] 준비 단계 (1-2일)││
 │ │                     ││
 │ │ ✓ 이벤트 이미지 제작││
 │ │   (Canva 무료 활용) ││
 │ │ ✓ 해시태그 선정     ││
 │ │   (매장명+이벤트명  ││
 │ │   +지역명)           ││
 │ │ ✓ SNS 계정 준비     ││
 │ │   (Instagram/Facebook)││
 │ └─────────────────────┘│
 │                         │
 │ ┌─────────────────────┐│
 │ │ [2] 런칭 단계 (1일)  ││
 │ │                     ││
 │ │ ✓ SNS에 이벤트 공지││
 │ │ ✓ 매장 내 포스터   ││
 │ │   부착               ││
 │ │ ✓ 직원 교육         ││
 │ └─────────────────────┘│
 │                         │
 │ ┌─────────────────────┐│
 │ │ [3] 운영 단계 (1-2주)││
 │ │                     ││
 │ │ ✓ 참여자 모니터링  ││
 │ │ ✓ 댓글/DM 응답     ││
 │ │ ✓ 중간 결과 공유   ││
 │ └─────────────────────┘│
 │                         │
 │ ┌─────────────────────┐│
 │ │ [4] 추첨 단계 (1일) ││
 │ │                     ││
 │ │ ✓ 참여자 검증       ││
 │ │ ✓ 랜덤 추첨         ││
 │ │ ✓ 당첨자 발표       ││
 │ └─────────────────────┘│
 │                         │
 │ ┌─────────────────────┐│
 │ │ [5] 마무리 (2-3일)  ││
 │ │                     ││
 │ │ ✓ 경품 지급         ││
 │ │ ✓ 감사 인사 포스팅 ││
 │ │ ✓ 결과 분석         ││
 │ └─────────────────────┘│
 ```
 **탭 3: 비용 구조**
 ```
 │ 💰 상세 비용 내역       │
 │                         │
 │ ┌─────────────────────┐│
 │ │ 이벤트 상품 비용     ││
 │ │ 50,000원 (예시)     ││
 │ │                     ││
 │ │ • 치킨 세트 5개     ││
 │ │   @ 10,000원        ││
 │ │                     ││
 │ │ 또는                 ││
 │ │                     ││
 │ │ • 5,000원 쿠폰 10개││
 │ └─────────────────────┘│
 │                         │
 │ ┌─────────────────────┐│
 │ │ 홍보 비용 (선택)    ││
 │ │ 0 ~ 30,000원        ││
 │ │                     ││
 │ │ • SNS 광고 (선택)  ││
 │ │ • 포스터 인쇄 (선택)││
 │ └─────────────────────┘│
 │                         │
 │ ┌─────────────────────┐│
 │ │ 예상 총 비용         ││
 │ │ 50,000 ~ 80,000원   ││
 │ │                     ││
 │ │ 예상 참여자 50-100명││
 │ │ 1인당 비용 500-1,600원││
 │ └─────────────────────┘│
 │                         │
 │ 💡 비용 절감 팁         │
 │ • Canva로 무료 디자인  │
 │ • 자사 SNS 활용        │
 │ • 고객 태그로 무료 홍보│
 ```
 **탭 4: 성공 사례**
 ```
 │ 🏆 실제 성공 사례       │
 │                         │
 │ ┌─────────────────────┐│
 │ │ 수원 왕갈비통닭      ││
 │ │ 치킨 전문점          ││
 │ │                     ││
 │ │ 📊 성과              ││
 │ │ • 참여자 127명      ││
 │ │ • 신규 고객 89명    ││
 │ │ • 매출 +43%         ││
 │ │ • 팔로워 +312명     ││
 │ │                     ││
 │ │ 💬 후기              ││
 │ │ "예산 7만원으로 신규││
 │ │ 고객 89명 확보했어요!││
 │ │ SNS 팔로워도 3배   ││
 │ │ 늘었습니다."         ││
 │ └─────────────────────┘│
 │                         │
 │ ┌─────────────────────┐│
 │ │ 부산 떡볶이 천국     ││
 │ │ 분식점               ││
 │ │                     ││
 │ │ 📊 성과              ││
 │ │ • 참여자 203명      ││
 │ │ • 신규 고객 145명   ││
 │ │ • 매출 +67%         ││
 │ │ • 재방문율 +35%     ││
 │ │                     ││
 │ │ 💬 후기              ││
 │ │ "학생들 사이에서 입소││
 │ │ 문 나면서 대박났어요!││
 │ │ 비용 대비 효과 최고"││
 │ └─────────────────────┘│
 ```
 **인터랙션**
 1. **탭 전환**:
   - 탭 버튼 탭 시 해당 컨텐츠로 전환
   - 활성 탭은 하단 언더라인 표시 (Primary Color)
   - 탭 전환 애니메이션: 슬라이드 (0.3초)
   - 스와이프 제스처로도 탭 전환 가능
 2. **스크롤 인터랙션**:
   - 각 탭 내용은 독립적으로 스크롤
   - 스크롤 위치는 탭별로 유지
   - 긴 컨텐츠는 페이드 인디케이터로 더보기 힌트
 3. **액션 버튼**:
   - "이 이벤트로 진행" 버튼:
     - Primary 버튼 스타일
     - 탭 시 선택한 이벤트 유형 저장
     - 다음 화면(07-AI이벤트상품추천)으로 이동
   - "다른 유형 보기" 버튼:
     - Secondary 버튼 스타일
     - 탭 시 이전 화면(06-AI이벤트유형추천)으로 돌아가기
 4. **뒤로가기**:
   - 좌측 상단 뒤로가기 버튼
   - 이전 화면(06-AI이벤트유형추천)으로 이동
   - 선택 상태 유지 (동일 이벤트 하이라이트)
 5. **타임라인 인터랙션** (실행 가이드 탭):
   - 각 단계 카드 탭 시 확장되어 추가 상세 정보 표시
   - 완료 체크박스 제공 (준비 진행도 추적)
 **접근성**
 - 탭 role="tablist", 각 탭 버튼 role="tab"
 - 탭 패널 role="tabpanel", aria-labelledby로 탭 연결
 - 키보드: 좌우 화살표로 탭 전환, Tab으로 패널 내 탐색
 - 스크린 리더: 현재 탭 위치 알림 (예: "개요 탭, 4개 중 1번째")
 - 고대비 모드: 탭 언더라인 및 버튼 명확히 구분
 **성능**
 - 탭 컨텐츠 지연 로딩 (최초 개요 탭만 로드)
 - 탭 전환 시 다음 탭 프리페치
 - 이미지 없이 텍스트 기반 (빠른 렌더링)
 - 애니메이션 하드웨어 가속 (GPU 사용)
 **콘텐츠 커스터마이징**
 - 이벤트 유형별로 4개 탭 모두 커스터마이징
 - Claude API 활용: 매장 업종 맞춤형 콘텐츠 생성
 - 성공 사례는 동일 업종 우선 표시
 - 비용 구조는 예산 범위 기반 자동 계산
 **7가지 이벤트 유형별 핵심 정보**
 모든 이벤트 유형에 대해 동일한 4개 탭 구조로 정보 제공:
 1. SNS 해시태그 이벤트
 2. 명함형 쿠폰 배포
 3. 출석체크 이벤트
 4. 룰렛 이벤트
 5. 친구 초대 이벤트
 6. 리뷰 작성 이벤트
 7. 포토 콘테스트
 각 유형별 차별화 정보:
 - 준비 기간 및 난이도
 - 필요한 도구/플랫폼
 - 예상 참여율 및 효과
 - 비용 구조 및 절감 방법
 - 실제 성공 사례 (동일 업종 우선)
 ---