mirror of
https://github.com/ktds-dg0501/kt-event-marketing.git
synced 2025-12-06 11:26:26 +00:00
AI 경품 추천 구현방안 및 유저스토리 테이블 추가
- AI 경품 추천 상세 구현방안 문서 작성 (design/구현방안-AI경품추천.md) - RAG 기반 하이브리드 추천 시스템 설계 - 매장/경품 데이터 수집 및 벡터화 전략 - Claude API 프롬프트 설계 및 캐싱 전략 - Redis Vector Search 활용 방안 - Fallback 메커니즘 및 성능 최적화 - 월 운영 비용 추정: $581 (일 1,000 요청 기준) - 유저스토리 마크다운 테이블 생성 (design/userstory-table.md) - 전체 41개 유저스토리 요약 테이블 - 서비스별/우선순위별/복잡도별 통계 - 기술 스택 및 외부 API 매핑 - 개발 우선순위 로드맵 (Phase 1~3) - 비기능 요구사항 요약 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
hiondal
parent
f3bd327eea
commit
2aa09d9475
@ -725,8 +725,92 @@
|
||||
}, 1500);
|
||||
});
|
||||
|
||||
// 한식음식점 예제 데이터 로드
|
||||
function loadKoreanRestaurantExample() {
|
||||
// 매장명
|
||||
storeNameInput.value = '수원왕갈비';
|
||||
|
||||
// 업종
|
||||
businessTypeSelect.value = 'restaurant';
|
||||
|
||||
// 주소
|
||||
addressInput.value = '경기도 수원시 팔달구 인계동 1055-1';
|
||||
document.getElementById('addressDetail').value = '1층';
|
||||
|
||||
// 영업시간 (월~일 10:00-22:00)
|
||||
const timeInputs = document.querySelectorAll('.business-hour-row');
|
||||
timeInputs.forEach(row => {
|
||||
row.querySelector('input[type="time"]:first-of-type').value = '10:00';
|
||||
row.querySelector('input[type="time"]:last-of-type').value = '22:00';
|
||||
});
|
||||
|
||||
// 사업자번호
|
||||
businessNumberInput.value = '123-45-67890';
|
||||
|
||||
// 메뉴 예제 추가
|
||||
menuItems = [
|
||||
{
|
||||
id: Utils.generateId(),
|
||||
name: '왕갈비',
|
||||
price: 18000,
|
||||
description: '대표 메뉴, 1인분'
|
||||
},
|
||||
{
|
||||
id: Utils.generateId(),
|
||||
name: 'LA갈비',
|
||||
price: 35000,
|
||||
description: '미국산 최상급 LA갈비'
|
||||
},
|
||||
{
|
||||
id: Utils.generateId(),
|
||||
name: '된장찌개',
|
||||
price: 7000,
|
||||
description: '직접 담근 된장 사용'
|
||||
},
|
||||
{
|
||||
id: Utils.generateId(),
|
||||
name: '냉면',
|
||||
price: 9000,
|
||||
description: '여름 시즌 인기 메뉴'
|
||||
},
|
||||
{
|
||||
id: Utils.generateId(),
|
||||
name: '갈비탕',
|
||||
price: 12000,
|
||||
description: '푸짐한 갈비가 들어간 보양식'
|
||||
}
|
||||
];
|
||||
renderMenuList();
|
||||
|
||||
// 매장 특징
|
||||
storeFeaturesTextarea.value = '30년 전통의 한식 갈비 전문점입니다.\n직접 제작한 비법 양념으로 재운 갈비가 특징이며,\n주차 가능하고 단체석도 마련되어 있습니다.\n런치 시간 특가 메뉴 제공 중입니다.';
|
||||
featureCountSpan.textContent = storeFeaturesTextarea.value.length;
|
||||
|
||||
// 사업자번호 검증 시뮬레이션
|
||||
isBusinessNumberVerified = true;
|
||||
verifyBtn.disabled = false;
|
||||
document.getElementById('verifyResult').innerHTML = `
|
||||
<div style="display: flex; align-items: center; gap: 8px; color: var(--color-success);">
|
||||
<span class="material-icons" style="font-size: 20px;">check_circle</span>
|
||||
<span class="body-s" style="font-weight: 600;">확인됨 (예제 데이터)</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 폼 유효성 체크
|
||||
checkFormValidity();
|
||||
|
||||
// 안내 메시지
|
||||
Toast.info('한식음식점 예제 데이터가 로드되었습니다.');
|
||||
}
|
||||
|
||||
// 초기화
|
||||
initBusinessHours();
|
||||
|
||||
// 예제 데이터 자동 로드
|
||||
setTimeout(() => {
|
||||
loadKoreanRestaurantExample();
|
||||
}, 500);
|
||||
|
||||
console.log('매장정보등록 페이지 로드 완료');
|
||||
})();
|
||||
</script>
|
||||
|
||||
@ -368,10 +368,10 @@
|
||||
window.AppState.currentEvent = eventData;
|
||||
window.AppState.save();
|
||||
|
||||
// AI 분석 화면으로 이동
|
||||
Loading.show('AI 트렌드 분석 준비 중...');
|
||||
// AI 이벤트 유형 추천 화면으로 이동
|
||||
Loading.show('AI 이벤트 유형 분석 중...');
|
||||
setTimeout(() => {
|
||||
window.location.href = '04-AI트렌드분석결과.html';
|
||||
window.location.href = '04-1-AI이벤트유형추천.html';
|
||||
}, 800);
|
||||
});
|
||||
|
||||
|
||||
550
design/uiux/prototype/04-1-AI이벤트유형추천.html
Normal file
550
design/uiux/prototype/04-1-AI이벤트유형추천.html
Normal file
@ -0,0 +1,550 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="KT AI 기반 소상공인 이벤트 자동 생성 서비스 - AI 이벤트 유형 추천">
|
||||
<title>AI 이벤트 유형 추천 - KT 이벤트 마케팅</title>
|
||||
|
||||
<!-- Styles -->
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Skip Link -->
|
||||
<a href="#main-content" class="skip-link">본문으로 건너뛰기</a>
|
||||
|
||||
<!-- App Wrapper -->
|
||||
<div class="app-wrapper">
|
||||
<!-- Top App Bar -->
|
||||
<header class="app-bar">
|
||||
<button class="app-bar__back" aria-label="뒤로가기" onclick="history.back()">
|
||||
<span class="material-icons">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="app-bar__title">AI 이벤트 유형 추천</h1>
|
||||
<button class="app-bar__action" aria-label="필터" onclick="showFilterModal()">
|
||||
<span class="material-icons">tune</span>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main id="main-content" class="app-content">
|
||||
<div class="container" style="padding-top: 16px;">
|
||||
<!-- AI 분석 결과 헤더 -->
|
||||
<div class="card" style="padding: 20px; margin-bottom: 24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
|
||||
<div style="display: flex; align-items: flex-start; gap: 16px;">
|
||||
<span class="material-icons" style="font-size: 48px;">auto_awesome</span>
|
||||
<div style="flex: 1;">
|
||||
<h2 class="h3" style="color: white; margin-bottom: 8px;">수원왕갈비님을 위한 맞춤 추천</h2>
|
||||
<div class="body-m" style="opacity: 0.95; margin-bottom: 12px;">
|
||||
한식당 · 봄 시즌 · 예산 30만원
|
||||
</div>
|
||||
<div class="body-s" style="opacity: 0.85;">
|
||||
<span class="material-icons" style="font-size: 16px; vertical-align: middle;">lightbulb</span>
|
||||
13가지 이벤트 유형 중 <strong>7가지</strong>가 추천되었습니다
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 정렬 및 보기 옵션 -->
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
|
||||
<div class="body-m text-muted">
|
||||
총 <strong id="totalCount" style="color: var(--color-primary-main);">7개</strong> 이벤트
|
||||
</div>
|
||||
<select id="sortSelect" class="form-input" style="width: auto; padding: 8px 32px 8px 12px;">
|
||||
<option value="recommendation">추천순</option>
|
||||
<option value="costEfficiency">가성비 높은 순</option>
|
||||
<option value="difficulty">난이도 낮은 순</option>
|
||||
<option value="budget">예산 낮은 순</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 이벤트 카드 리스트 -->
|
||||
<div id="eventList" style="display: flex; flex-direction: column; gap: 16px; margin-bottom: 80px;">
|
||||
<!-- 이벤트 카드들이 동적으로 추가됩니다 -->
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Bottom Navigation -->
|
||||
<div class="bottom-nav" style="padding: 16px; background: white; box-shadow: 0 -2px 8px rgba(0,0,0,0.1); position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;">
|
||||
<button class="btn btn-primary btn-lg btn-block" onclick="proceedToNext()" id="proceedBtn" disabled>
|
||||
<span class="material-icons" style="margin-right: 8px;">check_circle</span>
|
||||
선택한 이벤트로 계속하기
|
||||
</button>
|
||||
<div class="body-s text-muted" style="text-align: center; margin-top: 8px;" id="selectionInfo">
|
||||
이벤트를 선택해주세요
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="js/common.js"></script>
|
||||
<script>
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// 이벤트 유형 데이터 (design/이벤트설계.md 기반)
|
||||
const eventTypes = [
|
||||
{
|
||||
id: 'sns-hashtag',
|
||||
name: 'SNS 해시태그 이벤트',
|
||||
category: 'digital',
|
||||
icon: 'tag',
|
||||
budget: { min: 50000, max: 100000 },
|
||||
costEfficiency: 17.0,
|
||||
difficulty: 1,
|
||||
recommendationScore: 8.3,
|
||||
estimatedProfit: 850000,
|
||||
estimatedROI: 1700,
|
||||
description: '인스타그램 해시태그 참여로 바이럴 효과 극대화',
|
||||
effects: ['SNS 노출 +400%', '신규 고객 +70%', '브랜드 인지도 +120%'],
|
||||
tags: ['디지털', 'SNS', '바이럴', '저예산'],
|
||||
duration: 14
|
||||
},
|
||||
{
|
||||
id: 'delivery-review',
|
||||
name: '배달앱 리뷰 이벤트',
|
||||
category: 'digital',
|
||||
icon: 'rate_review',
|
||||
budget: { min: 200000, max: 300000 },
|
||||
costEfficiency: 7.4,
|
||||
difficulty: 2,
|
||||
recommendationScore: 8.7,
|
||||
estimatedProfit: 1850000,
|
||||
estimatedROI: 740,
|
||||
description: '배달앱 리뷰 작성 시 혜택 제공으로 온라인 평판 향상',
|
||||
effects: ['평점 상승 +0.8점', '리뷰 수 +100건', '재방문율 +55%'],
|
||||
tags: ['디지털', '배달', '리뷰', '신뢰도'],
|
||||
duration: 30
|
||||
},
|
||||
{
|
||||
id: 'business-card-coupon',
|
||||
name: '명함형 쿠폰 배포',
|
||||
category: 'offline',
|
||||
icon: 'contact_mail',
|
||||
budget: { min: 60000, max: 100000 },
|
||||
costEfficiency: 25.9,
|
||||
difficulty: 1,
|
||||
recommendationScore: 8.9,
|
||||
estimatedProfit: 1685000,
|
||||
estimatedROI: 2592,
|
||||
description: '주변 상가/오피스 대상 명함 쿠폰 배포',
|
||||
effects: ['쿠폰 사용률 15%', '신규 고객 +150명', '재방문율 +60%'],
|
||||
tags: ['오프라인', '쿠폰', '지역마케팅', '최고가성비'],
|
||||
duration: 30
|
||||
},
|
||||
{
|
||||
id: 'table-tent',
|
||||
name: '테이블 텐트 카드',
|
||||
category: 'offline',
|
||||
icon: 'view_in_ar',
|
||||
budget: { min: 20000, max: 30000 },
|
||||
costEfficiency: 25.25,
|
||||
difficulty: 1,
|
||||
recommendationScore: 8.1,
|
||||
estimatedProfit: 505000,
|
||||
estimatedROI: 2525,
|
||||
description: '테이블 위 안내카드로 추가 주문 유도',
|
||||
effects: ['추가 주문률 +30%', '세트 메뉴 판매 +50%', '객단가 +5,000원'],
|
||||
tags: ['오프라인', '저예산', '추가주문', '최고가성비'],
|
||||
duration: 180
|
||||
},
|
||||
{
|
||||
id: 'pop-ad',
|
||||
name: '매장 내 POP 광고',
|
||||
category: 'offline',
|
||||
icon: 'storefront',
|
||||
budget: { min: 20000, max: 50000 },
|
||||
costEfficiency: 15.5,
|
||||
difficulty: 1,
|
||||
recommendationScore: 7.8,
|
||||
estimatedProfit: 475000,
|
||||
estimatedROI: 1900,
|
||||
description: '즉석 할인/1+1 등 매장 내 프로모션',
|
||||
effects: ['매장 방문 인지 80%', '이벤트 참여율 40%', '추가 매출 +40만원'],
|
||||
tags: ['오프라인', '즉석할인', '1+1', '저예산'],
|
||||
duration: 14
|
||||
},
|
||||
{
|
||||
id: 'spring-menu',
|
||||
name: '봄 시즌 특선 메뉴',
|
||||
category: 'prize',
|
||||
icon: 'local_florist',
|
||||
budget: { min: 100000, max: 300000 },
|
||||
costEfficiency: 6.8,
|
||||
difficulty: 3,
|
||||
recommendationScore: 8.5,
|
||||
estimatedProfit: 950000,
|
||||
estimatedROI: 475,
|
||||
description: '봄나물/제철 식재료 활용 한정 메뉴 출시',
|
||||
effects: ['신메뉴 매출 +35%', 'SNS 화제성 +150%', '재방문 유도 +50%'],
|
||||
tags: ['시즌메뉴', '봄', '한정판', '차별화'],
|
||||
duration: 60
|
||||
},
|
||||
{
|
||||
id: 'stamp',
|
||||
name: '스탬프 적립 이벤트',
|
||||
category: 'prize',
|
||||
icon: 'card_giftcard',
|
||||
budget: { min: 50000, max: 200000 },
|
||||
costEfficiency: 8.9,
|
||||
difficulty: 2,
|
||||
recommendationScore: 7.5,
|
||||
estimatedProfit: 780000,
|
||||
estimatedROI: 520,
|
||||
description: '방문 횟수별 스탬프 적립 후 보상 제공',
|
||||
effects: ['재방문율 +90%', '고객 충성도 +95%', '장기 매출 안정화'],
|
||||
tags: ['재방문', '충성도', '장기전략'],
|
||||
duration: 90
|
||||
}
|
||||
];
|
||||
|
||||
let selectedEvent = null;
|
||||
|
||||
// 가성비 등급 계산
|
||||
function getCostEfficiencyGrade(score) {
|
||||
if (score >= 20) return { grade: 'S', color: '#9333ea', label: '최고' };
|
||||
if (score >= 15) return { grade: 'A', color: '#3b82f6', label: '매우높음' };
|
||||
if (score >= 10) return { grade: 'B', color: '#10b981', label: '높음' };
|
||||
if (score >= 5) return { grade: 'C', color: '#f59e0b', label: '보통' };
|
||||
return { grade: 'D', color: '#ef4444', label: '낮음' };
|
||||
}
|
||||
|
||||
// 난이도 표시
|
||||
function getDifficultyStars(difficulty) {
|
||||
const stars = '⭐'.repeat(difficulty);
|
||||
const labels = ['쉬움', '보통', '어려움'];
|
||||
return `${stars} ${labels[difficulty - 1]}`;
|
||||
}
|
||||
|
||||
// 이벤트 카드 렌더링
|
||||
function renderEventCards(events = eventTypes) {
|
||||
const listContainer = document.getElementById('eventList');
|
||||
|
||||
listContainer.innerHTML = events.map(event => {
|
||||
const ceGrade = getCostEfficiencyGrade(event.costEfficiency);
|
||||
const isSelected = selectedEvent && selectedEvent.id === event.id;
|
||||
|
||||
return `
|
||||
<div class="card event-card ${isSelected ? 'selected' : ''}"
|
||||
style="padding: 20px; cursor: pointer; transition: all 0.3s ease; ${isSelected ? 'border: 2px solid var(--color-primary-main); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);' : 'border: 1px solid var(--color-gray-200);'}"
|
||||
onclick="selectEvent('${event.id}')">
|
||||
|
||||
<!-- 상단: 아이콘 + 제목 + 가성비 등급 -->
|
||||
<div style="display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px;">
|
||||
<div style="width: 64px; height: 64px; background: linear-gradient(135deg, ${ceGrade.color}15 0%, ${ceGrade.color}30 100%); border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
||||
<span class="material-icons" style="font-size: 36px; color: ${ceGrade.color};">${event.icon}</span>
|
||||
</div>
|
||||
|
||||
<div style="flex: 1;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
|
||||
<h3 class="h4" style="margin: 0;">${event.name}</h3>
|
||||
<div style="text-align: center; background: ${ceGrade.color}; color: white; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 700; white-space: nowrap; margin-left: 8px;">
|
||||
<div style="font-size: 18px; line-height: 1;">${ceGrade.grade}</div>
|
||||
<div style="font-size: 10px; opacity: 0.9;">${ceGrade.label}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="body-s text-muted" style="margin-bottom: 12px;">
|
||||
${event.description}
|
||||
</div>
|
||||
|
||||
<!-- 태그 -->
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;">
|
||||
${event.tags.map(tag => `
|
||||
<span class="badge" style="background: var(--color-gray-100); color: var(--color-gray-700); font-size: 11px; padding: 3px 8px;">
|
||||
${tag}
|
||||
</span>
|
||||
`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 중단: 주요 지표 -->
|
||||
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px; background: var(--color-gray-50); border-radius: 12px; margin-bottom: 16px;">
|
||||
<div style="text-align: center;">
|
||||
<div class="body-xs text-muted" style="margin-bottom: 4px;">예산</div>
|
||||
<div class="body-m" style="font-weight: 600; color: var(--color-primary-main);">
|
||||
${Utils.formatNumber(event.budget.min)}원
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: center; border-left: 1px solid var(--color-gray-200); border-right: 1px solid var(--color-gray-200);">
|
||||
<div class="body-xs text-muted" style="margin-bottom: 4px;">예상 순수익</div>
|
||||
<div class="body-m" style="font-weight: 600; color: var(--color-success);">
|
||||
+${Utils.formatNumber(event.estimatedProfit)}원
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: center;">
|
||||
<div class="body-xs text-muted" style="margin-bottom: 4px;">ROI</div>
|
||||
<div class="body-m" style="font-weight: 600; color: var(--color-error);">
|
||||
${event.estimatedROI}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 기대 효과 -->
|
||||
<div style="margin-bottom: 16px;">
|
||||
<div class="body-s" style="font-weight: 600; margin-bottom: 8px; color: var(--color-gray-800);">
|
||||
<span class="material-icons" style="font-size: 16px; vertical-align: middle; margin-right: 4px;">trending_up</span>
|
||||
기대 효과
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px;">
|
||||
${event.effects.map(effect => `
|
||||
<div class="body-s" style="display: flex; align-items: center; gap: 8px;">
|
||||
<span class="material-icons" style="font-size: 14px; color: var(--color-success);">check_circle</span>
|
||||
<span>${effect}</span>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 하단: 난이도 + 추천점수 + 액션 -->
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<div style="display: flex; flex-direction: column; gap: 4px;">
|
||||
<div class="body-xs text-muted">난이도</div>
|
||||
<div class="body-s">${getDifficultyStars(event.difficulty)}</div>
|
||||
</div>
|
||||
|
||||
<div style="flex: 1; margin: 0 16px;">
|
||||
<div class="body-xs text-muted" style="margin-bottom: 4px;">추천 점수</div>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<div style="flex: 1; height: 8px; background: var(--color-gray-200); border-radius: 4px; overflow: hidden;">
|
||||
<div style="width: ${event.recommendationScore * 10}%; height: 100%; background: linear-gradient(90deg, var(--color-primary-main) 0%, var(--color-primary-dark) 100%); transition: width 0.3s ease;"></div>
|
||||
</div>
|
||||
<span class="body-s" style="font-weight: 600; color: var(--color-primary-main); min-width: 32px;">${event.recommendationScore.toFixed(1)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn ${isSelected ? 'btn-primary' : 'btn-secondary'}"
|
||||
style="min-width: 80px;"
|
||||
onclick="event.stopPropagation(); toggleEventSelection('${event.id}')">
|
||||
${isSelected ? '선택됨' : '선택하기'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
// 이벤트 선택
|
||||
window.selectEvent = function(eventId) {
|
||||
const event = eventTypes.find(e => e.id === eventId);
|
||||
if (!event) return;
|
||||
|
||||
selectedEvent = event;
|
||||
renderEventCards(getCurrentSortedEvents());
|
||||
updateProceedButton();
|
||||
};
|
||||
|
||||
// 이벤트 선택 토글
|
||||
window.toggleEventSelection = function(eventId) {
|
||||
if (selectedEvent && selectedEvent.id === eventId) {
|
||||
selectedEvent = null;
|
||||
} else {
|
||||
selectEvent(eventId);
|
||||
}
|
||||
};
|
||||
|
||||
// 진행 버튼 업데이트
|
||||
function updateProceedButton() {
|
||||
const proceedBtn = document.getElementById('proceedBtn');
|
||||
const selectionInfo = document.getElementById('selectionInfo');
|
||||
|
||||
if (selectedEvent) {
|
||||
proceedBtn.disabled = false;
|
||||
selectionInfo.innerHTML = `
|
||||
<strong>${selectedEvent.name}</strong> 선택됨 ·
|
||||
예산 ${Utils.formatNumber(selectedEvent.budget.min)}원 ·
|
||||
예상 순수익 +${Utils.formatNumber(selectedEvent.estimatedProfit)}원
|
||||
`;
|
||||
} else {
|
||||
proceedBtn.disabled = true;
|
||||
selectionInfo.textContent = '이벤트를 선택해주세요';
|
||||
}
|
||||
}
|
||||
|
||||
// 정렬
|
||||
function getCurrentSortedEvents() {
|
||||
const sortBy = document.getElementById('sortSelect').value;
|
||||
let sorted = [...eventTypes];
|
||||
|
||||
switch(sortBy) {
|
||||
case 'recommendation':
|
||||
sorted.sort((a, b) => b.recommendationScore - a.recommendationScore);
|
||||
break;
|
||||
case 'costEfficiency':
|
||||
sorted.sort((a, b) => b.costEfficiency - a.costEfficiency);
|
||||
break;
|
||||
case 'difficulty':
|
||||
sorted.sort((a, b) => a.difficulty - b.difficulty);
|
||||
break;
|
||||
case 'budget':
|
||||
sorted.sort((a, b) => a.budget.min - b.budget.min);
|
||||
break;
|
||||
}
|
||||
|
||||
return sorted;
|
||||
}
|
||||
|
||||
document.getElementById('sortSelect').addEventListener('change', function() {
|
||||
renderEventCards(getCurrentSortedEvents());
|
||||
});
|
||||
|
||||
// 필터 모달
|
||||
window.showFilterModal = function() {
|
||||
Modal.show({
|
||||
title: '필터 설정',
|
||||
body: `
|
||||
<div class="form-group">
|
||||
<label class="form-label">예산 범위</label>
|
||||
<div style="display: flex; gap: 8px; align-items: center;">
|
||||
<input type="number" id="minBudget" class="form-input" placeholder="최소" value="0" style="flex: 1;">
|
||||
<span>~</span>
|
||||
<input type="number" id="maxBudget" class="form-input" placeholder="최대" value="1000000" style="flex: 1;">
|
||||
<span>원</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">카테고리</label>
|
||||
<div style="display: flex; flex-direction: column; gap: 8px;">
|
||||
<label class="form-check">
|
||||
<input type="checkbox" name="category" value="digital" checked>
|
||||
<span>디지털 이벤트</span>
|
||||
</label>
|
||||
<label class="form-check">
|
||||
<input type="checkbox" name="category" value="offline" checked>
|
||||
<span>오프라인 이벤트</span>
|
||||
</label>
|
||||
<label class="form-check">
|
||||
<input type="checkbox" name="category" value="prize" checked>
|
||||
<span>경품 중심 이벤트</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">난이도</label>
|
||||
<div style="display: flex; flex-direction: column; gap: 8px;">
|
||||
<label class="form-check">
|
||||
<input type="checkbox" name="difficulty" value="1" checked>
|
||||
<span>⭐ 쉬움</span>
|
||||
</label>
|
||||
<label class="form-check">
|
||||
<input type="checkbox" name="difficulty" value="2" checked>
|
||||
<span>⭐⭐ 보통</span>
|
||||
</label>
|
||||
<label class="form-check">
|
||||
<input type="checkbox" name="difficulty" value="3" checked>
|
||||
<span>⭐⭐⭐ 어려움</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
confirmText: '적용',
|
||||
onConfirm: function() {
|
||||
const minBudget = parseInt(document.getElementById('minBudget').value) || 0;
|
||||
const maxBudget = parseInt(document.getElementById('maxBudget').value) || 999999999;
|
||||
const categories = Array.from(document.querySelectorAll('input[name="category"]:checked')).map(cb => cb.value);
|
||||
const difficulties = Array.from(document.querySelectorAll('input[name="difficulty"]:checked')).map(cb => parseInt(cb.value));
|
||||
|
||||
// 필터링 로직 (실제로는 서버에서 처리)
|
||||
Toast.success('필터가 적용되었습니다.');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 다음 단계로 진행
|
||||
window.proceedToNext = function() {
|
||||
if (!selectedEvent) {
|
||||
Toast.error('이벤트를 선택해주세요.');
|
||||
return;
|
||||
}
|
||||
|
||||
// 선택한 이벤트 정보 저장
|
||||
window.AppState.selectedEventType = selectedEvent;
|
||||
window.AppState.save();
|
||||
|
||||
// 상세 정보 화면으로 이동
|
||||
Modal.show({
|
||||
title: '✅ 이벤트 선택 완료',
|
||||
body: `
|
||||
<div style="text-align: center;">
|
||||
<div style="width: 80px; height: 80px; background: linear-gradient(135deg, var(--color-primary-main) 0%, var(--color-primary-dark) 100%); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;">
|
||||
<span class="material-icons" style="font-size: 48px; color: white;">${selectedEvent.icon}</span>
|
||||
</div>
|
||||
<h3 class="h3" style="margin-bottom: 12px;">${selectedEvent.name}</h3>
|
||||
<p class="body-m text-muted" style="margin-bottom: 20px;">
|
||||
이 이벤트의 상세 정보를 확인하고<br>
|
||||
경품 추천을 받으시겠습니까?
|
||||
</p>
|
||||
<div class="card" style="padding: 16px; background: var(--color-gray-50); text-align: left;">
|
||||
<div class="body-s" style="display: flex; justify-content: space-between; margin-bottom: 8px;">
|
||||
<span class="text-muted">예상 예산</span>
|
||||
<strong>${Utils.formatNumber(selectedEvent.budget.min)}원</strong>
|
||||
</div>
|
||||
<div class="body-s" style="display: flex; justify-content: space-between; margin-bottom: 8px;">
|
||||
<span class="text-muted">예상 순수익</span>
|
||||
<strong style="color: var(--color-success);">+${Utils.formatNumber(selectedEvent.estimatedProfit)}원</strong>
|
||||
</div>
|
||||
<div class="body-s" style="display: flex; justify-content: space-between;">
|
||||
<span class="text-muted">ROI</span>
|
||||
<strong style="color: var(--color-error);">${selectedEvent.estimatedROI}%</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
confirmText: '상세 정보 보기',
|
||||
cancelText: '다시 선택',
|
||||
onConfirm: function() {
|
||||
window.location.href = '04-2-이벤트상세정보.html';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 초기화
|
||||
renderEventCards(getCurrentSortedEvents());
|
||||
console.log('AI 이벤트 유형 추천 페이지 로드 완료');
|
||||
})();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.event-card {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.event-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
|
||||
}
|
||||
|
||||
.event-card.selected {
|
||||
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
border-radius: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.bottom-nav {
|
||||
animation: slideUp 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
624
design/uiux/prototype/04-2-이벤트상세정보.html
Normal file
624
design/uiux/prototype/04-2-이벤트상세정보.html
Normal file
@ -0,0 +1,624 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="KT AI 기반 소상공인 이벤트 자동 생성 서비스 - 이벤트 상세 정보">
|
||||
<title>이벤트 상세 정보 - KT 이벤트 마케팅</title>
|
||||
|
||||
<!-- Styles -->
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Skip Link -->
|
||||
<a href="#main-content" class="skip-link">본문으로 건너뛰기</a>
|
||||
|
||||
<!-- App Wrapper -->
|
||||
<div class="app-wrapper">
|
||||
<!-- Top App Bar -->
|
||||
<header class="app-bar">
|
||||
<button class="app-bar__back" aria-label="뒤로가기" onclick="history.back()">
|
||||
<span class="material-icons">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="app-bar__title">이벤트 상세 정보</h1>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main id="main-content" class="app-content" style="padding-bottom: 80px;">
|
||||
<div class="container" style="padding-top: 16px;">
|
||||
|
||||
<!-- 헤더 카드 -->
|
||||
<div class="card" style="padding: 24px; margin-bottom: 24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
|
||||
<div style="display: flex; align-items: center; gap: 16px; margin-bottom: 16px;">
|
||||
<div style="width: 72px; height: 72px; background: rgba(255, 255, 255, 0.2); border-radius: 18px; display: flex; align-items: center; justify-content: center;">
|
||||
<span class="material-icons" style="font-size: 42px; color: white;">tag</span>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<h2 class="h3" style="color: white; margin-bottom: 8px;">SNS 해시태그 이벤트</h2>
|
||||
<div class="body-s" style="opacity: 0.9;">
|
||||
인스타그램 해시태그 참여로 바이럴 효과 극대화
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: center; background: rgba(255, 255, 255, 0.25); padding: 8px 16px; border-radius: 16px;">
|
||||
<div style="font-size: 24px; font-weight: 700; line-height: 1;">A</div>
|
||||
<div style="font-size: 11px; opacity: 0.9;">매우높음</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 주요 지표 -->
|
||||
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.2);">
|
||||
<div style="text-align: center;">
|
||||
<div class="body-xs" style="opacity: 0.8; margin-bottom: 4px;">예상 예산</div>
|
||||
<div class="h4" style="color: white; margin: 0;">5만원</div>
|
||||
</div>
|
||||
<div style="text-align: center; border-left: 1px solid rgba(255, 255, 255, 0.2); border-right: 1px solid rgba(255, 255, 255, 0.2);">
|
||||
<div class="body-xs" style="opacity: 0.8; margin-bottom: 4px;">예상 순수익</div>
|
||||
<div class="h4" style="color: white; margin: 0;">+85만원</div>
|
||||
</div>
|
||||
<div style="text-align: center;">
|
||||
<div class="body-xs" style="opacity: 0.8; margin-bottom: 4px;">ROI</div>
|
||||
<div class="h4" style="color: white; margin: 0;">1700%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 탭 메뉴 -->
|
||||
<div class="tab-menu" style="display: flex; gap: 8px; margin-bottom: 24px; border-bottom: 1px solid var(--color-gray-200); overflow-x: auto;">
|
||||
<button class="tab-item active" data-tab="overview" onclick="switchTab('overview')">
|
||||
<span class="material-icons" style="font-size: 18px; margin-right: 4px;">info</span>
|
||||
개요
|
||||
</button>
|
||||
<button class="tab-item" data-tab="guide" onclick="switchTab('guide')">
|
||||
<span class="material-icons" style="font-size: 18px; margin-right: 4px;">menu_book</span>
|
||||
실행 가이드
|
||||
</button>
|
||||
<button class="tab-item" data-tab="cost" onclick="switchTab('cost')">
|
||||
<span class="material-icons" style="font-size: 18px; margin-right: 4px;">payments</span>
|
||||
비용 구조
|
||||
</button>
|
||||
<button class="tab-item" data-tab="success" onclick="switchTab('success')">
|
||||
<span class="material-icons" style="font-size: 18px; margin-right: 4px;">stars</span>
|
||||
성공 사례
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 개요 탭 -->
|
||||
<div class="tab-content active" id="tab-overview">
|
||||
|
||||
<!-- 기대 효과 -->
|
||||
<section class="card" style="padding: 20px; margin-bottom: 16px;">
|
||||
<h3 class="h4" style="margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
|
||||
<span class="material-icons" style="color: var(--color-primary-main);">trending_up</span>
|
||||
기대 효과
|
||||
</h3>
|
||||
<div style="display: flex; flex-direction: column; gap: 12px;">
|
||||
<div style="display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: var(--color-success-light); border-radius: 8px;">
|
||||
<span class="material-icons" style="color: var(--color-success); font-size: 20px;">check_circle</span>
|
||||
<div>
|
||||
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">SNS 노출 +400~600%</div>
|
||||
<div class="body-s text-muted">해시태그를 통한 유기적 확산으로 브랜드 노출 극대화</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: var(--color-primary-light); border-radius: 8px;">
|
||||
<span class="material-icons" style="color: var(--color-primary-main); font-size: 20px;">group_add</span>
|
||||
<div>
|
||||
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">신규 고객 +60~80%</div>
|
||||
<div class="body-s text-muted">SNS를 통한 새로운 고객 유입 및 방문 증가</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: var(--color-warning-light); border-radius: 8px;">
|
||||
<span class="material-icons" style="color: var(--color-warning); font-size: 20px;">campaign</span>
|
||||
<div>
|
||||
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">브랜드 인지도 +120%</div>
|
||||
<div class="body-s text-muted">바이럴 효과로 지역 내 인지도 상승</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 적합한 매장 -->
|
||||
<section class="card" style="padding: 20px; margin-bottom: 16px;">
|
||||
<h3 class="h4" style="margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
|
||||
<span class="material-icons" style="color: var(--color-primary-main);">store</span>
|
||||
적합한 매장
|
||||
</h3>
|
||||
<div style="display: flex; flex-direction: column; gap: 12px;">
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span class="material-icons" style="color: var(--color-success); font-size: 18px;">check</span>
|
||||
<span class="body-m">비주얼이 좋은 메뉴를 보유한 매장</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span class="material-icons" style="color: var(--color-success); font-size: 18px;">check</span>
|
||||
<span class="body-m">20~40대 젊은 층을 타겟으로 하는 매장</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span class="material-icons" style="color: var(--color-success); font-size: 18px;">check</span>
|
||||
<span class="body-m">카페, 일식당, 양식당 (인스타 특화)</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span class="material-icons" style="color: var(--color-success); font-size: 18px;">check</span>
|
||||
<span class="body-m">매장 내 포토존 또는 감성적인 공간 보유</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 추천 계절 -->
|
||||
<section class="card" style="padding: 20px; margin-bottom: 16px;">
|
||||
<h3 class="h4" style="margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
|
||||
<span class="material-icons" style="color: var(--color-primary-main);">calendar_today</span>
|
||||
추천 계절/시기
|
||||
</h3>
|
||||
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
|
||||
<div style="padding: 16px; border: 2px solid var(--color-primary-main); border-radius: 12px; text-align: center;">
|
||||
<div class="h3" style="margin-bottom: 8px;">🌸 봄</div>
|
||||
<div class="body-s text-muted">벚꽃 시즌 특히 효과적</div>
|
||||
<div class="body-m" style="font-weight: 600; color: var(--color-primary-main); margin-top: 8px;">추천도 ⭐⭐⭐⭐⭐</div>
|
||||
</div>
|
||||
<div style="padding: 16px; border: 2px solid var(--color-primary-main); border-radius: 12px; text-align: center;">
|
||||
<div class="h3" style="margin-bottom: 8px;">❄️ 겨울</div>
|
||||
<div class="body-s text-muted">크리스마스 시즌 효과</div>
|
||||
<div class="body-m" style="font-weight: 600; color: var(--color-primary-main); margin-top: 8px;">추천도 ⭐⭐⭐⭐⭐</div>
|
||||
</div>
|
||||
<div style="padding: 16px; border: 1px solid var(--color-gray-300); border-radius: 12px; text-align: center;">
|
||||
<div class="h3" style="margin-bottom: 8px;">🧊 여름</div>
|
||||
<div class="body-s text-muted">시원한 메뉴와 연계</div>
|
||||
<div class="body-m" style="font-weight: 600; color: var(--color-gray-600); margin-top: 8px;">추천도 ⭐⭐⭐⭐</div>
|
||||
</div>
|
||||
<div style="padding: 16px; border: 1px solid var(--color-gray-300); border-radius: 12px; text-align: center;">
|
||||
<div class="h3" style="margin-bottom: 8px;">🍁 가을</div>
|
||||
<div class="body-s text-muted">단풍 콘셉트 활용</div>
|
||||
<div class="body-m" style="font-weight: 600; color: var(--color-gray-600); margin-top: 8px;">추천도 ⭐⭐⭐⭐</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 실행 가이드 탭 -->
|
||||
<div class="tab-content" id="tab-guide" style="display: none;">
|
||||
|
||||
<!-- 단계별 실행 가이드 -->
|
||||
<section class="card" style="padding: 20px; margin-bottom: 16px;">
|
||||
<h3 class="h4" style="margin-bottom: 20px;">5단계 실행 가이드</h3>
|
||||
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-badge">1</div>
|
||||
<div class="timeline-content">
|
||||
<h4 class="body-m" style="font-weight: 600; margin-bottom: 8px;">준비 단계 (1-2일)</h4>
|
||||
<ul style="list-style: none; padding: 0; margin: 0;">
|
||||
<li class="body-s text-muted" style="margin-bottom: 6px;">✓ 이벤트 이미지 제작 (Canva 무료 활용)</li>
|
||||
<li class="body-s text-muted" style="margin-bottom: 6px;">✓ 해시태그 선정 (매장명 + 이벤트명 + 지역명)</li>
|
||||
<li class="body-s text-muted" style="margin-bottom: 6px;">✓ 참여 조건 명확화</li>
|
||||
<li class="body-s text-muted">✓ 경품 준비</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-badge">2</div>
|
||||
<div class="timeline-content">
|
||||
<h4 class="body-m" style="font-weight: 600; margin-bottom: 8px;">게시 단계 (1일)</h4>
|
||||
<ul style="list-style: none; padding: 0; margin: 0;">
|
||||
<li class="body-s text-muted" style="margin-bottom: 6px;">✓ 피드 게시: 이벤트 메인 이미지 + 상세 설명</li>
|
||||
<li class="body-s text-muted" style="margin-bottom: 6px;">✓ 스토리 게시: 24시간 노출용 간단 안내</li>
|
||||
<li class="body-s text-muted">✓ 하이라이트 등록: 이벤트 기간 동안 계속 노출</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-badge">3</div>
|
||||
<div class="timeline-content">
|
||||
<h4 class="body-m" style="font-weight: 600; margin-bottom: 8px;">운영 단계 (이벤트 기간)</h4>
|
||||
<ul style="list-style: none; padding: 0; margin: 0;">
|
||||
<li class="body-s text-muted" style="margin-bottom: 6px;">✓ 매일 오전 9시: 스토리 재업로드</li>
|
||||
<li class="body-s text-muted" style="margin-bottom: 6px;">✓ 댓글 답변: 2시간 이내 응답</li>
|
||||
<li class="body-s text-muted">✓ 참여자 리그램: 하루 3-5건</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-badge">4</div>
|
||||
<div class="timeline-content">
|
||||
<h4 class="body-m" style="font-weight: 600; margin-bottom: 8px;">추첨 단계 (이벤트 종료 후)</h4>
|
||||
<ul style="list-style: none; padding: 0; margin: 0;">
|
||||
<li class="body-s text-muted" style="margin-bottom: 6px;">✓ 참여자 목록 엑셀 정리</li>
|
||||
<li class="body-s text-muted" style="margin-bottom: 6px;">✓ 무작위 추첨 (random.org 활용)</li>
|
||||
<li class="body-s text-muted">✓ 당첨자 DM 발송 + 피드 공지</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-badge">5</div>
|
||||
<div class="timeline-content">
|
||||
<h4 class="body-m" style="font-weight: 600; margin-bottom: 8px;">사후 관리</h4>
|
||||
<ul style="list-style: none; padding: 0; margin: 0;">
|
||||
<li class="body-s text-muted" style="margin-bottom: 6px;">✓ 참여 감사 스토리</li>
|
||||
<li class="body-s text-muted" style="margin-bottom: 6px;">✓ 이벤트 결과 공유</li>
|
||||
<li class="body-s text-muted">✓ 다음 이벤트 예고</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 체크리스트 -->
|
||||
<section class="card" style="padding: 20px; margin-bottom: 16px; background: var(--color-warning-light);">
|
||||
<h3 class="h4" style="margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
|
||||
<span class="material-icons" style="color: var(--color-warning);">checklist</span>
|
||||
필수 체크리스트
|
||||
</h3>
|
||||
<div style="display: flex; flex-direction: column; gap: 10px;">
|
||||
<label class="form-check" style="background: white; padding: 12px; border-radius: 8px;">
|
||||
<input type="checkbox">
|
||||
<span class="body-m">이벤트 이미지 제작 완료</span>
|
||||
</label>
|
||||
<label class="form-check" style="background: white; padding: 12px; border-radius: 8px;">
|
||||
<input type="checkbox">
|
||||
<span class="body-m">해시태그 3개 이상 선정</span>
|
||||
</label>
|
||||
<label class="form-check" style="background: white; padding: 12px; border-radius: 8px;">
|
||||
<input type="checkbox">
|
||||
<span class="body-m">참여 조건 명확 작성</span>
|
||||
</label>
|
||||
<label class="form-check" style="background: white; padding: 12px; border-radius: 8px;">
|
||||
<input type="checkbox">
|
||||
<span class="body-m">경품 준비 완료</span>
|
||||
</label>
|
||||
<label class="form-check" style="background: white; padding: 12px; border-radius: 8px;">
|
||||
<input type="checkbox">
|
||||
<span class="body-m">추첨 방법 결정</span>
|
||||
</label>
|
||||
<label class="form-check" style="background: white; padding: 12px; border-radius: 8px;">
|
||||
<input type="checkbox">
|
||||
<span class="body-m">개인정보 동의 문구 포함</span>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 비용 구조 탭 -->
|
||||
<div class="tab-content" id="tab-cost" style="display: none;">
|
||||
|
||||
<!-- 비용 상세 -->
|
||||
<section class="card" style="padding: 20px; margin-bottom: 16px;">
|
||||
<h3 class="h4" style="margin-bottom: 20px;">비용 구조 상세</h3>
|
||||
|
||||
<div style="margin-bottom: 24px;">
|
||||
<div class="body-m" style="font-weight: 600; margin-bottom: 12px;">총 비용: 50,000원</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 12px;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; padding: 12px; background: var(--color-gray-50); border-radius: 8px;">
|
||||
<div>
|
||||
<div class="body-m">제작비</div>
|
||||
<div class="body-s text-muted">Canva 무료 템플릿 사용</div>
|
||||
</div>
|
||||
<div class="body-m" style="font-weight: 600;">0원</div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; padding: 12px; background: var(--color-gray-50); border-radius: 8px;">
|
||||
<div>
|
||||
<div class="body-m">광고비</div>
|
||||
<div class="body-s text-muted">자체 계정 활용 (무료)</div>
|
||||
</div>
|
||||
<div class="body-m" style="font-weight: 600;">0원</div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; padding: 12px; background: var(--color-primary-light); border-radius: 8px;">
|
||||
<div>
|
||||
<div class="body-m" style="font-weight: 600;">경품비</div>
|
||||
<div class="body-s text-muted">음료 쿠폰 50장 × 1,000원</div>
|
||||
</div>
|
||||
<div class="body-m" style="font-weight: 600; color: var(--color-primary-main);">50,000원</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="padding: 20px; background: var(--color-success-light); border-radius: 12px;">
|
||||
<h4 class="body-m" style="font-weight: 600; margin-bottom: 12px; color: var(--color-success);">예상 수익 분석</h4>
|
||||
<div style="display: flex; flex-direction: column; gap: 8px;">
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<span class="body-s">신규 팔로워</span>
|
||||
<strong class="body-s">100-300명</strong>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<span class="body-s">예상 매출 증가</span>
|
||||
<strong class="body-s">500,000-1,500,000원</strong>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<span class="body-s">순수익 (원가 30% 제외)</span>
|
||||
<strong class="body-s">300,000-1,300,000원</strong>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; padding-top: 8px; border-top: 2px solid var(--color-success);">
|
||||
<span class="body-m" style="font-weight: 600;">ROI</span>
|
||||
<strong class="body-m" style="font-weight: 700; color: var(--color-success);">600-650%</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 예산별 시뮬레이션 -->
|
||||
<section class="card" style="padding: 20px; margin-bottom: 16px;">
|
||||
<h3 class="h4" style="margin-bottom: 16px;">예산별 시뮬레이션</h3>
|
||||
<div style="display: flex; flex-direction: column; gap: 12px;">
|
||||
<div style="padding: 16px; border: 2px solid var(--color-primary-main); border-radius: 12px; background: var(--color-primary-light);">
|
||||
<div class="body-m" style="font-weight: 600; margin-bottom: 8px;">추천 예산: 50,000원</div>
|
||||
<div class="body-s text-muted" style="margin-bottom: 8px;">경품 50개 제공</div>
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<span class="body-s">예상 순수익</span>
|
||||
<strong style="color: var(--color-success);">+850,000원</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 16px; border: 1px solid var(--color-gray-300); border-radius: 12px;">
|
||||
<div class="body-m" style="font-weight: 600; margin-bottom: 8px;">최소 예산: 30,000원</div>
|
||||
<div class="body-s text-muted" style="margin-bottom: 8px;">경품 30개 제공</div>
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<span class="body-s">예상 순수익</span>
|
||||
<strong style="color: var(--color-success);">+510,000원</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 16px; border: 1px solid var(--color-gray-300); border-radius: 12px;">
|
||||
<div class="body-m" style="font-weight: 600; margin-bottom: 8px;">최대 예산: 100,000원</div>
|
||||
<div class="body-s text-muted" style="margin-bottom: 8px;">경품 100개 제공</div>
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<span class="body-s">예상 순수익</span>
|
||||
<strong style="color: var(--color-success);">+1,650,000원</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 성공 사례 탭 -->
|
||||
<div class="tab-content" id="tab-success" style="display: none;">
|
||||
|
||||
<!-- 성공 사례 1 -->
|
||||
<section class="card" style="padding: 20px; margin-bottom: 16px;">
|
||||
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 16px;">
|
||||
<span class="material-icons" style="color: var(--color-warning);">star</span>
|
||||
<h3 class="h4" style="margin: 0;">수원 소재 카페 A</h3>
|
||||
</div>
|
||||
<div class="body-s text-muted" style="margin-bottom: 16px;">
|
||||
업종: 카페 | 지역: 수원 | 계절: 봄 (벚꽃 시즌)
|
||||
</div>
|
||||
<div style="padding: 16px; background: var(--color-gray-50); border-radius: 8px; margin-bottom: 16px;">
|
||||
<div class="body-m" style="margin-bottom: 12px; font-weight: 600;">이벤트 내용</div>
|
||||
<div class="body-s text-muted" style="line-height: 1.6;">
|
||||
"벚꽃 라떼 인증샷 이벤트" 진행<br>
|
||||
해시태그 #OO카페벚꽃 #수원카페 #벚꽃라떼<br>
|
||||
팔로우 + 게시물 공유 + 해시태그 3개
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-m" style="margin-bottom: 12px; font-weight: 600;">결과</div>
|
||||
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
|
||||
<div style="padding: 12px; background: var(--color-success-light); border-radius: 8px; text-align: center;">
|
||||
<div class="body-s text-muted">투입 예산</div>
|
||||
<div class="h4" style="color: var(--color-success); margin: 4px 0;">5만원</div>
|
||||
</div>
|
||||
<div style="padding: 12px; background: var(--color-primary-light); border-radius: 8px; text-align: center;">
|
||||
<div class="body-s text-muted">참여율</div>
|
||||
<div class="h4" style="color: var(--color-primary-main); margin: 4px 0;">82%</div>
|
||||
</div>
|
||||
<div style="padding: 12px; background: var(--color-warning-light); border-radius: 8px; text-align: center;">
|
||||
<div class="body-s text-muted">SNS 확산</div>
|
||||
<div class="h4" style="color: var(--color-warning); margin: 4px 0;">+350%</div>
|
||||
</div>
|
||||
<div style="padding: 12px; background: var(--color-error-light); border-radius: 8px; text-align: center;">
|
||||
<div class="body-s text-muted">신규고객</div>
|
||||
<div class="h4" style="color: var(--color-error); margin: 4px 0;">+55%</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 성공 사례 2 -->
|
||||
<section class="card" style="padding: 20px; margin-bottom: 16px;">
|
||||
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 16px;">
|
||||
<span class="material-icons" style="color: var(--color-warning);">star</span>
|
||||
<h3 class="h4" style="margin: 0;">강남 소재 일식당 B</h3>
|
||||
</div>
|
||||
<div class="body-s text-muted" style="margin-bottom: 16px;">
|
||||
업종: 일식당 | 지역: 강남 | 계절: 여름
|
||||
</div>
|
||||
<div style="padding: 16px; background: var(--color-gray-50); border-radius: 8px; margin-bottom: 16px;">
|
||||
<div class="body-m" style="margin-bottom: 12px; font-weight: 600;">이벤트 내용</div>
|
||||
<div class="body-s text-muted" style="line-height: 1.6;">
|
||||
"여름 초밥 플레이팅 인증샷 이벤트"<br>
|
||||
해시태그 #OO초밥 #강남맛집 #여름초밥<br>
|
||||
스토리 공유 시 음료 무료 제공
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-m" style="margin-bottom: 12px; font-weight: 600;">결과</div>
|
||||
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
|
||||
<div style="padding: 12px; background: var(--color-success-light); border-radius: 8px; text-align: center;">
|
||||
<div class="body-s text-muted">투입 예산</div>
|
||||
<div class="h4" style="color: var(--color-success); margin: 4px 0;">7만원</div>
|
||||
</div>
|
||||
<div style="padding: 12px; background: var(--color-primary-light); border-radius: 8px; text-align: center;">
|
||||
<div class="body-s text-muted">참여율</div>
|
||||
<div class="h4" style="color: var(--color-primary-main); margin: 4px 0;">75%</div>
|
||||
</div>
|
||||
<div style="padding: 12px; background: var(--color-warning-light); border-radius: 8px; text-align: center;">
|
||||
<div class="body-s text-muted">SNS 도달</div>
|
||||
<div class="h4" style="color: var(--color-warning); margin: 4px 0;">18,000명</div>
|
||||
</div>
|
||||
<div style="padding: 12px; background: var(--color-error-light); border-radius: 8px; text-align: center;">
|
||||
<div class="body-s text-muted">ROI</div>
|
||||
<div class="h4" style="color: var(--color-error); margin: 4px 0;">1850%</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Bottom Navigation -->
|
||||
<div class="bottom-nav" style="padding: 16px; background: white; box-shadow: 0 -2px 8px rgba(0,0,0,0.1); position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;">
|
||||
<button class="btn btn-primary btn-lg btn-block" onclick="proceedToNext()">
|
||||
<span class="material-icons" style="margin-right: 8px;">arrow_forward</span>
|
||||
이 이벤트로 기획안 만들기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="js/common.js"></script>
|
||||
<script>
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// 탭 전환
|
||||
window.switchTab = function(tabName) {
|
||||
// 탭 버튼 활성화
|
||||
document.querySelectorAll('.tab-item').forEach(item => {
|
||||
item.classList.remove('active');
|
||||
});
|
||||
document.querySelector(`.tab-item[data-tab="${tabName}"]`).classList.add('active');
|
||||
|
||||
// 탭 컨텐츠 표시
|
||||
document.querySelectorAll('.tab-content').forEach(content => {
|
||||
content.style.display = 'none';
|
||||
});
|
||||
document.getElementById(`tab-${tabName}`).style.display = 'block';
|
||||
};
|
||||
|
||||
// 다음 단계로 진행
|
||||
window.proceedToNext = function() {
|
||||
Modal.show({
|
||||
title: '🎉 이벤트 유형 확정',
|
||||
body: `
|
||||
<div style="text-align: center;">
|
||||
<div style="width: 80px; height: 80px; background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;">
|
||||
<span class="material-icons" style="font-size: 48px; color: white;">check_circle</span>
|
||||
</div>
|
||||
<h3 class="h3" style="margin-bottom: 12px;">SNS 해시태그 이벤트</h3>
|
||||
<p class="body-m text-muted" style="margin-bottom: 20px;">
|
||||
이 이벤트 유형으로 AI가<br>
|
||||
경품, 참여방법, 홍보문구를 자동 생성합니다
|
||||
</p>
|
||||
<div class="card" style="padding: 16px; background: var(--color-gray-50); text-align: left;">
|
||||
<div class="body-s" style="margin-bottom: 8px;">
|
||||
<span class="material-icons" style="font-size: 14px; vertical-align: middle; margin-right: 4px; color: var(--color-primary-main);">auto_awesome</span>
|
||||
다음 단계에서 AI가 자동으로:
|
||||
</div>
|
||||
<ul style="list-style: none; padding-left: 20px; margin: 0;">
|
||||
<li class="body-s text-muted" style="margin-bottom: 4px;">✓ 예산에 맞는 경품 추천</li>
|
||||
<li class="body-s text-muted" style="margin-bottom: 4px;">✓ 참여 방법 상세 설계</li>
|
||||
<li class="body-s text-muted" style="margin-bottom: 4px;">✓ SNS 홍보 문구 생성</li>
|
||||
<li class="body-s text-muted">✓ 해시태그 추천</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
confirmText: '경품 추천 받기',
|
||||
cancelText: '이벤트 다시 선택',
|
||||
onConfirm: function() {
|
||||
Loading.show('AI가 경품을 추천하고 있습니다...');
|
||||
setTimeout(() => {
|
||||
Loading.hide();
|
||||
window.location.href = '05-AI경품추천.html';
|
||||
}, 2000);
|
||||
},
|
||||
onCancel: function() {
|
||||
window.location.href = '04-1-AI이벤트유형추천.html';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
console.log('이벤트 상세 정보 페이지 로드 완료');
|
||||
})();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tab-item {
|
||||
padding: 12px 16px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--color-gray-600);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tab-item:hover {
|
||||
color: var(--color-primary-main);
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
color: var(--color-primary-main);
|
||||
border-bottom-color: var(--color-primary-main);
|
||||
}
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 8px;
|
||||
bottom: 8px;
|
||||
width: 2px;
|
||||
background: var(--color-gray-300);
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.timeline-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.timeline-badge {
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
top: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: var(--color-primary-main);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
padding: 12px;
|
||||
background: var(--color-gray-50);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.bottom-nav {
|
||||
animation: slideUp 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
@ -46,6 +46,23 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Selected Event Type Context -->
|
||||
<div id="selectedEventContext" style="display: none; margin-bottom: 24px;">
|
||||
<div class="card" style="padding: 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
|
||||
<div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;">
|
||||
<span class="material-icons" style="font-size: 24px;">campaign</span>
|
||||
<div class="body-l" style="font-weight: 700;" id="eventTypeName">SNS 해시태그 이벤트</div>
|
||||
</div>
|
||||
<div class="body-s" style="opacity: 0.95; margin-bottom: 12px;" id="eventTypeDesc">
|
||||
인스타그램 해시태그 참여로 바이럴 효과 극대화
|
||||
</div>
|
||||
<div style="display: flex; gap: 8px; flex-wrap: wrap;">
|
||||
<span class="chip" style="background: rgba(255,255,255,0.2); color: white; padding: 4px 12px; border-radius: 12px; font-size: 12px;" id="eventCategory">디지털</span>
|
||||
<span class="chip" style="background: rgba(255,255,255,0.2); color: white; padding: 4px 12px; border-radius: 12px; font-size: 12px;" id="eventBudget">예산: 5~10만원</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Budget Setting -->
|
||||
<section style="margin-bottom: 32px;">
|
||||
<h2 class="h3" style="margin-bottom: 16px;">예산 설정</h2>
|
||||
@ -146,6 +163,31 @@
|
||||
window.AppState.load();
|
||||
const store = window.AppState.store;
|
||||
const event = window.AppState.currentEvent;
|
||||
const selectedEventType = window.AppState.selectedEventType;
|
||||
|
||||
// 선택된 이벤트 유형 정보 표시
|
||||
if (selectedEventType) {
|
||||
document.getElementById('selectedEventContext').style.display = 'block';
|
||||
document.getElementById('eventTypeName').textContent = selectedEventType.name;
|
||||
document.getElementById('eventTypeDesc').textContent = selectedEventType.description;
|
||||
|
||||
const categoryMap = {
|
||||
'digital': '디지털',
|
||||
'offline': '오프라인',
|
||||
'prize': '경품형'
|
||||
};
|
||||
document.getElementById('eventCategory').textContent = categoryMap[selectedEventType.category] || selectedEventType.category;
|
||||
|
||||
const budgetMin = Math.floor(selectedEventType.budget.min / 10000);
|
||||
const budgetMax = Math.floor(selectedEventType.budget.max / 10000);
|
||||
document.getElementById('eventBudget').textContent = `예산: ${budgetMin}~${budgetMax}만원`;
|
||||
|
||||
// 이벤트 유형 예산 범위로 슬라이더 초기값 설정
|
||||
const avgBudget = (selectedEventType.budget.min + selectedEventType.budget.max) / 2;
|
||||
currentBudget = Math.round(avgBudget / 10000) * 10000;
|
||||
budgetSlider.value = currentBudget;
|
||||
budgetDisplay.textContent = Utils.formatNumber(currentBudget) + '원';
|
||||
}
|
||||
|
||||
// 예산 슬라이더 변경
|
||||
budgetSlider.addEventListener('input', function() {
|
||||
@ -167,13 +209,39 @@
|
||||
function generatePrizeRecommendations() {
|
||||
const businessType = store.businessType;
|
||||
const purpose = event.purpose;
|
||||
const eventCategory = selectedEventType ? selectedEventType.category : null;
|
||||
|
||||
// 업종/목적별 경품 데이터
|
||||
const prizesDatabase = {
|
||||
// 이벤트 유형별 경품 데이터 (디지털/오프라인/경품형)
|
||||
const eventTypePrizes = {
|
||||
digital: [
|
||||
{ name: '모바일 기프티콘', basePrice: 5000, attraction: 5, participationRate: 48, category: 'voucher', digital: true },
|
||||
{ name: 'SNS 공유 쿠폰', basePrice: 3000, attraction: 4, participationRate: 52, category: 'discount', digital: true },
|
||||
{ name: '온라인 포인트 적립', basePrice: 2000, attraction: 3, participationRate: 45, category: 'point', digital: true },
|
||||
{ name: '디지털 할인쿠폰', basePrice: 5000, attraction: 4, participationRate: 50, category: 'discount', digital: true },
|
||||
{ name: '모바일 상품권', basePrice: 10000, attraction: 5, participationRate: 46, category: 'voucher', digital: true }
|
||||
],
|
||||
offline: [
|
||||
{ name: '매장 방문 쿠폰', basePrice: 8000, attraction: 5, participationRate: 42, category: 'discount', digital: false },
|
||||
{ name: '현장 사은품', basePrice: 5000, attraction: 4, participationRate: 38, category: 'product', digital: false },
|
||||
{ name: '체험 상품권', basePrice: 15000, attraction: 5, participationRate: 35, category: 'service', digital: false },
|
||||
{ name: '무료 시음/시식권', basePrice: 3000, attraction: 3, participationRate: 40, category: 'product', digital: false },
|
||||
{ name: 'VIP 라운지 이용권', basePrice: 20000, attraction: 4, participationRate: 28, category: 'service', digital: false }
|
||||
],
|
||||
prize: [
|
||||
{ name: '추첨 경품권', basePrice: 50000, attraction: 5, participationRate: 55, category: 'raffle', digital: false },
|
||||
{ name: '럭키드로우 티켓', basePrice: 0, attraction: 4, participationRate: 50, category: 'raffle', digital: true },
|
||||
{ name: '즉석 당첨 쿠폰', basePrice: 10000, attraction: 5, participationRate: 48, category: 'instant', digital: false },
|
||||
{ name: '응모권 (자동추첨)', basePrice: 0, attraction: 3, participationRate: 45, category: 'raffle', digital: true },
|
||||
{ name: '럭키박스 교환권', basePrice: 30000, attraction: 4, participationRate: 40, category: 'product', digital: false }
|
||||
]
|
||||
};
|
||||
|
||||
// 업종별 경품 데이터
|
||||
const businessPrizes = {
|
||||
restaurant: [
|
||||
{ name: '치킨세트 무료교환', basePrice: 20000, attraction: 5, participationRate: 45, category: 'product' },
|
||||
{ name: '메인메뉴 무료교환', basePrice: 20000, attraction: 5, participationRate: 45, category: 'product' },
|
||||
{ name: '5천원 할인쿠폰', basePrice: 5000, attraction: 4, participationRate: 38, category: 'discount' },
|
||||
{ name: '사이드메뉴 무료 제공', basePrice: 8000, attraction: 4, participationRate: 40, category: 'product' },
|
||||
{ name: '사이드메뉴 무료', basePrice: 8000, attraction: 4, participationRate: 40, category: 'product' },
|
||||
{ name: '음료 무료 업그레이드', basePrice: 3000, attraction: 3, participationRate: 35, category: 'upgrade' },
|
||||
{ name: '10% 할인 쿠폰', basePrice: 10000, attraction: 4, participationRate: 36, category: 'discount' }
|
||||
],
|
||||
@ -193,16 +261,36 @@
|
||||
]
|
||||
};
|
||||
|
||||
// 기본 경품 (업종이 매칭되지 않을 경우)
|
||||
// 기본 경품
|
||||
const defaultPrizes = [
|
||||
{ name: 'KT 멤버십 포인트 5천점', basePrice: 5000, attraction: 3, participationRate: 32, category: 'point' },
|
||||
{ name: '5천원 모바일 상품권', basePrice: 5000, attraction: 4, participationRate: 38, category: 'voucher' },
|
||||
{ name: '3천원 할인쿠폰', basePrice: 3000, attraction: 4, participationRate: 36, category: 'discount' },
|
||||
{ name: 'KT 멤버십 포인트', basePrice: 5000, attraction: 3, participationRate: 32, category: 'point' },
|
||||
{ name: '모바일 상품권', basePrice: 5000, attraction: 4, participationRate: 38, category: 'voucher' },
|
||||
{ name: '할인쿠폰', basePrice: 3000, attraction: 4, participationRate: 36, category: 'discount' },
|
||||
{ name: '경품 추첨권', basePrice: 0, attraction: 2, participationRate: 25, category: 'raffle' },
|
||||
{ name: '다음 방문 시 10% 할인', basePrice: 0, attraction: 3, participationRate: 30, category: 'discount' }
|
||||
{ name: '재방문 할인권', basePrice: 0, attraction: 3, participationRate: 30, category: 'discount' }
|
||||
];
|
||||
|
||||
let prizes = prizesDatabase[businessType] || defaultPrizes;
|
||||
// 이벤트 유형과 업종을 조합하여 최적의 경품 선택
|
||||
let prizes = [];
|
||||
|
||||
if (eventCategory && eventTypePrizes[eventCategory]) {
|
||||
// 이벤트 유형별 경품 우선
|
||||
prizes = [...eventTypePrizes[eventCategory]];
|
||||
|
||||
// 디지털 이벤트인 경우 업종별 경품 중 디지털 가능한 것 추가
|
||||
if (eventCategory === 'digital' && businessPrizes[businessType]) {
|
||||
const digitalCompatible = businessPrizes[businessType]
|
||||
.filter(p => p.category === 'discount' || p.category === 'voucher' || p.category === 'point')
|
||||
.slice(0, 2);
|
||||
prizes = [...prizes, ...digitalCompatible];
|
||||
}
|
||||
} else {
|
||||
// 이벤트 유형이 없으면 업종별 경품 사용
|
||||
prizes = businessPrizes[businessType] || defaultPrizes;
|
||||
}
|
||||
|
||||
// 중복 제거 및 최대 8개로 제한
|
||||
prizes = prizes.slice(0, 8);
|
||||
|
||||
// 예산에 맞춰 가격 조정 및 추천
|
||||
const budgetPerPrize = currentBudget * 0.2; // 경품 1개당 예산의 20%
|
||||
@ -234,8 +322,15 @@
|
||||
<div class="card" style="padding: 16px; margin-bottom: 12px; cursor: pointer; transition: all 0.3s ease; position: relative;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px;">
|
||||
<div style="flex: 1;">
|
||||
<div class="body-m" style="font-weight: 700; margin-bottom: 4px;">
|
||||
${prize.rank}. ${prize.name}
|
||||
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 4px;">
|
||||
<span class="body-m" style="font-weight: 700;">
|
||||
${prize.rank}. ${prize.name}
|
||||
</span>
|
||||
${prize.digital !== undefined ? `
|
||||
<span style="background: ${prize.digital ? '#667eea' : '#10b981'}; color: white; font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 600;">
|
||||
${prize.digital ? '디지털' : '오프라인'}
|
||||
</span>
|
||||
` : ''}
|
||||
</div>
|
||||
<div class="body-s text-muted">
|
||||
${Utils.formatNumber(prize.price)}원 × ${prize.quantity}개
|
||||
|
||||
337
design/userstory-table.md
Normal file
337
design/userstory-table.md
Normal file
@ -0,0 +1,337 @@
|
||||
# KT AI 기반 소상공인 이벤트 자동 생성 서비스 - 유저스토리 목록
|
||||
|
||||
## 전체 유저스토리 요약
|
||||
|
||||
| 서비스 | ID | 유저스토리 | 우선순위 | 복잡도 |
|
||||
|--------|-----|-----------|----------|--------|
|
||||
| **User** | UFR-USER-010 | [회원가입] 소상공인으로서 간편하게 회원가입하고 싶다 | M | 8 |
|
||||
| | UFR-USER-020 | [매장정보등록] 맞춤형 이벤트를 위해 매장 정보를 등록하고 싶다 | M | 13 |
|
||||
| **Event Planning** | UFR-PLAN-010 | [이벤트목적선택] 효과적인 이벤트를 위해 목적을 선택하고 싶다 | M | 3 |
|
||||
| | UFR-PLAN-020 | [AI업종트렌드분석] 성공률 높은 이벤트를 위해 AI 트렌드 분석을 원한다 | M | 13 |
|
||||
| | UFR-PLAN-030 | [AI경품추천] 예산 내 최적 경품을 AI가 추천해주기를 원한다 | M | 21 |
|
||||
| | UFR-PLAN-040 | [AI참여방법설계] 재방문 유도하는 참여 방법을 AI가 설계해주기를 원한다 | M | 21 |
|
||||
| | UFR-PLAN-050 | [AI홍보문구생성] 매력적인 홍보 문구를 AI가 자동 생성해주기를 원한다 | M | 13 |
|
||||
| | UFR-PLAN-060 | [이벤트기획안승인] 완성된 기획안을 검토하고 승인하고 싶다 | M | 5 |
|
||||
| **Content Generation** | UFR-CONT-010 | [AI이미지생성] 브랜드 컬러와 로고를 반영한 이미지를 AI가 생성해주기를 원한다 | M | 34 |
|
||||
| | UFR-CONT-020 | [AI영상제작] SNS 및 우리동네TV용 15초 영상을 AI가 제작해주기를 원한다 | M | 34 |
|
||||
| | UFR-CONT-030 | [SNS콘텐츠생성] 플랫폼별 최적화된 콘텐츠를 자동 생성해주기를 원한다 | M | 21 |
|
||||
| | UFR-CONT-040 | [QR포스터생성] 오프라인 홍보용 QR 포스터를 생성하고 싶다 | M | 8 |
|
||||
| | UFR-CONT-050 | [콘텐츠편집] 생성된 콘텐츠를 개인화하기 위해 수정하고 싶다 | S | 13 |
|
||||
| | UFR-CONT-060 | [콘텐츠최종승인] 완성된 콘텐츠를 검토하고 승인하고 싶다 | M | 3 |
|
||||
| **Distribution** | UFR-DIST-010 | [다중채널배포설정] 여러 채널에 한 번에 배포하고 싶다 | M | 13 |
|
||||
| | UFR-DIST-020 | [우리동네TV배포] 주변 지역 고객에게 우리동네TV로 도달하고 싶다 | M | 21 |
|
||||
| | UFR-DIST-030 | [링고비즈연결음업데이트] 매장 전화 연결음을 이벤트 내용으로 업데이트하고 싶다 | S | 13 |
|
||||
| | UFR-DIST-040 | [지니TV광고배포] 가정의 TV를 통해 지니TV 광고를 배포하고 싶다 | M | 21 |
|
||||
| | UFR-DIST-050 | [SNS자동포스팅] Instagram, Naver Blog, Kakao에 자동 포스팅하고 싶다 | M | 13 |
|
||||
| | UFR-DIST-060 | [오프라인자료다운로드] QR 포스터와 인쇄용 PDF를 다운로드하고 싶다 | S | 5 |
|
||||
| **Participation** | UFR-PART-010 | [이벤트참여신청] 고객이 간편하게 이벤트에 참여하고 싶다 | M | 8 |
|
||||
| | UFR-PART-020 | [중복참여방지] 공정한 이벤트 운영을 위해 1인 1회만 참여 허용하고 싶다 | M | 8 |
|
||||
| | UFR-PART-030 | [자동당첨자추첨] 이벤트 종료 시 자동으로 당첨자가 추첨되기를 원한다 | M | 13 |
|
||||
| | UFR-PART-040 | [당첨알림발송] 고객이 SMS나 카카오 알림톡으로 당첨 알림을 받고 싶다 | M | 8 |
|
||||
| | UFR-PART-050 | [당첨자명단관리] 당첨자 명단을 확인하고 관리하고 싶다 | M | 5 |
|
||||
| **Analytics** | UFR-ANAL-010 | [실시간대시보드조회] 실시간으로 참여자 수, 노출 수, 매출 증가율을 확인하고 싶다 | M | 21 |
|
||||
| | UFR-ANAL-020 | [채널별성과분석] 채널별 노출 수와 참여율을 비교하고 싶다 | M | 13 |
|
||||
| | UFR-ANAL-030 | [ROI자동계산] 총비용 대비 수익(ROI)이 자동으로 계산되기를 원한다 | M | 13 |
|
||||
| | UFR-ANAL-040 | [분석리포트생성] 종합 분석 리포트를 PDF로 다운로드하고 싶다 | S | 8 |
|
||||
| **AI Learning** | UFR-AIMPR-010 | [AI개선안생성] AI가 분석 결과를 바탕으로 구체적인 개선안을 제안해주기를 원한다 | M | 21 |
|
||||
| | UFR-AIMPR-020 | [다음이벤트아이디어제안] AI가 시즌별 성공 이벤트 아이디어를 제안해주기를 원한다 | S | 13 |
|
||||
| | UFR-AIMPR-030 | [성공패턴학습] AI 시스템이 이벤트 결과를 학습하여 성공 패턴을 축적하고 싶다 | M | 34 |
|
||||
| **비기능 요구사항** | NFR-PERF-010 | [AI기획속도] AI 이벤트 기획을 10초 이내에 완료하고 싶다 | M | 21 |
|
||||
| | NFR-PERF-020 | [콘텐츠생성속도] 이미지와 영상 생성을 5-8분 내에 완료하고 싶다 | M | 34 |
|
||||
| | NFR-PERF-030 | [배포속도] 다중 채널 배포를 1분 이내에 완료하고 싶다 | M | 21 |
|
||||
| | NFR-PERF-040 | [실시간데이터수집] 5분 간격으로 실시간 데이터를 수집하고 싶다 | M | 13 |
|
||||
| | NFR-SECU-010 | [개인정보보호] 개인정보 보호 규정을 준수하고 암호화를 적용하고 싶다 | M | 13 |
|
||||
| | NFR-RELI-010 | [배포실패자동재시도] 배포 실패 시 자동으로 3회까지 재시도하고 싶다 | M | 8 |
|
||||
| | NFR-SCAL-010 | [동시이벤트처리] 최소 100개의 이벤트를 동시에 처리할 수 있어야 한다 | S | 21 |
|
||||
|
||||
---
|
||||
|
||||
## 우선순위별 통계
|
||||
|
||||
| 우선순위 | 개수 | 비율 |
|
||||
|---------|------|------|
|
||||
| M (필수) | 33 | 80.5% |
|
||||
| S (선택) | 8 | 19.5% |
|
||||
| **총계** | **41** | **100%** |
|
||||
|
||||
---
|
||||
|
||||
## 서비스별 통계
|
||||
|
||||
| 서비스 | 유저스토리 수 | 평균 복잡도 | 필수(M) | 선택(S) |
|
||||
|--------|-------------|-----------|---------|---------|
|
||||
| User | 2 | 10.5 | 2 | 0 |
|
||||
| Event Planning | 6 | 12.7 | 6 | 0 |
|
||||
| Content Generation | 6 | 18.8 | 5 | 1 |
|
||||
| Distribution | 6 | 14.3 | 4 | 2 |
|
||||
| Participation | 5 | 8.4 | 5 | 0 |
|
||||
| Analytics | 4 | 13.8 | 3 | 1 |
|
||||
| AI Learning | 3 | 22.7 | 2 | 1 |
|
||||
| 비기능 요구사항 | 7 | 18.7 | 6 | 1 |
|
||||
| **총계** | **39** | **14.8** | **33** | **6** |
|
||||
|
||||
---
|
||||
|
||||
## 복잡도별 통계
|
||||
|
||||
| 복잡도 범위 | 개수 | 유저스토리 |
|
||||
|-----------|------|-----------|
|
||||
| 1-5 (낮음) | 5 | UFR-PLAN-010, UFR-PLAN-060, UFR-CONT-060, UFR-DIST-060, UFR-PART-050 |
|
||||
| 6-13 (중간) | 23 | UFR-USER-010, UFR-USER-020, UFR-PLAN-020, UFR-PLAN-050, UFR-CONT-030, UFR-CONT-040, UFR-CONT-050, UFR-DIST-010, UFR-DIST-030, UFR-DIST-050, UFR-PART-010, UFR-PART-020, UFR-PART-040, UFR-ANAL-020, UFR-ANAL-030, UFR-AIMPR-020, NFR-PERF-040, NFR-SECU-010, NFR-RELI-010 |
|
||||
| 14-21 (높음) | 10 | UFR-PLAN-030, UFR-PLAN-040, UFR-DIST-020, UFR-DIST-040, UFR-ANAL-010, UFR-AIMPR-010, NFR-PERF-010, NFR-PERF-030, NFR-SCAL-010 |
|
||||
| 22+ (매우 높음) | 3 | UFR-CONT-010, UFR-CONT-020, UFR-AIMPR-030, NFR-PERF-020 |
|
||||
|
||||
---
|
||||
|
||||
## 주요 기능별 상세 목록
|
||||
|
||||
### 1. User 서비스 (회원 인증 및 매장 정보 관리)
|
||||
|
||||
| ID | 기능 | 우선순위 | 복잡도 | 핵심 요구사항 |
|
||||
|----|------|----------|--------|-------------|
|
||||
| UFR-USER-010 | 회원가입 | M | 8 | 이름, 전화번호, 이메일, KT 본인 인증(선택), 중복 가입 방지 |
|
||||
| UFR-USER-020 | 매장정보등록 | M | 13 | 매장명, 업종, 주소, 영업시간, 사업자번호 검증, 무료 체험 쿠폰 발급 |
|
||||
|
||||
**검증 로직:**
|
||||
- 사업자번호 형식 검증 (XXX-XX-XXXXX)
|
||||
- 국세청 사업자번호 검증 시스템 API 연동
|
||||
- 사업자번호 유효성 확인 및 휴폐업 여부 확인
|
||||
|
||||
---
|
||||
|
||||
### 2. Event Planning 서비스 (AI 기반 이벤트 자동 기획)
|
||||
|
||||
| ID | 기능 | 우선순위 | 복잡도 | 핵심 요구사항 | AI 모델 |
|
||||
|----|------|----------|--------|-------------|---------|
|
||||
| UFR-PLAN-010 | 이벤트목적선택 | M | 3 | 신규고객 유치/재방문 유도/매출 증대/인지도 향상 선택 | - |
|
||||
| UFR-PLAN-020 | AI업종트렌드분석 | M | 13 | 업종, 지역, 시즌 기반 트렌드 분석, 성공 사례 분석 | Claude API |
|
||||
| UFR-PLAN-030 | AI경품추천 | M | 21 | 예산, 타겟 고객층 기반 경품 Top 5 추천, 수정 가능 | Claude API |
|
||||
| UFR-PLAN-040 | AI참여방법설계 | M | 21 | 간단한 참여 방법 + 재방문 유도 + 바이럴 확산 3가지 옵션 | Claude API |
|
||||
| UFR-PLAN-050 | AI홍보문구생성 | M | 13 | 5개 버전 홍보 문구 + SNS 해시태그 + 플랫폼별 최적화 | GPT-4 API |
|
||||
| UFR-PLAN-060 | 이벤트기획안승인 | M | 5 | 기획안 요약 제공, 승인 처리, 수정 기능 | - |
|
||||
|
||||
**성능 목표:** 전체 기획 과정 10초 이내 완료
|
||||
|
||||
---
|
||||
|
||||
### 3. Content Generation 서비스 (AI 기반 콘텐츠 자동 생성)
|
||||
|
||||
| ID | 기능 | 우선순위 | 복잡도 | 핵심 요구사항 | AI 모델 |
|
||||
|----|------|----------|--------|-------------|---------|
|
||||
| UFR-CONT-010 | AI이미지생성 | M | 34 | 브랜드 컬러, 로고 반영, 3가지 스타일 (심플/화려/트렌디), 1080x1080 | Stable Diffusion |
|
||||
| UFR-CONT-020 | AI영상제작 | M | 34 | 15초 영상, 배경 음악, 텍스트 오버레이, 우리동네TV용 1920x1080 | AI 영상 제작 엔진 |
|
||||
| UFR-CONT-030 | SNS콘텐츠생성 | M | 21 | Instagram (1080x1080), Naver Blog (800x600), Kakao (800x800) | - |
|
||||
| UFR-CONT-040 | QR포스터생성 | M | 8 | QR 코드 포함, A4/A3 PDF, 인쇄 최적화 (300dpi) | - |
|
||||
| UFR-CONT-050 | 콘텐츠편집 | S | 13 | 텍스트 수정, 색상 조정, 레이아웃 변경, 편집 이력 관리 (최대 3개 버전) | - |
|
||||
| UFR-CONT-060 | 콘텐츠최종승인 | M | 3 | 전체 콘텐츠 미리보기, 승인 처리 | - |
|
||||
|
||||
**성능 목표:** 전체 콘텐츠 생성 5-8분 이내 완료
|
||||
|
||||
---
|
||||
|
||||
### 4. Distribution 서비스 (다중 채널 자동 배포)
|
||||
|
||||
| ID | 기능 | 우선순위 | 복잡도 | 핵심 요구사항 | 연동 API |
|
||||
|----|------|----------|--------|-------------|---------|
|
||||
| UFR-DIST-010 | 다중채널배포설정 | M | 13 | 채널 선택 (우리동네TV, 링고비즈, 지니TV, SNS), 즉시/예약 배포 | - |
|
||||
| UFR-DIST-020 | 우리동네TV배포 | M | 21 | 반경 (500m/1km), 송출 시간대, 15초 영상 업로드 | 우리동네TV API |
|
||||
| UFR-DIST-030 | 링고비즈연결음업데이트 | S | 13 | 네이버 클로바 TTS 음성 생성, 연결음 업데이트, 미리듣기 | 링고비즈 API, Clova TTS |
|
||||
| UFR-DIST-040 | 지니TV광고배포 | M | 21 | 타겟 지역 (1km/3km/5km), 노출 시간대, 예산 기반 노출량 | 지니TV API |
|
||||
| UFR-DIST-050 | SNS자동포스팅 | M | 13 | Instagram, Naver Blog, Kakao OAuth 연동, 예약 포스팅 | SNS API (Instagram, Naver, Kakao) |
|
||||
| UFR-DIST-060 | 오프라인자료다운로드 | S | 5 | QR 포스터 (A4/A3 PDF), QR 코드 이미지, 인쇄용 이미지 | - |
|
||||
|
||||
**성능 목표:** 전체 배포 과정 1분 이내 완료
|
||||
|
||||
---
|
||||
|
||||
### 5. Participation 서비스 (이벤트 참여 및 접수 관리)
|
||||
|
||||
| ID | 기능 | 우선순위 | 복잡도 | 핵심 요구사항 |
|
||||
|----|------|----------|--------|-------------|
|
||||
| UFR-PART-010 | 이벤트참여신청 | M | 8 | 고객명, 전화번호, 참여 경로 추적, 응모번호 발급 |
|
||||
| UFR-PART-020 | 중복참여방지 | M | 8 | 전화번호 기반 중복 체크, 매장 방문 고객 가산점 |
|
||||
| UFR-PART-030 | 자동당첨자추첨 | M | 13 | 이벤트 종료 시 자동 추첨, 난수 기반 무작위 알고리즘, 매장 방문 가산점 |
|
||||
| UFR-PART-040 | 당첨알림발송 | M | 8 | SMS/카카오 알림톡 발송, 경품 수령 방법 안내, 실패 시 재발송 (최대 3회) |
|
||||
| UFR-PART-050 | 당첨자명단관리 | M | 5 | 당첨자 목록, 경품 지급 상태 관리, 엑셀 다운로드 |
|
||||
|
||||
**정책:**
|
||||
- 1인 1회 참여 제한
|
||||
- 개인정보 보호 규정 준수
|
||||
- 매장 방문 고객 가산점 부여
|
||||
|
||||
---
|
||||
|
||||
### 6. Analytics 서비스 (실시간 효과 측정 및 분석)
|
||||
|
||||
| ID | 기능 | 우선순위 | 복잡도 | 핵심 요구사항 | 데이터 소스 |
|
||||
|----|------|----------|--------|-------------|------------|
|
||||
| UFR-ANAL-010 | 실시간대시보드조회 | M | 21 | 참여자 수, 채널별 노출 수, 매출 증가율, ROI (5분 간격 업데이트) | KT 채널 API, POS, GA |
|
||||
| UFR-ANAL-020 | 채널별성과분석 | M | 13 | 노출 수, 참여율, 전환율, 비용 대비 효과 (CPA) 비교 | 각 채널 API |
|
||||
| UFR-ANAL-030 | ROI자동계산 | M | 13 | 총 투자 비용 vs 수익, 손익분기점, 회수 기간 | - |
|
||||
| UFR-ANAL-040 | 분석리포트생성 | S | 8 | 종합 리포트 PDF 생성, 업종 평균 대비 벤치마킹 | 구글 애널리틱스 |
|
||||
|
||||
**데이터 수집:**
|
||||
- 실시간 데이터 수집 (5분 간격)
|
||||
- 구글 애널리틱스 연동
|
||||
- POS 시스템 연동
|
||||
|
||||
---
|
||||
|
||||
### 7. AI Learning 서비스 (AI 학습 및 개선 제안)
|
||||
|
||||
| ID | 기능 | 우선순위 | 복잡도 | 핵심 요구사항 | AI 모델 |
|
||||
|----|------|----------|--------|-------------|---------|
|
||||
| UFR-AIMPR-010 | AI개선안생성 | M | 21 | 성공/실패 요인 분석, 3가지 개선안 제시 (경품 변경, 참여 방법 단순화, 채널 조정) | AI 머신러닝 엔진 |
|
||||
| UFR-AIMPR-020 | 다음이벤트아이디어제안 | S | 13 | 시즌별 성공 이벤트 아이디어 5가지, 예상 성과 제공 | 트렌드 DB |
|
||||
| UFR-AIMPR-030 | 성공패턴학습 | M | 34 | 이벤트 결과 데이터 학습, 성공 패턴 축적, 추천 정확도 개선 | 빅데이터 분석 시스템 |
|
||||
|
||||
**학습 전략:**
|
||||
- 성공 패턴 자동 학습 및 재활용
|
||||
- 실패 요인 회피 로직 적용
|
||||
- 업종별/지역별 데이터 축적
|
||||
- 지속적 성능 개선 알고리즘
|
||||
|
||||
---
|
||||
|
||||
### 8. 비기능 요구사항 (성능, 보안, 안정성, 확장성)
|
||||
|
||||
| 카테고리 | ID | 기능 | 우선순위 | 복잡도 | 핵심 요구사항 |
|
||||
|---------|-----|------|----------|--------|-------------|
|
||||
| 성능 | NFR-PERF-010 | AI기획속도 | M | 21 | AI 이벤트 기획 10초 이내 (병렬 호출, 캐싱) |
|
||||
| | NFR-PERF-020 | 콘텐츠생성속도 | M | 34 | 이미지 2-3분, 영상 3-5분, 총 5-8분 이내 (병렬 처리, GPU 가속) |
|
||||
| | NFR-PERF-030 | 배포속도 | M | 21 | 다중 채널 배포 1분 이내 (채널별 병렬 배포) |
|
||||
| | NFR-PERF-040 | 실시간데이터수집 | M | 13 | 5분 간격 자동 데이터 수집 (스케줄러, 재시도 3회) |
|
||||
| 보안 | NFR-SECU-010 | 개인정보보호 | M | 13 | 전화번호 AES-256 암호화, GDPR/개인정보보호법 준수, RBAC |
|
||||
| 안정성 | NFR-RELI-010 | 배포실패자동재시도 | M | 8 | 배포 실패 시 자동 재시도 (최대 3회, 지수 백오프) |
|
||||
| 확장성 | NFR-SCAL-010 | 동시이벤트처리 | S | 21 | 100개 이벤트 동시 처리 (Auto Scaling, 로드 밸런싱, 메시지 큐) |
|
||||
|
||||
---
|
||||
|
||||
## 기술 스택 요약
|
||||
|
||||
### AI/ML 모델
|
||||
| 모델 | 용도 | 관련 유저스토리 |
|
||||
|------|------|----------------|
|
||||
| Claude API | 트렌드 분석, 경품 추천, 참여 방법 설계 | UFR-PLAN-020, UFR-PLAN-030, UFR-PLAN-040 |
|
||||
| GPT-4 API | 홍보 문구 생성 | UFR-PLAN-050 |
|
||||
| Stable Diffusion | 이미지 생성 | UFR-CONT-010 |
|
||||
| AI 영상 제작 엔진 | 15초 영상 제작 | UFR-CONT-020 |
|
||||
| 네이버 클로바 TTS | 연결음 음성 합성 | UFR-DIST-030 |
|
||||
| AI 머신러닝 엔진 | 개선안 생성, 성공 패턴 학습 | UFR-AIMPR-010, UFR-AIMPR-030 |
|
||||
|
||||
### 외부 API 연동
|
||||
| API | 용도 | 관련 유저스토리 |
|
||||
|-----|------|----------------|
|
||||
| 국세청 사업자번호 검증 | 사업자번호 유효성 확인 | UFR-USER-020 |
|
||||
| 우리동네TV API | 지역 타겟팅 영상 송출 | UFR-DIST-020 |
|
||||
| 링고비즈 API | 연결음 업데이트 | UFR-DIST-030 |
|
||||
| 지니TV API | TV 광고 배포 | UFR-DIST-040 |
|
||||
| Instagram API | SNS 자동 포스팅 | UFR-DIST-050 |
|
||||
| Naver Blog API | 블로그 자동 포스팅 | UFR-DIST-050 |
|
||||
| Kakao Channel API | 카카오 채널 자동 포스팅 | UFR-DIST-050 |
|
||||
| SMS/카카오 알림톡 | 당첨 알림 발송 | UFR-PART-040 |
|
||||
| POS 시스템 | 매출 데이터 수집 | UFR-ANAL-010 |
|
||||
| 구글 애널리틱스 | 웹/앱 유입 데이터 수집 | UFR-ANAL-010, UFR-ANAL-040 |
|
||||
|
||||
---
|
||||
|
||||
## 마이크로서비스 아키텍처
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ API Gateway │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
│
|
||||
┌─────────────────────┼─────────────────────┐
|
||||
│ │ │
|
||||
┌───────▼────────┐ ┌────────▼────────┐ ┌────────▼────────┐
|
||||
│ User Service │ │ Event Planning │ │ Content │
|
||||
│ (UFR-USER) │ │ (UFR-PLAN) │ │ Generation │
|
||||
│ │ │ │ │ (UFR-CONT) │
|
||||
└────────────────┘ └─────────────────┘ └─────────────────┘
|
||||
│ │ │
|
||||
│ │ │
|
||||
┌───────▼────────┐ ┌────────▼────────┐ ┌────────▼────────┐
|
||||
│ Distribution │ │ Participation │ │ Analytics │
|
||||
│ (UFR-DIST) │ │ (UFR-PART) │ │ (UFR-ANAL) │
|
||||
└────────────────┘ └─────────────────┘ └─────────────────┘
|
||||
│ │ │
|
||||
└─────────────────────┼─────────────────────┘
|
||||
│
|
||||
┌─────────▼─────────┐
|
||||
│ AI Learning │
|
||||
│ (UFR-AIMPR) │
|
||||
└───────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 개발 우선순위 로드맵
|
||||
|
||||
### Phase 1: MVP (8주)
|
||||
**목표:** 기본 이벤트 기획 및 배포 기능
|
||||
|
||||
| 순서 | 서비스 | 유저스토리 | 비고 |
|
||||
|------|--------|-----------|------|
|
||||
| 1 | User | UFR-USER-010, UFR-USER-020 | 회원가입, 매장 정보 등록 |
|
||||
| 2 | Event Planning | UFR-PLAN-010, UFR-PLAN-030, UFR-PLAN-060 | 목적 선택, 경품 추천, 승인 |
|
||||
| 3 | Content Generation | UFR-CONT-010, UFR-CONT-040, UFR-CONT-060 | 이미지 생성, QR 포스터, 승인 |
|
||||
| 4 | Distribution | UFR-DIST-010, UFR-DIST-050 | 다중 채널 설정, SNS 포스팅 |
|
||||
| 5 | Participation | UFR-PART-010, UFR-PART-020, UFR-PART-030 | 참여 신청, 중복 방지, 자동 추첨 |
|
||||
|
||||
### Phase 2: 고도화 (6주)
|
||||
**목표:** AI 기능 강화 및 분석 기능 추가
|
||||
|
||||
| 순서 | 서비스 | 유저스토리 | 비고 |
|
||||
|------|--------|-----------|------|
|
||||
| 6 | Event Planning | UFR-PLAN-020, UFR-PLAN-040, UFR-PLAN-050 | 트렌드 분석, 참여 방법, 홍보 문구 |
|
||||
| 7 | Content Generation | UFR-CONT-020, UFR-CONT-030 | 영상 제작, SNS 콘텐츠 |
|
||||
| 8 | Distribution | UFR-DIST-020, UFR-DIST-040 | 우리동네TV, 지니TV |
|
||||
| 9 | Participation | UFR-PART-040, UFR-PART-050 | 당첨 알림, 명단 관리 |
|
||||
| 10 | Analytics | UFR-ANAL-010, UFR-ANAL-020, UFR-ANAL-030 | 실시간 대시보드, 채널별 분석, ROI |
|
||||
|
||||
### Phase 3: 완성 (4주)
|
||||
**목표:** AI 학습 및 선택 기능 추가
|
||||
|
||||
| 순서 | 서비스 | 유저스토리 | 비고 |
|
||||
|------|--------|-----------|------|
|
||||
| 11 | Distribution | UFR-DIST-030, UFR-DIST-060 | 링고비즈 연결음, 오프라인 자료 |
|
||||
| 12 | Content Generation | UFR-CONT-050 | 콘텐츠 편집 |
|
||||
| 13 | Analytics | UFR-ANAL-040 | 분석 리포트 |
|
||||
| 14 | AI Learning | UFR-AIMPR-010, UFR-AIMPR-030 | 개선안 생성, 성공 패턴 학습 |
|
||||
| 15 | AI Learning | UFR-AIMPR-020 | 다음 이벤트 아이디어 |
|
||||
|
||||
---
|
||||
|
||||
## 성능 요구사항 요약
|
||||
|
||||
| 단계 | 목표 시간 | 관련 유저스토리 |
|
||||
|------|----------|----------------|
|
||||
| AI 이벤트 기획 | 10초 이내 | UFR-PLAN-020~050, NFR-PERF-010 |
|
||||
| 콘텐츠 생성 | 5-8분 이내 | UFR-CONT-010~030, NFR-PERF-020 |
|
||||
| 다중 채널 배포 | 1분 이내 | UFR-DIST-010~050, NFR-PERF-030 |
|
||||
| 실시간 데이터 수집 | 5분 간격 | UFR-ANAL-010, NFR-PERF-040 |
|
||||
|
||||
---
|
||||
|
||||
## 보안 요구사항 요약
|
||||
|
||||
| 항목 | 요구사항 | 관련 유저스토리 |
|
||||
|------|----------|----------------|
|
||||
| 개인정보 암호화 | AES-256 (전화번호, 이름) | NFR-SECU-010 |
|
||||
| 전송 보안 | HTTPS/TLS | NFR-SECU-010 |
|
||||
| 접근 제어 | RBAC (역할 기반) | NFR-SECU-010 |
|
||||
| 개인정보 보호 | GDPR, 개인정보보호법 준수 | NFR-SECU-010 |
|
||||
| 보유 기간 | 이벤트 종료 후 3개월 | NFR-SECU-010 |
|
||||
|
||||
---
|
||||
|
||||
## 안정성 및 확장성 요구사항
|
||||
|
||||
| 항목 | 요구사항 | 관련 유저스토리 |
|
||||
|------|----------|----------------|
|
||||
| 자동 재시도 | 배포 실패 시 최대 3회 (지수 백오프) | NFR-RELI-010 |
|
||||
| 동시 처리 | 최소 100개 이벤트 동시 처리 | NFR-SCAL-010 |
|
||||
| Auto Scaling | 마이크로서비스 수평 확장 | NFR-SCAL-010 |
|
||||
| 로드 밸런싱 | 트래픽 분산 | NFR-SCAL-010 |
|
||||
| 메시지 큐 | 비동기 처리 (RabbitMQ/Kafka) | NFR-SCAL-010 |
|
||||
1056
design/구현방안-AI경품추천.md
Normal file
1056
design/구현방안-AI경품추천.md
Normal file
File diff suppressed because it is too large
Load Diff
949
design/이벤트설계.md
Normal file
949
design/이벤트설계.md
Normal file
@ -0,0 +1,949 @@
|
||||
# AI 기반 이벤트 추천 설계서
|
||||
|
||||
**작성일**: 2025년 1월
|
||||
**버전**: 1.0
|
||||
**목적**: 업종/지역/계절별 최적의 이벤트 추천 시스템 설계
|
||||
|
||||
---
|
||||
|
||||
## 📋 목차
|
||||
|
||||
1. [개요](#1-개요)
|
||||
2. [이벤트 유형 분류](#2-이벤트-유형-분류)
|
||||
3. [추천 알고리즘](#3-추천-알고리즘)
|
||||
4. [업종별 이벤트 매핑](#4-업종별-이벤트-매핑)
|
||||
5. [계절별 이벤트 매핑](#5-계절별-이벤트-매핑)
|
||||
6. [가성비 점수 시스템](#6-가성비-점수-시스템)
|
||||
7. [화면 설계](#7-화면-설계)
|
||||
8. [데이터 구조](#8-데이터-구조)
|
||||
|
||||
---
|
||||
|
||||
## 1. 개요
|
||||
|
||||
### 1.1 배경
|
||||
|
||||
기존 시스템은 **경품 추천**만 제공하여 이벤트 방법이 제한적이었습니다.
|
||||
업종, 지역, 계절 특성을 고려한 **다양한 이벤트 유형 추천**이 필요합니다.
|
||||
|
||||
### 1.2 목표
|
||||
|
||||
- ✅ **10가지 이상의 이벤트 유형** 추천
|
||||
- ✅ **업종/계절별 맞춤 추천** 제공
|
||||
- ✅ **가성비 점수** 기반 우선순위 제시
|
||||
- ✅ **실행 난이도** 표시로 선택 용이성 확보
|
||||
- ✅ **예상 ROI 및 효과** 사전 안내
|
||||
|
||||
### 1.3 주요 기능
|
||||
|
||||
```yaml
|
||||
이벤트 유형 추천:
|
||||
- 업종 기반 필터링
|
||||
- 계절 기반 필터링
|
||||
- 예산 범위 필터링
|
||||
- 가성비 점수 정렬
|
||||
|
||||
상세 정보 제공:
|
||||
- 실행 가이드
|
||||
- 비용 구조
|
||||
- 예상 효과
|
||||
- 성공 사례
|
||||
|
||||
자동 기획안 생성:
|
||||
- 선택한 이벤트 유형 기반
|
||||
- 경품/참여방법 자동 설계
|
||||
- 홍보 문구 생성
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. 이벤트 유형 분류
|
||||
|
||||
### 2.1 참여 방식별 분류
|
||||
|
||||
#### 📱 **디지털 이벤트** (6가지)
|
||||
|
||||
**1. SNS 해시태그 이벤트**
|
||||
```yaml
|
||||
개요: 인스타그램/페이스북 해시태그 참여
|
||||
적합 업종: 카페, 일식당, 양식당
|
||||
적합 계절: 연중 (봄/겨울 특히 효과적)
|
||||
예산 범위: 5-10만원
|
||||
가성비 점수: 17.0
|
||||
난이도: ⭐ (쉬움)
|
||||
|
||||
기대 효과:
|
||||
- SNS 노출: +400~600%
|
||||
- 신규 고객: +60~80%
|
||||
- 브랜드 인지도: +120%
|
||||
|
||||
실행 체크리스트:
|
||||
- [ ] 해시태그 3개 선정
|
||||
- [ ] 이벤트 이미지 제작
|
||||
- [ ] 경품 준비
|
||||
- [ ] 참여 조건 명시
|
||||
- [ ] 추첨 방법 결정
|
||||
```
|
||||
|
||||
**2. 배달앱 리뷰 이벤트**
|
||||
```yaml
|
||||
개요: 배달앱 주문 후 리뷰 작성 시 혜택
|
||||
적합 업종: 전 업종 (특히 치킨집, 중식당)
|
||||
적합 계절: 연중
|
||||
예산 범위: 20-30만원
|
||||
가성비 점수: 7.4
|
||||
난이도: ⭐⭐ (보통)
|
||||
|
||||
기대 효과:
|
||||
- 평점 상승: +0.5~1.0점
|
||||
- 리뷰 수: +100~150건
|
||||
- 신규 주문: +50~100건
|
||||
- 재방문율: +55%
|
||||
```
|
||||
|
||||
**3. 카카오톡 알림톡 이벤트**
|
||||
```yaml
|
||||
개요: 생일/재방문 고객에게 자동 쿠폰 발송
|
||||
적합 업종: 전 업종
|
||||
적합 계절: 연중
|
||||
예산 범위: 15-25만원
|
||||
가성비 점수: 3.77
|
||||
난이도: ⭐⭐ (보통)
|
||||
|
||||
기대 효과:
|
||||
- 재방문율: +60%
|
||||
- 쿠폰 사용률: 25%
|
||||
- 고객 만족도: +95%
|
||||
```
|
||||
|
||||
**4. 인스타그램 릴스/스토리 챌린지**
|
||||
```yaml
|
||||
개요: 릴스 영상 제작 참여 이벤트
|
||||
적합 업종: 카페, 일식당, 분식집
|
||||
적합 계절: 여름, 봄
|
||||
예산 범위: 10-20만원
|
||||
가성비 점수: 12.5
|
||||
난이도: ⭐⭐ (보통)
|
||||
|
||||
기대 효과:
|
||||
- 릴스 조회수: 5,000~50,000회
|
||||
- 바이럴 확산: +300%
|
||||
- 젊은 층 유입: +80%
|
||||
```
|
||||
|
||||
**5. 네이버 예약 이벤트**
|
||||
```yaml
|
||||
개요: 네이버 예약 시 특별 혜택
|
||||
적합 업종: 양식당, 일식당
|
||||
적합 계절: 연중 (특히 크리스마스, 기념일)
|
||||
예산 범위: 10-30만원
|
||||
가성비 점수: 5.8
|
||||
난이도: ⭐⭐ (보통)
|
||||
|
||||
기대 효과:
|
||||
- 예약률: +150%
|
||||
- 노쇼율: -30%
|
||||
- 네이버 노출: +200%
|
||||
```
|
||||
|
||||
**6. 온라인 설문 이벤트**
|
||||
```yaml
|
||||
개요: 고객 의견 수집 + 경품 추첨
|
||||
적합 업종: 전 업종
|
||||
적합 계절: 연중
|
||||
예산 범위: 5-15만원
|
||||
가성비 점수: 6.2
|
||||
난이도: ⭐ (쉬움)
|
||||
|
||||
기대 효과:
|
||||
- 피드백 수집: 100~300건
|
||||
- 메뉴 개선 인사이트
|
||||
- 재방문 의향: +40%
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### 🏪 **오프라인 이벤트** (4가지)
|
||||
|
||||
**7. 매장 내 POP 광고 이벤트**
|
||||
```yaml
|
||||
개요: 즉석 할인/1+1 등 매장 내 프로모션
|
||||
적합 업종: 전 업종
|
||||
적합 계절: 연중
|
||||
예산 범위: 2-5만원
|
||||
가성비 점수: 15.5
|
||||
난이도: ⭐ (쉬움)
|
||||
|
||||
기대 효과:
|
||||
- 매장 방문 인지: 80%
|
||||
- 이벤트 참여율: 40%
|
||||
- 추가 매출: +30~50만원
|
||||
```
|
||||
|
||||
**8. 테이블 텐트 카드**
|
||||
```yaml
|
||||
개요: 테이블 위 안내카드로 추가 주문 유도
|
||||
적합 업종: 음식점, 카페
|
||||
적합 계절: 연중
|
||||
예산 범위: 2-3만원
|
||||
가성비 점수: 25.25
|
||||
난이도: ⭐ (쉬움)
|
||||
|
||||
기대 효과:
|
||||
- 추가 주문률: +30%
|
||||
- 세트 메뉴 판매: +50%
|
||||
- 객단가: +5,000원
|
||||
```
|
||||
|
||||
**9. 명함형 쿠폰 배포**
|
||||
```yaml
|
||||
개요: 주변 상가/오피스 쿠폰 배포
|
||||
적합 업종: 전 업종
|
||||
적합 계절: 연중
|
||||
예산 범위: 6-10만원
|
||||
가성비 점수: 25.9
|
||||
난이도: ⭐ (쉬움)
|
||||
|
||||
기대 효과:
|
||||
- 쿠폰 사용률: 10~20%
|
||||
- 신규 고객: +100~200명
|
||||
- 재방문율: +60%
|
||||
```
|
||||
|
||||
**10. 포토존 운영**
|
||||
```yaml
|
||||
개요: 매장 내 포토존 설치 + SNS 연동
|
||||
적합 업종: 카페, 일식당, 양식당
|
||||
적합 계절: 봄(벚꽃), 여름(시원함), 가을(단풍), 겨울(크리스마스)
|
||||
예산 범위: 5-30만원
|
||||
가성비 점수: 9.5
|
||||
난이도: ⭐⭐⭐ (어려움)
|
||||
|
||||
기대 효과:
|
||||
- SNS 게시물: +150~300건
|
||||
- 도달 수: +30,000~80,000명
|
||||
- 매장 체류 시간: +30%
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### 🎁 **경품 중심 이벤트** (3가지)
|
||||
|
||||
**11. 룰렛/추첨 이벤트**
|
||||
```yaml
|
||||
개요: 방문/구매 시 즉석 추첨
|
||||
적합 업종: 전 업종
|
||||
적합 계절: 연중
|
||||
예산 범위: 10-50만원
|
||||
가성비 점수: 4.5
|
||||
난이도: ⭐⭐ (보통)
|
||||
|
||||
기대 효과:
|
||||
- 참여율: 80~90%
|
||||
- 재미 요소로 만족도 상승
|
||||
- 재방문 의향: +50%
|
||||
```
|
||||
|
||||
**12. 스탬프 적립 이벤트**
|
||||
```yaml
|
||||
개요: 방문 횟수별 스탬프 적립 → 보상
|
||||
적합 업종: 카페, 한식당, 분식집
|
||||
적합 계절: 연중
|
||||
예산 범위: 5-20만원
|
||||
가성비 점수: 8.9
|
||||
난이도: ⭐⭐ (보통)
|
||||
|
||||
기대 효과:
|
||||
- 재방문율: +90%
|
||||
- 고객 충성도: +95%
|
||||
- 장기 매출 안정화
|
||||
```
|
||||
|
||||
**13. 시즌 한정 메뉴 이벤트**
|
||||
```yaml
|
||||
개요: 계절별 한정 메뉴 출시 + 특별 혜택
|
||||
적합 업종: 카페, 일식당, 양식당
|
||||
적합 계절: 봄(벚꽃), 여름(빙수), 가을(단풍), 겨울(크리스마스)
|
||||
예산 범위: 5-50만원
|
||||
가성비 점수: 6.8
|
||||
난이도: ⭐⭐⭐ (어려움)
|
||||
|
||||
기대 효과:
|
||||
- 신메뉴 매출: +35~90%
|
||||
- SNS 화제성: +250%
|
||||
- 재방문 유도: +50%
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 2.2 목적별 분류
|
||||
|
||||
| 목적 | 추천 이벤트 | 기대 효과 |
|
||||
|------|------------|----------|
|
||||
| 신규고객 유치 | SNS 해시태그, 배달앱 리뷰, 명함 쿠폰 | 신규 유입 +60~80% |
|
||||
| 재방문 유도 | 스탬프 적립, 생일 쿠폰, 포토존 | 재방문율 +60~90% |
|
||||
| 매출 증대 | 테이블 텐트, POP 광고, 시즌 메뉴 | 객단가 +20~50% |
|
||||
| 브랜드 인지도 | SNS 챌린지, 포토존, 인플루언서 협업 | 인지도 +100~200% |
|
||||
|
||||
---
|
||||
|
||||
## 3. 추천 알고리즘
|
||||
|
||||
### 3.1 추천 점수 계산식
|
||||
|
||||
```javascript
|
||||
추천점수 = (업종_적합도 × 0.3)
|
||||
+ (계절_적합도 × 0.25)
|
||||
+ (가성비_점수 × 0.25)
|
||||
+ (난이도_역수 × 0.1)
|
||||
+ (예산_적합도 × 0.1)
|
||||
|
||||
// 각 요소 점수 범위: 0~10
|
||||
```
|
||||
|
||||
### 3.2 필터링 로직
|
||||
|
||||
```yaml
|
||||
1단계: 업종 필터링
|
||||
- 매장 업종에 적합한 이벤트만 선별
|
||||
- 적합도 7점 이상만 표시
|
||||
|
||||
2단계: 계절 필터링
|
||||
- 현재 계절 또는 선택 계절에 효과적인 이벤트
|
||||
- 계절 적합도 6점 이상
|
||||
|
||||
3단계: 예산 필터링
|
||||
- 사용자 입력 예산 범위 내 이벤트
|
||||
- ±20% 여유 범위 포함
|
||||
|
||||
4단계: 정렬
|
||||
- 추천점수 높은 순
|
||||
- 동점 시 가성비 점수 높은 순
|
||||
- 동점 시 난이도 낮은 순
|
||||
```
|
||||
|
||||
### 3.3 예시: 한식당 × 봄 × 30만원 예산
|
||||
|
||||
```yaml
|
||||
입력값:
|
||||
업종: 한식당 (restaurant_korean)
|
||||
계절: 봄 (spring)
|
||||
예산: 300,000원
|
||||
목적: 신규고객 유치
|
||||
|
||||
추천 결과 (Top 5):
|
||||
|
||||
1위: 명함 쿠폰 배포 (추천점수 8.9)
|
||||
- 업종 적합도: 10 (모든 업종 적합)
|
||||
- 계절 적합도: 7 (연중 가능)
|
||||
- 가성비 점수: 25.9
|
||||
- 난이도: 1 (쉬움)
|
||||
- 예산: 65,000원
|
||||
|
||||
2위: 배달앱 리뷰 이벤트 (추천점수 8.7)
|
||||
- 업종 적합도: 9 (한식당 적합)
|
||||
- 계절 적합도: 7 (연중 가능)
|
||||
- 가성비 점수: 7.4
|
||||
- 난이도: 2 (보통)
|
||||
- 예산: 250,000원
|
||||
|
||||
3위: 봄나물 특선 메뉴 (추천점수 8.5)
|
||||
- 업종 적합도: 10 (한식당 매우 적합)
|
||||
- 계절 적합도: 10 (봄 최적)
|
||||
- 가성비 점수: 6.8
|
||||
- 난이도: 3 (보통)
|
||||
- 예산: 100,000~300,000원
|
||||
|
||||
4위: SNS 해시태그 이벤트 (추천점수 8.3)
|
||||
- 업종 적합도: 7 (한식당 보통)
|
||||
- 계절 적합도: 9 (봄 벚꽃 시즌 효과)
|
||||
- 가성비 점수: 17.0
|
||||
- 난이도: 1 (쉬움)
|
||||
- 예산: 50,000원
|
||||
|
||||
5위: 테이블 텐트 (추천점수 8.1)
|
||||
- 업종 적합도: 9 (음식점 적합)
|
||||
- 계절 적합도: 7 (연중 가능)
|
||||
- 가성비 점수: 25.25
|
||||
- 난이도: 1 (쉬움)
|
||||
- 예산: 20,000원
|
||||
|
||||
최적 조합 추천:
|
||||
1 + 4 + 5 = 135,000원
|
||||
예상 순수익: 3,040,000원
|
||||
ROI: 2252%
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. 업종별 이벤트 매핑
|
||||
|
||||
### 4.1 한식당
|
||||
|
||||
**적합도 높음 (9-10점)**
|
||||
- 명함 쿠폰 배포
|
||||
- 배달앱 리뷰 이벤트
|
||||
- 테이블 텐트
|
||||
- 스탬프 적립
|
||||
- 생일 쿠폰
|
||||
|
||||
**적합도 중간 (6-8점)**
|
||||
- SNS 해시태그
|
||||
- POP 광고
|
||||
- 룰렛 이벤트
|
||||
- 시즌 메뉴 (명절 특선)
|
||||
|
||||
**적합도 낮음 (1-5점)**
|
||||
- 포토존 (비주얼 약함)
|
||||
- 릴스 챌린지 (젊은 층 타겟 아님)
|
||||
|
||||
---
|
||||
|
||||
### 4.2 중식당
|
||||
|
||||
**적합도 높음 (9-10점)**
|
||||
- 배달앱 리뷰 이벤트 (배달 비중 높음)
|
||||
- 명함 쿠폰 배포
|
||||
- 테이블 텐트 (세트 메뉴 홍보)
|
||||
- POP 광고 (짜장면 데이 등)
|
||||
|
||||
**적합도 중간 (6-8점)**
|
||||
- SNS 해시태그
|
||||
- 룰렛 이벤트
|
||||
- 생일 쿠폰
|
||||
- 스탬프 적립
|
||||
|
||||
**적합도 낮음 (1-5점)**
|
||||
- 포토존
|
||||
- 릴스 챌린지
|
||||
|
||||
---
|
||||
|
||||
### 4.3 일식당
|
||||
|
||||
**적합도 높음 (9-10점)**
|
||||
- SNS 해시태그 (인스타 특화)
|
||||
- 포토존 (비주얼 중시)
|
||||
- 릴스 챌린지 (젊은 층)
|
||||
- 시즌 메뉴 (계절별 특선)
|
||||
- 네이버 예약
|
||||
|
||||
**적합도 중간 (6-8점)**
|
||||
- 배달앱 리뷰
|
||||
- 생일 쿠폰
|
||||
- 명함 쿠폰
|
||||
- 룰렛 이벤트
|
||||
|
||||
**적합도 낮음 (1-5점)**
|
||||
- 테이블 텐트 (고급 이미지 저해)
|
||||
|
||||
---
|
||||
|
||||
### 4.4 양식당
|
||||
|
||||
**적합도 높음 (9-10점)**
|
||||
- 포토존 (분위기 중시)
|
||||
- 네이버 예약 (기념일)
|
||||
- SNS 해시태그
|
||||
- 생일 쿠폰 (감성 마케팅)
|
||||
- 시즌 메뉴 (크리스마스 등)
|
||||
|
||||
**적합도 중간 (6-8점)**
|
||||
- 배달앱 리뷰
|
||||
- 명함 쿠폰
|
||||
- 룰렛 이벤트
|
||||
- 알림톡 이벤트
|
||||
|
||||
**적합도 낮음 (1-5점)**
|
||||
- 테이블 텐트
|
||||
- POP 광고 (고급 이미지 저해)
|
||||
|
||||
---
|
||||
|
||||
### 4.5 치킨집
|
||||
|
||||
**적합도 높음 (9-10점)**
|
||||
- 배달앱 리뷰 (배달 80%)
|
||||
- 명함 쿠폰 배포
|
||||
- SNS 해시태그 (치맥 페스티벌)
|
||||
- 룰렛 이벤트
|
||||
- 시즌 메뉴 (여름 특화)
|
||||
|
||||
**적합도 중간 (6-8점)**
|
||||
- 테이블 텐트
|
||||
- POP 광고
|
||||
- 생일 쿠폰
|
||||
- 알림톡 이벤트
|
||||
|
||||
**적합도 낮음 (1-5점)**
|
||||
- 포토존
|
||||
- 네이버 예약
|
||||
|
||||
---
|
||||
|
||||
### 4.6 분식집
|
||||
|
||||
**적합도 높음 (9-10점)**
|
||||
- 명함 쿠폰 (학생 타겟)
|
||||
- POP 광고 (1+1)
|
||||
- 배달앱 리뷰
|
||||
- 릴스 챌린지 (먹방)
|
||||
- 스탬프 적립
|
||||
|
||||
**적합도 중간 (6-8점)**
|
||||
- SNS 해시태그
|
||||
- 테이블 텐트
|
||||
- 룰렛 이벤트
|
||||
- 시즌 메뉴
|
||||
|
||||
**적합도 낮음 (1-5점)**
|
||||
- 포토존
|
||||
- 네이버 예약
|
||||
|
||||
---
|
||||
|
||||
### 4.7 카페
|
||||
|
||||
**적합도 높음 (9-10점)**
|
||||
- SNS 해시태그 (최고 효과)
|
||||
- 포토존 (필수)
|
||||
- 릴스 챌린지
|
||||
- 시즌 메뉴 (계절 음료)
|
||||
- 스탬프 적립
|
||||
- 생일 쿠폰
|
||||
|
||||
**적합도 중간 (6-8점)**
|
||||
- 명함 쿠폰
|
||||
- 테이블 텐트 (굿즈 홍보)
|
||||
- 룰렛 이벤트
|
||||
- 알림톡 이벤트
|
||||
|
||||
**적합도 낮음 (1-5점)**
|
||||
- 배달앱 리뷰 (배달 비중 낮음)
|
||||
|
||||
---
|
||||
|
||||
## 5. 계절별 이벤트 매핑
|
||||
|
||||
### 5.1 봄 (3-5월)
|
||||
|
||||
**핵심 키워드**: 🌸 벚꽃, 봄나물, 나들이, 신학기
|
||||
|
||||
**추천 이벤트 Top 5**:
|
||||
1. **벚꽃 포토존** (카페, 일식당)
|
||||
- 적합도: 10
|
||||
- 예상 효과: SNS 노출 +400%
|
||||
|
||||
2. **봄 시즌 메뉴** (전 업종)
|
||||
- 적합도: 9
|
||||
- 예상 효과: 매출 +35~50%
|
||||
|
||||
3. **SNS 해시태그 (#벚꽃맛집)** (카페, 음식점)
|
||||
- 적합도: 9
|
||||
- 예상 효과: 신규 고객 +70%
|
||||
|
||||
4. **피크닉 세트 메뉴** (한식당, 카페)
|
||||
- 적합도: 8
|
||||
- 예상 효과: 테이크아웃 +60%
|
||||
|
||||
5. **명함 쿠폰** (전 업종)
|
||||
- 적합도: 7 (연중)
|
||||
- 예상 효과: 재방문 +60%
|
||||
|
||||
---
|
||||
|
||||
### 5.2 여름 (6-8월)
|
||||
|
||||
**핵심 키워드**: 🧊 시원함, 휴가, 배달, 치맥
|
||||
|
||||
**추천 이벤트 Top 5**:
|
||||
1. **여름 휴가 경품 이벤트** (치킨집, 중식당)
|
||||
- 적합도: 10
|
||||
- 예상 효과: 매출 +70~85%
|
||||
|
||||
2. **빙수 시즌 메뉴** (카페)
|
||||
- 적합도: 10
|
||||
- 예상 효과: 매출 +90%
|
||||
|
||||
3. **배달앱 할인** (전 업종)
|
||||
- 적합도: 9
|
||||
- 예상 효과: 배달 주문 +50%
|
||||
|
||||
4. **치맥 페스티벌** (치킨집)
|
||||
- 적합도: 10
|
||||
- 예상 효과: 매출 +80%
|
||||
|
||||
5. **SNS 챌린지 (#여름시원템)** (카페, 음식점)
|
||||
- 적합도: 8
|
||||
- 예상 효과: 바이럴 +300%
|
||||
|
||||
---
|
||||
|
||||
### 5.3 가을 (9-11월)
|
||||
|
||||
**핵심 키워드**: 🍁 단풍, 추석, 가을 식재료
|
||||
|
||||
**추천 이벤트 Top 5**:
|
||||
1. **추석 특별 메뉴** (한식당)
|
||||
- 적합도: 10
|
||||
- 예상 효과: 매출 +100~120%
|
||||
|
||||
2. **가을 시즌 음료** (카페)
|
||||
- 적합도: 10
|
||||
- 예상 효과: 신메뉴 매출 +55~60%
|
||||
|
||||
3. **단풍 포토존** (카페, 일식당)
|
||||
- 적합도: 9
|
||||
- 예상 효과: SNS +70%
|
||||
|
||||
4. **전통주 페어링 이벤트** (한식당, 양식당)
|
||||
- 적합도: 8
|
||||
- 예상 효과: 객단가 +40%
|
||||
|
||||
5. **배달앱 리뷰** (전 업종)
|
||||
- 적합도: 7 (연중)
|
||||
- 예상 효과: 평점 +0.8점
|
||||
|
||||
---
|
||||
|
||||
### 5.4 겨울 (12-2월)
|
||||
|
||||
**핵심 키워드**: ❄️ 따뜻함, 크리스마스, 연말, 설날
|
||||
|
||||
**추천 이벤트 Top 5**:
|
||||
1. **크리스마스 특별 메뉴** (양식당, 카페)
|
||||
- 적합도: 10
|
||||
- 예상 효과: 매출 +85~110%
|
||||
|
||||
2. **연말 감사 이벤트** (전 업종)
|
||||
- 적합도: 9
|
||||
- 예상 효과: 재방문 +80%
|
||||
|
||||
3. **설날 특선 메뉴** (한식당)
|
||||
- 적합도: 10
|
||||
- 예상 효과: 매출 +100%
|
||||
|
||||
4. **크리스마스 포토존** (카페, 양식당)
|
||||
- 적합도: 9
|
||||
- 예상 효과: SNS +200%
|
||||
|
||||
5. **생일 쿠폰** (전 업종)
|
||||
- 적합도: 8 (연중)
|
||||
- 예상 효과: 만족도 +95%
|
||||
|
||||
---
|
||||
|
||||
## 6. 가성비 점수 시스템
|
||||
|
||||
### 6.1 가성비 점수 공식
|
||||
|
||||
```javascript
|
||||
가성비_점수 = 순수익 / 총비용
|
||||
|
||||
순수익 = 예상_매출_증가 × (1 - 원가율) - 총비용
|
||||
총비용 = 경품비 + 홍보비 + 인건비 + 시스템_비용
|
||||
```
|
||||
|
||||
### 6.2 가성비 등급
|
||||
|
||||
| 등급 | 점수 범위 | 평가 | 색상 |
|
||||
|------|----------|------|------|
|
||||
| S | 20 이상 | 최고 가성비 | 🟣 보라 |
|
||||
| A | 15~19.9 | 매우 높음 | 🔵 파랑 |
|
||||
| B | 10~14.9 | 높음 | 🟢 초록 |
|
||||
| C | 5~9.9 | 보통 | 🟡 노랑 |
|
||||
| D | 5 미만 | 낮음 | 🔴 빨강 |
|
||||
|
||||
### 6.3 이벤트별 가성비 점수
|
||||
|
||||
| 순위 | 이벤트명 | 가성비 점수 | 등급 |
|
||||
|-----|---------|------------|------|
|
||||
| 1 | 명함 쿠폰 배포 | 25.9 | S |
|
||||
| 2 | 테이블 텐트 | 25.25 | S |
|
||||
| 3 | SNS 해시태그 | 17.0 | A |
|
||||
| 4 | POP 광고 | 15.5 | A |
|
||||
| 5 | 릴스 챌린지 | 12.5 | B |
|
||||
| 6 | 포토존 통합 | 11.25 | B |
|
||||
| 7 | 스탬프 적립 | 8.9 | C |
|
||||
| 8 | 배달앱 리뷰 | 7.4 | C |
|
||||
| 9 | 시즌 메뉴 | 6.8 | C |
|
||||
| 10 | 설문 이벤트 | 6.2 | C |
|
||||
| 11 | 네이버 예약 | 5.8 | C |
|
||||
| 12 | 룰렛 이벤트 | 4.5 | D |
|
||||
| 13 | 생일 쿠폰 | 3.77 | D |
|
||||
|
||||
---
|
||||
|
||||
## 7. 화면 설계
|
||||
|
||||
### 7.1 화면 구성
|
||||
|
||||
```yaml
|
||||
04-1. AI이벤트유형추천.html (신규):
|
||||
- 이벤트 유형 카드 리스트
|
||||
- 필터 (업종/계절/예산/목적)
|
||||
- 정렬 (추천순/가성비순/난이도순)
|
||||
- 상세 보기 모달
|
||||
|
||||
04-2. 이벤트상세정보.html (신규):
|
||||
- 이벤트 개요
|
||||
- 실행 가이드
|
||||
- 비용 구조
|
||||
- 예상 효과
|
||||
- 성공 사례
|
||||
- 체크리스트
|
||||
|
||||
기존 화면 수정:
|
||||
05. AI경품추천.html:
|
||||
- "이벤트 유형 먼저 선택" 단계 추가
|
||||
- 선택한 이벤트 유형에 맞는 경품만 추천
|
||||
```
|
||||
|
||||
### 7.2 사용자 플로우
|
||||
|
||||
```
|
||||
[매장정보 등록]
|
||||
↓
|
||||
[03. 이벤트 목적 선택]
|
||||
↓
|
||||
[04-1. AI 이벤트 유형 추천] ← 신규
|
||||
↓ (이벤트 유형 선택)
|
||||
↓
|
||||
[04-2. 이벤트 상세 정보] ← 신규
|
||||
↓ (이벤트 유형 확정)
|
||||
↓
|
||||
[05. AI 경품 추천] ← 수정
|
||||
↓
|
||||
[06. AI 참여방법 설계]
|
||||
↓
|
||||
[07. AI 홍보문구 생성]
|
||||
...
|
||||
```
|
||||
|
||||
### 7.3 UI/UX 가이드
|
||||
|
||||
**이벤트 카드 디자인**:
|
||||
```yaml
|
||||
상단:
|
||||
- 이벤트 아이콘 (64x64)
|
||||
- 이벤트명 (h3)
|
||||
- 가성비 등급 뱃지 (S/A/B/C/D)
|
||||
|
||||
중단:
|
||||
- 예산 범위 (작은 텍스트)
|
||||
- 난이도 (⭐ 개수)
|
||||
- 추천 점수 (진행바)
|
||||
|
||||
하단:
|
||||
- 기대 효과 요약 (2줄)
|
||||
- "상세보기" 버튼
|
||||
```
|
||||
|
||||
**필터 섹션**:
|
||||
```yaml
|
||||
업종 선택:
|
||||
- 버튼 그룹 (한식/중식/일식/양식/치킨/분식/카페)
|
||||
- 자동 선택 (매장정보에서 가져옴)
|
||||
|
||||
계절 선택:
|
||||
- 라디오 버튼 (봄/여름/가을/겨울)
|
||||
- 기본값: 현재 계절
|
||||
|
||||
예산 범위:
|
||||
- 슬라이더 (0~100만원)
|
||||
- 또는 입력 필드
|
||||
|
||||
목적 선택:
|
||||
- 체크박스 (신규고객/재방문/매출증대/브랜드인지도)
|
||||
- 복수 선택 가능
|
||||
```
|
||||
|
||||
**정렬 옵션**:
|
||||
```yaml
|
||||
- 추천순 (기본)
|
||||
- 가성비 높은 순
|
||||
- 난이도 낮은 순
|
||||
- 예산 낮은 순
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 8. 데이터 구조
|
||||
|
||||
### 8.1 이벤트 유형 데이터 스키마
|
||||
|
||||
```typescript
|
||||
interface EventType {
|
||||
id: string; // 이벤트 유형 ID
|
||||
name: string; // 이벤트명
|
||||
category: 'digital' | 'offline' | 'prize'; // 카테고리
|
||||
|
||||
// 적합도
|
||||
suitability: {
|
||||
industries: { // 업종별 적합도 (0-10)
|
||||
restaurant_korean: number;
|
||||
restaurant_chinese: number;
|
||||
restaurant_japanese: number;
|
||||
restaurant_western: number;
|
||||
restaurant_chicken: number;
|
||||
restaurant_snack: number;
|
||||
cafe: number;
|
||||
};
|
||||
seasons: { // 계절별 적합도 (0-10)
|
||||
spring: number;
|
||||
summer: number;
|
||||
fall: number;
|
||||
winter: number;
|
||||
};
|
||||
purposes: { // 목적별 적합도 (0-10)
|
||||
new_customer: number;
|
||||
revisit: number;
|
||||
sales_increase: number;
|
||||
brand_awareness: number;
|
||||
};
|
||||
};
|
||||
|
||||
// 비용 및 효과
|
||||
budget: {
|
||||
min: number; // 최소 예산
|
||||
max: number; // 최대 예산
|
||||
breakdown: { // 비용 구조
|
||||
prize: number;
|
||||
promotion: number;
|
||||
labor: number;
|
||||
system: number;
|
||||
};
|
||||
};
|
||||
|
||||
performance: {
|
||||
expectedRevenue: number; // 예상 매출 증가
|
||||
netProfit: number; // 순수익
|
||||
costEfficiency: number; // 가성비 점수
|
||||
roi: number; // ROI (%)
|
||||
};
|
||||
|
||||
// 실행 정보
|
||||
difficulty: 1 | 2 | 3; // 난이도 (1: 쉬움, 2: 보통, 3: 어려움)
|
||||
duration: number; // 실행 기간 (일)
|
||||
|
||||
// 상세 정보
|
||||
description: string; // 설명
|
||||
executionSteps: string[]; // 실행 단계
|
||||
checklist: string[]; // 체크리스트
|
||||
successCases: SuccessCase[]; // 성공 사례
|
||||
|
||||
// 메타 정보
|
||||
tags: string[]; // 태그
|
||||
relatedEvents: string[]; // 관련 이벤트 ID
|
||||
}
|
||||
|
||||
interface SuccessCase {
|
||||
industry: string; // 업종
|
||||
location: string; // 지역
|
||||
season: string; // 계절
|
||||
budget: number; // 투입 예산
|
||||
result: {
|
||||
revenue: number; // 매출 증가
|
||||
roi: number; // ROI
|
||||
newCustomers: number; // 신규 고객 수
|
||||
description: string; // 성과 설명
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
### 8.2 추천 요청/응답 API
|
||||
|
||||
```typescript
|
||||
// 요청
|
||||
interface EventRecommendationRequest {
|
||||
storeInfo: {
|
||||
industry: string; // 업종
|
||||
location: string; // 지역
|
||||
};
|
||||
seasonInfo: {
|
||||
season: 'spring' | 'summer' | 'fall' | 'winter';
|
||||
};
|
||||
budget: {
|
||||
min: number;
|
||||
max: number;
|
||||
};
|
||||
purposes: string[]; // 목적 (복수 선택)
|
||||
sortBy?: 'recommendation' | 'costEfficiency' | 'difficulty' | 'budget';
|
||||
}
|
||||
|
||||
// 응답
|
||||
interface EventRecommendationResponse {
|
||||
recommendations: EventRecommendation[];
|
||||
optimalCombination?: EventCombination; // 최적 조합
|
||||
}
|
||||
|
||||
interface EventRecommendation {
|
||||
eventType: EventType;
|
||||
recommendationScore: number; // 추천 점수 (0-10)
|
||||
reasonScores: { // 추천 이유별 점수
|
||||
industrySuitability: number;
|
||||
seasonSuitability: number;
|
||||
costEfficiency: number;
|
||||
budgetFit: number;
|
||||
difficulty: number;
|
||||
};
|
||||
customizedData: { // 맞춤 데이터
|
||||
estimatedBudget: number; // 이 매장 기준 예산
|
||||
estimatedRevenue: number; // 이 매장 기준 예상 매출
|
||||
estimatedProfit: number; // 이 매장 기준 순수익
|
||||
estimatedROI: number; // 이 매장 기준 ROI
|
||||
};
|
||||
}
|
||||
|
||||
interface EventCombination {
|
||||
events: string[]; // 이벤트 ID 배열
|
||||
totalBudget: number;
|
||||
totalProfit: number;
|
||||
totalROI: number;
|
||||
synergy: string; // 시너지 설명
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 9. 구현 우선순위
|
||||
|
||||
### Phase 1: 기본 추천 (2주)
|
||||
- [ ] 13가지 이벤트 유형 데이터 입력
|
||||
- [ ] 업종별 적합도 매핑
|
||||
- [ ] 계절별 적합도 매핑
|
||||
- [ ] 04-1. AI이벤트유형추천 화면 구현
|
||||
- [ ] 기본 추천 알고리즘 구현
|
||||
|
||||
### Phase 2: 상세 정보 (1주)
|
||||
- [ ] 04-2. 이벤트상세정보 화면 구현
|
||||
- [ ] 실행 가이드 콘텐츠 작성
|
||||
- [ ] 성공 사례 DB 구축
|
||||
- [ ] 체크리스트 템플릿 작성
|
||||
|
||||
### Phase 3: 고도화 (2주)
|
||||
- [ ] 최적 조합 추천 기능
|
||||
- [ ] 예산 시뮬레이션 기능
|
||||
- [ ] ROI 계산기
|
||||
- [ ] AI 기반 맞춤 추천 (Claude API)
|
||||
|
||||
### Phase 4: 통합 (1주)
|
||||
- [ ] 05. AI경품추천 화면 수정
|
||||
- [ ] 전체 플로우 연동
|
||||
- [ ] 사용자 테스트 및 피드백 반영
|
||||
|
||||
---
|
||||
|
||||
## 10. 참고 자료
|
||||
|
||||
- [design/트렌드분석.md](./트렌드분석.md) - 업종/계절별 트렌드 데이터
|
||||
- [design/userstory.md](./userstory.md) - 유저스토리 UFR-PLAN-020
|
||||
- 실전 이벤트 실행 가이드 (트렌드분석 섹션 10)
|
||||
- 가성비 이벤트 전략 (트렌드분석 섹션 11)
|
||||
|
||||
---
|
||||
|
||||
**작성자**: 플랫폼 기획자 Flynn
|
||||
**검토자**: 서비스 기획자 도그냥, 아키텍트 박영자
|
||||
**최종 수정일**: 2025년 1월
|
||||
**버전**: 1.0
|
||||
Loading…
x
Reference in New Issue
Block a user