hskwon
aca1767eb9
- URL 하드코딩 → .env APP_URL 기반 동적 URL로 변경 - DB 연결 하드코딩 → .env 기반으로 변경 - MySQL strict mode DATE 오류 수정
508 lines
30 KiB
PHP
508 lines
30 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>대한민국 RAG 스타트업 현황 분석</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
|
|
<!-- Chosen Palette: Warm Neutrals (bg-amber-50, bg-white) with Muted Teal (text-teal-700, bg-teal-600) accent -->
|
|
<!-- Application Structure Plan: A single-page, multi-section dashboard structure. Navigation via a sticky header links to anchors (소개, 시장 현황, 주요 기업, 기술 트렌드, 전망). This design is chosen for usability, allowing users to either get a quick overview (Market Stats, Charts) or deep-dive into specific areas (Key Players, Use Cases) without leaving the page. Interactions include: 1) Nav links for scrolling. 2) Chart.js bar/radar charts for quantitative data. 3) A filterable 'Key Players' section (JS-driven tabs) to categorize startups. 4) An interactive 'Use Cases' tab system (JS-driven) to explore applications. This structure logically groups the report's synthesized content (Intro -> Market -> Players -> Tech -> Future) for easy consumption. -->
|
|
<!-- Visualization & Content Choices:
|
|
Report Info: RAG Architecture -> Goal: Explain -> Viz: HTML/Tailwind Diagram (Boxes/Arrows) -> Interaction: Static view -> Justification: Simple, clear visual flow without complex libraries. -> Method: HTML/CSS.
|
|
Report Info: Investment Data (by Year) -> Goal: Show Change -> Viz: Bar Chart -> Interaction: Hover tooltips -> Justification: Clear comparison of investment over time. -> Library: Chart.js.
|
|
Report Info: Key Startups (Categorized) -> Goal: Organize/Inform -> Viz: Filterable Card List -> Interaction: Click tabs ('AI 검색', 'B2B SaaS') to filter cards -> Justification: Allows user to explore the startup landscape by category. -> Method: Vanilla JS (show/hide).
|
|
Report Info: Technical Challenges -> Goal: Compare (importance) -> Viz: Radar Chart -> Interaction: Hover tooltips -> Justification: Shows multi-dimensional "challenge" profile. -> Library: Chart.js.
|
|
Report Info: Use Cases -> Goal: Organize -> Viz: Tabbed Content Blocks -> Interaction: Click tabs ('고객 지원', '사내 검색') to switch content -> Justification: Hides complexity, organizes examples neatly. -> Method: Vanilla JS (show/hide).
|
|
-->
|
|
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
|
|
<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 {
|
|
@apply px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-teal-50 hover:text-teal-700 transition-colors;
|
|
}
|
|
.nav-link.active {
|
|
@apply bg-teal-100 text-teal-800;
|
|
}
|
|
.tab-button {
|
|
@apply px-4 py-2 text-sm font-medium rounded-t-lg transition-colors border-b-2;
|
|
}
|
|
.tab-button.active {
|
|
@apply border-teal-600 text-teal-700;
|
|
}
|
|
.tab-button:not(.active) {
|
|
@apply border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300;
|
|
}
|
|
.content-section {
|
|
@apply pt-20 -mt-16;
|
|
}
|
|
.company-card {
|
|
@apply bg-white p-4 rounded-lg shadow-md border border-gray-200 hover:shadow-lg transition-shadow;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-amber-50 text-gray-800">
|
|
<div class="container mx-auto">
|
|
<div class="mb-6 flex items-center justify-start">
|
|
<a href="<?=$root_dir?>/index.php" class="inline-flex items-center px-3 py-2 rounded-lg hover:bg-amber-100 transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 md:w-8 md:h-8 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 11.5L12 4l9 7.5M5 10v8a1 1 0 001 1h3.5a1 1 0 001-1v-3h2v3a1 1 0 001 1H18a1 1 0 001-1v-8"/>
|
|
</svg>
|
|
<span class="ml-2 text-base md:text-lg font-semibold text-amber-700 hidden md:inline">홈으로</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<header class="bg-white shadow-sm sticky top-0 z-50 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 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)이 최신 정보나 특정 도메인 지식에 접근할 수 있도록 외부 데이터베이스에서 관련 정보를 검색하여 이를 기반으로 답변을 생성하는 기술입니다. 이 섹션에서는 RAG의 기본 개념과 중요성을 소개합니다.
|
|
</p>
|
|
|
|
<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">
|
|
<span class="text-4xl mb-2">👤</span>
|
|
<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">
|
|
<span class="text-4xl mb-2">🔍</span>
|
|
<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">
|
|
<span class="text-4xl mb-2">🧠</span>
|
|
<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">
|
|
<span class="text-4xl mb-2">💡</span>
|
|
<span class="font-bold">최종 답변</span>
|
|
<p class="text-sm text-gray-600">"최신 트렌드는... (검색된 정보 기반)"</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<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의 기업 도입이 가속화되면서 폭발적으로 성장하고 있습니다. 기업 내부 데이터를 활용한 정확하고 신뢰할 수 있는 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 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 시장은 다양한 배경의 스타트업들이 경쟁하고 있습니다. AI 검색 기술을 보유한 기업부터 특정 도메인에 특화된 B2B SaaS 기업까지 다양한 플레이어들이 있습니다. 아래 탭을 클릭하여 카테고리별 기업을 확인하세요.
|
|
</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 기반 검색 및 콘텐츠 생성 기능 제공. B2C 및 B2B 확장 중.</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 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 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 id="outlook" class="content-section">
|
|
<h2 class="text-3xl font-bold text-center mb-6 text-teal-900">시장 전망 및 결론</h2>
|
|
<p class="text-lg text-gray-700 mb-4 max-w-3xl mx-auto">
|
|
대한민국 RAG 스타트업 시장은 기술 성숙과 기업 수요 증가에 힘입어 지속적으로 성장할 것입니다.
|
|
</p>
|
|
<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>© 2025 RAG Startup Analysis. 이 데이터는 가상으로 생성된 예시입니다.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
|
// wrapChartLabels 함수는 충돌 오류를 유발하므로 삭제되었습니다.
|
|
|
|
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
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
return `${context.dataset.label}: ${context.parsed.y} 억 원`;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
title: {
|
|
display: true,
|
|
text: '투자 규모 (억 원)'
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
display: false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
const renderRadarChart = () => {
|
|
const ctx = document.getElementById('techRadarChart').getContext('2d');
|
|
if (window.myRadarChart) {
|
|
window.myRadarChart.destroy();
|
|
}
|
|
// 레이블 길이를 짧게 수정하여 복잡한 줄 바꿈 로직을 피하고 안정성을 확보했습니다.
|
|
const chartData = {
|
|
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',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgba(13, 148, 136, 1)'
|
|
}]
|
|
};
|
|
|
|
window.myRadarChart = new Chart(ctx, {
|
|
type: 'radar',
|
|
data: chartData,
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'top',
|
|
},
|
|
tooltip: {
|
|
enabled: true
|
|
}
|
|
},
|
|
scales: {
|
|
r: {
|
|
beginAtZero: true,
|
|
max: 10,
|
|
pointLabels: {
|
|
font: {
|
|
size: 12 // 폰트 크기 조정
|
|
},
|
|
callback: function(label) {
|
|
// 안정성을 위해 간단히 문자열로 변환하여 반환합니다.
|
|
return String(label);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// onResize 및 plugins의 커스텀 레이블 처리 로직을 제거했습니다.
|
|
}
|
|
});
|
|
};
|
|
|
|
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'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
};
|
|
|
|
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';
|
|
}
|
|
});
|
|
});
|
|
});
|
|
};
|
|
|
|
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>
|
|
</body>
|
|
</html> |