sam-manage/resources/views/lab/strategy/rag-startups.blade.php

@extends('layouts.app')

@section('title', '대한민국 RAG 스타트업 현황 분석')

@push('styles')
<style>
    body {
        font-family: 'Noto Sans KR', sans-serif;
    }
    .chart-container {
        position: relative;
        width: 100%;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        height: 320px;
        max-height: 400px;
    }
    @media (min-width: 640px) {
        .chart-container {
            height: 400px;
        }
    }
    .nav-link {
        padding: 0.5rem 0.75rem;
        border-radius: 0.375rem;
        font-size: 0.875rem;
        font-weight: 500;
        color: #374151;
        transition: all 0.2s;
    }
    .nav-link:hover {
        background-color: #f0fdfa;
        color: #0f766e;
    }
    .nav-link.active {
        background-color: #ccfbf1;
        color: #115e59;
    }
    .tab-button {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        font-weight: 500;
        border-radius: 0.5rem 0.5rem 0 0;
        transition: all 0.2s;
        border-bottom: 2px solid transparent;
    }
    .tab-button.active {
        border-bottom-color: #0d9488;
        color: #0f766e;
    }
    .tab-button:not(.active) {
        border-bottom-color: transparent;
        color: #6b7280;
    }
    .tab-button:not(.active):hover {
        color: #374151;
        border-bottom-color: #d1d5db;
    }
    .content-section {
        padding-top: 5rem;
        margin-top: -4rem;
    }
    .company-card {
        background: white;
        padding: 1rem;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
        border: 1px solid #e5e7eb;
        transition: box-shadow 0.2s;
    }
    .company-card:hover {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }
</style>
@endpush

