hskwon
aca1767eb9
- URL 하드코딩 → .env APP_URL 기반 동적 URL로 변경 - DB 연결 하드코딩 → .env 기반으로 변경 - MySQL strict mode DATE 오류 수정
1173 lines
45 KiB
PHP
1173 lines
45 KiB
PHP
<?php
|
|
require_once($_SERVER['DOCUMENT_ROOT'] . "/session.php");
|
|
?>
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MVP AI 챗봇 솔루션 전략 - 6주 실행 계획</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.presentation-container {
|
|
width: 100%;
|
|
height: 100vh;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.slide {
|
|
width: 100%;
|
|
height: 100vh;
|
|
display: none;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
padding: 40px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.slide.active {
|
|
display: flex;
|
|
animation: slideInRight 0.5s ease-out;
|
|
}
|
|
|
|
.slide-content {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border-radius: 20px;
|
|
padding: 60px;
|
|
max-width: 1200px;
|
|
width: 100%;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
animation: fadeIn 0.8s ease-out;
|
|
margin: auto 0;
|
|
}
|
|
|
|
h1 {
|
|
color: #667eea;
|
|
font-size: 3em;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
h2 {
|
|
color: #667eea;
|
|
font-size: 2.5em;
|
|
margin-bottom: 30px;
|
|
text-align: center;
|
|
border-bottom: 3px solid #667eea;
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
h3 {
|
|
color: #667eea;
|
|
font-size: 1.8em;
|
|
margin: 25px 0 15px 0;
|
|
}
|
|
|
|
h4 {
|
|
color: #667eea;
|
|
font-size: 1.3em;
|
|
margin: 15px 0 10px 0;
|
|
}
|
|
|
|
p, li {
|
|
font-size: 1.2em;
|
|
line-height: 1.8;
|
|
color: #333;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
ul, ol {
|
|
margin-left: 30px;
|
|
}
|
|
|
|
.week-card {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 30px;
|
|
border-radius: 15px;
|
|
margin: 20px 0;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.week-card h3 {
|
|
color: white;
|
|
margin-top: 0;
|
|
border-bottom: 2px solid rgba(255, 255, 255, 0.3);
|
|
padding-bottom: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.week-card p, .week-card li {
|
|
color: white;
|
|
}
|
|
|
|
.task-list {
|
|
background: #e8f8f5;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
margin: 15px 0;
|
|
border-left: 4px solid rgb(114, 56, 249);
|
|
}
|
|
|
|
.task-list h4 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.deliverable-box {
|
|
background: #fff3cd;
|
|
border-left: 5px solid #ffc107;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.deliverable-box h4 {
|
|
color: #856404;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.deliverable-box p, .deliverable-box li {
|
|
color: #856404;
|
|
}
|
|
|
|
.success-metrics {
|
|
background: #d4edda;
|
|
border-left: 5px solid #28a745;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.success-metrics h4 {
|
|
color: #155724;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.success-metrics p, .success-metrics li {
|
|
color: #155724;
|
|
}
|
|
|
|
.comparison-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 25px 0;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.comparison-table th,
|
|
.comparison-table td {
|
|
padding: 12px;
|
|
border: 1px solid #ddd;
|
|
text-align: left;
|
|
}
|
|
|
|
.comparison-table thead tr {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
}
|
|
|
|
.comparison-table tbody tr:nth-of-type(even) {
|
|
background: #f3f3f3;
|
|
}
|
|
|
|
.highlight-box {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 30px;
|
|
border-radius: 15px;
|
|
margin: 20px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.highlight-box p {
|
|
color: white;
|
|
}
|
|
|
|
.cost-box {
|
|
background: #e8f8f5;
|
|
border-left: 5px solid #43e97b;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.cost-box h4 {
|
|
color: #155724;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.navigation {
|
|
position: fixed;
|
|
bottom: 30px;
|
|
right: 30px;
|
|
display: flex;
|
|
gap: 15px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.nav-btn {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border: none;
|
|
padding: 15px 30px;
|
|
border-radius: 50px;
|
|
cursor: pointer;
|
|
font-size: 1.1em;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.nav-btn:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.home-btn {
|
|
position: fixed;
|
|
top: 30px;
|
|
left: 30px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 25px;
|
|
border-radius: 50px;
|
|
cursor: pointer;
|
|
font-size: 1em;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
|
transition: all 0.3s ease;
|
|
z-index: 1000;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.home-btn:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
|
|
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
|
|
}
|
|
|
|
.slide-number {
|
|
position: fixed;
|
|
bottom: 30px;
|
|
left: 30px;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
padding: 10px 20px;
|
|
border-radius: 25px;
|
|
font-size: 1.1em;
|
|
color: #667eea;
|
|
font-weight: bold;
|
|
z-index: 1000;
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
from {
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.slide-content {
|
|
padding: 30px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2em;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.8em;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
p, li {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.navigation {
|
|
bottom: 15px;
|
|
right: 15px;
|
|
}
|
|
|
|
.nav-btn {
|
|
padding: 10px 20px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.slide-number {
|
|
bottom: 15px;
|
|
left: 15px;
|
|
padding: 8px 15px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.home-btn {
|
|
top: 15px;
|
|
left: 15px;
|
|
padding: 10px 20px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.comparison-table {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.comparison-table th,
|
|
.comparison-table td {
|
|
padding: 8px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Home Button -->
|
|
<a href="chatbot_index.php" class="home-btn">
|
|
<span>🏠</span>
|
|
<span>전략선택</span>
|
|
</a>
|
|
|
|
<div class="presentation-container">
|
|
<!-- Slide 1: Cover -->
|
|
<div class="slide active">
|
|
<div class="slide-content">
|
|
<h1>MVP AI 챗봇 솔루션 전략</h1>
|
|
<h2 style="border: none; color: #43e97b;">6주 실행 계획</h2>
|
|
<div style="text-align: center; margin-top: 50px;">
|
|
<p style="font-size: 1.5em; color: rgb(114, 56, 249);">Vertex AI Search 기반 문서 검색 챗봇</p>
|
|
<p style="margin-top: 30px; color: #666;">빠른 구현, 검증된 기술</p>
|
|
<div class="highlight-box" style="margin-top: 50px;">
|
|
<p style="font-size: 1.3em;"><strong>목표:</strong> 6주 안에 실무에서 사용 가능한 AI 챗봇 MVP 완성</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 2: MVP Philosophy -->
|
|
<div class="slide">
|
|
<div class="slide-content">
|
|
<h2>MVP 철학 및 범위</h2>
|
|
|
|
<div class="highlight-box">
|
|
<h3 style="color: white; margin-top: 0;">핵심 원칙</h3>
|
|
<p style="font-size: 1.2em;">"빠른 구현, 검증된 기술로 즉시 가치 제공"</p>
|
|
</div>
|
|
|
|
<div style="margin-top: 30px;">
|
|
<h3>🎯 MVP 목표</h3>
|
|
<ul>
|
|
<li><strong>기본 문서 검색:</strong> 10개 이상 문서 인덱싱 및 검색</li>
|
|
<li><strong>자연어 질의응답:</strong> 사용자 질문에 대한 정확한 답변</li>
|
|
<li><strong>참조 자료 제공:</strong> 답변 출처 명시 및 링크 제공</li>
|
|
<li><strong>빠른 응답:</strong> 3초 이내 답변 생성</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div style="margin-top: 30px;">
|
|
<h3>✅ MVP 핵심 기능</h3>
|
|
<ul>
|
|
<li><strong>문서 검색:</strong> Vertex AI Search 기반 의미론적 검색</li>
|
|
<li><strong>질의응답:</strong> 자연어 처리 및 컨텍스트 이해</li>
|
|
<li><strong>참조 표시:</strong> 답변 출처 문서 및 페이지 정보</li>
|
|
<li><strong>대화 인터페이스:</strong> 직관적인 채팅 UI</li>
|
|
<li><strong>기본 분석:</strong> 질문 패턴 및 사용 통계</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div style="margin-top: 30px;">
|
|
<h3>🚫 MVP 범위 밖 (Phase 2)</h3>
|
|
<ul>
|
|
<li>다국어 지원 (영어, 중국어 등)</li>
|
|
<li>음성 인식 및 음성 응답</li>
|
|
<li>고급 대화 컨텍스트 유지 (multi-turn)</li>
|
|
<li>ERP 데이터 실시간 연동</li>
|
|
<li>모바일 네이티브 앱</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 3: Week 1-2 Plan -->
|
|
<div class="slide">
|
|
<div class="slide-content">
|
|
<h2>Week 1-2: GCP 설정 및 Vertex AI 연동</h2>
|
|
|
|
<div class="week-card">
|
|
<h3>🏗️ Week 1-2 목표</h3>
|
|
<p>GCP 프로젝트 설정 및 Vertex AI Search 데이터 스토어 구축</p>
|
|
</div>
|
|
|
|
<div class="task-list">
|
|
<h4>📋 기획 (Week 1-2)</h4>
|
|
<ul>
|
|
<li><strong>Week 1:</strong> 문서 정리 및 챗봇 시나리오
|
|
<ul>
|
|
<li>인덱싱할 문서 목록 작성 (10개 이상)</li>
|
|
<li>질문-답변 시나리오 20개 작성</li>
|
|
<li>사용자 플로우 정의</li>
|
|
<li>성공 지표 설정</li>
|
|
</ul>
|
|
</li>
|
|
<li><strong>Week 2:</strong> 테스트 계획
|
|
<ul>
|
|
<li>챗봇 응답 정확도 테스트 계획</li>
|
|
<li>사용자 시나리오 테스트</li>
|
|
<li>성능 벤치마크 정의</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="task-list">
|
|
<h4>🎨 디자인 (Week 1-2)</h4>
|
|
<ul>
|
|
<li><strong>Week 1:</strong> 챗봇 UI/UX 디자인
|
|
<ul>
|
|
<li>챗봇 인터페이스 와이어프레임</li>
|
|
<li>대화 흐름 시각화</li>
|
|
<li>컬러 팔레트 및 타이포그래피</li>
|
|
<li>아이콘 및 그래픽 요소</li>
|
|
</ul>
|
|
</li>
|
|
<li><strong>Week 2:</strong> 상세 디자인
|
|
<ul>
|
|
<li>채팅 메시지 디자인</li>
|
|
<li>로딩 상태 디자인</li>
|
|
<li>참조 자료 표시 디자인</li>
|
|
<li>에러 상태 디자인</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="task-list">
|
|
<h4>⚙️ 백엔드 (Week 1-2)</h4>
|
|
<ul>
|
|
<li><strong>Week 1:</strong> GCP 프로젝트 설정
|
|
<ul>
|
|
<li>GCP 프로젝트 생성</li>
|
|
<li>Vertex AI API 활성화</li>
|
|
<li>서비스 계정 생성 및 권한 설정</li>
|
|
<li>Laravel 프로젝트 초기화 (PHP 8.2)</li>
|
|
</ul>
|
|
</li>
|
|
<li><strong>Week 2:</strong> Vertex AI Search 데이터 스토어 구축
|
|
<ul>
|
|
<li>Google Cloud Storage 버킷 생성</li>
|
|
<li>문서 업로드 및 인덱싱</li>
|
|
<li>Vertex AI Search 데이터 스토어 설정</li>
|
|
<li>검색 엔진 테스트</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="task-list">
|
|
<h4>💻 프론트엔드 (Week 1-2)</h4>
|
|
<ul>
|
|
<li><strong>Week 1:</strong> 프로젝트 설정
|
|
<ul>
|
|
<li>기존 jQuery/Bootstrap 환경 활용</li>
|
|
<li>채팅 UI 컴포넌트 라이브러리 선택</li>
|
|
<li>기본 레이아웃 구성</li>
|
|
</ul>
|
|
</li>
|
|
<li><strong>Week 2:</strong> 챗봇 UI 컴포넌트 개발
|
|
<ul>
|
|
<li>채팅 입력창 구현</li>
|
|
<li>메시지 표시 영역</li>
|
|
<li>로딩 인디케이터</li>
|
|
<li>기본 스타일링</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="deliverable-box">
|
|
<h4>📦 Week 1-2 산출물</h4>
|
|
<ul>
|
|
<li>문서 목록 + 챗봇 시나리오 20개 (기획)</li>
|
|
<li>챗봇 UI/UX 디자인 + 와이어프레임 (디자인)</li>
|
|
<li>GCP 프로젝트 + Vertex AI 데이터 스토어 (백엔드)</li>
|
|
<li>챗봇 UI 컴포넌트 기본 구현 (프론트엔드)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 4: Week 3-4 Plan -->
|
|
<div class="slide">
|
|
<div class="slide-content">
|
|
<h2>Week 3-4: Laravel API 및 프론트엔드 구현</h2>
|
|
|
|
<div class="week-card">
|
|
<h3>⚡ Week 3-4 목표</h3>
|
|
<p>Laravel API 연동 및 질의응답 기능 완성</p>
|
|
</div>
|
|
|
|
<div class="task-list">
|
|
<h4>📋 기획 (Week 3-4)</h4>
|
|
<ul>
|
|
<li><strong>Week 3:</strong> 테스트 시나리오 작성
|
|
<ul>
|
|
<li>질의응답 테스트 케이스 30개</li>
|
|
<li>참조 자료 정확도 검증</li>
|
|
<li>응답 시간 측정 계획</li>
|
|
</ul>
|
|
</li>
|
|
<li><strong>Week 4:</strong> 통합 테스트 준비
|
|
<ul>
|
|
<li>E2E 테스트 시나리오</li>
|
|
<li>사용자 피드백 수집 방법</li>
|
|
<li>버그 추적 시스템 설정</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="task-list">
|
|
<h4>🎨 디자인 (Week 3-4)</h4>
|
|
<ul>
|
|
<li><strong>Week 3:</strong> UI 상세 디자인
|
|
<ul>
|
|
<li>답변 메시지 카드 디자인</li>
|
|
<li>참조 자료 링크 스타일</li>
|
|
<li>사용자/봇 메시지 구분</li>
|
|
<li>타임스탬프 표시</li>
|
|
</ul>
|
|
</li>
|
|
<li><strong>Week 4:</strong> 인터랙션 디자인
|
|
<ul>
|
|
<li>애니메이션 효과</li>
|
|
<li>스크롤 동작</li>
|
|
<li>반응형 레이아웃</li>
|
|
<li>디자인 QA</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="task-list">
|
|
<h4>⚙️ 백엔드 (Week 3-4)</h4>
|
|
<ul>
|
|
<li><strong>Week 3:</strong> Laravel API 개발
|
|
<ul>
|
|
<li>Google Cloud PHP 클라이언트 설치</li>
|
|
<li>ChatController 구현</li>
|
|
<li>Vertex AI Search API 연동</li>
|
|
<li>API 라우트 설정</li>
|
|
</ul>
|
|
</li>
|
|
<li><strong>Week 4:</strong> 응답 처리 및 최적화
|
|
<ul>
|
|
<li>답변 파싱 로직</li>
|
|
<li>참조 자료 추출</li>
|
|
<li>캐싱 전략 구현</li>
|
|
<li>에러 핸들링</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="task-list">
|
|
<h4>💻 프론트엔드 (Week 3-4)</h4>
|
|
<ul>
|
|
<li><strong>Week 3:</strong> API 연동
|
|
<ul>
|
|
<li>AJAX 요청 구현</li>
|
|
<li>실시간 답변 표시</li>
|
|
<li>로딩 상태 처리</li>
|
|
<li>에러 처리</li>
|
|
</ul>
|
|
</li>
|
|
<li><strong>Week 4:</strong> 참조 자료 UI
|
|
<ul>
|
|
<li>참조 문서 카드 구현</li>
|
|
<li>링크 클릭 이벤트</li>
|
|
<li>메시지 히스토리 관리</li>
|
|
<li>자동 스크롤 구현</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="deliverable-box">
|
|
<h4>📦 Week 3-4 산출물</h4>
|
|
<ul>
|
|
<li>테스트 시나리오 30개 + E2E 계획 (기획)</li>
|
|
<li>전체 UI 디자인 완료 (디자인)</li>
|
|
<li>Laravel API + Vertex AI 연동 완료 (백엔드)</li>
|
|
<li>완전한 챗봇 인터페이스 (프론트엔드)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 5: Week 5-6 Plan -->
|
|
<div class="slide">
|
|
<div class="slide-content">
|
|
<h2>Week 5-6: 통합 테스트 및 베타 런칭</h2>
|
|
|
|
<div class="week-card">
|
|
<h3>🚀 Week 5-6 목표</h3>
|
|
<p>베타 테스트 실시 및 운영 환경 배포</p>
|
|
</div>
|
|
|
|
<div class="task-list">
|
|
<h4>📋 기획 (Week 5-6)</h4>
|
|
<ul>
|
|
<li><strong>Week 5:</strong> 베타 테스트 계획
|
|
<ul>
|
|
<li>베타 테스터 선정 (5-10명)</li>
|
|
<li>테스트 기간 및 목표 설정</li>
|
|
<li>피드백 수집 방법</li>
|
|
<li>버그 우선순위 관리</li>
|
|
</ul>
|
|
</li>
|
|
<li><strong>Week 6:</strong> 운영 준비
|
|
<ul>
|
|
<li>사용자 매뉴얼 작성</li>
|
|
<li>FAQ 문서 준비</li>
|
|
<li>운영 가이드</li>
|
|
<li>Phase 2 백로그 정리</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="task-list">
|
|
<h4>🎨 디자인 (Week 5-6)</h4>
|
|
<ul>
|
|
<li><strong>Week 5:</strong> 디자인 QA
|
|
<ul>
|
|
<li>크로스 브라우저 테스트</li>
|
|
<li>모바일 반응형 검증</li>
|
|
<li>접근성 체크</li>
|
|
<li>다크모드 지원 (선택)</li>
|
|
</ul>
|
|
</li>
|
|
<li><strong>Week 6:</strong> 최종 검수
|
|
<ul>
|
|
<li>사용자 피드백 반영</li>
|
|
<li>UI 개선사항 적용</li>
|
|
<li>스크린샷 및 데모 자료</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="task-list">
|
|
<h4>⚙️ 백엔드 (Week 5-6)</h4>
|
|
<ul>
|
|
<li><strong>Week 5:</strong> 안정화 및 최적화
|
|
<ul>
|
|
<li>에러 핸들링 개선</li>
|
|
<li>로깅 시스템 구축</li>
|
|
<li>성능 최적화</li>
|
|
<li>보안 점검</li>
|
|
</ul>
|
|
</li>
|
|
<li><strong>Week 6:</strong> 프로덕션 배포
|
|
<ul>
|
|
<li>프로덕션 환경 설정</li>
|
|
<li>MySQL 8.0 SAM DB 연동</li>
|
|
<li>백업 및 모니터링</li>
|
|
<li>API 문서화</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="task-list">
|
|
<h4>💻 프론트엔드 (Week 5-6)</h4>
|
|
<ul>
|
|
<li><strong>Week 5:</strong> 버그 수정
|
|
<ul>
|
|
<li>베타 테스트 버그 수정</li>
|
|
<li>성능 최적화</li>
|
|
<li>사용자 경험 개선</li>
|
|
</ul>
|
|
</li>
|
|
<li><strong>Week 6:</strong> 최종 배포
|
|
<ul>
|
|
<li>브라우저 호환성 검증</li>
|
|
<li>최종 통합 테스트</li>
|
|
<li>프로덕션 배포</li>
|
|
<li>모니터링 설정</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="deliverable-box">
|
|
<h4>📦 Week 5-6 산출물</h4>
|
|
<ul>
|
|
<li>베타 테스트 리포트 + 사용자 매뉴얼 (기획)</li>
|
|
<li>최종 UI/UX + 데모 자료 (디자인)</li>
|
|
<li>프로덕션 API + 모니터링 (백엔드)</li>
|
|
<li>배포된 챗봇 웹앱 (프론트엔드)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 6: Success Metrics -->
|
|
<div class="slide">
|
|
<div class="slide-content">
|
|
<h2>성공 지표 및 완료 기준</h2>
|
|
|
|
<div class="highlight-box">
|
|
<h3 style="color: white; margin-top: 0;">MVP 완료 정의</h3>
|
|
<p style="font-size: 1.2em;">"10개 문서 인덱싱 완료, 기본 질의응답 성공, 참조 자료 제공"</p>
|
|
</div>
|
|
|
|
<div style="margin-top: 30px;">
|
|
<h3>✅ 필수 완료 항목</h3>
|
|
<table class="comparison-table">
|
|
<thead>
|
|
<tr>
|
|
<th>항목</th>
|
|
<th>완료 기준</th>
|
|
<th>검증 방법</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>문서 인덱싱</strong></td>
|
|
<td>10개 이상 문서 등록</td>
|
|
<td>Vertex AI Search 콘솔 확인</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>질의응답</strong></td>
|
|
<td>20개 시나리오 정확도 80% 이상</td>
|
|
<td>테스트 시나리오 실행</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>참조 자료</strong></td>
|
|
<td>답변마다 출처 표시</td>
|
|
<td>참조 링크 클릭 가능 확인</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>응답 속도</strong></td>
|
|
<td>평균 3초 이내</td>
|
|
<td>성능 측정 도구</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>UI/UX</strong></td>
|
|
<td>직관적인 채팅 인터페이스</td>
|
|
<td>사용자 테스트</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>안정성</strong></td>
|
|
<td>Critical 버그 0건</td>
|
|
<td>베타 테스트</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="success-metrics" style="margin-top: 30px;">
|
|
<h4>📊 정량적 목표</h4>
|
|
<ul>
|
|
<li><strong>답변 정확도:</strong> 80% 이상</li>
|
|
<li><strong>응답 시간:</strong> 평균 3초 이내</li>
|
|
<li><strong>문서 커버리지:</strong> 10개 이상 문서</li>
|
|
<li><strong>사용자 만족도:</strong> 베타 테스터 75% 이상 만족</li>
|
|
<li><strong>시스템 안정성:</strong> 99% 이상 가용성</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 7: Technical Stack -->
|
|
<div class="slide">
|
|
<div class="slide-content">
|
|
<h2>기술 스택</h2>
|
|
|
|
<div style="margin-top: 30px;">
|
|
<h3>⚙️ 백엔드 스택</h3>
|
|
<table class="comparison-table">
|
|
<thead>
|
|
<tr>
|
|
<th>기술</th>
|
|
<th>선택 이유</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>Laravel</strong></td>
|
|
<td>PHP 8.2 기반 최신 프레임워크</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Vertex AI Search</strong></td>
|
|
<td>Google Cloud 관리형 검색 서비스</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Google Cloud Storage</strong></td>
|
|
<td>문서 저장 및 인덱싱</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>MySQL 8.0</strong></td>
|
|
<td>SAM 프로젝트 전용 데이터베이스</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div style="margin-top: 30px;">
|
|
<h3>💻 프론트엔드 스택</h3>
|
|
<table class="comparison-table">
|
|
<thead>
|
|
<tr>
|
|
<th>기술</th>
|
|
<th>선택 이유</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>jQuery</strong></td>
|
|
<td>기존 프로젝트 표준, 빠른 개발</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Bootstrap</strong></td>
|
|
<td>반응형 UI 컴포넌트</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>AJAX</strong></td>
|
|
<td>비동기 API 통신</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div style="margin-top: 30px;">
|
|
<h3>☁️ Google Cloud Platform</h3>
|
|
<ul>
|
|
<li><strong>Vertex AI Search:</strong> 검색 및 질의응답 엔진</li>
|
|
<li><strong>Cloud Storage:</strong> 문서 저장소</li>
|
|
<li><strong>Service Account:</strong> API 인증</li>
|
|
<li><strong>Cloud Logging:</strong> 로그 관리</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 8: Cost Breakdown -->
|
|
<div class="slide">
|
|
<div class="slide-content">
|
|
<h2>초기 비용 및 투자</h2>
|
|
|
|
<div class="highlight-box">
|
|
<h3 style="color: white; margin-top: 0;">총 초기 비용</h3>
|
|
<p style="font-size: 2em; font-weight: bold;">월 $12.50 (약 17,000원)</p>
|
|
<p style="font-size: 1.2em;">개발 공수: 1.5주 (6-10 Man-Day)</p>
|
|
</div>
|
|
|
|
<div style="margin-top: 30px;">
|
|
<h3>💰 GCP 비용 상세 (월간)</h3>
|
|
<table class="comparison-table">
|
|
<thead>
|
|
<tr>
|
|
<th>항목</th>
|
|
<th>예상 비용</th>
|
|
<th>설명</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>Vertex AI Search</strong></td>
|
|
<td>$10.00</td>
|
|
<td>월 10,000 쿼리 기준</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Cloud Storage</strong></td>
|
|
<td>$0.50</td>
|
|
<td>10GB 문서 저장</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Cloud Logging</strong></td>
|
|
<td>$1.00</td>
|
|
<td>기본 로그 수집</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>네트워크</strong></td>
|
|
<td>$1.00</td>
|
|
<td>API 통신 비용</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>합계</strong></td>
|
|
<td><strong>$12.50</strong></td>
|
|
<td>약 17,000원/월</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="cost-box" style="margin-top: 30px;">
|
|
<h4>📊 개발 공수 (Week별)</h4>
|
|
<ul>
|
|
<li><strong>기획:</strong> 2 Man-Day (문서 정리, 시나리오 작성)</li>
|
|
<li><strong>디자인:</strong> 1.5 Man-Day (UI/UX 디자인)</li>
|
|
<li><strong>백엔드:</strong> 3 Man-Day (GCP 설정, API 개발)</li>
|
|
<li><strong>프론트엔드:</strong> 2.5 Man-Day (챗봇 UI 구현)</li>
|
|
<li><strong>테스트/QA:</strong> 1.5 Man-Day (통합 테스트)</li>
|
|
</ul>
|
|
<p style="margin-top: 15px; font-weight: bold; color: #155724;">총 개발 공수: 10.5 Man-Day (약 1.5주)</p>
|
|
</div>
|
|
|
|
<div class="success-metrics" style="margin-top: 30px;">
|
|
<h4>💡 비용 효율성</h4>
|
|
<ul>
|
|
<li>관리형 서비스로 인프라 관리 최소화</li>
|
|
<li>사용량 기반 과금으로 초기 부담 감소</li>
|
|
<li>빠른 구현으로 시간 대비 비용 최적화</li>
|
|
<li>검증된 기술 스택으로 리스크 최소화</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 9: Phase 2 Roadmap -->
|
|
<div class="slide">
|
|
<div class="slide-content">
|
|
<h2>Phase 2 계획 (MVP 이후)</h2>
|
|
|
|
<div class="highlight-box">
|
|
<h3 style="color: white; margin-top: 0;">MVP 성공 후 확장 로드맵</h3>
|
|
<p style="font-size: 1.2em;">사용자 피드백 기반 점진적 기능 확장</p>
|
|
</div>
|
|
|
|
<div style="margin-top: 30px;">
|
|
<h3>📈 Phase 2 목표 (4주)</h3>
|
|
<ul>
|
|
<li><strong>다국어 지원:</strong> 영어, 중국어 추가</li>
|
|
<li><strong>음성 인식:</strong> 음성으로 질문 입력</li>
|
|
<li><strong>음성 응답:</strong> TTS 기반 답변 읽어주기</li>
|
|
<li><strong>대화 컨텍스트:</strong> 이전 대화 기억 및 연속 질문</li>
|
|
<li><strong>사용자 피드백:</strong> 답변 평가 및 개선</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div style="margin-top: 30px;">
|
|
<h3>🔮 Phase 3 목표 (8주)</h3>
|
|
<ul>
|
|
<li><strong>ERP 데이터 연동:</strong> 실시간 재고, 주문 조회</li>
|
|
<li><strong>개인화:</strong> 사용자별 맞춤 답변</li>
|
|
<li><strong>모바일 앱:</strong> iOS/Android 네이티브 앱</li>
|
|
<li><strong>고급 분석:</strong> 사용 패턴 분석 및 인사이트</li>
|
|
<li><strong>AI 학습:</strong> 사용자 피드백 기반 자동 개선</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="success-metrics" style="margin-top: 30px;">
|
|
<h4>🎯 장기 비전</h4>
|
|
<p>지능형 비즈니스 어시스턴트</p>
|
|
<ul>
|
|
<li>자연스러운 대화로 업무 처리</li>
|
|
<li>문서 검색을 넘어 작업 자동화</li>
|
|
<li>다국어 글로벌 지원</li>
|
|
<li>음성 기반 핸즈프리 사용</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 10: Final Summary -->
|
|
<div class="slide">
|
|
<div class="slide-content">
|
|
<h2>6주 MVP 요약</h2>
|
|
|
|
<div class="highlight-box">
|
|
<h3 style="color: white; margin-top: 0;">핵심 메시지</h3>
|
|
<p style="font-size: 1.3em;">"빠른 구현, 검증된 기술로 즉시 가치 제공"</p>
|
|
</div>
|
|
|
|
<div style="margin-top: 40px;">
|
|
<h3>✅ 최종 체크리스트</h3>
|
|
<table class="comparison-table">
|
|
<thead>
|
|
<tr>
|
|
<th>주차</th>
|
|
<th>핵심 산출물</th>
|
|
<th>검증 방법</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>Week 1-2</strong></td>
|
|
<td>GCP 설정 + Vertex AI 데이터 스토어</td>
|
|
<td>10개 문서 인덱싱 성공</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Week 3-4</strong></td>
|
|
<td>Laravel API + 챗봇 UI</td>
|
|
<td>20개 시나리오 질의응답 성공</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Week 5-6</strong></td>
|
|
<td>베타 테스트 + 프로덕션 배포</td>
|
|
<td>5-10명 사용자 테스트 완료</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div style="margin-top: 40px; text-align: center;">
|
|
<p style="font-size: 1.3em; color:rgb(114, 56, 249);"><strong>성공 지표</strong></p>
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 30px;">
|
|
<div class="task-list">
|
|
<p style="font-size: 1.5em; color: rgb(114, 56, 249); font-weight: bold; margin: 0;">80%</p>
|
|
<p style="font-size: 1em; margin: 5px 0 0 0;">답변 정확도</p>
|
|
</div>
|
|
<div class="task-list">
|
|
<p style="font-size: 1.5em; color: rgb(114, 56, 249); font-weight: bold; margin: 0;">3초</p>
|
|
<p style="font-size: 1em; margin: 5px 0 0 0;">평균 응답 시간</p>
|
|
</div>
|
|
<div class="task-list">
|
|
<p style="font-size: 1.5em; color: rgb(114, 56, 249); font-weight: bold; margin: 0;">10개+</p>
|
|
<p style="font-size: 1em; margin: 5px 0 0 0;">문서 인덱싱</p>
|
|
</div>
|
|
<div class="task-list">
|
|
<p style="font-size: 1.5em; color: rgb(114, 56, 249); font-weight: bold; margin: 0;">$12.50</p>
|
|
<p style="font-size: 1em; margin: 5px 0 0 0;">월간 비용</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 11: Thank You -->
|
|
<div class="slide">
|
|
<div class="slide-content">
|
|
<h1 style="font-size: 4em; margin-bottom: 40px;">감사합니다</h1>
|
|
<div style="text-align: center;">
|
|
<p style="font-size: 1.5em; color: rgb(114, 56, 249); margin-bottom: 30px;">MVP AI 챗봇 솔루션 전략 - 6주 실행 계획</p>
|
|
<div class="highlight-box" style="margin-top: 50px;">
|
|
<h3 style="color: white; margin-top: 0;">함께 만들어가는 지능형 비즈니스 어시스턴트</h3>
|
|
<p style="font-size: 1.2em;">빠르고 확실한 시작으로 AI 혁신 실현</p>
|
|
</div>
|
|
<div style="margin-top: 50px; padding: 30px; background: #e8f8f5; border-radius: 15px;">
|
|
<h3>문의 및 피드백</h3>
|
|
<p style="margin-top: 20px;">본 계획안에 대한 의견이나 추가 논의가 필요하신 경우</p>
|
|
<p>프로젝트 팀으로 연락 주시기 바랍니다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide-number">
|
|
<span id="currentSlide">1</span> / <span id="totalSlides">11</span>
|
|
</div>
|
|
|
|
<div class="navigation">
|
|
<button class="nav-btn" id="prevBtn" onclick="changeSlide(-1)">← 이전</button>
|
|
<button class="nav-btn" id="nextBtn" onclick="changeSlide(1)">다음 →</button>
|
|
</div>
|
|
|
|
<script>
|
|
let currentSlide = 1;
|
|
const totalSlides = 11;
|
|
let touchStartX = 0;
|
|
let touchEndX = 0;
|
|
|
|
document.getElementById('totalSlides').textContent = totalSlides;
|
|
|
|
function showSlide(n) {
|
|
const slides = document.querySelectorAll('.slide');
|
|
|
|
if (n > totalSlides) {
|
|
currentSlide = 1;
|
|
}
|
|
if (n < 1) {
|
|
currentSlide = totalSlides;
|
|
}
|
|
|
|
slides.forEach(slide => {
|
|
slide.classList.remove('active');
|
|
});
|
|
|
|
slides[currentSlide - 1].classList.add('active');
|
|
document.getElementById('currentSlide').textContent = currentSlide;
|
|
|
|
document.getElementById('prevBtn').disabled = (currentSlide === 1);
|
|
document.getElementById('nextBtn').disabled = (currentSlide === totalSlides);
|
|
}
|
|
|
|
function changeSlide(direction) {
|
|
currentSlide += direction;
|
|
showSlide(currentSlide);
|
|
}
|
|
|
|
document.addEventListener('keydown', function(event) {
|
|
if (event.key === 'ArrowLeft') {
|
|
changeSlide(-1);
|
|
} else if (event.key === 'ArrowRight' || event.key === ' ') {
|
|
event.preventDefault();
|
|
changeSlide(1);
|
|
}
|
|
});
|
|
|
|
document.addEventListener('touchstart', function(event) {
|
|
touchStartX = event.changedTouches[0].screenX;
|
|
});
|
|
|
|
document.addEventListener('touchend', function(event) {
|
|
touchEndX = event.changedTouches[0].screenX;
|
|
handleSwipe();
|
|
});
|
|
|
|
function handleSwipe() {
|
|
if (touchEndX < touchStartX - 50) {
|
|
changeSlide(1);
|
|
}
|
|
if (touchEndX > touchStartX + 50) {
|
|
changeSlide(-1);
|
|
}
|
|
}
|
|
|
|
showSlide(currentSlide);
|
|
</script>
|
|
</body>
|
|
</html>
|