<?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>
