From 50786d2b8549eca11b4dc54ba01ac8c98a91d948 Mon Sep 17 00:00:00 2001 From: cherry2250 Date: Mon, 20 Oct 2025 20:17:24 +0900 Subject: [PATCH] edit uiux --- design/uiux/uiux.md | 829 +++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 780 insertions(+), 49 deletions(-) diff --git a/design/uiux/uiux.md b/design/uiux/uiux.md index e79963e..3f443bc 100644 --- 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가지 목적 중 하나 선택 (라디오 버튼) -2. 각 목적별 설명 및 예상 효과 제시 +1. 4가지 목적 중 하나 선택 (카드형 라디오 버튼) +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. 업종, 지역, 시즌 기반 트렌드 분석 -2. 주요 트렌드 3-5가지 제시 -3. 예상 성공률 표시 +1. 선택한 목적에 맞는 7가지 이벤트 유형 AI 추천 +2. 가성비 등급 표시 (S/A/B/C/D) +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. 포토 콘테스트 + +각 유형별 차별화 정보: +- 준비 기간 및 난이도 +- 필요한 도구/플랫폼 +- 예상 참여율 및 효과 +- 비용 구조 및 절감 방법 +- 실제 성공 사례 (동일 업종 우선) ---