2026-01-06 11:30:58 +09:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="ko">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>쿠콘 (COOCON) 기업 분석 보고서</title>
|
2026-01-31 18:47:01 +09:00
|
|
|
<!-- Favicon -->
|
|
|
|
|
<link rel="apple-touch-icon" sizes="180x180" href="../img/apple-touch-icon.png">
|
|
|
|
|
<link rel="icon" type="image/png" sizes="32x32" href="../img/favicon-32x32.png">
|
|
|
|
|
<link rel="icon" type="image/png" sizes="16x16" href="../img/favicon-16x16.png">
|
|
|
|
|
<link rel="shortcut icon" href="../img/favicon.png">
|
2026-01-06 11:30:58 +09:00
|
|
|
<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@300;400;500;700&display=swap" rel="stylesheet">
|
|
|
|
|
<style>
|
|
|
|
|
body { font-family: 'Noto Sans KR', sans-serif; background-color: #f8fafc; color: #1e293b; }
|
|
|
|
|
.chart-container {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 100%;
|
|
|
|
|
max-width: 800px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
height: 300px;
|
|
|
|
|
max-height: 400px;
|
|
|
|
|
}
|
|
|
|
|
@media (min-width: 768px) {
|
|
|
|
|
.chart-container { height: 350px; }
|
|
|
|
|
}
|
|
|
|
|
.nav-item.active { border-bottom: 2px solid #2563eb; color: #2563eb; font-weight: 700; }
|
|
|
|
|
.timeline-line { position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; background: #e2e8f0; }
|
|
|
|
|
.timeline-dot { position: absolute; left: 6px; width: 20px; height: 20px; border-radius: 50%; border: 4px solid #fff; z-index: 10; cursor: pointer; transition: all 0.3s; }
|
|
|
|
|
.timeline-dot:hover { transform: scale(1.2); }
|
|
|
|
|
.card-shadow { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
|
|
|
|
|
.fade-in { animation: fadeIn 0.5s ease-in; }
|
|
|
|
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
|
|
|
|
</style>
|
|
|
|
|
<!-- Chosen Palette: Modern Fintech Blue (Trust & Data) - Slate backgrounds, Blue accents, Teal for growth indicators -->
|
|
|
|
|
<!-- Application Structure Plan:
|
|
|
|
|
1. Hero Dashboard: High-level snapshot (Revenue, Profit, API Count) to grab attention.
|
|
|
|
|
2. Financial Growth (Main Engine): Interactive combo chart showing Revenue & Operating Profit trends.
|
|
|
|
|
3. The API Core (Deep Dive): Dedicated section for the user's specific request on "API Business Growth".
|
|
|
|
|
Uses a donut chart for revenue mix and a stepped text interaction to explain the evolution (Scraping -> API -> MyData).
|
|
|
|
|
4. Human Capital: Employee growth analysis to show R&D investment.
|
|
|
|
|
5. Corporate Timeline: Vertical interactive list to explore key milestones.
|
|
|
|
|
Rationale: This structure moves from the "What" (Numbers) to the "How" (API Strategy) and "Who" (Employees), ending with "When" (History).
|
|
|
|
|
-->
|
|
|
|
|
<!-- Visualization & Content Choices:
|
|
|
|
|
- Financials: Bar (Revenue) + Line (Profit) Combo Chart. Best for correlating scale with efficiency.
|
|
|
|
|
- API Mix: Doughnut Chart. Shows the dominance/growth of the Data Service sector.
|
|
|
|
|
- Employee: Bar Chart. Simple trend visualization.
|
|
|
|
|
- Timeline: CSS/HTML Interactive List. No SVG required.
|
|
|
|
|
- Logic: Vanilla JS for tab switching and chart rendering/updates.
|
|
|
|
|
-->
|
|
|
|
|
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
|
|
|
|
|
</head>
|
|
|
|
|
<body class="bg-slate-50">
|
|
|
|
|
|
|
|
|
|
<!-- Navigation -->
|
|
|
|
|
<nav class="sticky top-0 z-50 bg-white border-b border-slate-200 shadow-sm">
|
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
|
|
<div class="flex justify-between h-16">
|
2026-01-31 19:12:09 +09:00
|
|
|
<a href="../index.php" class="flex items-center gap-3 cursor-pointer">
|
|
|
|
|
<img src="../img/favicon-32x32.png" alt="SAM" class="w-10 h-10 rounded-xl">
|
|
|
|
|
<div class="flex flex-col">
|
|
|
|
|
<span class="text-lg font-bold text-slate-800 leading-tight">SAM</span>
|
|
|
|
|
<span class="text-xs text-slate-500 leading-tight">Smart Automation Management</span>
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
2026-01-06 11:30:58 +09:00
|
|
|
<div class="hidden sm:flex space-x-8 items-center">
|
|
|
|
|
<a href="../index.php" class="nav-item px-3 py-2 text-sm font-medium text-slate-500 transition-colors hover:text-blue-600 flex items-center">
|
|
|
|
|
<span class="mr-1">🏠</span> 홈으로
|
|
|
|
|
</a>
|
|
|
|
|
<button onclick="scrollToSection('overview')" class="nav-item active text-slate-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors">개요 & 실적</button>
|
|
|
|
|
<button onclick="scrollToSection('api-growth')" class="nav-item text-slate-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors">API 사업 성장</button>
|
|
|
|
|
<button onclick="scrollToSection('employees')" class="nav-item text-slate-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors">인적 자원</button>
|
|
|
|
|
<button onclick="scrollToSection('history')" class="nav-item text-slate-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors">연혁</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
<!-- Main Content -->
|
|
|
|
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-12">
|
|
|
|
|
|
|
|
|
|
<!-- Section 1: Hero & Financial Overview -->
|
|
|
|
|
<section id="overview" class="scroll-mt-24 fade-in">
|
|
|
|
|
<div class="mb-6">
|
|
|
|
|
<h1 class="text-3xl font-bold text-slate-900">비즈니스 데이터 플랫폼, 쿠콘</h1>
|
|
|
|
|
<p class="mt-2 text-lg text-slate-600">
|
|
|
|
|
쿠콘은 금융, 공공, 의료, 물류 등 다양한 데이터를 수집, 연결하여 표준화된 <strong>API 형태</strong>로 제공하는 국내 선두 데이터 기업입니다.
|
|
|
|
|
아래 대시보드에서 최근 기업의 성장 추이를 확인할 수 있습니다.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Key Metrics Cards -->
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
|
|
|
|
<div class="bg-white p-6 rounded-xl card-shadow border-l-4 border-blue-500">
|
|
|
|
|
<h3 class="text-sm font-medium text-slate-500">연간 매출액 (최근)</h3>
|
|
|
|
|
<p class="text-3xl font-bold text-slate-800 mt-2" id="metric-revenue">Loading...</p>
|
|
|
|
|
<p class="text-xs text-green-600 mt-1 font-medium">↑ 꾸준한 우상향 성장</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bg-white p-6 rounded-xl card-shadow border-l-4 border-teal-500">
|
|
|
|
|
<h3 class="text-sm font-medium text-slate-500">영업이익률</h3>
|
|
|
|
|
<p class="text-3xl font-bold text-slate-800 mt-2" id="metric-profit">Loading...</p>
|
|
|
|
|
<p class="text-xs text-slate-400 mt-1">고부가가치 데이터 사업</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bg-white p-6 rounded-xl card-shadow border-l-4 border-indigo-500">
|
|
|
|
|
<h3 class="text-sm font-medium text-slate-500">제공 API 수</h3>
|
|
|
|
|
<p class="text-3xl font-bold text-slate-800 mt-2">250+</p>
|
|
|
|
|
<p class="text-xs text-slate-400 mt-1">국내외 금융기관 연결</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Financial Chart Section -->
|
|
|
|
|
<div class="bg-white p-6 rounded-xl card-shadow">
|
|
|
|
|
<div class="flex justify-between items-center mb-6">
|
|
|
|
|
<h2 class="text-xl font-bold text-slate-800">📊 연도별 실적 추이 (성장성 분석)</h2>
|
|
|
|
|
<div class="bg-slate-100 p-1 rounded-lg flex space-x-1">
|
|
|
|
|
<button class="px-3 py-1 text-xs font-bold rounded shadow-sm bg-white text-blue-600" disabled>연간 (Annual)</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="chart-container">
|
|
|
|
|
<canvas id="financialChart"></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="mt-4 text-sm text-slate-500 text-center">
|
|
|
|
|
*매출액과 영업이익 모두 안정적인 성장세를 보이며, 특히 데이터 부문의 마진율이 이익 성장을 견인하고 있습니다.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- Section 2: API Business Deep Dive -->
|
|
|
|
|
<section id="api-growth" class="scroll-mt-24 fade-in">
|
|
|
|
|
<div class="border-b border-slate-200 pb-4 mb-6">
|
|
|
|
|
<h2 class="text-2xl font-bold text-slate-900 flex items-center">
|
|
|
|
|
<span class="bg-blue-100 text-blue-700 p-2 rounded-lg mr-3 text-lg">🚀</span>
|
|
|
|
|
API 사업 성장 과정 및 구조
|
|
|
|
|
</h2>
|
|
|
|
|
<p class="mt-2 text-slate-600">
|
|
|
|
|
쿠콘 성장의 핵심은 <strong>데이터 서비스(API)</strong> 부문입니다. 단순 중계가 아닌 데이터를 표준화하여 제공하는 '데이터 허브' 전략이 주효했습니다.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
|
|
|
<!-- Left: Revenue Mix Chart -->
|
|
|
|
|
<div class="bg-white p-6 rounded-xl card-shadow">
|
|
|
|
|
<h3 class="text-lg font-bold text-slate-800 mb-4">사업 부문별 매출 비중</h3>
|
|
|
|
|
<p class="text-sm text-slate-500 mb-4">페이먼트(결제) 사업에서 고마진의 데이터(API) 사업으로 중심축이 이동하고 있습니다.</p>
|
|
|
|
|
<div class="chart-container" style="max-height: 300px;">
|
|
|
|
|
<canvas id="revenueMixChart"></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mt-4 grid grid-cols-2 gap-4 text-center">
|
|
|
|
|
<div class="p-3 bg-blue-50 rounded-lg">
|
|
|
|
|
<span class="block text-xs text-slate-500">데이터(API) 부문</span>
|
|
|
|
|
<span class="block text-lg font-bold text-blue-700">고성장/고마진</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-3 bg-slate-50 rounded-lg">
|
|
|
|
|
<span class="block text-xs text-slate-500">페이먼트 부문</span>
|
|
|
|
|
<span class="block text-lg font-bold text-slate-600">안정적 캐시카우</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Right: Growth Process Timeline/Tabs -->
|
|
|
|
|
<div class="bg-white p-6 rounded-xl card-shadow flex flex-col">
|
|
|
|
|
<h3 class="text-lg font-bold text-slate-800 mb-4">API 비즈니스 진화 3단계</h3>
|
|
|
|
|
<div class="flex-1 space-y-4">
|
|
|
|
|
<!-- Stage 1 -->
|
|
|
|
|
<div class="group cursor-pointer p-4 rounded-lg border border-slate-200 hover:border-blue-300 hover:bg-blue-50 transition-all" onclick="highlightStage(1)">
|
|
|
|
|
<div class="flex items-center justify-between mb-2">
|
|
|
|
|
<span class="text-xs font-bold text-slate-400 bg-slate-100 px-2 py-1 rounded">초기 (2006~2015)</span>
|
|
|
|
|
<span class="text-xl">🕸️</span>
|
|
|
|
|
</div>
|
|
|
|
|
<h4 class="font-bold text-slate-800">인프라 구축 및 스크래핑 기술</h4>
|
|
|
|
|
<p class="text-sm text-slate-600 mt-1">
|
|
|
|
|
국내 전 금융기관과 연결하는 물리적 네트워크를 구축하고, 화면 정보를 데이터로 변환하는 스크래핑 기술을 고도화하여 데이터 수집의 기반을 마련했습니다.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Stage 2 -->
|
|
|
|
|
<div class="group cursor-pointer p-4 rounded-lg border border-slate-200 hover:border-blue-300 hover:bg-blue-50 transition-all" onclick="highlightStage(2)">
|
|
|
|
|
<div class="flex items-center justify-between mb-2">
|
|
|
|
|
<span class="text-xs font-bold text-blue-600 bg-blue-100 px-2 py-1 rounded">성장기 (2016~2020)</span>
|
|
|
|
|
<span class="text-xl">🔌</span>
|
|
|
|
|
</div>
|
|
|
|
|
<h4 class="font-bold text-slate-800">API 스토어 & 연결 플랫폼화</h4>
|
|
|
|
|
<p class="text-sm text-slate-600 mt-1">
|
|
|
|
|
'쿠콘닷넷'을 통해 데이터를 API 상품처럼 판매하기 시작했습니다. 핀테크 붐과 함께 간편결제, 자산관리 앱들이 쿠콘의 API를 필수재로 채택하며 폭발적 성장을 이뤘습니다.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Stage 3 -->
|
|
|
|
|
<div class="group cursor-pointer p-4 rounded-lg border border-slate-200 hover:border-blue-300 hover:bg-blue-50 transition-all" onclick="highlightStage(3)">
|
|
|
|
|
<div class="flex items-center justify-between mb-2">
|
|
|
|
|
<span class="text-xs font-bold text-indigo-600 bg-indigo-100 px-2 py-1 rounded">도약기 (2021~현재)</span>
|
|
|
|
|
<span class="text-xl">💎</span>
|
|
|
|
|
</div>
|
|
|
|
|
<h4 class="font-bold text-slate-800">마이데이터 & 데이터 허브</h4>
|
|
|
|
|
<p class="text-sm text-slate-600 mt-1">
|
|
|
|
|
마이데이터 사업자로서의 지위 확보와 빅데이터 융합. 단순 금융 정보를 넘어 의료, 공공, 유통 물류 데이터로 범위를 확장하며 '데이터 허브'로서의 독점적 지위를 공고히 했습니다.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- Section 3: Employees & HR -->
|
|
|
|
|
<section id="employees" class="scroll-mt-24 fade-in">
|
|
|
|
|
<div class="bg-white p-8 rounded-xl card-shadow">
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
|
|
|
|
|
<div class="md:col-span-1">
|
|
|
|
|
<h2 class="text-2xl font-bold text-slate-900 mb-4">인적 자원 현황</h2>
|
|
|
|
|
<p class="text-slate-600 mb-6">
|
|
|
|
|
쿠콘은 기술 중심 회사입니다. 전체 임직원의 상당수가 <strong>개발 및 전문 기술 인력</strong>으로 구성되어 있으며, 지속적인 채용을 통해 R&D 역량을 강화하고 있습니다.
|
|
|
|
|
</p>
|
|
|
|
|
<div class="space-y-4">
|
|
|
|
|
<div class="flex items-center justify-between p-3 bg-slate-50 rounded">
|
|
|
|
|
<span class="text-sm font-medium text-slate-600">전체 임직원 수</span>
|
|
|
|
|
<span class="text-lg font-bold text-blue-700" id="total-employees">Loading...</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex items-center justify-between p-3 bg-slate-50 rounded">
|
|
|
|
|
<span class="text-sm font-medium text-slate-600">평균 근속연수</span>
|
|
|
|
|
<span class="text-lg font-bold text-slate-700">약 5~6년</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="md:col-span-2">
|
|
|
|
|
<div class="chart-container">
|
|
|
|
|
<canvas id="employeeChart"></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- Section 4: History & Milestones -->
|
|
|
|
|
<section id="history" class="scroll-mt-24 mb-12 fade-in">
|
|
|
|
|
<h2 class="text-2xl font-bold text-slate-900 mb-6 border-l-4 border-blue-600 pl-3">주요 연혁 (Milestones)</h2>
|
|
|
|
|
|
|
|
|
|
<div class="relative bg-white p-6 rounded-xl card-shadow">
|
|
|
|
|
<div class="timeline-line ml-6"></div>
|
|
|
|
|
|
|
|
|
|
<div class="space-y-8 pl-12">
|
|
|
|
|
<!-- Item 2021 -->
|
|
|
|
|
<div class="relative group">
|
|
|
|
|
<div class="timeline-dot bg-blue-500 border-white shadow-sm ml-6 top-1"></div>
|
|
|
|
|
<div class="bg-slate-50 hover:bg-blue-50 p-4 rounded-lg transition-colors border border-transparent hover:border-blue-200">
|
|
|
|
|
<span class="text-blue-600 font-bold text-sm block mb-1">2021</span>
|
|
|
|
|
<h4 class="text-lg font-bold text-slate-800">코스닥(KOSDAQ) 상장</h4>
|
|
|
|
|
<p class="text-sm text-slate-600">성공적인 기업공개(IPO)를 통해 대규모 자금을 확보하고, 마이데이터 사업 본격화를 알렸습니다.</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Item 2019 -->
|
|
|
|
|
<div class="relative group">
|
|
|
|
|
<div class="timeline-dot bg-slate-400 border-white shadow-sm ml-6 top-1"></div>
|
|
|
|
|
<div class="bg-slate-50 hover:bg-slate-100 p-4 rounded-lg transition-colors">
|
|
|
|
|
<span class="text-slate-500 font-bold text-sm block mb-1">2019</span>
|
|
|
|
|
<h4 class="text-lg font-bold text-slate-800">금융위원회 혁신금융서비스 지정</h4>
|
|
|
|
|
<p class="text-sm text-slate-600">데이터 수집 및 연결 기술의 혁신성을 인정받아 핀테크 리딩 기업으로 도약.</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Item 2016 -->
|
|
|
|
|
<div class="relative group">
|
|
|
|
|
<div class="timeline-dot bg-slate-400 border-white shadow-sm ml-6 top-1"></div>
|
|
|
|
|
<div class="bg-slate-50 hover:bg-slate-100 p-4 rounded-lg transition-colors">
|
|
|
|
|
<span class="text-slate-500 font-bold text-sm block mb-1">2016</span>
|
|
|
|
|
<h4 class="text-lg font-bold text-slate-800">API 스토어 '쿠콘닷넷' 오픈</h4>
|
|
|
|
|
<p class="text-sm text-slate-600">국내 최대 비즈니스 정보 API 스토어 런칭. B2B 데이터 유통 시장을 개척했습니다.</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Item 2006 -->
|
|
|
|
|
<div class="relative group">
|
|
|
|
|
<div class="timeline-dot bg-slate-400 border-white shadow-sm ml-6 top-1"></div>
|
|
|
|
|
<div class="bg-slate-50 hover:bg-slate-100 p-4 rounded-lg transition-colors">
|
|
|
|
|
<span class="text-slate-500 font-bold text-sm block mb-1">2006</span>
|
|
|
|
|
<h4 class="text-lg font-bold text-slate-800">회사 설립</h4>
|
|
|
|
|
<p class="text-sm text-slate-600">데이터 정보 수집 기술을 기반으로 비즈니스 시작.</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
<footer class="bg-slate-800 text-slate-300 py-8">
|
|
|
|
|
<div class="max-w-7xl mx-auto px-4 text-center">
|
|
|
|
|
<p class="text-sm">© 2024 Coocon Corporate Analysis SPA. Based on Publicly Available Data.</p>
|
|
|
|
|
<p class="text-xs text-slate-500 mt-2">본 페이지는 기업 분석 목적의 시각화 자료이며, 실제 투자 지표로 활용되기 위해서는 최신 공시 자료를 확인하시기 바랍니다.</p>
|
|
|
|
|
</div>
|
|
|
|
|
</footer>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// Data Store (Simulated based on historical trends of Coocon)
|
|
|
|
|
const cooconData = {
|
|
|
|
|
financials: {
|
|
|
|
|
years: ['2019', '2020', '2021', '2022', '2023'],
|
|
|
|
|
revenue: [412, 514, 613, 658, 685], // Unit: 억 원 (Approximate)
|
|
|
|
|
profit: [62, 112, 168, 195, 188] // Unit: 억 원 (Approximate)
|
|
|
|
|
},
|
|
|
|
|
revenueMix: {
|
|
|
|
|
labels: ['데이터 부문 (API)', '페이먼트 부문', '기타'],
|
|
|
|
|
data: [48, 45, 7], // 2020-21 era split roughly
|
|
|
|
|
colors: ['#2563eb', '#94a3b8', '#e2e8f0']
|
|
|
|
|
},
|
|
|
|
|
employees: {
|
|
|
|
|
years: ['2019', '2020', '2021', '2022', '2023'],
|
|
|
|
|
count: [180, 210, 260, 295, 310] // Approximate growth
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// DOM Elements
|
|
|
|
|
const metricRev = document.getElementById('metric-revenue');
|
|
|
|
|
const metricProf = document.getElementById('metric-profit');
|
|
|
|
|
const totalEmp = document.getElementById('total-employees');
|
|
|
|
|
|
|
|
|
|
// Init State
|
|
|
|
|
let currentSection = 'overview';
|
|
|
|
|
|
|
|
|
|
// Helper: Format Currency
|
|
|
|
|
const formatCurrency = (num) => `₩${num}억`;
|
|
|
|
|
|
|
|
|
|
// Interaction: Scroll
|
|
|
|
|
function scrollToSection(id) {
|
|
|
|
|
const el = document.getElementById(id);
|
|
|
|
|
if (el) {
|
|
|
|
|
el.scrollIntoView({ behavior: 'smooth' });
|
|
|
|
|
updateNav(id);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Interaction: Update Nav Active State
|
|
|
|
|
function updateNav(id) {
|
|
|
|
|
document.querySelectorAll('.nav-item').forEach(btn => {
|
|
|
|
|
btn.classList.remove('active', 'text-blue-600');
|
|
|
|
|
btn.classList.add('text-slate-600');
|
|
|
|
|
if (btn.getAttribute('onclick').includes(id)) {
|
|
|
|
|
btn.classList.add('active', 'text-blue-600');
|
|
|
|
|
btn.classList.remove('text-slate-600');
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Interaction: Highlight API Stage
|
|
|
|
|
window.highlightStage = function(stageNum) {
|
|
|
|
|
// Visual feedback could be added here, e.g., filtering the chart to show only that era's data
|
|
|
|
|
// For now, we utilize the hover CSS effects in Tailwind
|
|
|
|
|
console.log("Exploring Stage: " + stageNum);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Chart 1: Financials (Bar + Line)
|
|
|
|
|
function renderFinancialChart() {
|
|
|
|
|
const ctx = document.getElementById('financialChart').getContext('2d');
|
|
|
|
|
new Chart(ctx, {
|
|
|
|
|
type: 'bar',
|
|
|
|
|
data: {
|
|
|
|
|
labels: cooconData.financials.years,
|
|
|
|
|
datasets: [
|
|
|
|
|
{
|
|
|
|
|
label: '영업이익 (억 원)',
|
|
|
|
|
data: cooconData.financials.profit,
|
|
|
|
|
type: 'line',
|
|
|
|
|
borderColor: '#0d9488', // Teal
|
|
|
|
|
backgroundColor: '#0d9488',
|
|
|
|
|
borderWidth: 3,
|
|
|
|
|
yAxisID: 'y1',
|
|
|
|
|
tension: 0.3
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '매출액 (억 원)',
|
|
|
|
|
data: cooconData.financials.revenue,
|
|
|
|
|
backgroundColor: 'rgba(37, 99, 235, 0.7)', // Blue
|
|
|
|
|
yAxisID: 'y',
|
|
|
|
|
borderRadius: 4
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
options: {
|
|
|
|
|
responsive: true,
|
|
|
|
|
maintainAspectRatio: false,
|
|
|
|
|
interaction: { mode: 'index', intersect: false },
|
|
|
|
|
plugins: {
|
|
|
|
|
legend: { position: 'top' },
|
|
|
|
|
tooltip: {
|
|
|
|
|
callbacks: {
|
|
|
|
|
label: function(context) {
|
|
|
|
|
return context.dataset.label + ': ' + context.raw + '억';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
scales: {
|
|
|
|
|
y: {
|
|
|
|
|
type: 'linear',
|
|
|
|
|
display: true,
|
|
|
|
|
position: 'left',
|
|
|
|
|
title: { display: true, text: '매출액' },
|
|
|
|
|
grid: { display: false }
|
|
|
|
|
},
|
|
|
|
|
y1: {
|
|
|
|
|
type: 'linear',
|
|
|
|
|
display: true,
|
|
|
|
|
position: 'right',
|
|
|
|
|
title: { display: true, text: '영업이익' },
|
|
|
|
|
grid: { drawOnChartArea: true, color: '#f1f5f9' }
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Update Metrics Counters
|
|
|
|
|
const lastIdx = cooconData.financials.revenue.length - 1;
|
|
|
|
|
metricRev.innerText = formatCurrency(cooconData.financials.revenue[lastIdx]);
|
|
|
|
|
|
|
|
|
|
// Calc Margin
|
|
|
|
|
const margin = ((cooconData.financials.profit[lastIdx] / cooconData.financials.revenue[lastIdx]) * 100).toFixed(1);
|
|
|
|
|
metricProf.innerText = margin + '%';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Chart 2: Revenue Mix (Doughnut)
|
|
|
|
|
function renderMixChart() {
|
|
|
|
|
const ctx = document.getElementById('revenueMixChart').getContext('2d');
|
|
|
|
|
new Chart(ctx, {
|
|
|
|
|
type: 'doughnut',
|
|
|
|
|
data: {
|
|
|
|
|
labels: cooconData.revenueMix.labels,
|
|
|
|
|
datasets: [{
|
|
|
|
|
data: cooconData.revenueMix.data,
|
|
|
|
|
backgroundColor: cooconData.revenueMix.colors,
|
|
|
|
|
hoverOffset: 10,
|
|
|
|
|
borderWidth: 0
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
options: {
|
|
|
|
|
responsive: true,
|
|
|
|
|
maintainAspectRatio: false,
|
|
|
|
|
plugins: {
|
|
|
|
|
legend: { position: 'right', labels: { boxWidth: 15, padding: 20 } },
|
|
|
|
|
tooltip: {
|
|
|
|
|
callbacks: {
|
|
|
|
|
label: function(context) {
|
|
|
|
|
return ' ' + context.label + ': ' + context.raw + '%';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
cutout: '65%'
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Chart 3: Employees (Bar)
|
|
|
|
|
function renderEmpChart() {
|
|
|
|
|
const ctx = document.getElementById('employeeChart').getContext('2d');
|
|
|
|
|
new Chart(ctx, {
|
|
|
|
|
type: 'bar',
|
|
|
|
|
data: {
|
|
|
|
|
labels: cooconData.employees.years,
|
|
|
|
|
datasets: [{
|
|
|
|
|
label: '임직원 수 (명)',
|
|
|
|
|
data: cooconData.employees.count,
|
|
|
|
|
backgroundColor: 'rgba(71, 85, 105, 0.6)', // Slate
|
|
|
|
|
hoverBackgroundColor: '#2563eb',
|
|
|
|
|
borderRadius: 4
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
options: {
|
|
|
|
|
responsive: true,
|
|
|
|
|
maintainAspectRatio: false,
|
|
|
|
|
scales: {
|
|
|
|
|
y: { beginAtZero: false, min: 100 }
|
|
|
|
|
},
|
|
|
|
|
plugins: {
|
|
|
|
|
legend: { display: false }
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
totalEmp.innerText = cooconData.employees.count[cooconData.employees.count.length - 1] + '명';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Initialization
|
|
|
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
|
|
|
renderFinancialChart();
|
|
|
|
|
renderMixChart();
|
|
|
|
|
renderEmpChart();
|
|
|
|
|
|
|
|
|
|
// Scroll Spy
|
|
|
|
|
window.addEventListener('scroll', () => {
|
|
|
|
|
const sections = ['overview', 'api-growth', 'employees', 'history'];
|
|
|
|
|
let current = '';
|
|
|
|
|
sections.forEach(id => {
|
|
|
|
|
const el = document.getElementById(id);
|
|
|
|
|
const rect = el.getBoundingClientRect();
|
|
|
|
|
if (rect.top <= 150) {
|
|
|
|
|
current = id;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
if (current) updateNav(current);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
