hskwon
27052af3f1
- layouts.presentation → layouts.app 변경 (13개 파일) - 슬라이드 높이: 100vh → calc(100vh - 80px) - 슬라이드 번호 위치 중앙 정렬
424 lines
26 KiB
PHP
424 lines
26 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '고객 상담 챗봇 솔루션 비교 분석')
|
|
|
|
@push('styles')
|
|
<style>
|
|
body {
|
|
font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
background-color: #fffbeb;
|
|
color: #292524;
|
|
}
|
|
.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;
|
|
border-bottom: 3px solid transparent;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
.tab-btn:hover {
|
|
background-color: #fef3c7;
|
|
color: #44403c;
|
|
}
|
|
.tab-btn.active {
|
|
background-color: #d97706;
|
|
color: white;
|
|
border-bottom-color: transparent;
|
|
font-weight: 600;
|
|
}
|
|
.card {
|
|
background-color: white;
|
|
border: 1px solid #e7e5e4;
|
|
border-radius: 0.5rem;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div class="min-h-screen">
|
|
<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"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" /></svg></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"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" /></svg></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"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></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"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></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 flex items-center gap-1"><svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg> 강점 (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 flex items-center gap-1"><svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.25 6L9 12.75l4.286-4.286a11.948 11.948 0 014.306 6.43l.776 2.898m0 0l3.182-5.511m-3.182 5.51l-5.511-3.181" /></svg> 약점 (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 flex items-center gap-1"><svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg> 강점 (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 flex items-center gap-1"><svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.25 6L9 12.75l4.286-4.286a11.948 11.948 0 014.306 6.43l.776 2.898m0 0l3.182-5.511m-3.182 5.51l-5.511-3.181" /></svg> 약점 (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 flex items-center gap-1"><svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg> 강점 (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 flex items-center gap-1"><svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.25 6L9 12.75l4.286-4.286a11.948 11.948 0 014.306 6.43l.776 2.898m0 0l3.182-5.511m-3.182 5.51l-5.511-3.181" /></svg> 약점 (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">
|
|
솔루션 선택에 있어 비용과 확장성은 매우 중요한 요소입니다. 각 솔루션은 완전히 다른 과금 체계를 가지고 있습니다.
|
|
</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 채팅은 무료이나, 마케팅 메시지(알림톡, 친구톡) 발송 시 건당 비용이 발생합니다.</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 flex items-center gap-1"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> 추천: 채널톡</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 flex items-center gap-1"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> 추천: 해피톡</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 flex items-center gap-1"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> 추천: 카카오채널 (+ 연동)</h4>
|
|
<p class="font-semibold text-stone-800">"카카오톡 기반의 대국민 알림 및<br>마케팅이 핵심인 기업"</p>
|
|
<p class="mt-3 text-stone-600">
|
|
비즈니스의 핵심이 카카오톡을 통한 정보 전달(알림톡)이나 마케팅(친구톡)에 있다면 카카오채널이 필수입니다. 단, 전문 상담을 위해서는 채널톡이나 해피톡을 연동해야 합니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<link href="https://cdn.jsdelivr.net/gh/sunn-us/pretendard@v1.3.9/dist/web/static/pretendard.min.css" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
|
|
<script>
|
|
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)',
|
|
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)',
|
|
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)',
|
|
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'
|
|
},
|
|
angleLines: {
|
|
color: '#e7e5e4'
|
|
},
|
|
pointLabels: {
|
|
font: { ...chartFont, size: 14, weight: '600' },
|
|
color: '#44403c',
|
|
callback: (label) => wrapText(label, 10)
|
|
},
|
|
ticks: {
|
|
backdropColor: 'rgba(255, 255, 255, 0.75)',
|
|
color: '#57534e'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
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>
|
|
@endpush
|