@section('content')
<div class="bg-amber-50 text-gray-800 min-h-screen">
    <!-- Sticky Header -->
    <header class="bg-white shadow-sm sticky top-0 z-40 w-full">
        <nav class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex-shrink-0">
                    <h1 class="text-xl font-bold text-teal-800">대한민국 RAG 스타트업 현황</h1>
                </div>
                <div class="hidden sm:block sm:ml-6">
                    <div class="flex space-x-4">
                        <a href="#intro" class="nav-link active">RAG 소개</a>
                        <a href="#market" class="nav-link">시장 현황</a>
                        <a href="#players" class="nav-link">주요 기업</a>
                        <a href="#tech" class="nav-link">기술 트렌드</a>
                        <a href="#usecases" class="nav-link">도입 사례</a>
                        <a href="#outlook" class="nav-link">전망</a>
                    </div>
                </div>
            </div>
        </nav>
    </header>

    <main class="max-w-6xl mx-auto p-4 sm:p-6 lg:p-8">
        <!-- Section 1: RAG 소개 -->
        <section id="intro" class="content-section mb-12">
            <h2 class="text-3xl font-bold text-center mb-6 text-teal-900">RAG (Retrieval-Augmented Generation)란?</h2>
            <p class="text-lg text-gray-700 mb-8 max-w-3xl mx-auto text-center">
                RAG는 '검색 증강 생성'의 약자로, 대규모 언어 모델(LLM)이 최신 정보나 특정 도메인 지식에 접근할 수 있도록 외부 데이터베이스에서 관련 정보를 검색하여 이를 기반으로 답변을 생성하는 기술입니다.
            </p>

            <!-- RAG Architecture Diagram -->
            <div class="max-w-4xl mx-auto bg-white p-6 rounded-lg shadow-lg border border-gray-200">
                <h3 class="text-xl font-bold text-center mb-4 text-gray-800">RAG 시스템 아키텍처</h3>
                <div class="flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0 md:space-x-4">
                    <div class="flex flex-col items-center text-center p-3 bg-gray-50 rounded-lg w-full md:w-1/4">
                        <svg class="w-10 h-10 mb-2 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                        </svg>
                        <span class="font-bold">사용자 질문</span>
                        <p class="text-sm text-gray-600">"최신 AI 트렌드는?"</p>
                    </div>

                    <span class="text-2xl font-bold text-teal-600 hidden md:block">→</span>
                    <span class="text-2xl font-bold text-teal-600 md:hidden">↓</span>

                    <div class="flex flex-col items-center text-center p-3 bg-teal-50 rounded-lg w-full md:w-1/3">
                        <svg class="w-10 h-10 mb-2 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
                        </svg>
                        <span class="font-bold">1. Retriever (검색)</span>
                        <p class="text-sm text-gray-600">Vector DB 등 외부 지식 소스에서 관련 문서 검색</p>
                    </div>

                    <span class="text-2xl font-bold text-teal-600 hidden md:block">→</span>
                    <span class="text-2xl font-bold text-teal-600 md:hidden">↓</span>

                    <div class="flex flex-col items-center text-center p-3 bg-teal-50 rounded-lg w-full md:w-1/3">
                        <svg class="w-10 h-10 mb-2 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" />
                        </svg>
                        <span class="font-bold">2. Generator (LLM)</span>
                        <p class="text-sm text-gray-600">질문 + 검색된 문서를 기반으로 정확한 답변 생성</p>
                    </div>

                    <span class="text-2xl font-bold text-teal-600 hidden md:block">→</span>
                    <span class="text-2xl font-bold text-teal-600 md:hidden">↓</span>

                    <div class="flex flex-col items-center text-center p-3 bg-gray-50 rounded-lg w-full md:w-1/4">
                        <svg class="w-10 h-10 mb-2 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" />
                        </svg>
                        <span class="font-bold">최종 답변</span>
                        <p class="text-sm text-gray-600">"최신 트렌드는... (검색된 정보 기반)"</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Section 2: 시장 현황 -->
        <section id="market" class="content-section mb-12">
            <h2 class="text-3xl font-bold text-center mb-6 text-teal-900">국내 RAG 시장 현황</h2>
            <p class="text-lg text-gray-700 mb-8 max-w-3xl mx-auto text-center">
                국내 RAG 시장은 생성형 AI의 기업 도입이 가속화되면서 폭발적으로 성장하고 있습니다.
            </p>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                <div class="bg-white p-6 rounded-lg shadow-md text-center border border-gray-200">
                    <h3 class="text-xl font-bold text-teal-800 mb-2">시장 규모 (2024년 예상)</h3>
                    <p class="text-4xl font-bold text-gray-900">500억+</p>
                    <p class="text-sm text-gray-600">원</p>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-md text-center border border-gray-200">
                    <h3 class="text-xl font-bold text-teal-800 mb-2">연평균 성장률 (CAGR)</h3>
                    <p class="text-4xl font-bold text-gray-900">35%</p>
                    <p class="text-sm text-gray-600">2024-2027년 예상</p>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-md text-center border border-gray-200">
                    <h3 class="text-xl font-bold text-teal-800 mb-2">주요 성장 동력</h3>
                    <p class="text-lg font-medium text-gray-900">기업 맞춤형 AI</p>
                    <p class="text-sm text-gray-600">데이터 보안 및 환각 감소 요구</p>
                </div>
            </div>

            <div class="bg-white p-6 rounded-lg shadow-lg border border-gray-200">
                <h3 class="text-xl font-bold text-center mb-4 text-gray-800">연도별 국내 RAG 시장 투자 규모</h3>
                <div class="chart-container">
                    <canvas id="investmentChart"></canvas>
                </div>
            </div>
        </section>

        <!-- Section 3: 주요 기업 -->
        <section id="players" class="content-section mb-12">
            <h2 class="text-3xl font-bold text-center mb-6 text-teal-900">주요 RAG 스타트업</h2>
            <p class="text-lg text-gray-700 mb-8 max-w-3xl mx-auto text-center">
                국내 RAG 시장은 다양한 배경의 스타트업들이 경쟁하고 있습니다.
            </p>

            <div class="border-b border-gray-300 mb-6">
                <nav class="-mb-px flex justify-center space-x-6" aria-label="Tabs">
                    <button class="tab-button active" data-filter="all">전체</button>
                    <button class="tab-button" data-filter="search">AI 검색 솔루션</button>
                    <button class="tab-button" data-filter="b2b">B2B SaaS</button>
                    <button class="tab-button" data-filter="domain">특화 도메인</button>
                </nav>
            </div>

            <div id="playerGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                <div class="company-card" data-category="search">
                    <h3 class="text-xl font-bold text-teal-800">Upstage (업스테이지)</h3>
                    <p class="text-sm font-medium text-gray-600 mb-2">AI 검색 솔루션</p>
                    <p class="text-gray-700">자체 LLM 'Solar'와 RAG 기술을 결합한 Document AI 솔루션 제공.</p>
                </div>
                <div class="company-card" data-category="search">
                    <h3 class="text-xl font-bold text-teal-800">Wrtn (뤼튼)</h3>
                    <p class="text-sm font-medium text-gray-600 mb-2">AI 검색 솔루션</p>
                    <p class="text-gray-700">AI 포털 서비스 '뤼튼'을 통해 RAG 기반 검색 및 콘텐츠 생성 기능 제공.</p>
                </div>
                <div class="company-card" data-category="b2b">
                    <h3 class="text-xl font-bold text-teal-800">Allganize (올거나이즈)</h3>
                    <p class="text-sm font-medium text-gray-600 mb-2">B2B SaaS</p>
                    <p class="text-gray-700">기업용 LLM 앱 빌더 '알리(Alli)' 제공. 사내 문서 기반 Q&A에 강점.</p>
                </div>
                <div class="company-card" data-category="search">
                    <h3 class="text-xl font-bold text-teal-800">42Maru (포티투마루)</h3>
                    <p class="text-sm font-medium text-gray-600 mb-2">AI 검색 솔루션</p>
                    <p class="text-gray-700">'QA42' 등 시맨틱 검색 기반 AI 솔루션. 정확한 의도 파악 기술 보유.</p>
                </div>
                <div class="company-card" data-category="domain">
                    <h3 class="text-xl font-bold text-teal-800">Law&Company (로앤컴퍼니)</h3>
                    <p class="text-sm font-medium text-gray-600 mb-2">특화 도메인 (법률)</p>
                    <p class="text-gray-700">'로톡' 서비스를 통해 RAG 기반 법률 정보 검색 및 상담 서비스 고도화.</p>
                </div>
                <div class="company-card" data-category="b2b">
                    <h3 class="text-xl font-bold text-teal-800">Mindlogic (마인드로직)</h3>
                    <p class="text-sm font-medium text-gray-600 mb-2">B2B SaaS</p>
                    <p class="text-gray-700">AI 페르소나 기술과 RAG를 결합하여 기업 맞춤형 가상 상담원 제공.</p>
                </div>
            </div>
        </section>

        <!-- Section 4: 기술 트렌드 -->
        <section id="tech" class="content-section mb-12">
            <h2 class="text-3xl font-bold text-center mb-6 text-teal-900">기술 트렌드 및 과제</h2>
            <p class="text-lg text-gray-700 mb-8 max-w-3xl mx-auto text-center">
                RAG 기술이 상용화되면서 여러 기술적 과제들이 대두되고 있습니다.
            </p>

            <div class="bg-white p-6 rounded-lg shadow-lg border border-gray-200">
                <h3 class="text-xl font-bold text-center mb-4 text-gray-800">RAG 기술 핵심 과제</h3>
                <div class="chart-container">
                    <canvas id="techRadarChart"></canvas>
                </div>
            </div>
        </section>

        <!-- Section 5: 도입 사례 -->
        <section id="usecases" class="content-section mb-12">
            <h2 class="text-3xl font-bold text-center mb-6 text-teal-900">주요 도입 사례</h2>
            <p class="text-lg text-gray-700 mb-8 max-w-3xl mx-auto text-center">
                RAG 시스템은 다양한 산업 분야에서 기업의 생산성을 높이는 데 활용되고 있습니다.
            </p>

            <div class="max-w-3xl mx-auto">
                <div class="border-b border-gray-300 mb-4">
                    <nav class="-mb-px flex space-x-4" aria-label="Tabs">
                        <button class="usecase-tab-button tab-button active" data-target="usecase-1">고객 지원</button>
                        <button class="usecase-tab-button tab-button" data-target="usecase-2">사내 지식 관리</button>
                        <button class="usecase-tab-button tab-button" data-target="usecase-3">전문 리서치</button>
                    </nav>
                </div>

                <div id="usecase-content">
                    <div id="usecase-1" class="usecase-content-panel p-4 bg-white rounded-lg shadow border">
                        <h3 class="text-xl font-bold text-teal-800 mb-2">고객 지원 및 상담 챗봇</h3>
                        <p class="text-gray-700">최신 제품 매뉴얼, FAQ, 약관 등을 실시간으로 검색하여 고객 문의에 24시간 정확하게 응대합니다.</p>
                        <p class="text-sm text-gray-600 mt-2"><strong>주요 기업:</strong> 금융사, 이커머스, 통신사</p>
                    </div>
                    <div id="usecase-2" class="usecase-content-panel p-4 bg-white rounded-lg shadow border hidden">
                        <h3 class="text-xl font-bold text-teal-800 mb-2">사내 지식 관리 및 검색</h3>
                        <p class="text-gray-700">방대한 양의 내부 문서를 학습하여 직원이 필요한 정보를 빠르게 찾고 요약할 수 있도록 돕습니다.</p>
                        <p class="text-sm text-gray-600 mt-2"><strong>주요 기업:</strong> 대기업, IT/제조업</p>
                    </div>
                    <div id="usecase-3" class="usecase-content-panel p-4 bg-white rounded-lg shadow border hidden">
                        <h3 class="text-xl font-bold text-teal-800 mb-2">전문 분야 리서치 (법률, 의료)</h3>
                        <p class="text-gray-700">수만 건의 판례, 논문, 특허 등 전문 자료를 RAG로 분석하여 리서치 시간을 획기적으로 단축시킵니다.</p>
                        <p class="text-sm text-gray-600 mt-2"><strong>주요 기업:</strong> 로펌, 병원, 연구소</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Section 6: 전망 -->
        <section id="outlook" class="content-section">
            <h2 class="text-3xl font-bold text-center mb-6 text-teal-900">시장 전망 및 결론</h2>
            <div class="max-w-3xl mx-auto bg-white p-6 rounded-lg shadow-lg border border-gray-200 space-y-4">
                <div>
                    <h3 class="text-xl font-bold text-gray-800">핵심 전망</h3>
                    <ul class="list-disc list-inside text-gray-700 mt-2 space-y-1">
                        <li><strong>수직적 확장:</strong> 법률, 의료, 금융, 교육 등 특정 도메인에 고도로 특화된 RAG 솔루션이 증가할 것입니다.</li>
                        <li><strong>기술 고도화:</strong> 단순 검색을 넘어, 복잡한 추론과 데이터 분석이 가능한 'Advanced RAG' 기술 경쟁이 심화될 것입니다.</li>
                        <li><strong>M&A 및 파트너십:</strong> 대형 IT 기업 및 클라우드 사업자(CSP)와의 파트너십, 혹은 기술력 있는 스타트업의 M&A가 활발해질 전망입니다.</li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-xl font-bold text-gray-800">결론</h3>
                    <p class="text-gray-700 mt-2">
                        RAG는 생성형 AI의 한계를 극복하고 기업 환경에 실질적인 가치를 제공하는 핵심 기술입니다. 국내 스타트업들은 한국어 처리 능력과 각 산업 도메인에 대한 깊은 이해를 바탕으로 글로벌 시장에서도 경쟁력 있는 솔루션을 만들어낼 잠재력을 가지고 있습니다.
                    </p>
                </div>
            </div>
        </section>
    </main>

    <footer class="bg-white mt-16 border-t border-gray-200">
        <div class="max-w-6xl mx-auto py-6 px-4 text-center text-sm text-gray-500">
            <p>&copy; 2025 RAG Startup Analysis. 이 데이터는 분석 목적으로 작성되었습니다.</p>
        </div>
    </footer>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
    // Bar Chart - Investment
    const renderBarChart = () => {
        const ctx = document.getElementById('investmentChart').getContext('2d');
        if (window.myInvestmentChart) {
            window.myInvestmentChart.destroy();
        }
        window.myInvestmentChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['2022년', '2023년', '2024년 (E)', '2025년 (F)'],
                datasets: [{
                    label: '투자 규모 (억 원)',
                    data: [80, 250, 520, 900],
                    backgroundColor: 'rgba(13, 148, 136, 0.6)',
                    borderColor: 'rgba(13, 148, 136, 1)',
                    borderWidth: 1,
                    borderRadius: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        title: { display: true, text: '투자 규모 (억 원)' }
                    },
                    x: { grid: { display: false } }
                }
            }
        });
    };

    // Radar Chart - Tech Challenges
    const renderRadarChart = () => {
        const ctx = document.getElementById('techRadarChart').getContext('2d');
        if (window.myRadarChart) {
            window.myRadarChart.destroy();
        }
        window.myRadarChart = new Chart(ctx, {
            type: 'radar',
            data: {
                labels: ['환각 감소', '한국어 처리', '비용 효율성', '데이터 보안', '검색 정확도'],
                datasets: [{
                    label: '기술적 중요도 및 과제',
                    data: [9, 8, 7, 9, 10],
                    fill: true,
                    backgroundColor: 'rgba(13, 148, 136, 0.2)',
                    borderColor: 'rgba(13, 148, 136, 1)',
                    pointBackgroundColor: 'rgba(13, 148, 136, 1)',
                    pointBorderColor: '#fff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { position: 'top' } },
                scales: {
                    r: {
                        beginAtZero: true,
                        max: 10,
                        pointLabels: { font: { size: 12 } }
                    }
                }
            }
        });
    };

    // Navigation scroll
    const initNav = () => {
        const navLinks = document.querySelectorAll('.nav-link');
        const sections = document.querySelectorAll('.content-section');

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    navLinks.forEach(link => {
                        link.classList.remove('active');
                        if (link.getAttribute('href') === `#${entry.target.id}`) {
                            link.classList.add('active');
                        }
                    });
                }
            });
        }, { rootMargin: '-20% 0px -70% 0px', threshold: 0.1 });

        sections.forEach(section => observer.observe(section));

        navLinks.forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                const targetId = e.currentTarget.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    const headerOffset = 70;
                    const elementPosition = targetElement.getBoundingClientRect().top;
                    const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
                    window.scrollTo({ top: offsetPosition, behavior: 'smooth' });
                }
            });
        });
    };

    // Player Filters
    const initPlayerFilters = () => {
        const filterButtons = document.querySelectorAll('#players .tab-button');
        const playerCards = document.querySelectorAll('#playerGrid .company-card');

        filterButtons.forEach(button => {
            button.addEventListener('click', () => {
                const filter = button.getAttribute('data-filter');
                filterButtons.forEach(btn => btn.classList.remove('active'));
                button.classList.add('active');

                playerCards.forEach(card => {
                    if (filter === 'all' || card.getAttribute('data-category') === filter) {
                        card.style.display = 'block';
                    } else {
                        card.style.display = 'none';
                    }
                });
            });
        });
    };

    // Use Case Tabs
    const initUseCaseTabs = () => {
        const tabButtons = document.querySelectorAll('.usecase-tab-button');
        const contentPanels = document.querySelectorAll('.usecase-content-panel');

        tabButtons.forEach(button => {
            button.addEventListener('click', () => {
                const targetId = button.getAttribute('data-target');
                tabButtons.forEach(btn => btn.classList.remove('active'));
                button.classList.add('active');

                contentPanels.forEach(panel => {
                    if (panel.id === targetId) {
                        panel.classList.remove('hidden');
                    } else {
                        panel.classList.add('hidden');
                    }
                });
            });
        });
    };

    initNav();
    renderBarChart();
    renderRadarChart();
    initPlayerFilters();
    initUseCaseTabs();

    window.addEventListener('resize', () => {
        renderBarChart();
        renderRadarChart();
    });
});
</script>
@endpush