hskwon
aca1767eb9
- URL 하드코딩 → .env APP_URL 기반 동적 URL로 변경 - DB 연결 하드코딩 → .env 기반으로 변경 - MySQL strict mode DATE 오류 수정
442 lines
27 KiB
PHP
442 lines
27 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>고객 상담 챗봇 솔루션 비교 분석</title>
|
|
<!-- Chosen Palette: Calm Harmony (Amber, Stone, White) -->
|
|
<!-- Application Structure Plan: 탭 기반 SPA(Single Page Application) 구조를 선택했습니다. 사용자가 '개요', '상세 기능', '비용/API', '최종 요약' 등 비교 분석의 핵심 섹션을 빠르고 직관적으로 전환하며 탐색할 수 있도록 설계했습니다. 이 구조는 선형적인 리포트 방식보다 사용자가 원하는 정보를 능동적으로 찾아 비교하기에 용이하며, 복잡한 비교 항목들을 주제별로 명확히 분리하여 정보 과부하를 줄여줍니다. 사용자는 먼저 '개요'에서 레이더 차트를 통해 전체적인 그림을 파악한 후, '상세 기능'의 그리드 비교, '비용'의 차트 및 텍스트 비교, '최종 요약'의 시나리오별 추천을 통해 점진적으로 깊이 있는 정보를 탐색할 수 있습니다. -->
|
|
<!-- Visualization & Content Choices:
|
|
1. [전체 비교] -> Goal: Inform/Compare -> Viz: Radar Chart (Chart.js) -> Interaction: Hover Tooltip -> Justification: 3개 솔루션의 다차원적(마케팅, CS, UI, 비용 등) 강점을 한눈에 시각적으로 비교하기에 가장 적합합니다. -> Library: Chart.js (Canvas).
|
|
2. [상세 기능 비교] -> Goal: Compare -> Viz: 3-Column Grid Layout (HTML/Tailwind) -> Interaction: N/A (Static Text) -> Justification: 강점과 약점 등 정성적인 텍스트 정보를 솔루션별로 나란히 배치하여 직접적인 비교를 용이하게 합니다.
|
|
3. [비용 구조 비교] -> Goal: Compare -> Viz: Horizontal Bar Chart (Chart.js) + 3-Column Text Grid -> Interaction: Hover Tooltip -> Justification: 텍스트로 주요 과금 모델을 설명하고, 차트를 통해 '주요 비용 동인'을 시각적으로 강조하여 복잡한 가격 정책의 핵심을 빠르게 파악하도록 돕습니다.
|
|
4. [API/유지보수] -> Goal: Inform -> Viz: 3-Column Grid Layout (HTML/Tailwind) -> Interaction: N/A (Static Text) -> Justification: 기술적/운영적 세부 사항을 명확하게 병렬 비교합니다.
|
|
5. [최종 추천] -> Goal: Organize/Synthesize -> Viz: 3-Column Card Layout (HTML/Tailwind) -> Interaction: N/A -> Justification: 분석 내용을 바탕으로 "어떤 기업에 가장 적합한가?"라는 사용자의 최종 질문에 대한 시나리오 기반의 명확한 가이드를 제공합니다.
|
|
-->
|
|
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
|
|
<link href="https://cdn.jsdelivr.net/gh/sunn-us/pretendard@v1.3.9/dist/web/static/pretendard.min.css" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
|
background-color: #fffbeb; /* amber-50 */
|
|
color: #292524; /* stone-800 */
|
|
}
|
|
.chart-container {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
height: 300px;
|
|
max-height: 400px;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.chart-container {
|
|
height: 400px;
|
|
}
|
|
}
|
|
.tab-btn {
|
|
background-color: transparent;
|
|
color: #57534e; /* stone-600 */
|
|
border-bottom: 3px solid transparent;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
.tab-btn:hover {
|
|
background-color: #fef3c7; /* amber-100 */
|
|
color: #44403c; /* stone-700 */
|
|
}
|
|
.tab-btn.active {
|
|
background-color: #d97706; /* amber-600 */
|
|
color: white;
|
|
border-bottom-color: transparent;
|
|
font-weight: 600;
|
|
}
|
|
.card {
|
|
background-color: white;
|
|
border: 1px solid #e7e5e4; /* stone-200 */
|
|
border-radius: 0.5rem;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen">
|
|
|
|
<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>
|
|
<div class="container mx-auto p-4 md:p-8 max-w-7xl">
|
|
<header class="text-center mb-8 md:mb-12">
|
|
<h1 class="text-3xl md:text-4xl font-bold text-stone-900">고객 상담 챗봇 솔루션 비교 분석</h1>
|
|
<p class="text-lg text-stone-600 mt-2">채널톡, 해피톡, 카카오채널 핵심 비교</p>
|
|
</header>
|
|
|
|
<main>
|
|
<nav class="flex flex-wrap border-b border-stone-300">
|
|
<button class="tab-btn text-base md:text-lg py-3 px-4 md:py-4 md:px-6 rounded-t-lg" data-tab="overview">
|
|
<span class="inline-block md:hidden">📊</span>
|
|
<span class="hidden md:inline-block">개요 및 핵심 비교</span>
|
|
</button>
|
|
<button class="tab-btn text-base md:text-lg py-3 px-4 md:py-4 md:px-6 rounded-t-lg" data-tab="features">
|
|
<span class="inline-block md:hidden">📋</span>
|
|
<span class="hidden md:inline-block">상세 기능 비교</span>
|
|
</button>
|
|
<button class="tab-btn text-base md:text-lg py-3 px-4 md:py-4 md:px-6 rounded-t-lg" data-tab="cost">
|
|
<span class="inline-block md:hidden">💰</span>
|
|
<span class="hidden md:inline-block">비용 및 API</span>
|
|
</button>
|
|
<button class="tab-btn text-base md:text-lg py-3 px-4 md:py-4 md:px-6 rounded-t-lg" data-tab="summary">
|
|
<span class="inline-block md:hidden">🎯</span>
|
|
<span class="hidden md:inline-block">최종 요약 및 추천</span>
|
|
</button>
|
|
</nav>
|
|
|
|
<div id="panels" class="bg-white p-6 md:p-8 rounded-b-lg rounded-tr-lg shadow-lg min-h-[50vh]">
|
|
|
|
<!-- 1. 개요 및 핵심 비교 -->
|
|
<div id="overview" class="tab-panel space-y-6">
|
|
<p class="text-stone-700 text-base md:text-lg leading-relaxed">
|
|
국내 고객 상담 솔루션 시장은 다양한 강점을 지닌 여러 플레이어들이 경쟁하고 있습니다. 본 분석에서는 '채널톡', '해피톡', '카카오채널' 세 가지 주요 솔루션을 비교합니다. 각 솔루션은 마케팅, 고객지원(CS), 사용성 등에서 뚜렷한 차이를 보입니다. 이 섹션의 레이더 차트는 각 솔루션의 핵심 역량을 한눈에 비교하여 전체적인 특징을 파악하는 데 도움을 줍니다.
|
|
</p>
|
|
<div class="chart-container">
|
|
<canvas id="radarChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. 상세 기능 비교 -->
|
|
<div id="features" class="tab-panel hidden space-y-6">
|
|
<p class="text-stone-700 text-base md:text-lg leading-relaxed">
|
|
각 솔루션의 구체적인 강점과 약점을 비교해 보면, 지향하는 목표가 다름을 알 수 있습니다. 채널톡은 CRM과 마케팅 자동화에, 해피톡은 전문적인 CS 상담 관리에, 카카오채널은 압도적인 도달률을 기반으로 한 마케팅 메시징에 중점을 둡니다. 아래 표에서 각 솔루션의 주요 기능적 특징을 자세히 확인해 보세요.
|
|
</p>
|
|
<div class="grid md:grid-cols-3 gap-4 md:gap-6">
|
|
<div class="card">
|
|
<h3 class="font-bold text-xl mb-3 text-amber-700">채널톡 (Channel Talk)</h3>
|
|
<h4 class="font-semibold mt-4 mb-2">🚀 강점 (Strengths)</h4>
|
|
<ul class="list-disc list-inside text-stone-700 space-y-1">
|
|
<li>올인원 솔루션 (CRM + 마케팅 + 챗봇)</li>
|
|
<li>직관적이고 세련된 UI/UX</li>
|
|
<li>강력한 마케팅 자동화 기능 (푸시, 팝업)</li>
|
|
<li>고객 행동 데이터 기반 CRM 연동</li>
|
|
<li>우수한 상담 챗봇 빌더</li>
|
|
</ul>
|
|
<h4 class="font-semibold mt-6 mb-2">📉 약점 (Weaknesses)</h4>
|
|
<ul class="list-disc list-inside text-stone-700 space-y-1">
|
|
<li>다기능으로 인한 초기 세팅의 복잡성</li>
|
|
<li>MAU 및 기능별 요금제로 비용 증가 가능성</li>
|
|
<li>순수 CS 기능은 해피톡 대비 부족할 수 있음</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card">
|
|
<h3 class="font-bold text-xl mb-3 text-stone-700">해피톡 (Happy Talk)</h3>
|
|
<h4 class="font-semibold mt-4 mb-2">🚀 강점 (Strengths)</h4>
|
|
<ul class="list-disc list-inside text-stone-700 space-y-1">
|
|
<li>강력한 전문 CS 상담 기능 (콜센터 유사)</li>
|
|
<li>상담원 성과 관리 및 모니터링</li>
|
|
<li>안정적인 대규모 트래픽 처리</li>
|
|
<li>카카오채널 등 타 채널 연동성 우수</li>
|
|
<li>좌석 기반의 합리적인 비용</li>
|
|
</ul>
|
|
<h4 class="font-semibold mt-6 mb-2">📉 약점 (Weaknesses)</h4>
|
|
<ul class="list-disc list-inside text-stone-700 space-y-1">
|
|
<li>마케팅 및 CRM 기능은 상대적으로 약함</li>
|
|
<li>UI가 기능 중심이라 다소 보수적임</li>
|
|
<li>올인원 솔루션이라기엔 CS에 편중</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card">
|
|
<h3 class="font-bold text-xl mb-3 text-black">카카오채널 (Kakao Channel)</h3>
|
|
<h4 class="font-semibold mt-4 mb-2">🚀 강점 (Strengths)</h4>
|
|
<ul class="list-disc list-inside text-stone-700 space-y-1">
|
|
<li>압도적인 국내 사용자 도달률</li>
|
|
<li>알림톡/친구톡을 통한 강력한 마케팅</li>
|
|
<li>높은 브랜드 신뢰도 및 사용자 친숙도</li>
|
|
<li>기본 채널 개설 및 1:1 채팅 무료</li>
|
|
</ul>
|
|
<h4 class="font-semibold mt-6 mb-2">📉 약점 (Weaknesses)</h4>
|
|
<ul class="list-disc list-inside text-stone-700 space-y-1">
|
|
<li>자체적인 CS 관리 기능이 매우 빈약함</li>
|
|
<li>전문 상담을 위해선 3rd-party 솔루션 필수</li>
|
|
<li>상담원 배정, 통계 등 기능 부재</li>
|
|
<li>메시지 발송 비용(알림톡 등) 발생</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3. 비용 및 API -->
|
|
<div id="cost" class="tab-panel hidden space-y-6">
|
|
<p class="text-stone-700 text-base md:text-lg leading-relaxed">
|
|
솔루션 선택에 있어 비용과 확장성은 매우 중요한 요소입니다. 각 솔루션은 완전히 다른 과금 체계를 가지고 있습니다. 채널톡은 MAU(월간 활성 사용자)와 기능, 좌석을 복합적으로 고려하며, 해피톡은 상담원 좌석 수를, 카카오채널은 발송하는 메시지 건수를 중심으로 비용이 책정됩니다. API 지원은 세 솔루션 모두 제공하지만, 활용 범위와 자유도에 차이가 있습니다.
|
|
</p>
|
|
<h3 class="font-bold text-2xl mt-4 mb-4">비용 구조 비교</h3>
|
|
<div class="grid md:grid-cols-3 gap-4 md:gap-6">
|
|
<div class="card">
|
|
<h4 class="font-bold text-xl mb-2 text-amber-700">채널톡</h4>
|
|
<p class="text-stone-600"><strong>과금 모델:</strong> MAU + 기능 + 좌석 수</p>
|
|
<p class="mt-2">초기 무료 플랜 제공. 비즈니스 규모(MAU)가 커지고 더 많은 기능과 상담원 좌석이 필요할수록 비용이 증가하는 복합 구조입니다.</p>
|
|
</div>
|
|
<div class="card">
|
|
<h4 class="font-bold text-xl mb-2 text-stone-700">해피톡</h4>
|
|
<p class="text-stone-600"><strong>과금 모델:</strong> 상담원 좌석 수</p>
|
|
<p class="mt-2">순수하게 상담을 진행하는 상담원(Agent)의 수를 기준으로 비용이 책정됩니다. CS팀 규모가 명확한 기업에 합리적입니다.</p>
|
|
</div>
|
|
<div class="card">
|
|
<h4 class="font-bold text-xl mb-2 text-black">카카오채널</h4>
|
|
<p class="text-stone-600"><strong>과금 모델:</strong> 메시지 발송 건수</p>
|
|
<p class="mt-2">채널 개설과 1:1 채팅은 무료이나, 마케팅 메시지(알림톡, 친구톡) 발송 시 건당 비용이 발생합니다. CS 솔루션 연동 시 해당 솔루션 비용이 별도입니다.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="font-bold text-2xl mt-8 mb-4">API 및 유지보수</h3>
|
|
<div class="grid md:grid-cols-3 gap-4 md:gap-6">
|
|
<div class="card">
|
|
<h4 class="font-bold text-xl mb-2 text-amber-700">채널톡</h4>
|
|
<p class="text-stone-600">강력한 REST API를 제공하여 자사 서비스와 고객 데이터, 이벤트 등을 연동하기 용이합니다. SaaS 형태로 별도 유지보수가 필요 없습니다.</p>
|
|
</div>
|
|
<div class="card">
|
|
<h4 class="font-bold text-xl mb-2 text-stone-700">해피톡</h4>
|
|
<p class="text-stone-600">상담 내역, 고객 정보 연동 등을 위한 API를 제공합니다. 안정적인 SaaS로 운영되며 기술 지원이 원활합니다.</p>
|
|
</div>
|
|
<div class="card">
|
|
<h4 class="font-bold text-xl mb-2 text-black">카카오채널</h4>
|
|
<p class="text-stone-600">채널톡, 해피톡 등이 연동하는 기반 API를 제공합니다. 플랫폼 자체는 카카오가 유지보수하며, 개발 자유도는 제한적입니다.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="font-bold text-2xl mt-8 mb-4">주요 비용 동인 시각화</h3>
|
|
<div class="chart-container">
|
|
<canvas id="costChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 4. 최종 요약 및 추천 -->
|
|
<div id="summary" class="tab-panel hidden space-y-6">
|
|
<p class="text-stone-700 text-base md:text-lg leading-relaxed">
|
|
세 가지 솔루션은 각기 다른 목적에 최적화되어 있습니다. "어떤 솔루션이 가장 좋은가?"라는 질문보다는 "우리 회사에 어떤 솔루션이 가장 적합한가?"를 고민해야 합니다. 아래의 사용 사례별 추천을 통해 귀사의 비즈니스 목표에 맞는 최적의 솔루션을 선택해 보세요.
|
|
</p>
|
|
<h3 class="font-bold text-2xl mt-4 mb-4">시나리오별 추천</h3>
|
|
<div class="grid md:grid-cols-3 gap-4 md:gap-6">
|
|
<div class="card border-l-4 border-amber-500">
|
|
<h4 class="font-bold text-xl mb-2 text-amber-700">🎯 추천: 채널톡</h4>
|
|
<p class="font-semibold text-stone-800">"CRM과 마케팅 자동화가 중요한<br>e-커머스 및 스타트업"</p>
|
|
<p class="mt-3 text-stone-600">
|
|
고객 데이터를 기반으로 적극적인 마케팅(팝업, 푸시)을 실행하고, 상담 내역을 CRM에 통합 관리하며, 세련된 챗봇 경험을 제공하고 싶다면 채널톡이 가장 강력한 올인원 솔루션입니다.
|
|
</p>
|
|
</div>
|
|
<div class="card border-l-4 border-stone-500">
|
|
<h4 class="font-bold text-xl mb-2 text-stone-700">🎯 추천: 해피톡</h4>
|
|
<p class="font-semibold text-stone-800">"전문적인 CS팀 운영 및<br>상담 효율화가 필요한 기업"</p>
|
|
<p class="mt-3 text-stone-600">
|
|
다수의 상담원이 체계적으로 고객 응대를 처리하고, 상담 성과를 관리하며, 콜센터 수준의 안정적인 CS 운영이 최우선 과제라면 해피톡이 가장 합리적이고 강력한 선택입니다.
|
|
</p>
|
|
</div>
|
|
<div class="card border-l-4 border-gray-800">
|
|
<h4 class="font-bold text-xl mb-2 text-black">🎯 추천: 카카오채널 (+ 연동)</h4>
|
|
<p class="font-semibold text-stone-800">"카카오톡 기반의 대국민 알림 및<br>마케팅이 핵심인 기업"</p>
|
|
<p class="mt-3 text-stone-600">
|
|
비즈니스의 핵심이 카카오톡을 통한 정보 전달(알림톡)이나 마케팅(친구톡)에 있다면 카카오채널이 필수입니다. 단, 전문 상담을 위해서는 채널톡이나 해피톡을 연동해야 합니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
function wrapText(label, max) {
|
|
const maxChars = max || 16;
|
|
if (label.length > maxChars) {
|
|
let wrapped = [];
|
|
let start = 0;
|
|
while (start < label.length) {
|
|
wrapped.push(label.substring(start, start + maxChars));
|
|
start += maxChars;
|
|
}
|
|
return wrapped;
|
|
}
|
|
return label;
|
|
}
|
|
|
|
const tabs = document.querySelectorAll('.tab-btn');
|
|
const panels = document.querySelectorAll('.tab-panel');
|
|
|
|
tabs.forEach(tab => {
|
|
tab.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
|
|
tabs.forEach(t => t.classList.remove('active'));
|
|
tab.classList.add('active');
|
|
|
|
const targetPanelId = tab.dataset.tab;
|
|
|
|
panels.forEach(panel => {
|
|
if (panel.id === targetPanelId) {
|
|
panel.classList.remove('hidden');
|
|
} else {
|
|
panel.classList.add('hidden');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
tabs[0].click();
|
|
|
|
const chartFont = {
|
|
family: "Pretendard, sans-serif",
|
|
size: 13,
|
|
weight: '500'
|
|
};
|
|
Chart.defaults.font = chartFont;
|
|
|
|
const radarCtx = document.getElementById('radarChart').getContext('2d');
|
|
if (radarCtx) {
|
|
new Chart(radarCtx, {
|
|
type: 'radar',
|
|
data: {
|
|
labels: ['마케팅/CRM', '고객지원(CS)', '상담 챗봇', '사용 편의성(UI)', '확장성/API', '비용 합리성'],
|
|
datasets: [
|
|
{
|
|
label: '채널톡',
|
|
data: [9, 7, 8, 9, 8, 6],
|
|
fill: true,
|
|
backgroundColor: 'rgba(217, 119, 6, 0.2)', // amber-600
|
|
borderColor: 'rgb(217, 119, 6)',
|
|
pointBackgroundColor: 'rgb(217, 119, 6)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgb(217, 119, 6)'
|
|
},
|
|
{
|
|
label: '해피톡',
|
|
data: [5, 9, 7, 6, 7, 8],
|
|
fill: true,
|
|
backgroundColor: 'rgba(87, 83, 78, 0.2)', // stone-600
|
|
borderColor: 'rgb(87, 83, 78)',
|
|
pointBackgroundColor: 'rgb(87, 83, 78)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgb(87, 83, 78)'
|
|
},
|
|
{
|
|
label: '카카오채널',
|
|
data: [8, 3, 3, 7, 5, 7],
|
|
fill: true,
|
|
backgroundColor: 'rgba(0, 0, 0, 0.2)', // black
|
|
borderColor: 'rgb(0, 0, 0)',
|
|
pointBackgroundColor: 'rgb(0, 0, 0)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgb(0, 0, 0)'
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
tooltip: {
|
|
titleFont: chartFont,
|
|
bodyFont: chartFont
|
|
},
|
|
legend: {
|
|
labels: {
|
|
font: chartFont
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
r: {
|
|
beginAtZero: true,
|
|
max: 10,
|
|
grid: {
|
|
color: '#e7e5e4' // stone-200
|
|
},
|
|
angleLines: {
|
|
color: '#e7e5e4' // stone-200
|
|
},
|
|
pointLabels: {
|
|
font: { ...chartFont, size: 14, weight: '600' },
|
|
color: '#44403c', // stone-700
|
|
callback: (label) => wrapText(label, 10)
|
|
},
|
|
ticks: {
|
|
backdropColor: 'rgba(255, 255, 255, 0.75)',
|
|
color: '#57534e' // stone-600
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
const costCtx = document.getElementById('costChart');
|
|
if(costCtx) {
|
|
new Chart(costCtx.getContext('2d'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['채널톡', '해피톡', '카카오채널'],
|
|
datasets: [{
|
|
label: '주요 비용 동인',
|
|
data: [8, 6, 7],
|
|
backgroundColor: ['#d97706', '#57534e', '#000000'],
|
|
borderWidth: 0
|
|
}]
|
|
},
|
|
options: {
|
|
indexAxis: 'y',
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: '솔루션별 주요 비용 발생 구조',
|
|
font: { ...chartFont, size: 16 }
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
const label = context.chart.data.labels[context.dataIndex];
|
|
let detail = '';
|
|
if (label === '채널톡') detail = '기능 / MAU / 좌석 (복합)';
|
|
if (label === '해피톡') detail = '상담원 좌석 수';
|
|
if (label === '카카오채널') detail = '메시지 발송 건';
|
|
return `${label}: ${detail}`;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
display: false,
|
|
grid: { display: false }
|
|
},
|
|
y: {
|
|
grid: { display: false },
|
|
ticks: {
|
|
font: { ...chartFont, size: 14 }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |