feat(lab): S 메뉴 전략 문서 15개 마이그레이션
- StrategyController 생성 (15개 메소드) - presentation.blade.php 레이아웃 추가 - 전략 문서 템플릿 15개 생성: - tax, labor, debt, chatbot (슬라이드 프레젠테이션) - rag-startups, douzone (Chart.js 통합) - confluence-vs-notion (비교 분석 + 퀴즈) - sales-strategy (8 슬라이드 + 채팅 UI) - kodata-vs-nice, barobill-vs-popbill (API 비교) - knowledge-search, chatbot-compare (탭 기반) - stablecoin, mrp-overseas, qa-solution (placeholder) - 라우트 및 사이드바 메뉴 연결 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
132
app/Http/Controllers/Lab/StrategyController.php
Normal file
132
app/Http/Controllers/Lab/StrategyController.php
Normal file
@@ -0,0 +1,132 @@
|
||||
<?php
|
||||
|
||||
namespace App\Http\Controllers\Lab;
|
||||
|
||||
use App\Http\Controllers\Controller;
|
||||
|
||||
/**
|
||||
* 실험실 > S. 전략 메뉴 컨트롤러
|
||||
* 5130 프로젝트에서 마이그레이션된 정적 전략 보고서 페이지들
|
||||
*/
|
||||
class StrategyController extends Controller
|
||||
{
|
||||
/**
|
||||
* 세무 전략 (장기적 세무전략 프레젠테이션)
|
||||
*/
|
||||
public function tax()
|
||||
{
|
||||
return view('lab.strategy.tax');
|
||||
}
|
||||
|
||||
/**
|
||||
* 노무 전략
|
||||
*/
|
||||
public function labor()
|
||||
{
|
||||
return view('lab.strategy.labor');
|
||||
}
|
||||
|
||||
/**
|
||||
* 채권추심 전략
|
||||
*/
|
||||
public function debt()
|
||||
{
|
||||
return view('lab.strategy.debt');
|
||||
}
|
||||
|
||||
/**
|
||||
* 스테이블코인 보고서
|
||||
*/
|
||||
public function stablecoin()
|
||||
{
|
||||
return view('lab.strategy.stablecoin');
|
||||
}
|
||||
|
||||
/**
|
||||
* MRP 해외사례
|
||||
*/
|
||||
public function mrpOverseas()
|
||||
{
|
||||
return view('lab.strategy.mrp-overseas');
|
||||
}
|
||||
|
||||
/**
|
||||
* 상담용 챗봇 전략
|
||||
*/
|
||||
public function chatbot()
|
||||
{
|
||||
return view('lab.strategy.chatbot');
|
||||
}
|
||||
|
||||
/**
|
||||
* KoDATA vs NICE API 비교
|
||||
*/
|
||||
public function kodataVsNice()
|
||||
{
|
||||
return view('lab.strategy.kodata-vs-nice');
|
||||
}
|
||||
|
||||
/**
|
||||
* 바로빌 vs 팝빌 API 비교
|
||||
*/
|
||||
public function barobillVsPopbill()
|
||||
{
|
||||
return view('lab.strategy.barobill-vs-popbill');
|
||||
}
|
||||
|
||||
/**
|
||||
* 사내 지식 검색 시스템
|
||||
*/
|
||||
public function knowledgeSearch()
|
||||
{
|
||||
return view('lab.strategy.knowledge-search');
|
||||
}
|
||||
|
||||
/**
|
||||
* 챗봇 솔루션 비교 분석
|
||||
*/
|
||||
public function chatbotCompare()
|
||||
{
|
||||
return view('lab.strategy.chatbot-compare');
|
||||
}
|
||||
|
||||
/**
|
||||
* RAG 스타트업 현황
|
||||
*/
|
||||
public function ragStartups()
|
||||
{
|
||||
return view('lab.strategy.rag-startups');
|
||||
}
|
||||
|
||||
/**
|
||||
* 더존비즈온 분석
|
||||
*/
|
||||
public function douzone()
|
||||
{
|
||||
return view('lab.strategy.douzone');
|
||||
}
|
||||
|
||||
/**
|
||||
* Confluence vs Notion 비교
|
||||
*/
|
||||
public function confluenceVsNotion()
|
||||
{
|
||||
return view('lab.strategy.confluence-vs-notion');
|
||||
}
|
||||
|
||||
/**
|
||||
* 차세대 QA 솔루션
|
||||
*/
|
||||
public function qaSolution()
|
||||
{
|
||||
return view('lab.strategy.qa-solution');
|
||||
}
|
||||
|
||||
/**
|
||||
* SAM 영업전략
|
||||
*/
|
||||
public function salesStrategy()
|
||||
{
|
||||
return view('lab.strategy.sales-strategy');
|
||||
}
|
||||
}
|
||||
347
resources/views/lab/strategy/barobill-vs-popbill.blade.php
Normal file
347
resources/views/lab/strategy/barobill-vs-popbill.blade.php
Normal file
@@ -0,0 +1,347 @@
|
||||
@extends('layouts.presentation')
|
||||
|
||||
@section('title', '바로빌 vs 팝빌 비교 분석')
|
||||
|
||||
@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: 300px;
|
||||
max-height: 400px;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.chart-container { height: 350px; }
|
||||
}
|
||||
.code-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
.code-scroll::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; }
|
||||
.active-tab { border-bottom: 2px solid #3b82f6; color: #1d4ed8; font-weight: 600; }
|
||||
.inactive-tab { color: #64748b; }
|
||||
.inactive-tab:hover { color: #334155; }
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="bg-slate-50 text-slate-800 min-h-screen">
|
||||
<!-- Navigation -->
|
||||
<nav class="bg-white shadow-sm sticky top-0 z-40">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between h-16 items-center">
|
||||
<div class="flex items-center">
|
||||
<span class="text-xl font-bold text-slate-800">API 연동 파트너 분석</span>
|
||||
</div>
|
||||
<div class="hidden sm:flex space-x-8" id="nav-container">
|
||||
<button onclick="switchTab('overview')" id="nav-overview" class="active-tab px-1 pt-1 text-sm font-medium transition-colors">종합 요약</button>
|
||||
<button onclick="switchTab('tech')" id="nav-tech" class="inactive-tab px-1 pt-1 text-sm font-medium transition-colors">API 기술 비교</button>
|
||||
<button onclick="switchTab('company')" id="nav-company" class="inactive-tab px-1 pt-1 text-sm font-medium transition-colors">기업 성장/규모</button>
|
||||
<button onclick="switchTab('decision')" id="nav-decision" class="inactive-tab px-1 pt-1 text-sm font-medium transition-colors">결정 가이드</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<!-- Header Section -->
|
||||
<div class="mb-10 text-center">
|
||||
<h1 class="text-3xl font-extrabold text-slate-900 tracking-tight sm:text-4xl">바로빌 vs 팝빌</h1>
|
||||
<p class="mt-4 max-w-2xl mx-auto text-xl text-slate-500">
|
||||
SOAP(안정성)와 REST(확장성)의 대결.<br>
|
||||
귀사의 개발 환경에 최적화된 전자세금계산서/API 연동 파트너는 어디일까요?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- VIEW 1: OVERVIEW -->
|
||||
<section id="view-overview" class="space-y-8">
|
||||
<div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-blue-500">
|
||||
<h2 class="text-lg font-semibold text-slate-800 mb-2">📊 분석 요약: 현대적 개발엔 팝빌, 레거시 통합엔 바로빌</h2>
|
||||
<p class="text-slate-600 mb-4">
|
||||
두 기업 모두 업계 선두주자이나 지향점이 다릅니다. REST API를 선호한다면 팝빌이 우위입니다.
|
||||
</p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
|
||||
<div>
|
||||
<div class="chart-container">
|
||||
<canvas id="radarChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="p-4 bg-slate-50 rounded-lg">
|
||||
<h3 class="font-bold text-blue-800 flex items-center gap-2">🏢 바로빌 (Barobill)</h3>
|
||||
<ul class="mt-2 text-sm text-slate-700 space-y-1 list-disc list-inside">
|
||||
<li><strong>핵심:</strong> 전통적 강자, 높은 안정성</li>
|
||||
<li><strong>기술:</strong> SOAP API 중심</li>
|
||||
<li><strong>추천:</strong> .NET 구버전, SAP 연동, 내부망 프로젝트</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="p-4 bg-indigo-50 rounded-lg">
|
||||
<h3 class="font-bold text-indigo-800 flex items-center gap-2">🚀 팝빌 (Popbill)</h3>
|
||||
<ul class="mt-2 text-sm text-slate-700 space-y-1 list-disc list-inside">
|
||||
<li><strong>핵심:</strong> 개발자 친화적, 빠른 기술 도입</li>
|
||||
<li><strong>기술:</strong> REST API 최적화, 다양한 SDK</li>
|
||||
<li><strong>추천:</strong> 스타트업, 웹/앱 서비스, 최신 Tech Stack</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- VIEW 2: API TECH -->
|
||||
<section id="view-tech" class="hidden space-y-8">
|
||||
<div class="bg-white rounded-xl shadow p-6">
|
||||
<h2 class="text-2xl font-bold text-slate-800 mb-4">API 기술 심층 비교: SOAP vs REST</h2>
|
||||
<p class="text-slate-600 mb-6">
|
||||
바로빌은 SOAP 기반으로 성장했고, 팝빌은 REST API의 유연성을 앞세워 성장했습니다.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<!-- SOAP Column -->
|
||||
<div class="border rounded-lg overflow-hidden">
|
||||
<div class="bg-slate-200 px-4 py-2 font-mono text-xs font-bold text-slate-700 flex justify-between items-center">
|
||||
<span>바로빌 스타일 (SOAP/XML)</span>
|
||||
<span class="bg-slate-400 text-white px-2 py-0.5 rounded text-[10px]">Strict</span>
|
||||
</div>
|
||||
<div class="bg-slate-800 p-4 h-64 overflow-auto code-scroll">
|
||||
<pre class="text-green-400 font-mono text-xs leading-5"><soapenv:Envelope xmlns:soapenv="...">
|
||||
<soapenv:Header/>
|
||||
<soapenv:Body>
|
||||
<bar:GetTaxInvoiceState>
|
||||
<bar:CorpNum>1234567890</bar:CorpNum>
|
||||
<bar:MgtKey>20241129-001</bar:MgtKey>
|
||||
<bar:UserID>test_user</bar:UserID>
|
||||
</bar:GetTaxInvoiceState>
|
||||
</soapenv:Body>
|
||||
</soapenv:Envelope>
|
||||
|
||||
<!-- 단점: 메시지가 무거움, 파싱이 복잡함 --></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- REST Column -->
|
||||
<div class="border rounded-lg overflow-hidden ring-2 ring-indigo-500 ring-opacity-50">
|
||||
<div class="bg-indigo-100 px-4 py-2 font-mono text-xs font-bold text-indigo-700 flex justify-between items-center">
|
||||
<span>팝빌 스타일 (REST/JSON)</span>
|
||||
<span class="bg-indigo-500 text-white px-2 py-0.5 rounded text-[10px]">Modern</span>
|
||||
</div>
|
||||
<div class="bg-slate-900 p-4 h-64 overflow-auto code-scroll">
|
||||
<pre class="text-blue-300 font-mono text-xs leading-5">// GET /Taxinvoice/Status
|
||||
// Header: Authorization: Bearer {Token}
|
||||
|
||||
{
|
||||
"CorpNum": "1234567890",
|
||||
"MgtKey": "20241129-001"
|
||||
}
|
||||
|
||||
// 응답 (JSON)
|
||||
{
|
||||
"code": 1,
|
||||
"message": "전송 성공",
|
||||
"data": { "state": "Issue" }
|
||||
}
|
||||
|
||||
// 장점: 가볍고 빠름, 직관적인 구조</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
|
||||
<div class="p-3 bg-slate-50 rounded border border-slate-200">
|
||||
<div class="text-sm text-slate-500">연동 난이도</div>
|
||||
<div class="font-bold text-slate-800">REST (팝빌) 유리 👍</div>
|
||||
</div>
|
||||
<div class="p-3 bg-slate-50 rounded border border-slate-200">
|
||||
<div class="text-sm text-slate-500">언어 지원 (SDK)</div>
|
||||
<div class="font-bold text-slate-800">팝빌 (다양함) > 바로빌</div>
|
||||
</div>
|
||||
<div class="p-3 bg-slate-50 rounded border border-slate-200">
|
||||
<div class="text-sm text-slate-500">보안 프로토콜</div>
|
||||
<div class="font-bold text-slate-800">양사 모두 우수</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- VIEW 3: COMPANY -->
|
||||
<section id="view-company" class="hidden space-y-8">
|
||||
<div class="bg-white rounded-xl shadow p-6">
|
||||
<h3 class="text-lg font-bold text-slate-800 mb-2">📈 매출 및 성장성 비교</h3>
|
||||
<p class="text-sm text-slate-500 mb-6">
|
||||
바로빌은 초기 시장 선점으로 안정적인 매출 베이스를 가지고 있으며, 팝빌은 REST API 수요 증가로 가파른 성장세를 보입니다.
|
||||
</p>
|
||||
<div class="chart-container">
|
||||
<canvas id="revenueChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white rounded-xl shadow p-6">
|
||||
<h4 class="font-bold text-slate-800 mb-4 border-b pb-2">🏢 바로빌 (케이넷)</h4>
|
||||
<ul class="space-y-3 text-sm text-slate-600">
|
||||
<li class="flex justify-between"><span>설립 연도:</span><span class="font-semibold text-slate-900">2000년대 초반</span></li>
|
||||
<li class="flex justify-between"><span>기업 문화:</span><span class="font-semibold text-slate-900">보수적, 안정 지향</span></li>
|
||||
<li class="flex justify-between"><span>주요 고객:</span><span class="font-semibold text-slate-900">중견기업, ERP 개발사</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow p-6">
|
||||
<h4 class="font-bold text-slate-800 mb-4 border-b pb-2">🚀 팝빌 (링크허브)</h4>
|
||||
<ul class="space-y-3 text-sm text-slate-600">
|
||||
<li class="flex justify-between"><span>브랜드 런칭:</span><span class="font-semibold text-slate-900">2010년대</span></li>
|
||||
<li class="flex justify-between"><span>기업 문화:</span><span class="font-semibold text-slate-900">Tech 중심, 유연함</span></li>
|
||||
<li class="flex justify-between"><span>주요 고객:</span><span class="font-semibold text-slate-900">스타트업, SI</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- VIEW 4: DECISION -->
|
||||
<section id="view-decision" class="hidden space-y-8">
|
||||
<div class="bg-indigo-600 rounded-xl shadow-lg p-8 text-white text-center">
|
||||
<h2 class="text-2xl font-bold mb-4">어떤 서비스를 선택해야 할까요?</h2>
|
||||
<p class="text-indigo-100 max-w-2xl mx-auto mb-8">
|
||||
아래 체크리스트를 클릭하여 현재 귀사의 프로젝트 성격을 확인해보세요.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-4xl mx-auto text-left">
|
||||
<div id="choice-popbill" class="cursor-pointer bg-white/10 hover:bg-white/20 p-6 rounded-lg transition border border-transparent hover:border-white" onclick="selectChoice('popbill')">
|
||||
<h3 class="font-bold text-lg mb-2">🅰️ 트렌드 지향형</h3>
|
||||
<ul class="text-sm space-y-2 opacity-90">
|
||||
<li>✅ RESTful API에 익숙하다</li>
|
||||
<li>✅ Python, Node.js, Go 등 사용</li>
|
||||
<li>✅ JSON 포맷 선호</li>
|
||||
<li>✅ 빠른 개발/배포 중요</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="choice-barobill" class="cursor-pointer bg-white/10 hover:bg-white/20 p-6 rounded-lg transition border border-transparent hover:border-white" onclick="selectChoice('barobill')">
|
||||
<h3 class="font-bold text-lg mb-2">🅱️ 레거시 호환형</h3>
|
||||
<ul class="text-sm space-y-2 opacity-90">
|
||||
<li>✅ SAP, 구형 .NET과 연동 필요</li>
|
||||
<li>✅ XML 기반 데이터 처리 필수</li>
|
||||
<li>✅ SOAP 프로토콜 기존 시스템</li>
|
||||
<li>✅ 기존 방식 유지 선호</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="recommendation-result" class="mt-8 hidden">
|
||||
<div class="bg-white text-slate-800 p-6 rounded-lg inline-block shadow-2xl max-w-lg">
|
||||
<div class="text-4xl mb-2" id="result-icon"></div>
|
||||
<h3 class="text-xl font-bold mb-2" id="result-title"></h3>
|
||||
<p class="text-slate-600" id="result-desc"></p>
|
||||
<button onclick="resetDecision()" class="mt-4 text-sm text-blue-500 underline">다시 선택하기</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script>
|
||||
const state = { charts: {} };
|
||||
|
||||
function switchTab(tabId) {
|
||||
['overview', 'tech', 'company', 'decision'].forEach(tab => {
|
||||
const btn = document.getElementById(`nav-${tab}`);
|
||||
const view = document.getElementById(`view-${tab}`);
|
||||
if (tab === tabId) {
|
||||
btn.classList.remove('inactive-tab');
|
||||
btn.classList.add('active-tab');
|
||||
view.classList.remove('hidden');
|
||||
} else {
|
||||
btn.classList.add('inactive-tab');
|
||||
btn.classList.remove('active-tab');
|
||||
view.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function selectChoice(choice) {
|
||||
const resultDiv = document.getElementById('recommendation-result');
|
||||
const title = document.getElementById('result-title');
|
||||
const desc = document.getElementById('result-desc');
|
||||
const icon = document.getElementById('result-icon');
|
||||
resultDiv.classList.remove('hidden');
|
||||
|
||||
if (choice === 'popbill') {
|
||||
icon.textContent = "🚀";
|
||||
title.textContent = "결론: 팝빌 (Popbill) 추천";
|
||||
desc.textContent = "REST API와 개발 편의성을 중요시한다면 팝빌이 최선의 선택입니다.";
|
||||
} else {
|
||||
icon.textContent = "🏢";
|
||||
title.textContent = "결론: 바로빌 (Barobill) 추천";
|
||||
desc.textContent = "레거시 시스템과의 호환성이나 SOAP 필수 환경이라면 바로빌이 안정적입니다.";
|
||||
}
|
||||
}
|
||||
|
||||
function resetDecision() {
|
||||
document.getElementById('recommendation-result').classList.add('hidden');
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Radar Chart
|
||||
const radarCtx = document.getElementById('radarChart').getContext('2d');
|
||||
state.charts.radar = new Chart(radarCtx, {
|
||||
type: 'radar',
|
||||
data: {
|
||||
labels: ['기술 현대성', '문서 친절도', 'SDK 지원', '브랜드 인지도', '가격 경쟁력'],
|
||||
datasets: [{
|
||||
label: '팝빌 (Popbill)',
|
||||
data: [95, 90, 95, 70, 85],
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(99, 102, 241, 0.2)',
|
||||
borderColor: 'rgb(99, 102, 241)',
|
||||
pointBackgroundColor: 'rgb(99, 102, 241)'
|
||||
}, {
|
||||
label: '바로빌 (Barobill)',
|
||||
data: [60, 70, 75, 95, 85],
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.2)',
|
||||
borderColor: 'rgb(59, 130, 246)',
|
||||
pointBackgroundColor: 'rgb(59, 130, 246)'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: { r: { suggestedMin: 50, suggestedMax: 100, ticks: { display: false } } },
|
||||
plugins: { legend: { position: 'bottom' } }
|
||||
}
|
||||
});
|
||||
|
||||
// Revenue Chart
|
||||
const revenueCtx = document.getElementById('revenueChart').getContext('2d');
|
||||
state.charts.revenue = new Chart(revenueCtx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['2019', '2020', '2021', '2022', '2023'],
|
||||
datasets: [{
|
||||
label: '바로빌 (안정적)',
|
||||
data: [70, 72, 75, 78, 80],
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.7)'
|
||||
}, {
|
||||
label: '팝빌 (가파른 성장)',
|
||||
data: [40, 55, 68, 82, 95],
|
||||
backgroundColor: 'rgba(99, 102, 241, 0.8)',
|
||||
type: 'line',
|
||||
borderColor: 'rgb(99, 102, 241)',
|
||||
borderWidth: 3,
|
||||
fill: false,
|
||||
tension: 0.4
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: { title: { display: true, text: '성장 추세 비교' } },
|
||||
scales: { y: { beginAtZero: true, display: false } }
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
423
resources/views/lab/strategy/chatbot-compare.blade.php
Normal file
423
resources/views/lab/strategy/chatbot-compare.blade.php
Normal file
@@ -0,0 +1,423 @@
|
||||
@extends('layouts.presentation')
|
||||
|
||||
@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">📊</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">
|
||||
솔루션 선택에 있어 비용과 확장성은 매우 중요한 요소입니다. 각 솔루션은 완전히 다른 과금 체계를 가지고 있습니다.
|
||||
</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">🎯 추천: 채널톡</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>
|
||||
</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
|
||||
548
resources/views/lab/strategy/chatbot.blade.php
Normal file
548
resources/views/lab/strategy/chatbot.blade.php
Normal file
@@ -0,0 +1,548 @@
|
||||
@extends('layouts.presentation')
|
||||
|
||||
@section('title', '장기적 AI 챗봇 솔루션 전략')
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
::-webkit-scrollbar-track { background: #f1f5f9; }
|
||||
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
|
||||
|
||||
.presentation-container { width: 100%; height: 100vh; position: relative; overflow: hidden; }
|
||||
.slide { width: 100%; height: 100vh; display: none; align-items: flex-start; justify-content: center; padding: 40px; position: absolute; top: 0; left: 0; overflow-y: auto; overflow-x: hidden; }
|
||||
.slide.active { display: flex; animation: slideInRight 0.5s ease-out; }
|
||||
.slide-content { background: rgba(255, 255, 255, 0.98); border-radius: 24px; padding: 60px; max-width: 1200px; width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05); animation: fadeIn 0.8s ease-out; margin: auto 0; border: 1px solid rgba(255, 255, 255, 0.2); }
|
||||
|
||||
h1 { color: #2563eb; font-size: 3em; margin-bottom: 20px; text-align: center; font-weight: 800; }
|
||||
h2 { color: #1e40af; font-size: 2.5em; margin-bottom: 30px; text-align: center; border-bottom: 3px solid #2563eb; padding-bottom: 15px; font-weight: 700; }
|
||||
h3 { color: #2563eb; font-size: 1.8em; margin: 25px 0 15px 0; font-weight: 700; }
|
||||
h4 { color: #1e40af; font-size: 1.3em; margin: 15px 0 10px 0; font-weight: 700; }
|
||||
p, li { font-size: 1.2em; line-height: 1.8; color: #1e293b; margin-bottom: 15px; }
|
||||
ul, ol { margin-left: 30px; }
|
||||
|
||||
.company-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 30px 0; }
|
||||
.info-card { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; padding: 25px; border-radius: 16px; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2); animation: scaleIn 0.5s ease-out; border: 1px solid rgba(255, 255, 255, 0.1); }
|
||||
.info-card h4 { color: white; font-size: 1.3em; margin-bottom: 10px; border-bottom: 2px solid rgba(255, 255, 255, 0.3); padding-bottom: 8px; }
|
||||
.info-card p { color: white; font-size: 1em; }
|
||||
|
||||
.comparison-table { width: 100%; border-collapse: collapse; margin: 25px 0; font-size: 1em; }
|
||||
.comparison-table th, .comparison-table td { padding: 12px; border: 1px solid #ddd; text-align: left; }
|
||||
.comparison-table thead tr { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; }
|
||||
.comparison-table tbody tr:nth-of-type(even) { background: #f3f3f3; }
|
||||
|
||||
.feature-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin: 20px 0; }
|
||||
.feature-item { background: #f8fafc; padding: 20px; border-radius: 12px; border-left: 4px solid #2563eb; border: 1px solid #e2e8f0; border-left-width: 4px; }
|
||||
.feature-item h4 { color: #1e40af; margin-top: 0; }
|
||||
|
||||
.conclusion-box { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; padding: 30px; border-radius: 16px; margin: 20px 0; text-align: center; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2); }
|
||||
.conclusion-box p, .conclusion-box h3 { color: white; }
|
||||
|
||||
.warning-box { background: #fef3c7; border-left: 5px solid #f59e0b; padding: 25px; border-radius: 16px; margin: 20px 0; border: 1px solid #fde68a; }
|
||||
.warning-box h3, .warning-box li { color: #92400e; }
|
||||
|
||||
.flow-diagram { background: #f1f5f9; padding: 25px; border-radius: 16px; margin: 20px 0; border: 2px solid #2563eb; }
|
||||
.flow-diagram pre { font-size: 1em; line-height: 1.6; color: #1e293b; overflow-x: auto; }
|
||||
|
||||
.code-box { background: #1e293b; color: #aed581; padding: 20px; border-radius: 12px; margin: 20px 0; overflow-x: auto; font-family: 'Courier New', monospace; font-size: 0.9em; border: 1px solid #334155; }
|
||||
.code-box pre { margin: 0; color: #aed581; }
|
||||
|
||||
.navigation { position: fixed; bottom: 30px; right: 30px; display: flex; gap: 15px; z-index: 1000; }
|
||||
.nav-btn { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; border: none; padding: 15px 30px; border-radius: 9999px; cursor: pointer; font-size: 1.1em; font-weight: 600; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); transition: all 0.3s ease; }
|
||||
.nav-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4); background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%); }
|
||||
.nav-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
.slide-number { position: fixed; bottom: 30px; left: 30px; background: rgba(255, 255, 255, 0.95); padding: 12px 24px; border-radius: 9999px; font-size: 1.1em; color: #2563eb; font-weight: 700; z-index: 1000; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border: 1px solid rgba(37, 99, 235, 0.1); }
|
||||
|
||||
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
|
||||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||
@keyframes scaleIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.slide-content { padding: 30px; }
|
||||
h1 { font-size: 2em; } h2 { font-size: 1.8em; } h3 { font-size: 1.4em; }
|
||||
p, li { font-size: 1em; }
|
||||
.navigation { bottom: 15px; right: 15px; }
|
||||
.nav-btn { padding: 10px 20px; font-size: 0.9em; }
|
||||
.slide-number { bottom: 15px; left: 15px; padding: 8px 15px; font-size: 0.9em; }
|
||||
.comparison-table { font-size: 0.8em; }
|
||||
.comparison-table th, .comparison-table td { padding: 8px; }
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="presentation-container">
|
||||
<!-- Slide 1: Cover -->
|
||||
<div class="slide active">
|
||||
<div class="slide-content">
|
||||
<h1>장기적 AI 챗봇 솔루션 전략</h1>
|
||||
<h2 style="border: none; color: #2563eb;">Vertex AI Search 기반 지능형 문서 검색 시스템</h2>
|
||||
<div style="text-align: center; margin-top: 50px;">
|
||||
<p style="font-size: 1.5em; color: #1e40af; font-weight: 600;">노트북LM 수준의 자연어 질의응답 시스템</p>
|
||||
<p style="margin-top: 30px; color: #64748b;">RAG (검색 증강 생성) 기반 고객 지원 자동화</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 2: Project Overview -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>프로젝트 개요</h2>
|
||||
<div class="conclusion-box">
|
||||
<h3 style="color: white; margin-top: 0;">배경</h3>
|
||||
<p style="font-size: 1.2em;">중소기업의 고객 지원 자동화 필요성 증가<br>문서 기반 즉각적 답변 제공으로 업무 효율성 향상</p>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>핵심 목표</h3>
|
||||
<ul>
|
||||
<li><strong>자연어 질문 즉각 답변:</strong> 복잡한 질의에 대한 정확한 답변 제공</li>
|
||||
<li><strong>노트북LM 유사 기술:</strong> Google의 Vertex AI Search RAG 기술 활용</li>
|
||||
<li><strong>고객 지원 비용 절감:</strong> 자동화를 통한 인력 비용 및 시간 절약</li>
|
||||
<li><strong>문서 기반 검색:</strong> PDF, DOCX, HTML 등 다양한 형식 지원</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>프로젝트 범위</h3>
|
||||
<div class="company-info">
|
||||
<div class="info-card"><h4>✅ 포함 범위</h4><p>Vertex AI Search 연동, Laravel 백엔드 구현, 챗봇 UI, 문서 인덱싱, 참고 자료 제공</p></div>
|
||||
<div class="info-card"><h4>❌ 제외 범위</h4><p>음성 인식, 이미지 분석, 실시간 영상 통화, 복잡한 워크플로우 자동화</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 3: Vertex AI Search 기술 분석 -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>Vertex AI Search 기술 분석</h2>
|
||||
<div class="feature-list">
|
||||
<div class="feature-item"><h4>🤖 완전 관리형 서비스</h4><p>인프라 관리 불필요, Google이 스케일링 및 유지보수 담당</p></div>
|
||||
<div class="feature-item"><h4>🔍 RAG (검색 증강 생성)</h4><p>문서 검색 + LLM 생성 결합으로 정확하고 맥락있는 답변</p></div>
|
||||
<div class="feature-item"><h4>🎯 Google 수준의 검색 품질</h4><p>Google 검색 기술 기반의 고품질 문서 검색</p></div>
|
||||
<div class="feature-item"><h4>📚 다양한 문서 형식 지원</h4><p>PDF, DOCX, HTML, JSON, 웹사이트 크롤링</p></div>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>핵심 특징</h3>
|
||||
<ul>
|
||||
<li><strong>Semantic Search:</strong> 키워드 매칭이 아닌 의미 기반 검색</li>
|
||||
<li><strong>Personalization:</strong> 사용자별 맞춤 검색 결과 제공</li>
|
||||
<li><strong>Multi-modal:</strong> 텍스트, 이미지, 비디오 등 다양한 데이터 타입</li>
|
||||
<li><strong>Enterprise-grade Security:</strong> IAM 기반 접근 제어 및 데이터 격리</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 4: RAG 작동 원리 -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>RAG (검색 증강 생성) 작동 원리</h2>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>1단계: 데이터 수집 (Ingestion)</h3>
|
||||
<div class="info-card" style="margin: 15px 0;"><p>문서를 Vertex AI Search Data Store에 업로드 (PDF, DOCX, HTML 등)</p><p>자동으로 청크 단위로 분할 및 임베딩 벡터 생성</p></div>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>2단계: 인덱싱 (Indexing)</h3>
|
||||
<div class="info-card" style="margin: 15px 0;"><p>문서의 의미를 벡터로 변환하여 벡터 데이터베이스에 저장</p><p>메타데이터(제목, 작성자, 날짜 등)와 함께 인덱싱</p></div>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>3단계: 검색 및 생성 (Search & Generation)</h3>
|
||||
<div class="info-card" style="margin: 15px 0;">
|
||||
<p><strong>검색:</strong> 사용자 질문을 벡터로 변환 후 유사 문서 검색</p>
|
||||
<p><strong>생성:</strong> 검색된 문서를 컨텍스트로 LLM(Gemini)이 답변 생성</p>
|
||||
<p><strong>참조:</strong> 답변에 사용된 원본 문서 링크 제공</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 5: Architecture Diagram -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>시스템 아키텍처</h2>
|
||||
<div class="flow-diagram">
|
||||
<pre>
|
||||
┌─────────────┐
|
||||
│ 사용자 │
|
||||
└──────┬──────┘
|
||||
│ 질문 입력
|
||||
↓
|
||||
┌──────────────────┐
|
||||
│ SAM Frontend │
|
||||
│ (Vue.js/React) │
|
||||
└────────┬─────────┘
|
||||
│ HTTP Request
|
||||
↓
|
||||
┌──────────────────────────┐
|
||||
│ SAM Backend (Laravel) │
|
||||
│ ┌──────────────────────┐ │
|
||||
│ │ ChatController │ │
|
||||
│ │ - searchVertexAI() │ │
|
||||
│ └──────────┬───────────┘ │
|
||||
└────────────┼─────────────┘
|
||||
│ API Call
|
||||
↓
|
||||
┌────────────────────────────┐
|
||||
│ Google Cloud Platform │
|
||||
│ ┌────────────────────────┐ │
|
||||
│ │ Vertex AI Search │ │
|
||||
│ │ - Data Store │ │
|
||||
│ │ - Search Engine │ │
|
||||
│ └───────────┬────────────┘ │
|
||||
│ │ │
|
||||
│ ┌───────────▼────────────┐ │
|
||||
│ │ LLM (Gemini 1.5) │ │
|
||||
│ │ - Answer Generation │ │
|
||||
│ └────────────────────────┘ │
|
||||
└────────────────────────────┘
|
||||
</pre>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>데이터 흐름</h3>
|
||||
<ol>
|
||||
<li>사용자가 프론트엔드에서 질문 입력</li>
|
||||
<li>Laravel 백엔드가 Vertex AI Search API 호출</li>
|
||||
<li>Vertex AI가 문서 검색 후 Gemini에 전달</li>
|
||||
<li>Gemini가 검색 결과 기반 답변 생성</li>
|
||||
<li>백엔드가 답변 + 참고 자료를 프론트엔드로 반환</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 6: Phase 1 - Google Cloud 설정 -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>Phase 1: Google Cloud 설정</h2>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>1. GCP 프로젝트 생성</h3>
|
||||
<div class="code-box"><pre># 프로젝트 ID: sam-chatbot-project
|
||||
# 위치: asia-northeast3 (서울)</pre></div>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>2. 필수 API 활성화</h3>
|
||||
<ul>
|
||||
<li>Discovery Engine API (Vertex AI Search)</li>
|
||||
<li>Vertex AI API</li>
|
||||
<li>Cloud Storage API (문서 저장용)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>3. 서비스 계정 생성</h3>
|
||||
<div class="code-box"><pre># 서비스 계정 이름: sam-chatbot-sa
|
||||
# 역할:
|
||||
# - Discovery Engine Admin
|
||||
# - Vertex AI User</pre></div>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>4. JSON 인증 키 다운로드</h3>
|
||||
<div class="warning-box">
|
||||
<h3>⚠️ 보안 주의사항</h3>
|
||||
<ul>
|
||||
<li>JSON 키 파일은 절대 Git에 커밋하지 않기</li>
|
||||
<li>.gitignore에 추가 필수</li>
|
||||
<li>환경 변수로 관리</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 7-17: 나머지 슬라이드 -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>Phase 2: Vertex AI Search 데이터 스토어 구축</h2>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>1. 앱 생성</h3>
|
||||
<ul>
|
||||
<li><strong>앱 유형:</strong> Chat (대화형)</li>
|
||||
<li><strong>데이터 타입:</strong> Unstructured (비정형 문서)</li>
|
||||
<li><strong>솔루션 타입:</strong> Search with Chat</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>2. 문서 업로드</h3>
|
||||
<div class="feature-list">
|
||||
<div class="feature-item"><h4>📂 Cloud Storage</h4><p>대량 문서 업로드 (gs://bucket-name/)</p></div>
|
||||
<div class="feature-item"><h4>🌐 웹사이트 크롤링</h4><p>sitemap.xml 기반 자동 수집</p></div>
|
||||
<div class="feature-item"><h4>📄 개별 업로드</h4><p>콘솔에서 직접 파일 업로드</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>3. 인덱싱</h3>
|
||||
<div class="info-card"><p>업로드 후 자동 인덱싱 시작 (10-30분 소요)</p><p>인덱싱 상태: Console → Vertex AI Search에서 확인</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>Phase 3: Laravel 백엔드 구현</h2>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>1. Google Cloud PHP 클라이언트 설치</h3>
|
||||
<div class="code-box"><pre>composer require google/cloud-discoveryengine</pre></div>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>2. 환경 변수 설정 (.env)</h3>
|
||||
<div class="code-box"><pre>GOOGLE_CLOUD_PROJECT_ID=sam-chatbot-project
|
||||
GOOGLE_CLOUD_LOCATION=asia-northeast3
|
||||
GOOGLE_CLOUD_DATA_STORE_ID=your-data-store-id
|
||||
GOOGLE_APPLICATION_CREDENTIALS=/path/to/service-account.json</pre></div>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>3. ChatController 구현 예시</h3>
|
||||
<div class="code-box"><pre>use Google\Cloud\DiscoveryEngine\V1\SearchServiceClient;
|
||||
use Google\Cloud\DiscoveryEngine\V1\SearchRequest;
|
||||
|
||||
public function searchVertexAI(Request $request)
|
||||
{
|
||||
$query = $request->input('query');
|
||||
$client = new SearchServiceClient([...]);
|
||||
// ... 검색 로직
|
||||
return response()->json([
|
||||
'answer' => $response->getSummary(),
|
||||
'references' => $response->getResults()
|
||||
]);
|
||||
}</pre></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>초기 투자 비용 분석</h2>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>Vertex AI Search 비용 (월간 예상)</h3>
|
||||
<table class="comparison-table">
|
||||
<thead><tr><th>항목</th><th>단가</th><th>예상 사용량</th><th>월 비용</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>데이터 저장</td><td>$0.10/GB</td><td>50GB</td><td>$5.00</td></tr>
|
||||
<tr><td>질의 비용</td><td>$0.0025/query</td><td>3,000 queries</td><td>$7.50</td></tr>
|
||||
<tr><td><strong>총 합계</strong></td><td colspan="2"></td><td><strong>$12.50</strong></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>추가 비용 (선택사항)</h3>
|
||||
<ul>
|
||||
<li><strong>Cloud Storage:</strong> $0.023/GB (문서 백업용)</li>
|
||||
<li><strong>Gemini API:</strong> 별도 호출 시 추가 비용 (RAG는 포함)</li>
|
||||
<li><strong>네트워크 송신:</strong> $0.12/GB (아시아 → 외부)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="conclusion-box" style="margin-top: 30px;">
|
||||
<h3 style="color: white;">💰 월 $12.50 수준의 저렴한 운영 비용</h3>
|
||||
<p>초기 3개월: 무료 크레딧 $300 활용 가능</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>인프라 확장 권고사항</h2>
|
||||
<div class="warning-box">
|
||||
<h3>⚠️ 현재 인프라 분석</h3>
|
||||
<ul>
|
||||
<li><strong>현재 스펙:</strong> 2Core 4GB (부족)</li>
|
||||
<li><strong>문제점:</strong> Laravel + MySQL + 챗봇 동시 운영 시 메모리 부족</li>
|
||||
<li><strong>동시 사용자:</strong> 10-20명 수준으로 제한적</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>권장 인프라 구성</h3>
|
||||
<table class="comparison-table">
|
||||
<thead><tr><th>구분</th><th>현재</th><th>권장</th><th>비고</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>웹 서버</td><td>2Core 4GB</td><td>4Core 8GB</td><td>Laravel + 챗봇 동시 운영</td></tr>
|
||||
<tr><td>DB 서버</td><td>통합</td><td>분리 (4Core 8GB)</td><td>MySQL 전용 서버</td></tr>
|
||||
<tr><td>저장공간</td><td>100GB</td><td>200GB SSD</td><td>문서 저장 및 로그</td></tr>
|
||||
<tr><td>백업</td><td>수동</td><td>자동 일일 백업</td><td>GCS 또는 별도 스토리지</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>데이터 품질 관리 전략</h2>
|
||||
<div class="conclusion-box">
|
||||
<h3 style="color: white; margin-top: 0;">핵심 원칙</h3>
|
||||
<p style="font-size: 1.2em;">문서의 품질이 곧 답변의 품질을 결정합니다</p>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>1. 문서 최신화</h3>
|
||||
<div class="feature-list">
|
||||
<div class="feature-item"><h4>📅 정기 업데이트</h4><p>월 1회 문서 검토 및 업데이트</p></div>
|
||||
<div class="feature-item"><h4>🗑️ 구버전 제거</h4><p>오래된 문서는 자동 아카이빙</p></div>
|
||||
<div class="feature-item"><h4>✅ 변경 추적</h4><p>버전 관리 시스템 도입</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>2. 문서 표준화</h3>
|
||||
<ul>
|
||||
<li><strong>구조화:</strong> 제목, 소제목, 본문이 명확한 구조</li>
|
||||
<li><strong>포맷:</strong> PDF 또는 DOCX 권장 (일관된 포맷)</li>
|
||||
<li><strong>언어:</strong> 한국어 또는 영어 중 하나로 통일</li>
|
||||
<li><strong>메타데이터:</strong> 제목, 작성자, 작성일, 카테고리 필수 입력</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>보안: API 키 및 인증 관리</h2>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>1. 서비스 계정 키 보안</h3>
|
||||
<div class="warning-box">
|
||||
<h3>⚠️ 절대 금지 사항</h3>
|
||||
<ul>
|
||||
<li>JSON 키 파일을 Git에 커밋</li>
|
||||
<li>클라이언트 사이드 코드에 키 노출</li>
|
||||
<li>공개 저장소에 키 업로드</li>
|
||||
<li>불필요한 권한 부여</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>2. .gitignore 설정</h3>
|
||||
<div class="code-box"><pre># Google Cloud 인증 키
|
||||
service-account.json
|
||||
google-credentials.json
|
||||
|
||||
# 환경 변수
|
||||
.env
|
||||
.env.local
|
||||
.env.production</pre></div>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>3. 최소 권한 원칙</h3>
|
||||
<table class="comparison-table">
|
||||
<thead><tr><th>역할</th><th>권한</th><th>용도</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>Discovery Engine User</td><td>검색 API 호출</td><td>일반 검색 요청</td></tr>
|
||||
<tr><td>Storage Object Viewer</td><td>문서 읽기</td><td>문서 다운로드</td></tr>
|
||||
<tr><td>Discovery Engine Admin</td><td>데이터 스토어 관리</td><td>관리자 전용 (제한적)</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>개발 로드맵 (10-12주)</h2>
|
||||
<table class="comparison-table">
|
||||
<thead><tr><th>단계</th><th>기간</th><th>주요 작업</th><th>산출물</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><strong>Phase 1</strong></td><td>W1-2</td><td>GCP 설정, Vertex AI Search 앱 생성</td><td>테스트용 데이터 스토어</td></tr>
|
||||
<tr><td><strong>Phase 2</strong></td><td>W3-4</td><td>Laravel 백엔드 API 개발, 인증 구현</td><td>ChatController + API 엔드포인트</td></tr>
|
||||
<tr><td><strong>Phase 3</strong></td><td>W5-6</td><td>프론트엔드 챗봇 UI 개발</td><td>챗봇 인터페이스</td></tr>
|
||||
<tr><td><strong>Phase 4</strong></td><td>W7-8</td><td>전체 문서 업로드 및 인덱싱</td><td>프로덕션 데이터 스토어</td></tr>
|
||||
<tr><td><strong>Phase 5</strong></td><td>W9</td><td>사용자 피드백 수집, 품질 개선</td><td>베타 테스트 리포트</td></tr>
|
||||
<tr><td><strong>Phase 6</strong></td><td>W10</td><td>인프라 확장, DB 분리</td><td>스케일링 완료</td></tr>
|
||||
<tr><td><strong>Phase 7</strong></td><td>W11</td><td>모니터링 및 로깅 시스템</td><td>운영 대시보드</td></tr>
|
||||
<tr><td><strong>Phase 8</strong></td><td>W12</td><td>정식 오픈, 운영 가이드</td><td>프로덕션 런칭</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>성공 지표 (KPI)</h2>
|
||||
<table class="comparison-table">
|
||||
<thead><tr><th>지표</th><th>목표</th><th>측정 방법</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><strong>응답 정확도</strong></td><td>90% 이상</td><td>샘플 질문 100개 테스트</td></tr>
|
||||
<tr><td><strong>평균 응답 시간</strong></td><td>3초 이내</td><td>API 응답 시간 모니터링</td></tr>
|
||||
<tr><td><strong>고객 만족도</strong></td><td>85% 이상</td><td>👍/👎 피드백 수집</td></tr>
|
||||
<tr><td><strong>지원 티켓 감소</strong></td><td>50% 감소</td><td>챗봇 도입 전후 비교</td></tr>
|
||||
<tr><td><strong>일일 활성 사용자</strong></td><td>100명</td><td>Google Analytics 추적</td></tr>
|
||||
<tr><td><strong>문서 커버리지</strong></td><td>80% 이상</td><td>질문 중 답변 가능 비율</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>ROI 분석</h3>
|
||||
<div class="company-info">
|
||||
<div class="info-card"><h4>💰 비용 절감</h4><p>고객 지원 인력 50% 절감</p><p>월 $500 인건비 절약</p></div>
|
||||
<div class="info-card"><h4>⏱️ 시간 절약</h4><p>평균 응답 시간 30분 → 3초</p><p>고객 대기 시간 99% 감소</p></div>
|
||||
<div class="info-card"><h4>📈 만족도 향상</h4><p>즉각적 답변 제공</p><p>24/7 서비스 가능</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h1 style="font-size: 4em; margin-bottom: 40px;">감사합니다</h1>
|
||||
<div style="text-align: center;">
|
||||
<p style="font-size: 1.5em; color: #2563eb; margin-bottom: 30px; font-weight: 700;">장기적 AI 챗봇 솔루션 전략</p>
|
||||
<p style="font-size: 1.2em; color: #1e40af; margin-bottom: 40px;">Vertex AI Search 기반 지능형 문서 검색 시스템</p>
|
||||
<div style="margin-top: 50px; padding: 30px; background: #f1f5f9; border-radius: 16px; border: 1px solid #e2e8f0;">
|
||||
<h3>프로젝트 요약</h3>
|
||||
<div style="margin-top: 20px; text-align: left;">
|
||||
<p><strong>🎯 목표:</strong> 노트북LM 수준의 자연어 질의응답 시스템 구축</p>
|
||||
<p><strong>💰 비용:</strong> 월 $12.50 (Vertex AI Search) + $160 (인프라)</p>
|
||||
<p><strong>⏱️ 기간:</strong> 10-12주</p>
|
||||
<p><strong>📊 기대효과:</strong> 고객 지원 비용 50% 절감, 응답 시간 99% 단축</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide-number">
|
||||
<span id="currentSlide">1</span> / <span id="totalSlides">17</span>
|
||||
</div>
|
||||
|
||||
<div class="navigation">
|
||||
<button class="nav-btn" id="prevBtn" onclick="changeSlide(-1)">← 이전</button>
|
||||
<button class="nav-btn" id="nextBtn" onclick="changeSlide(1)">다음 →</button>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
let currentSlide = 1;
|
||||
const totalSlides = 17;
|
||||
let touchStartX = 0;
|
||||
let touchEndX = 0;
|
||||
|
||||
document.getElementById('totalSlides').textContent = totalSlides;
|
||||
|
||||
function showSlide(n) {
|
||||
const slides = document.querySelectorAll('.slide');
|
||||
if (n > totalSlides) currentSlide = 1;
|
||||
if (n < 1) currentSlide = totalSlides;
|
||||
slides.forEach(slide => slide.classList.remove('active'));
|
||||
slides[currentSlide - 1].classList.add('active');
|
||||
document.getElementById('currentSlide').textContent = currentSlide;
|
||||
document.getElementById('prevBtn').disabled = (currentSlide === 1);
|
||||
document.getElementById('nextBtn').disabled = (currentSlide === totalSlides);
|
||||
}
|
||||
|
||||
function changeSlide(direction) {
|
||||
currentSlide += direction;
|
||||
showSlide(currentSlide);
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key === 'ArrowLeft') changeSlide(-1);
|
||||
else if (event.key === 'ArrowRight' || event.key === ' ') { event.preventDefault(); changeSlide(1); }
|
||||
});
|
||||
|
||||
document.addEventListener('touchstart', function(event) { touchStartX = event.changedTouches[0].screenX; });
|
||||
document.addEventListener('touchend', function(event) { touchEndX = event.changedTouches[0].screenX; handleSwipe(); });
|
||||
|
||||
function handleSwipe() {
|
||||
if (touchEndX < touchStartX - 50) changeSlide(1);
|
||||
if (touchEndX > touchStartX + 50) changeSlide(-1);
|
||||
}
|
||||
|
||||
showSlide(currentSlide);
|
||||
</script>
|
||||
@endpush
|
||||
520
resources/views/lab/strategy/confluence-vs-notion.blade.php
Normal file
520
resources/views/lab/strategy/confluence-vs-notion.blade.php
Normal file
@@ -0,0 +1,520 @@
|
||||
@extends('layouts.presentation')
|
||||
|
||||
@section('title', 'Confluence vs Notion 심층 분석')
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
.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: 350px;
|
||||
}
|
||||
}
|
||||
.tab-active {
|
||||
border-bottom: 2px solid #0052CC;
|
||||
color: #0052CC;
|
||||
font-weight: 600;
|
||||
}
|
||||
.tab-inactive {
|
||||
color: #78716c;
|
||||
}
|
||||
.tab-inactive:hover {
|
||||
color: #44403c;
|
||||
}
|
||||
.scroll-mt-20 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
.fade-in {
|
||||
animation: fadeIn 0.5s ease-in-out;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="bg-stone-50 text-stone-800 min-h-screen">
|
||||
<!-- Header -->
|
||||
<header class="bg-white border-b border-stone-200 sticky top-0 z-40">
|
||||
<div 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 items-center gap-3">
|
||||
<div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold text-lg">C</div>
|
||||
<span class="text-stone-400 font-light text-xl">vs</span>
|
||||
<div class="w-8 h-8 bg-stone-900 rounded-lg flex items-center justify-center text-white font-bold text-lg">N</div>
|
||||
<h1 class="ml-3 text-xl font-bold tracking-tight text-stone-900 hidden sm:block">Work Tool Analysis</h1>
|
||||
</div>
|
||||
<nav class="hidden md:flex space-x-8">
|
||||
<a href="#trends" class="text-stone-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition">트렌드 & 철학</a>
|
||||
<a href="#features" class="text-stone-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition">기능 비교</a>
|
||||
<a href="#pricing" class="text-stone-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition">비용 시뮬레이션</a>
|
||||
<a href="#verdict" class="text-stone-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition">추천 가이드</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
|
||||
<!-- Hero -->
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl font-extrabold text-stone-900 mb-4">구조(Structure)와 유연성(Flexibility)의 대결</h2>
|
||||
<p class="text-lg text-stone-600 max-w-3xl mx-auto leading-relaxed">
|
||||
전통적인 강자 <strong>Atlassian Confluence</strong>는 체계적인 문서화와 JIRA 통합을 무기로 기업 시장을 지키고 있습니다.
|
||||
반면, <strong>Notion</strong>은 올인원(All-in-one) 워크스페이스와 압도적인 자유도로 빠르게 시장을 잠식하고 있습니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Section 1: Trends -->
|
||||
<section id="trends" class="mb-20 scroll-mt-20">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-stone-100 p-6">
|
||||
<div class="mb-4">
|
||||
<h3 class="text-xl font-bold text-stone-900 mb-2">시장 관심도 변화 (Trend Analysis)</h3>
|
||||
<p class="text-sm text-stone-500">최근 5년간의 검색량 및 사용자 관심도 추이입니다.</p>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<canvas id="trendChart"></canvas>
|
||||
</div>
|
||||
<div class="mt-4 bg-blue-50 p-4 rounded-xl border border-blue-100">
|
||||
<p class="text-sm text-blue-800">
|
||||
<strong>핵심 인사이트:</strong> Notion은 개인 사용자와 스타트업을 중심으로 폭발적인 '팬덤'을 형성하며 성장했습니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-stone-100 p-6">
|
||||
<div class="mb-4">
|
||||
<h3 class="text-xl font-bold text-stone-900 mb-2">핵심 철학 비교 (Philosophy Radar)</h3>
|
||||
<p class="text-sm text-stone-500">두 도구의 성격을 시각화합니다.</p>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<canvas id="radarChart"></canvas>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4 mt-4 text-sm">
|
||||
<div class="text-center">
|
||||
<span class="block font-bold text-blue-600 mb-1">Confluence</span>
|
||||
<span class="text-stone-500">"체계화된 지식 저장소"</span>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<span class="block font-bold text-stone-900 mb-1">Notion</span>
|
||||
<span class="text-stone-500">"유연한 레고 블록"</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 2: Features -->
|
||||
<section id="features" class="mb-20 scroll-mt-20">
|
||||
<div class="mb-8">
|
||||
<h3 class="text-2xl font-bold text-stone-900">기능 심층 비교</h3>
|
||||
<p class="text-stone-600 mt-2">카테고리별 상세 기능을 확인하세요.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-6 border-b border-stone-200 mb-8 overflow-x-auto">
|
||||
<button onclick="updateFeatureView('doc')" class="tab-btn tab-active pb-3 px-1 transition whitespace-nowrap" id="btn-doc">문서화 & 위키</button>
|
||||
<button onclick="updateFeatureView('pm')" class="tab-btn tab-inactive pb-3 px-1 transition whitespace-nowrap" id="btn-pm">프로젝트 관리</button>
|
||||
<button onclick="updateFeatureView('dev')" class="tab-btn tab-inactive pb-3 px-1 transition whitespace-nowrap" id="btn-dev">개발 & 통합</button>
|
||||
</div>
|
||||
|
||||
<div id="feature-content" class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<!-- Content injected via JS -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 3: Pricing -->
|
||||
<section id="pricing" class="mb-20 scroll-mt-20 bg-stone-100 rounded-3xl p-8 lg:p-12">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
||||
<div class="lg:col-span-1">
|
||||
<h3 class="text-2xl font-bold text-stone-900 mb-4">비용 시뮬레이션</h3>
|
||||
<p class="text-stone-600 mb-8">팀 규모에 따른 월간 예상 비용을 확인해보세요.</p>
|
||||
|
||||
<div class="mb-8">
|
||||
<label for="userRange" class="block text-sm font-medium text-stone-700 mb-2">팀 규모: <span id="userCountDisplay" class="text-blue-600 font-bold text-lg">10</span>명</label>
|
||||
<input type="range" id="userRange" min="1" max="200" value="10" class="w-full h-2 bg-stone-300 rounded-lg appearance-none cursor-pointer accent-blue-600">
|
||||
<div class="flex justify-between text-xs text-stone-500 mt-2">
|
||||
<span>1명</span>
|
||||
<span>200명+</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="bg-white p-4 rounded-xl shadow-sm border-l-4 border-blue-600">
|
||||
<div class="text-xs text-stone-500 uppercase font-semibold">Confluence 예상 비용</div>
|
||||
<div class="text-2xl font-bold text-stone-900" id="confPrice">$60.00</div>
|
||||
<div class="text-xs text-stone-400">월간 / 사용자당 약 $6.05</div>
|
||||
</div>
|
||||
<div class="bg-white p-4 rounded-xl shadow-sm border-l-4 border-stone-800">
|
||||
<div class="text-xs text-stone-500 uppercase font-semibold">Notion 예상 비용</div>
|
||||
<div class="text-2xl font-bold text-stone-900" id="notionPrice">$80.00</div>
|
||||
<div class="text-xs text-stone-400">월간 / 사용자당 $8</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lg:col-span-2 flex flex-col justify-center">
|
||||
<div class="chart-container">
|
||||
<canvas id="pricingChart"></canvas>
|
||||
</div>
|
||||
<div class="mt-6 text-sm text-stone-500 bg-white p-4 rounded-lg">
|
||||
<p><strong>참고:</strong> Confluence는 10명 이하 무료, 이후 사용자 수 구간별로 가격이 책정됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 4: Verdict -->
|
||||
<section id="verdict" class="mb-20 scroll-mt-20">
|
||||
<div class="max-w-4xl mx-auto bg-white border border-stone-200 rounded-2xl shadow-lg overflow-hidden">
|
||||
<div class="bg-stone-900 p-6 text-center">
|
||||
<h3 class="text-2xl font-bold text-white">어떤 도구가 우리 팀에 맞을까요?</h3>
|
||||
<p class="text-stone-400 mt-2">3가지 질문으로 알아보는 추천 가이드</p>
|
||||
</div>
|
||||
|
||||
<div class="p-8">
|
||||
<div id="quiz-container" class="space-y-6">
|
||||
<div class="space-y-4">
|
||||
<p class="font-semibold text-lg text-stone-800">Q1. 귀하의 팀은 소프트웨어 개발이 주 업무이며, JIRA를 사용하나요?</p>
|
||||
<div class="flex gap-4">
|
||||
<button onclick="handleQuiz(1, true)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-blue-500 hover:bg-blue-50 transition font-medium">예 (Yes)</button>
|
||||
<button onclick="handleQuiz(1, false)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-stone-500 hover:bg-stone-50 transition font-medium">아니오 (No)</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="result-container" class="hidden text-center fade-in">
|
||||
<div class="mb-6 flex justify-center">
|
||||
<div id="result-icon" class="text-6xl"></div>
|
||||
</div>
|
||||
<h4 id="result-title" class="text-3xl font-bold mb-4 text-stone-900"></h4>
|
||||
<p id="result-desc" class="text-lg text-stone-600 mb-8 max-w-2xl mx-auto"></p>
|
||||
<button onclick="resetQuiz()" class="px-6 py-2 bg-stone-200 text-stone-700 rounded-lg hover:bg-stone-300 transition text-sm font-semibold">다시 하기</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="text-center text-stone-400 py-10 border-t border-stone-200">
|
||||
<p class="text-sm">Source Data based on general market analysis of Atlassian Confluence vs Notion (2024).</p>
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script>
|
||||
const state = {
|
||||
users: 10,
|
||||
currentTab: 'doc',
|
||||
quizScore: 0
|
||||
};
|
||||
|
||||
const featureData = {
|
||||
doc: {
|
||||
confluence: {
|
||||
title: "Confluence: 구조적 문서화",
|
||||
icon: "📚",
|
||||
points: [
|
||||
"계층형 페이지 트리 구조 (Space > Parent > Child)",
|
||||
"강력한 버전 관리 및 변경 이력 추적",
|
||||
"엄격한 권한 관리 (페이지/스페이스 단위)",
|
||||
"공식적인 사내 규정, 매뉴얼 관리에 최적"
|
||||
],
|
||||
color: "bg-blue-50 border-blue-200 text-blue-900"
|
||||
},
|
||||
notion: {
|
||||
title: "Notion: 유연한 캔버스",
|
||||
icon: "🎨",
|
||||
points: [
|
||||
"무한히 중첩 가능한 페이지 구조",
|
||||
"드래그 앤 드롭 블록 시스템",
|
||||
"실시간 협업에 강하지만 버전 관리는 상대적으로 약함",
|
||||
"브레인스토밍, 아이디어 노트, 개인 위키에 최적"
|
||||
],
|
||||
color: "bg-stone-100 border-stone-200 text-stone-900"
|
||||
}
|
||||
},
|
||||
pm: {
|
||||
confluence: {
|
||||
title: "Confluence: JIRA 보조",
|
||||
icon: "🤝",
|
||||
points: [
|
||||
"독자적인 PM 기능보다는 JIRA 데이터 시각화에 집중",
|
||||
"JIRA 로드맵, 이슈 리스트 매크로 활용",
|
||||
"스프린트 회고 및 요구사항 정의서 템플릿 강점",
|
||||
"복잡한 프로젝트의 '문서적' 관리에 적합"
|
||||
],
|
||||
color: "bg-blue-50 border-blue-200 text-blue-900"
|
||||
},
|
||||
notion: {
|
||||
title: "Notion: 경량형 PM 도구",
|
||||
icon: "📅",
|
||||
points: [
|
||||
"데이터베이스를 활용한 칸반 보드, 간트 차트 내장",
|
||||
"별도 도구 없이 하나의 페이지에서 기획+일정 관리 가능",
|
||||
"필터와 보기를 통해 다양한 관점 제공",
|
||||
"Agile 프로세스가 엄격하지 않은 팀에 적합"
|
||||
],
|
||||
color: "bg-stone-100 border-stone-200 text-stone-900"
|
||||
}
|
||||
},
|
||||
dev: {
|
||||
confluence: {
|
||||
title: "Confluence: 개발 생태계",
|
||||
icon: "⚙️",
|
||||
points: [
|
||||
"JIRA 이슈 양방향 동기화 (가장 강력한 차별점)",
|
||||
"코드 스니펫 매크로 제공",
|
||||
"DevOps 파이프라인 상태 표시 가능",
|
||||
"수천 개의 서드파티 앱 마켓플레이스"
|
||||
],
|
||||
color: "bg-blue-50 border-blue-200 text-blue-900"
|
||||
},
|
||||
notion: {
|
||||
title: "Notion: API & 임베드",
|
||||
icon: "🔌",
|
||||
points: [
|
||||
"GitHub, Slack, Figma 등의 링크 미리보기 지원",
|
||||
"Notion API를 활용한 커스텀 자동화 가능",
|
||||
"Syncd Blocks로 여러 페이지 내용 동시 업데이트",
|
||||
"JIRA 연동이 가능하나 Confluence만큼 깊지 않음"
|
||||
],
|
||||
color: "bg-stone-100 border-stone-200 text-stone-900"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const quizQuestions = [
|
||||
{ q: "1. 팀이 JIRA를 핵심 프로젝트 관리 도구로 사용합니까?", yesScore: 10, noScore: -5 },
|
||||
{ q: "2. 문서의 양식이 엄격하게 정해져 있고, 결재/승인 프로세스가 중요한가요?", yesScore: 5, noScore: -5 },
|
||||
{ q: "3. 팀원들이 자유롭게 페이지를 꾸미고 구조를 변경하는 것을 선호하나요?", yesScore: -10, noScore: 5 }
|
||||
];
|
||||
|
||||
let pricingChart;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initCharts();
|
||||
updateFeatureView('doc');
|
||||
updatePrice();
|
||||
});
|
||||
|
||||
function initCharts() {
|
||||
// Trend Chart
|
||||
const ctxTrend = document.getElementById('trendChart').getContext('2d');
|
||||
new Chart(ctxTrend, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['2020', '2021', '2022', '2023', '2024'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Notion',
|
||||
data: [30, 55, 75, 85, 95],
|
||||
borderColor: '#333333',
|
||||
backgroundColor: 'rgba(51, 51, 51, 0.1)',
|
||||
tension: 0.4,
|
||||
fill: true
|
||||
},
|
||||
{
|
||||
label: 'Confluence',
|
||||
data: [70, 72, 71, 73, 74],
|
||||
borderColor: '#0052CC',
|
||||
borderDash: [5, 5],
|
||||
tension: 0.4,
|
||||
fill: false
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: { legend: { position: 'bottom' } },
|
||||
scales: { y: { display: false } }
|
||||
}
|
||||
});
|
||||
|
||||
// Radar Chart
|
||||
const ctxRadar = document.getElementById('radarChart').getContext('2d');
|
||||
new Chart(ctxRadar, {
|
||||
type: 'radar',
|
||||
data: {
|
||||
labels: ['유연성', '구조화', 'JIRA 통합', '학습 곡선', '디자인/UI'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Notion',
|
||||
data: [95, 40, 50, 85, 95],
|
||||
backgroundColor: 'rgba(51, 51, 51, 0.2)',
|
||||
borderColor: '#333333',
|
||||
pointBackgroundColor: '#333333'
|
||||
},
|
||||
{
|
||||
label: 'Confluence',
|
||||
data: [40, 95, 100, 50, 60],
|
||||
backgroundColor: 'rgba(0, 82, 204, 0.2)',
|
||||
borderColor: '#0052CC',
|
||||
pointBackgroundColor: '#0052CC'
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: { r: { suggestedMin: 0, suggestedMax: 100 } },
|
||||
plugins: { legend: { position: 'bottom' } }
|
||||
}
|
||||
});
|
||||
|
||||
// Pricing Chart
|
||||
const ctxPrice = document.getElementById('pricingChart').getContext('2d');
|
||||
pricingChart = new Chart(ctxPrice, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Confluence', 'Notion'],
|
||||
datasets: [{
|
||||
label: '월간 예상 비용 (USD)',
|
||||
data: [0, 0],
|
||||
backgroundColor: ['#0052CC', '#333333'],
|
||||
borderRadius: 8
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: { y: { beginAtZero: true, title: { display: true, text: 'USD ($)' } } },
|
||||
plugins: { legend: { display: false } }
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateFeatureView(type) {
|
||||
state.currentTab = type;
|
||||
|
||||
['doc', 'pm', 'dev'].forEach(t => {
|
||||
const btn = document.getElementById(`btn-${t}`);
|
||||
btn.className = t === type
|
||||
? "tab-btn tab-active pb-3 px-1 transition whitespace-nowrap text-lg"
|
||||
: "tab-btn tab-inactive pb-3 px-1 transition whitespace-nowrap text-lg";
|
||||
});
|
||||
|
||||
const data = featureData[type];
|
||||
const contentDiv = document.getElementById('feature-content');
|
||||
|
||||
contentDiv.innerHTML = `
|
||||
<div class="rounded-2xl p-6 border-2 bg-blue-50 border-blue-100 fade-in transform transition hover:-translate-y-1 duration-300">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<span class="text-3xl">${data.confluence.icon}</span>
|
||||
<h4 class="text-xl font-bold text-blue-900">${data.confluence.title}</h4>
|
||||
</div>
|
||||
<ul class="space-y-3">
|
||||
${data.confluence.points.map(p => `<li class="flex items-start gap-2 text-stone-700"><span class="text-blue-500 mt-1">✔</span> ${p}</li>`).join('')}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="rounded-2xl p-6 border-2 bg-stone-100 border-stone-200 fade-in transform transition hover:-translate-y-1 duration-300">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<span class="text-3xl">${data.notion.icon}</span>
|
||||
<h4 class="text-xl font-bold text-stone-900">${data.notion.title}</h4>
|
||||
</div>
|
||||
<ul class="space-y-3">
|
||||
${data.notion.points.map(p => `<li class="flex items-start gap-2 text-stone-700"><span class="text-stone-900 mt-1">✔</span> ${p}</li>`).join('')}
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
const userRange = document.getElementById('userRange');
|
||||
userRange.addEventListener('input', (e) => {
|
||||
state.users = parseInt(e.target.value);
|
||||
updatePrice();
|
||||
});
|
||||
|
||||
function updatePrice() {
|
||||
const users = state.users;
|
||||
document.getElementById('userCountDisplay').innerText = users;
|
||||
|
||||
let confCost = users <= 10 ? 0 : users * 6.05;
|
||||
let notionCost = users === 1 ? 0 : users * 8;
|
||||
|
||||
document.getElementById('confPrice').innerText = `$${confCost.toFixed(2)}`;
|
||||
document.getElementById('notionPrice').innerText = `$${notionCost.toFixed(2)}`;
|
||||
|
||||
pricingChart.data.datasets[0].data = [confCost, notionCost];
|
||||
pricingChart.update();
|
||||
}
|
||||
|
||||
function handleQuiz(step, answerYes) {
|
||||
if (step === 1) {
|
||||
state.quizScore += answerYes ? 10 : -5;
|
||||
document.getElementById('quiz-container').innerHTML = `
|
||||
<div class="space-y-4 fade-in">
|
||||
<p class="font-semibold text-lg text-stone-800">${quizQuestions[1].q}</p>
|
||||
<div class="flex gap-4">
|
||||
<button onclick="handleQuiz(2, true)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-blue-500 hover:bg-blue-50 transition font-medium">예</button>
|
||||
<button onclick="handleQuiz(2, false)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-stone-500 hover:bg-stone-50 transition font-medium">아니오</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
} else if (step === 2) {
|
||||
state.quizScore += answerYes ? 5 : -5;
|
||||
document.getElementById('quiz-container').innerHTML = `
|
||||
<div class="space-y-4 fade-in">
|
||||
<p class="font-semibold text-lg text-stone-800">${quizQuestions[2].q}</p>
|
||||
<div class="flex gap-4">
|
||||
<button onclick="handleQuiz(3, true)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-blue-500 hover:bg-blue-50 transition font-medium">선호함</button>
|
||||
<button onclick="handleQuiz(3, false)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-stone-500 hover:bg-stone-50 transition font-medium">선호하지 않음</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
} else if (step === 3) {
|
||||
state.quizScore += answerYes ? -10 : 5;
|
||||
showResult();
|
||||
}
|
||||
}
|
||||
|
||||
function showResult() {
|
||||
document.getElementById('quiz-container').classList.add('hidden');
|
||||
const resultDiv = document.getElementById('result-container');
|
||||
resultDiv.classList.remove('hidden');
|
||||
|
||||
const title = document.getElementById('result-title');
|
||||
const desc = document.getElementById('result-desc');
|
||||
const icon = document.getElementById('result-icon');
|
||||
|
||||
if (state.quizScore > 0) {
|
||||
icon.innerHTML = `<span class="bg-blue-600 text-white rounded-2xl px-4 py-2 text-4xl">Confluence</span>`;
|
||||
title.innerText = "추천: Atlassian Confluence";
|
||||
title.className = "text-3xl font-bold mb-4 text-blue-700";
|
||||
desc.innerHTML = `귀하의 팀은 <strong>체계적인 구조, JIRA와의 긴밀한 통합</strong>이 중요해 보입니다. Confluence가 더 적합합니다.`;
|
||||
} else {
|
||||
icon.innerHTML = `<span class="bg-stone-900 text-white rounded-2xl px-4 py-2 text-4xl">Notion</span>`;
|
||||
title.innerText = "추천: Notion";
|
||||
title.className = "text-3xl font-bold mb-4 text-stone-900";
|
||||
desc.innerHTML = `귀하의 팀은 <strong>유연성, 빠른 속도, 올인원 워크스페이스</strong>를 필요로 합니다. Notion이 더 적합합니다.`;
|
||||
}
|
||||
}
|
||||
|
||||
function resetQuiz() {
|
||||
state.quizScore = 0;
|
||||
document.getElementById('result-container').classList.add('hidden');
|
||||
document.getElementById('quiz-container').classList.remove('hidden');
|
||||
document.getElementById('quiz-container').innerHTML = `
|
||||
<div class="space-y-4 fade-in">
|
||||
<p class="font-semibold text-lg text-stone-800">${quizQuestions[0].q}</p>
|
||||
<div class="flex gap-4">
|
||||
<button onclick="handleQuiz(1, true)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-blue-500 hover:bg-blue-50 transition font-medium">예 (Yes)</button>
|
||||
<button onclick="handleQuiz(1, false)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-stone-500 hover:bg-stone-50 transition font-medium">아니오 (No)</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
483
resources/views/lab/strategy/debt.blade.php
Normal file
483
resources/views/lab/strategy/debt.blade.php
Normal file
@@ -0,0 +1,483 @@
|
||||
@extends('layouts.presentation')
|
||||
|
||||
@section('title', '장기적 채권추심 전략')
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
::-webkit-scrollbar-track { background: #f1f5f9; }
|
||||
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
|
||||
|
||||
.presentation-container { width: 100%; height: 100vh; position: relative; overflow: hidden; }
|
||||
.slide { width: 100%; height: 100vh; display: none; align-items: flex-start; justify-content: center; padding: 40px; position: absolute; top: 0; left: 0; overflow-y: auto; overflow-x: hidden; }
|
||||
.slide.active { display: flex; animation: slideInRight 0.5s ease-out; }
|
||||
.slide-content { background: rgba(255, 255, 255, 0.98); border-radius: 24px; padding: 60px; max-width: 1200px; width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05); animation: fadeIn 0.8s ease-out; margin: auto 0; border: 1px solid rgba(255, 255, 255, 0.2); }
|
||||
|
||||
h1 { color: #2563eb; font-size: 3em; margin-bottom: 20px; text-align: center; font-weight: 800; }
|
||||
h2 { color: #1e40af; font-size: 2.5em; margin-bottom: 30px; text-align: center; border-bottom: 3px solid #2563eb; padding-bottom: 15px; font-weight: 700; }
|
||||
h3 { color: #2563eb; font-size: 1.8em; margin: 25px 0 15px 0; font-weight: 700; }
|
||||
p, li { font-size: 1.2em; line-height: 1.8; color: #1e293b; margin-bottom: 15px; }
|
||||
ul { margin-left: 30px; }
|
||||
|
||||
.company-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 30px 0; }
|
||||
.info-card { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; padding: 25px; border-radius: 16px; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2); animation: scaleIn 0.5s ease-out; border: 1px solid rgba(255, 255, 255, 0.1); }
|
||||
.info-card h4 { font-size: 1.3em; margin-bottom: 10px; border-bottom: 2px solid rgba(255, 255, 255, 0.3); padding-bottom: 8px; }
|
||||
|
||||
.comparison-table { width: 100%; border-collapse: collapse; margin: 25px 0; font-size: 1em; }
|
||||
.comparison-table th, .comparison-table td { padding: 12px; border: 1px solid #ddd; text-align: left; }
|
||||
.comparison-table thead tr { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; }
|
||||
.comparison-table tbody tr:nth-of-type(even) { background: #f3f3f3; }
|
||||
|
||||
.feature-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin: 20px 0; }
|
||||
.feature-item { background: #f8fafc; padding: 20px; border-radius: 12px; border-left: 4px solid #2563eb; border: 1px solid #e2e8f0; border-left-width: 4px; }
|
||||
|
||||
.conclusion-box { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; padding: 30px; border-radius: 16px; margin: 20px 0; text-align: center; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2); }
|
||||
.conclusion-box p { color: white; }
|
||||
|
||||
.navigation { position: fixed; bottom: 30px; right: 30px; display: flex; gap: 15px; z-index: 1000; }
|
||||
.nav-btn { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; border: none; padding: 15px 30px; border-radius: 9999px; cursor: pointer; font-size: 1.1em; font-weight: 600; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); transition: all 0.3s ease; }
|
||||
.nav-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4); background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%); }
|
||||
.nav-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
.slide-number { position: fixed; bottom: 30px; left: 30px; background: rgba(255, 255, 255, 0.95); padding: 12px 24px; border-radius: 9999px; font-size: 1.1em; color: #2563eb; font-weight: 700; z-index: 1000; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border: 1px solid rgba(37, 99, 235, 0.1); }
|
||||
|
||||
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
|
||||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||
@keyframes scaleIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.slide-content { padding: 30px; }
|
||||
h1 { font-size: 2em; } h2 { font-size: 1.8em; } h3 { font-size: 1.4em; }
|
||||
p, li { font-size: 1em; }
|
||||
.navigation { bottom: 15px; right: 15px; }
|
||||
.nav-btn { padding: 10px 20px; font-size: 0.9em; }
|
||||
.slide-number { bottom: 15px; left: 15px; padding: 8px 15px; font-size: 0.9em; }
|
||||
.comparison-table { font-size: 0.8em; }
|
||||
.comparison-table th, .comparison-table td { padding: 8px; }
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="presentation-container">
|
||||
<!-- Slide 1: Cover -->
|
||||
<div class="slide active">
|
||||
<div class="slide-content">
|
||||
<h1>장기적 채권추심 전략</h1>
|
||||
<h2 style="border: none; color: #2563eb;">SAM 프로젝트 - 중소기업 맞춤형 채권관리 시스템</h2>
|
||||
<div style="text-align: center; margin-top: 50px;">
|
||||
<p style="font-size: 1.5em; color: #1e40af; font-weight: 600;">기획 · 디자인 · 백엔드 · 프론트엔드</p>
|
||||
<p style="margin-top: 30px; color: #64748b;">2025년 채권추심 자동화 솔루션 - 중장기 발전 계획</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 2: Project Vision -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>프로젝트 비전</h2>
|
||||
<div class="conclusion-box">
|
||||
<h3 style="color: white; margin-top: 0;">채권관리의 디지털 혁신</h3>
|
||||
<p style="font-size: 1.3em;">복잡한 채권추심 업무를 자동화하고, 효율적인 회수 관리를 지원하는 통합 플랫폼</p>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>핵심 목표</h3>
|
||||
<div class="feature-list">
|
||||
<div class="feature-item"><h4>💼 채권 관리</h4><p>채권 등록부터 회수까지 전체 생애주기 관리</p></div>
|
||||
<div class="feature-item"><h4>📞 추심 활동</h4><p>전화, 문자, 우편 등 다양한 추심 활동 기록 및 자동화</p></div>
|
||||
<div class="feature-item"><h4>⚖️ 법적 절차</h4><p>독촉장, 지급명령, 소송 등 법적 절차 관리</p></div>
|
||||
<div class="feature-item"><h4>💰 회수 관리</h4><p>회수 내역 기록 및 통계, 분석 리포트</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>주요 타겟 사용자</h3>
|
||||
<ul>
|
||||
<li><strong>중소기업:</strong> 외상 매출 관리 및 채권 회수</li>
|
||||
<li><strong>채권추심 대행사:</strong> 다수 채권 통합 관리</li>
|
||||
<li><strong>법무법인:</strong> 법적 절차 진행 관리</li>
|
||||
<li><strong>금융기관:</strong> 연체 채권 관리</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 3: Core Values -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>핵심 가치 제안</h2>
|
||||
<div class="company-info">
|
||||
<div class="info-card"><h4>🤖 자동화</h4><p>추심 활동 자동 스케줄링</p><p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">월 80시간 업무 절감</p></div>
|
||||
<div class="info-card"><h4>📊 가시성</h4><p>채권 현황 및 회수율 실시간 모니터링</p><p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">대시보드 한눈에 확인</p></div>
|
||||
<div class="info-card"><h4>⚖️ 법규 준수</h4><p>공정채권추심법 자동 준수</p><p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">법적 리스크 최소화</p></div>
|
||||
<div class="info-card"><h4>📱 접근성</h4><p>모바일 앱을 통한 현장 추심 기록</p><p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">언제 어디서나 업무</p></div>
|
||||
<div class="info-card"><h4>🔗 통합성</h4><p>회계, ERP 시스템 연동</p><p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">데이터 자동 동기화</p></div>
|
||||
<div class="info-card"><h4>🔐 보안</h4><p>채무자 정보 암호화 및 접근 제어</p><p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">개인정보보호법 준수</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 4: Planning - Requirements -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>기획: 기능 요구사항</h2>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>1. 채권 관리</h3>
|
||||
<ul>
|
||||
<li>채권 등록 (채무자 정보, 채권 금액, 발생일)</li>
|
||||
<li>채권 상태 관리 (정상/연체/회수/손실)</li>
|
||||
<li>채무자 정보 관리 (연락처, 주소, 직장 정보)</li>
|
||||
<li>채권 분류 및 그룹 관리</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>2. 추심 활동 관리</h3>
|
||||
<ul>
|
||||
<li>전화 추심 기록 (통화 내용, 약속 일자)</li>
|
||||
<li>문자 발송 및 이력 관리</li>
|
||||
<li>우편물 발송 기록 (내용증명, 독촉장)</li>
|
||||
<li>방문 추심 기록 (GPS 위치, 사진)</li>
|
||||
<li>자동 추심 스케줄링</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>3. 법적 절차 관리</h3>
|
||||
<ul>
|
||||
<li>독촉장 자동 생성 및 발송</li>
|
||||
<li>지급명령 신청 관리</li>
|
||||
<li>소송 진행 현황 관리</li>
|
||||
<li>강제집행 절차 추적</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>4. 회수 관리</h3>
|
||||
<ul>
|
||||
<li>회수금 입금 기록</li>
|
||||
<li>분할 상환 관리</li>
|
||||
<li>회수율 통계</li>
|
||||
<li>미회수 채권 분석</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 5: User Scenarios -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>기획: 사용자 시나리오</h2>
|
||||
<div style="background: #dbeafe; padding: 25px; border-radius: 16px; margin: 20px 0; border-left: 5px solid #2563eb; border: 1px solid #bfdbfe;">
|
||||
<h3 style="margin-top: 0; color: #1e40af; font-weight: 700;">시나리오 1: 신규 채권 등록 프로세스</h3>
|
||||
<ol style="color: #333;">
|
||||
<li><strong>채권 발생:</strong> 매출 미수금 발생</li>
|
||||
<li><strong>채권 등록:</strong> 채무자 정보, 채권 금액, 발생일 입력</li>
|
||||
<li><strong>초기 접촉:</strong> 자동 문자 발송 (결제 요청)</li>
|
||||
<li><strong>추심 스케줄:</strong> 7일, 14일, 21일 후 추심 활동 자동 생성</li>
|
||||
<li><strong>진행 추적:</strong> 각 단계별 활동 기록</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div style="background: #e0e7ff; padding: 25px; border-radius: 16px; margin: 20px 0; border-left: 5px solid #1e40af; border: 1px solid #c7d2fe;">
|
||||
<h3 style="margin-top: 0; color: #1e40af; font-weight: 700;">시나리오 2: 전화 추심 활동</h3>
|
||||
<ol style="color: #333;">
|
||||
<li><strong>추심 대상 확인:</strong> 오늘 추심할 채권 목록 조회</li>
|
||||
<li><strong>전화 발신:</strong> 시스템 내 전화 기능 또는 외부 연동</li>
|
||||
<li><strong>통화 기록:</strong> 통화 내용, 채무자 반응, 약속 일자 입력</li>
|
||||
<li><strong>후속 조치:</strong> 약속일 알림 자동 설정</li>
|
||||
<li><strong>이력 관리:</strong> 모든 통화 내역 자동 저장</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div style="background: #dbeafe; padding: 25px; border-radius: 16px; margin: 20px 0; border-left: 5px solid #2563eb; border: 1px solid #bfdbfe;">
|
||||
<h3 style="margin-top: 0; color: #1e40af; font-weight: 700;">시나리오 3: 법적 절차 진행</h3>
|
||||
<ol style="color: #333;">
|
||||
<li><strong>절차 개시 결정:</strong> 임의 추심 실패 판단</li>
|
||||
<li><strong>독촉장 발송:</strong> 시스템에서 독촉장 자동 생성</li>
|
||||
<li><strong>지급명령 신청:</strong> 필요 서류 자동 작성</li>
|
||||
<li><strong>법원 진행 추적:</strong> 각 단계별 진행 상황 기록</li>
|
||||
<li><strong>강제집행:</strong> 집행 절차 관리 및 결과 기록</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 6-14: 나머지 슬라이드 (간략화) -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>기획: 고급 기능</h2>
|
||||
<div class="feature-list">
|
||||
<div class="feature-item"><h4>📱 모바일 앱</h4><p>현장 추심 기록, 사진 첨부, GPS 위치 기록</p></div>
|
||||
<div class="feature-item"><h4>🔔 스마트 알림</h4><p>약속일 알림, 추심 예정일 알림</p></div>
|
||||
<div class="feature-item"><h4>📊 대시보드</h4><p>채권 현황, 회수율, 부서별 성과</p></div>
|
||||
<div class="feature-item"><h4>📑 문서 자동화</h4><p>독촉장, 내용증명 자동 생성</p></div>
|
||||
<div class="feature-item"><h4>🔗 ERP 연동</h4><p>회계 시스템 자동 연동</p></div>
|
||||
<div class="feature-item"><h4>🤖 AI 추천</h4><p>최적 추심 시간 및 방법 추천</p></div>
|
||||
</div>
|
||||
<div style="margin-top: 30px; padding: 25px; background: #fef3c7; border-radius: 16px; border-left: 5px solid #f59e0b; border: 1px solid #fde68a;">
|
||||
<h3 style="margin-top: 0; color: #92400e; font-weight: 700;">컴플라이언스 기능</h3>
|
||||
<ul style="color: #78350f;">
|
||||
<li><strong>공정채권추심법 준수:</strong> 추심 시간, 횟수 자동 검증</li>
|
||||
<li><strong>개인정보보호법:</strong> 채무자 정보 암호화 및 접근 로그</li>
|
||||
<li><strong>전자문서법:</strong> 문서 전자서명 및 보관</li>
|
||||
<li><strong>감사 추적:</strong> 모든 추심 활동 이력 기록</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>디자인: UI/UX 전략</h2>
|
||||
<div class="conclusion-box">
|
||||
<h3 style="color: white; margin-top: 0;">디자인 철학</h3>
|
||||
<p style="font-size: 1.2em;">"복잡한 채권 업무를 간단하게, 직관적으로"</p>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>핵심 디자인 원칙</h3>
|
||||
<div class="feature-list">
|
||||
<div class="feature-item"><h4>👤 사용자 중심</h4><p>추심 담당자가 쉽게 사용</p></div>
|
||||
<div class="feature-item"><h4>⚡ 빠른 접근</h4><p>핵심 기능 2클릭 이내</p></div>
|
||||
<div class="feature-item"><h4>📱 모바일 우선</h4><p>현장에서 즉시 기록</p></div>
|
||||
<div class="feature-item"><h4>🔐 보안 강조</h4><p>개인정보 보호 시각화</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>주요 화면 구성</h3>
|
||||
<ul>
|
||||
<li><strong>관리자 대시보드:</strong> 채권 현황, 회수율, 부서별 성과</li>
|
||||
<li><strong>추심 담당자 대시보드:</strong> 오늘 할 일, 약속 일정, 미완료 건</li>
|
||||
<li><strong>채권 관리:</strong> 채권 등록, 조회, 수정, 상태 변경</li>
|
||||
<li><strong>추심 활동:</strong> 전화/문자/방문 기록, 일정 관리</li>
|
||||
<li><strong>법적 절차:</strong> 독촉장, 지급명령, 소송 관리</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>백엔드: 시스템 아키텍처</h2>
|
||||
<div class="conclusion-box">
|
||||
<h3 style="color: white; margin-top: 0;">마이크로서비스 아키텍처</h3>
|
||||
<p style="font-size: 1.2em;">확장 가능하고 안정적인 채권관리 시스템</p>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>주요 서비스 구성</h3>
|
||||
<div class="company-info">
|
||||
<div class="info-card"><h4>💼 채권 정보 서비스</h4><p>채권 및 채무자 정보 관리</p></div>
|
||||
<div class="info-card"><h4>📞 추심 활동 서비스</h4><p>추심 활동 기록 및 스케줄링</p></div>
|
||||
<div class="info-card"><h4>⚖️ 법적 절차 서비스</h4><p>법적 절차 관리 및 문서 생성</p></div>
|
||||
<div class="info-card"><h4>💰 회수 관리 서비스</h4><p>회수금 처리 및 통계</p></div>
|
||||
<div class="info-card"><h4>🔔 알림 서비스</h4><p>푸시, 이메일, SMS 발송</p></div>
|
||||
<div class="info-card"><h4>📊 분석 서비스</h4><p>회수율 분석 및 리포트</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>기술 스택</h3>
|
||||
<table class="comparison-table">
|
||||
<thead><tr><th>레이어</th><th>기술</th><th>목적</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><strong>Application</strong></td><td>Node.js (NestJS) / Python (FastAPI)</td><td>비즈니스 로직 처리</td></tr>
|
||||
<tr><td><strong>Database</strong></td><td>PostgreSQL</td><td>관계형 데이터 저장</td></tr>
|
||||
<tr><td><strong>Cache</strong></td><td>Redis</td><td>세션 및 임시 데이터 캐싱</td></tr>
|
||||
<tr><td><strong>Message Queue</strong></td><td>RabbitMQ</td><td>비동기 처리 (알림 발송 등)</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>백엔드: 데이터베이스 설계</h2>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>핵심 테이블 구조</h3>
|
||||
<table class="comparison-table">
|
||||
<thead><tr><th>테이블명</th><th>주요 필드</th><th>관계</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><strong>debtors</strong></td><td>id, name, phone, address, company</td><td>1:N debts</td></tr>
|
||||
<tr><td><strong>debts</strong></td><td>id, debtor_id, amount, due_date, status</td><td>N:1 debtors, 1:N activities</td></tr>
|
||||
<tr><td><strong>collection_activities</strong></td><td>id, debt_id, type, date, content, result</td><td>N:1 debts</td></tr>
|
||||
<tr><td><strong>legal_procedures</strong></td><td>id, debt_id, type, filed_date, status</td><td>N:1 debts</td></tr>
|
||||
<tr><td><strong>payments</strong></td><td>id, debt_id, amount, date, method</td><td>N:1 debts</td></tr>
|
||||
<tr><td><strong>schedules</strong></td><td>id, debt_id, due_date, type, completed</td><td>N:1 debts</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>데이터 보안 전략</h3>
|
||||
<ul>
|
||||
<li><strong>암호화:</strong> 주민번호, 계좌번호 AES-256 암호화</li>
|
||||
<li><strong>접근 제어:</strong> 역할 기반 접근 제어 (RBAC)</li>
|
||||
<li><strong>감사 로그:</strong> 모든 채권 및 추심 활동 이력 기록</li>
|
||||
<li><strong>백업:</strong> 일일 자동 백업 및 복구 테스트</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>프론트엔드: 기술 스택</h2>
|
||||
<div class="conclusion-box">
|
||||
<h3 style="color: white; margin-top: 0;">현대적인 프론트엔드 아키텍처</h3>
|
||||
<p style="font-size: 1.2em;">React 18 + TypeScript 기반 SPA & 모바일 앱</p>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>웹 애플리케이션</h3>
|
||||
<table class="comparison-table">
|
||||
<thead><tr><th>카테고리</th><th>기술</th><th>목적</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><strong>프레임워크</strong></td><td>React 18 + TypeScript</td><td>컴포넌트 기반 UI 구축</td></tr>
|
||||
<tr><td><strong>상태 관리</strong></td><td>Zustand / React Query</td><td>전역 상태 및 서버 상태 관리</td></tr>
|
||||
<tr><td><strong>UI 라이브러리</strong></td><td>Material-UI (MUI)</td><td>디자인 시스템 구현</td></tr>
|
||||
<tr><td><strong>차트</strong></td><td>Recharts</td><td>통계 데이터 시각화</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>모바일 애플리케이션</h3>
|
||||
<table class="comparison-table">
|
||||
<thead><tr><th>카테고리</th><th>기술</th><th>목적</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><strong>프레임워크</strong></td><td>React Native</td><td>크로스 플랫폼 앱 개발</td></tr>
|
||||
<tr><td><strong>위치 서비스</strong></td><td>React Native Geolocation</td><td>방문 추심 GPS 기록</td></tr>
|
||||
<tr><td><strong>푸시 알림</strong></td><td>Firebase Cloud Messaging</td><td>실시간 알림 발송</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>개발 로드맵</h2>
|
||||
<table class="comparison-table">
|
||||
<thead><tr><th>단계</th><th>기간</th><th>주요 마일스톤</th><th>산출물</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><strong>Phase 1: 기획</strong></td><td>4주</td><td>요구사항 정의, 시스템 설계</td><td>PRD, 아키텍처 문서</td></tr>
|
||||
<tr><td><strong>Phase 2: 디자인</strong></td><td>4주</td><td>UI/UX 설계, 디자인 시스템</td><td>Figma 프로토타입</td></tr>
|
||||
<tr><td><strong>Phase 3: MVP 개발</strong></td><td>12주</td><td>채권 관리, 추심 활동 핵심 기능</td><td>Alpha 버전</td></tr>
|
||||
<tr><td><strong>Phase 4: 통합 테스트</strong></td><td>4주</td><td>법적 절차 연동 및 테스트</td><td>Beta 버전</td></tr>
|
||||
<tr><td><strong>Phase 5: 파일럿</strong></td><td>4주</td><td>실사용자 테스트</td><td>개선사항 리스트</td></tr>
|
||||
<tr><td><strong>Phase 6: 정식 출시</strong></td><td>2주</td><td>버그 수정 및 최적화</td><td>v1.0 릴리스</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div style="margin-top: 30px; padding: 25px; background: #fef3c7; border-radius: 16px; border-left: 5px solid #f59e0b; border: 1px solid #fde68a;">
|
||||
<h3 style="margin-top: 0; color: #92400e; font-weight: 700;">예상 리소스</h3>
|
||||
<ul style="color: #78350f;">
|
||||
<li><strong>기획:</strong> PM 1명, 채권추심 전문가 1명</li>
|
||||
<li><strong>디자인:</strong> UI/UX 디자이너 2명</li>
|
||||
<li><strong>백엔드:</strong> 시니어 3명, 주니어 2명</li>
|
||||
<li><strong>프론트엔드:</strong> 웹 2명, 모바일 2명</li>
|
||||
<li><strong>QA:</strong> 테스터 2명</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>성공 지표</h2>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>📊 정량적 KPI</h3>
|
||||
<table class="comparison-table">
|
||||
<thead><tr><th>지표</th><th>목표치</th><th>측정 방법</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><strong>업무 시간 절감</strong></td><td>60% 이상</td><td>추심 활동 소요 시간 비교</td></tr>
|
||||
<tr><td><strong>회수율 향상</strong></td><td>15% 증가</td><td>시스템 도입 전후 회수율 비교</td></tr>
|
||||
<tr><td><strong>사용자 만족도</strong></td><td>NPS 60 이상</td><td>분기별 만족도 조사</td></tr>
|
||||
<tr><td><strong>시스템 가용성</strong></td><td>99.9% 이상</td><td>Uptime 모니터링</td></tr>
|
||||
<tr><td><strong>모바일 사용률</strong></td><td>50% 이상</td><td>모바일 앱 활성 사용자</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>맺음말</h2>
|
||||
<div class="conclusion-box">
|
||||
<h3 style="color: white; margin-top: 0;">채권관리의 새로운 패러다임</h3>
|
||||
<p style="font-size: 1.3em;">자동화로 시간을 절약하고, 체계적 관리로 회수율을 높이며, 법규 준수로 리스크를 최소화하는 채권추심 솔루션</p>
|
||||
</div>
|
||||
<div style="margin-top: 40px;">
|
||||
<h3>핵심 차별점</h3>
|
||||
<div class="company-info">
|
||||
<div class="info-card"><h4>⚡ 완전 자동화</h4><p>채권 등록부터 회수까지 End-to-End 자동화</p></div>
|
||||
<div class="info-card"><h4>📱 모바일 우선</h4><p>현장에서 즉시 추심 활동 기록</p></div>
|
||||
<div class="info-card"><h4>⚖️ 법규 준수</h4><p>공정채권추심법 자동 준수</p></div>
|
||||
<div class="info-card"><h4>🔐 강력한 보안</h4><p>개인정보 암호화 및 접근 제어</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 40px; text-align: center;">
|
||||
<p style="font-size: 1.3em; color: #2563eb; font-weight: 700;"><strong>예상 효과</strong></p>
|
||||
<p style="font-size: 1.1em; margin-top: 20px;">업무 시간 <span style="background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; padding: 5px 10px; border-radius: 8px;">60% 절감</span> | 회수율 <span style="background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; padding: 5px 10px; border-radius: 8px;">15% 향상</span> | 법규 준수 <span style="background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; padding: 5px 10px; border-radius: 8px;">자동 보장</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h1 style="font-size: 4em; margin-bottom: 40px;">감사합니다</h1>
|
||||
<div style="text-align: center;">
|
||||
<p style="font-size: 1.5em; color: #2563eb; margin-bottom: 30px; font-weight: 700;">장기적 채권추심 전략 - SAM 프로젝트</p>
|
||||
<div style="margin-top: 50px; padding: 30px; background: #f1f5f9; border-radius: 16px; border: 1px solid #e2e8f0;">
|
||||
<h3>문의 및 피드백</h3>
|
||||
<p style="margin-top: 20px;">본 계획안에 대한 의견이나 추가 논의가 필요하신 경우</p>
|
||||
<p>프로젝트 팀으로 연락 주시기 바랍니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide-number">
|
||||
<span id="currentSlide">1</span> / <span id="totalSlides">14</span>
|
||||
</div>
|
||||
|
||||
<div class="navigation">
|
||||
<button class="nav-btn" id="prevBtn" onclick="changeSlide(-1)">← 이전</button>
|
||||
<button class="nav-btn" id="nextBtn" onclick="changeSlide(1)">다음 →</button>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
let currentSlide = 1;
|
||||
const totalSlides = 14;
|
||||
let touchStartX = 0;
|
||||
let touchEndX = 0;
|
||||
|
||||
document.getElementById('totalSlides').textContent = totalSlides;
|
||||
|
||||
function showSlide(n) {
|
||||
const slides = document.querySelectorAll('.slide');
|
||||
if (n > totalSlides) currentSlide = 1;
|
||||
if (n < 1) currentSlide = totalSlides;
|
||||
slides.forEach(slide => slide.classList.remove('active'));
|
||||
slides[currentSlide - 1].classList.add('active');
|
||||
document.getElementById('currentSlide').textContent = currentSlide;
|
||||
document.getElementById('prevBtn').disabled = (currentSlide === 1);
|
||||
document.getElementById('nextBtn').disabled = (currentSlide === totalSlides);
|
||||
}
|
||||
|
||||
function changeSlide(direction) {
|
||||
currentSlide += direction;
|
||||
showSlide(currentSlide);
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key === 'ArrowLeft') changeSlide(-1);
|
||||
else if (event.key === 'ArrowRight' || event.key === ' ') { event.preventDefault(); changeSlide(1); }
|
||||
});
|
||||
|
||||
document.addEventListener('touchstart', function(event) { touchStartX = event.changedTouches[0].screenX; });
|
||||
document.addEventListener('touchend', function(event) { touchEndX = event.changedTouches[0].screenX; handleSwipe(); });
|
||||
|
||||
function handleSwipe() {
|
||||
if (touchEndX < touchStartX - 50) changeSlide(1);
|
||||
if (touchEndX > touchStartX + 50) changeSlide(-1);
|
||||
}
|
||||
|
||||
showSlide(currentSlide);
|
||||
</script>
|
||||
@endpush
|
||||
401
resources/views/lab/strategy/douzone.blade.php
Normal file
401
resources/views/lab/strategy/douzone.blade.php
Normal file
@@ -0,0 +1,401 @@
|
||||
@extends('layouts.presentation')
|
||||
|
||||
@section('title', '더존비즈온 기업 분석 리포트')
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
}
|
||||
.chart-container {
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.nav-btn {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.active-btn {
|
||||
background-color: #2563EB;
|
||||
color: white;
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
.product-content {
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
padding-bottom: 2rem;
|
||||
padding-left: 2rem;
|
||||
border-left: 2px solid #D1D5DB;
|
||||
}
|
||||
.timeline-dot {
|
||||
position: absolute;
|
||||
left: -0.5rem;
|
||||
top: 0;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 9999px;
|
||||
background-color: #2563EB;
|
||||
border: 2px solid white;
|
||||
}
|
||||
.scroll-mt-20 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="bg-slate-50 text-slate-800 min-h-screen">
|
||||
<!-- Header -->
|
||||
<header class="bg-white shadow-md sticky top-0 z-40 w-full">
|
||||
<nav class="container mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center h-16">
|
||||
<h1 class="text-2xl font-bold text-blue-600">더존비즈온 (Douzone Bizon)</h1>
|
||||
<div class="hidden md:flex space-x-6">
|
||||
<a href="#overview" class="text-slate-600 hover:text-blue-600 font-medium">기업 개요</a>
|
||||
<a href="#solutions" class="text-slate-600 hover:text-blue-600 font-medium">핵심 솔루션</a>
|
||||
<a href="#history" class="text-slate-600 hover:text-blue-600 font-medium">성장 스토리</a>
|
||||
<a href="#financials" class="text-slate-600 hover:text-blue-600 font-medium">재무 성과</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="container mx-auto p-4 md:p-8 pt-8 md:pt-12">
|
||||
<!-- Section 1: Overview -->
|
||||
<section id="overview" class="mb-16 scroll-mt-20">
|
||||
<h2 class="text-3xl font-bold text-slate-900 mb-4">기업 개요: 대한민국 No.1 ICT 솔루션 기업</h2>
|
||||
<p class="text-lg text-slate-600 mb-8">
|
||||
더존비즈온은 1993년 설립 이래 대한민국 중소·중견기업(SME) 시장을 중심으로 ERP, 클라우드, 그룹웨어 솔루션을 제공해 온 ICT 분야의 선도 기업입니다.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mb-12">
|
||||
<div class="bg-white p-6 rounded-xl shadow-lg text-center">
|
||||
<h3 class="text-sm font-semibold text-slate-500 uppercase">설립일</h3>
|
||||
<p class="text-3xl font-bold text-blue-600 mt-2">1993년</p>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-xl shadow-lg text-center">
|
||||
<h3 class="text-sm font-semibold text-slate-500 uppercase">임직원 수</h3>
|
||||
<p class="text-3xl font-bold text-blue-600 mt-2">약 1,550명</p>
|
||||
<span class="text-xs text-slate-400">(2023년 기준)</span>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-xl shadow-lg text-center">
|
||||
<h3 class="text-sm font-semibold text-slate-500 uppercase">2023년 매출액</h3>
|
||||
<p class="text-3xl font-bold text-blue-600 mt-2">3,535 억원</p>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-xl shadow-lg text-center">
|
||||
<h3 class="text-sm font-semibold text-slate-500 uppercase">본사 위치</h3>
|
||||
<p class="text-3xl font-bold text-blue-600 mt-2">강원도 춘천</p>
|
||||
<span class="text-xs text-slate-400">(더존 ICT 그룹 강촌캠퍼스)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center bg-white p-8 rounded-xl shadow-lg">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-slate-900 mb-4">핵심 사업 영역</h3>
|
||||
<p class="text-slate-600 mb-6">
|
||||
더존비즈온의 사업은 크게 세 축으로 나뉩니다. 기업 경영의 핵심인 ERP 솔루션, 클라우드 기반의 비즈니스 플랫폼, 그리고 협업을 위한 그룹웨어입니다.
|
||||
</p>
|
||||
<ul class="space-y-4">
|
||||
<li class="flex items-center">
|
||||
<span class="flex-shrink-0 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold">1</span>
|
||||
<span class="ml-4 text-lg font-medium text-slate-700">ERP (전사적 자원관리)</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<span class="flex-shrink-0 w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center font-bold">2</span>
|
||||
<span class="ml-4 text-lg font-medium text-slate-700">Cloud Platform (WEHAGO)</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<span class="flex-shrink-0 w-8 h-8 bg-blue-400 text-white rounded-full flex items-center justify-center font-bold">3</span>
|
||||
<span class="ml-4 text-lg font-medium text-slate-700">Groupware (협업 솔루션)</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="chart-container w-full max-w-sm h-80 md:h-96 max-h-[400px]">
|
||||
<canvas id="bizMixChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 2: Solutions -->
|
||||
<section id="solutions" class="mb-16 scroll-mt-20">
|
||||
<h2 class="text-3xl font-bold text-slate-900 mb-4">핵심 솔루션 포트폴리오</h2>
|
||||
<p class="text-lg text-slate-600 mb-8">
|
||||
더존비즈온은 기업의 규모와 필요에 맞는 다양한 솔루션 라인업을 보유하고 있습니다.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap gap-2 mb-6">
|
||||
<button class="nav-btn font-medium py-3 px-5 rounded-lg bg-white shadow active-btn" data-target="content-amaranth">Amaranth 10</button>
|
||||
<button class="nav-btn font-medium py-3 px-5 rounded-lg bg-white shadow" data-target="content-wehago">WEHAGO</button>
|
||||
<button class="nav-btn font-medium py-3 px-5 rounded-lg bg-white shadow" data-target="content-icube">iCUBE</button>
|
||||
<button class="nav-btn font-medium py-3 px-5 rounded-lg bg-white shadow" data-target="content-smarta">Smart A</button>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-8 rounded-xl shadow-lg min-h-[300px]">
|
||||
<div id="content-amaranth" class="product-content">
|
||||
<h3 class="text-2xl font-bold text-blue-600 mb-3">Amaranth 10 (아마란스 10)</h3>
|
||||
<p class="text-sm font-medium text-slate-500 mb-4">차세대 클라우드 네이티브 ERP & 그룹웨어</p>
|
||||
<p class="text-slate-700 mb-4">
|
||||
'Amaranth 10'은 더존비즈온의 최신 주력 제품으로, ERP, 그룹웨어, 문서관리 기능이 하나의 플랫폼에서 완벽하게 통합된 클라우드 네이티브 솔루션입니다.
|
||||
</p>
|
||||
<ul class="list-disc list-inside space-y-2 text-slate-600">
|
||||
<li><strong>특징:</strong> ERP + 그룹웨어 + 문서관리 완전 통합</li>
|
||||
<li><strong>기술:</strong> 클라우드 네이티브, 마이크로서비스 아키텍처(MSA)</li>
|
||||
<li><strong>핵심 기능:</strong> AI 비서, 실시간 경영 분석, 자동 회계 처리</li>
|
||||
<li><strong>대상:</strong> 중견·대기업 (Digital Transformation 추진 기업)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content-wehago" class="product-content hidden opacity-0">
|
||||
<h3 class="text-2xl font-bold text-blue-600 mb-3">WEHAGO (위하고)</h3>
|
||||
<p class="text-sm font-medium text-slate-500 mb-4">중소기업을 위한 비즈니스 플랫폼</p>
|
||||
<p class="text-slate-700 mb-4">
|
||||
'WEHAGO'는 중소기업(SME)이 별도의 시스템 구축 없이도 경영에 필요한 모든 ICT 서비스를 구독형(SaaS)으로 이용할 수 있는 비즈니스 플랫폼입니다.
|
||||
</p>
|
||||
<ul class="list-disc list-inside space-y-2 text-slate-600">
|
||||
<li><strong>특징:</strong> 올인원(All-in-One) SaaS 플랫폼</li>
|
||||
<li><strong>핵심 기능:</strong> 경영관리(ERP), 협업(메일, 메신저), 전자결재, 웹스토리지</li>
|
||||
<li><strong>확장:</strong> 'WEHAGO T' (세무회계사무소용), 'WEHAGO V' (공공용)</li>
|
||||
<li><strong>대상:</strong> 중소기업, 스타트업</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content-icube" class="product-content hidden opacity-0">
|
||||
<h3 class="text-2xl font-bold text-blue-600 mb-3">iCUBE (아이큐브)</h3>
|
||||
<p class="text-sm font-medium text-slate-500 mb-4">중견기업 맞춤형 구축형 ERP</p>
|
||||
<p class="text-slate-700 mb-4">
|
||||
'iCUBE'는 중견기업의 특화된 업무 프로세스를 반영할 수 있는 구축형(On-premise) ERP 솔루션입니다.
|
||||
</p>
|
||||
<ul class="list-disc list-inside space-y-2 text-slate-600">
|
||||
<li><strong>특징:</strong> 강력한 커스터마이징, 안정적인 온프레미스 방식</li>
|
||||
<li><strong>핵심 기능:</strong> 회계, 인사, 물류, 생산 등 전사적 관리</li>
|
||||
<li><strong>연동:</strong> 그룹웨어(Bizbox Alpha)와 완벽 연동</li>
|
||||
<li><strong>대상:</strong> 중견기업 (제조, 유통, 서비스 등)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content-smarta" class="product-content hidden opacity-0">
|
||||
<h3 class="text-2xl font-bold text-blue-600 mb-3">Smart A (스마트 에이)</h3>
|
||||
<p class="text-sm font-medium text-slate-500 mb-4">중소기업 및 세무회계 시장의 표준</p>
|
||||
<p class="text-slate-700 mb-4">
|
||||
'Smart A'는 국내 중소기업 회계 프로그램 시장에서 압도적인 점유율을 차지하고 있는 표준 소프트웨어입니다.
|
||||
</p>
|
||||
<ul class="list-disc list-inside space-y-2 text-slate-600">
|
||||
<li><strong>특징:</strong> 세무회계 시장 표준, 높은 시장 점유율</li>
|
||||
<li><strong>핵심 기능:</strong> 회계관리, 급여관리, 세무신고</li>
|
||||
<li><strong>연동:</strong> 세무회계사무소와의 데이터 연동 (Key-Link)</li>
|
||||
<li><strong>대상:</strong> 중소기업, 세무회계사무소</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 3: History -->
|
||||
<section id="history" class="mb-16 scroll-mt-20">
|
||||
<h2 class="text-3xl font-bold text-slate-900 mb-4">성장 스토리: 도전과 혁신의 역사</h2>
|
||||
<p class="text-lg text-slate-600 mb-8">
|
||||
1993년 '키컴'으로 시작한 더존비즈온은 대한민국 IT 역사와 함께 성장해왔습니다.
|
||||
</p>
|
||||
|
||||
<div class="relative">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<time class="text-sm font-semibold text-blue-600 mb-1">1993년</time>
|
||||
<h3 class="text-xl font-bold text-slate-800">키컴(KICOM) 설립</h3>
|
||||
<p class="text-slate-600">회계 프로그램 '세무사' 출시, 중소기업 회계 S/W 시장 진출</p>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<time class="text-sm font-semibold text-blue-600 mb-1">2000년대 초반</time>
|
||||
<h3 class="text-xl font-bold text-slate-800">시장 지배력 확보</h3>
|
||||
<p class="text-slate-600">iPlus(현 Smart A) 출시, 세무회계 시장 점유율 80% 이상 장악</p>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<time class="text-sm font-semibold text-blue-600 mb-1">2011년</time>
|
||||
<h3 class="text-xl font-bold text-slate-800">'더존비즈온' 사명 변경</h3>
|
||||
<p class="text-slate-600">강촌캠퍼스 이전 및 데이터센터 구축, 본격적인 클라우드 사업 시작</p>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<time class="text-sm font-semibold text-blue-600 mb-1">2010년대 중반</time>
|
||||
<h3 class="text-xl font-bold text-slate-800">클라우드 플랫폼 'WEHAGO' 출시</h3>
|
||||
<p class="text-slate-600">SME를 위한 구독형 비즈니스 플랫폼으로 클라우드 기업 전환 가속화</p>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<time class="text-sm font-semibold text-blue-600 mb-1">2021년</time>
|
||||
<h3 class="text-xl font-bold text-slate-800">차세대 ERP 'Amaranth 10' 출시</h3>
|
||||
<p class="text-slate-600">AI 기반의 클라우드 네이티브 ERP를 출시하며 중견·대기업 시장 공략</p>
|
||||
</div>
|
||||
<div class="timeline-item border-l-transparent">
|
||||
<div class="timeline-dot"></div>
|
||||
<time class="text-sm font-semibold text-blue-600 mb-1">현재</time>
|
||||
<h3 class="text-xl font-bold text-slate-800">AI 및 데이터 기업으로 진화</h3>
|
||||
<p class="text-slate-600">ERP 데이터를 기반으로 한 AI, 핀테크, 빅데이터 등 신사업 영역 확장 중</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 4: Financials -->
|
||||
<section id="financials" class="scroll-mt-20">
|
||||
<h2 class="text-3xl font-bold text-slate-900 mb-4">주요 재무 성과</h2>
|
||||
<p class="text-lg text-slate-600 mb-8">
|
||||
더존비즈온은 클라우드 사업 전환에 성공하며 꾸준하고 안정적인 성장세를 보여주고 있습니다.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div class="bg-white p-6 md:p-8 rounded-xl shadow-lg">
|
||||
<h3 class="text-xl font-bold text-slate-900 mb-4">연도별 매출액 추이 (억원)</h3>
|
||||
<div class="chart-container w-full max-w-2xl h-80 md:h-96 max-h-[400px]">
|
||||
<canvas id="revenueChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-6 md:p-8 rounded-xl shadow-lg">
|
||||
<h3 class="text-xl font-bold text-slate-900 mb-4">연도별 영업이익 추이 (억원)</h3>
|
||||
<div class="chart-container w-full max-w-2xl h-80 md:h-96 max-h-[400px]">
|
||||
<canvas id="profitChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="bg-slate-800 text-slate-300 mt-16 py-8">
|
||||
<div class="container mx-auto px-4 md:px-8 text-center">
|
||||
<p class="text-sm">본 리포트는 더존비즈온에 대한 공개 정보를 기반으로 작성된 분석입니다.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const chartData = {
|
||||
bizMix: {
|
||||
labels: ['ERP', 'Cloud Platform', 'Groupware & 기타'],
|
||||
data: [45, 35, 20],
|
||||
colors: ['#2563EB', '#3B82F6', '#60A5FA']
|
||||
},
|
||||
financials: {
|
||||
labels: ['2020', '2021', '2022', '2023'],
|
||||
revenue: [3065, 3258, 3303, 3535],
|
||||
profit: [767, 701, 510, 707]
|
||||
}
|
||||
};
|
||||
|
||||
const commonChartOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
labels: { color: '#475569', font: { family: "'Noto Sans KR', sans-serif" } }
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Donut Chart
|
||||
const bizMixCtx = document.getElementById('bizMixChart');
|
||||
if (bizMixCtx) {
|
||||
new Chart(bizMixCtx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: chartData.bizMix.labels,
|
||||
datasets: [{
|
||||
label: '사업 비중',
|
||||
data: chartData.bizMix.data,
|
||||
backgroundColor: chartData.bizMix.colors,
|
||||
borderColor: '#FFFFFF',
|
||||
borderWidth: 2
|
||||
}]
|
||||
},
|
||||
options: { ...commonChartOptions, cutout: '60%' }
|
||||
});
|
||||
}
|
||||
|
||||
// Revenue Line Chart
|
||||
const revenueCtx = document.getElementById('revenueChart');
|
||||
if (revenueCtx) {
|
||||
new Chart(revenueCtx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: chartData.financials.labels,
|
||||
datasets: [{
|
||||
label: '매출액 (억원)',
|
||||
data: chartData.financials.revenue,
|
||||
borderColor: '#2563EB',
|
||||
backgroundColor: 'rgba(37, 99, 235, 0.1)',
|
||||
fill: true,
|
||||
tension: 0.3
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
...commonChartOptions,
|
||||
plugins: { ...commonChartOptions.plugins, legend: { display: false } },
|
||||
scales: {
|
||||
y: { beginAtZero: false, ticks: { color: '#475569' }, grid: { color: '#E2E8F0' } },
|
||||
x: { ticks: { color: '#475569' }, grid: { display: false } }
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Profit Bar Chart
|
||||
const profitCtx = document.getElementById('profitChart');
|
||||
if (profitCtx) {
|
||||
new Chart(profitCtx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: chartData.financials.labels,
|
||||
datasets: [{
|
||||
label: '영업이익 (억원)',
|
||||
data: chartData.financials.profit,
|
||||
backgroundColor: '#3B82F6',
|
||||
borderRadius: 4
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
...commonChartOptions,
|
||||
plugins: { ...commonChartOptions.plugins, legend: { display: false } },
|
||||
scales: {
|
||||
y: { beginAtZero: true, ticks: { color: '#475569' }, grid: { color: '#E2E8F0' } },
|
||||
x: { ticks: { color: '#475569' }, grid: { display: false } }
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Product Tab Navigation
|
||||
const productNavBtns = document.querySelectorAll('.nav-btn');
|
||||
const productContents = document.querySelectorAll('.product-content');
|
||||
|
||||
productNavBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const targetId = btn.dataset.target;
|
||||
productNavBtns.forEach(b => b.classList.remove('active-btn'));
|
||||
btn.classList.add('active-btn');
|
||||
|
||||
productContents.forEach(content => {
|
||||
if (content.id === targetId) {
|
||||
content.classList.remove('hidden', 'opacity-0');
|
||||
} else {
|
||||
content.classList.add('hidden', 'opacity-0');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Smooth scroll for nav links
|
||||
const navLinks = document.querySelectorAll('header a[href^="#"]');
|
||||
navLinks.forEach(link => {
|
||||
link.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const targetId = this.getAttribute('href');
|
||||
const targetElement = document.querySelector(targetId);
|
||||
if (targetElement) {
|
||||
targetElement.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
416
resources/views/lab/strategy/knowledge-search.blade.php
Normal file
416
resources/views/lab/strategy/knowledge-search.blade.php
Normal file
@@ -0,0 +1,416 @@
|
||||
@extends('layouts.presentation')
|
||||
|
||||
@section('title', '사내 지식 검색 시스템 제안서')
|
||||
|
||||
@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: #0d9488;
|
||||
}
|
||||
.nav-link.active {
|
||||
background-color: #ccfbf1;
|
||||
color: #115e59;
|
||||
}
|
||||
.content-section {
|
||||
padding-top: 5rem;
|
||||
margin-top: -4rem;
|
||||
}
|
||||
.card {
|
||||
background-color: white;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid #e5e7eb;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
.card:hover {
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="bg-amber-50 text-gray-800 min-h-screen">
|
||||
<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">사내 지식 검색 시스템 제안서</h1>
|
||||
</div>
|
||||
<div class="hidden sm:block sm:ml-6">
|
||||
<div class="flex space-x-4">
|
||||
<a href="#intro" class="nav-link active">요약</a>
|
||||
<a href="#problem" class="nav-link">현황 분석</a>
|
||||
<a href="#solution" class="nav-link">해결 방안</a>
|
||||
<a href="#comparison" class="nav-link">비교 분석</a>
|
||||
<a href="#cost" class="nav-link">비용 분석</a>
|
||||
<a href="#architecture" class="nav-link">아키텍처</a>
|
||||
<a href="#implementation" class="nav-link">구현 계획</a>
|
||||
<a href="#security" class="nav-link">보안</a>
|
||||
<a href="#roadmap" 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: Introduction -->
|
||||
<section id="intro" class="content-section mb-12">
|
||||
<h2 class="text-3xl font-bold text-center mb-6 text-teal-900">요약 (Executive Summary)</h2>
|
||||
<p class="text-lg text-gray-700 mb-8 max-w-3xl mx-auto text-center">
|
||||
GCP 및 기존 기술 스택을 활용한 효율성 극대화 및 비용 절감 전략을 제안합니다.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<div class="card text-center">
|
||||
<div class="text-4xl mb-4 text-teal-600"><i class="fa-solid fa-dollar-sign"></i></div>
|
||||
<h3 class="text-xl font-bold text-teal-800 mb-2">비용 효율성</h3>
|
||||
<p class="text-gray-700">Notion AI에서 GCP로 전환 시 월 운영 비용을 <strong>90% 이상</strong> 절감</p>
|
||||
</div>
|
||||
<div class="card text-center">
|
||||
<div class="text-4xl mb-4 text-teal-600"><i class="fa-solid fa-layer-group"></i></div>
|
||||
<h3 class="text-xl font-bold text-teal-800 mb-2">확장성</h3>
|
||||
<p class="text-gray-700">모든 데이터 사일로(Drive, Jira, Slack, Notion)를 하나의 중앙 검색 엔진으로 통합</p>
|
||||
</div>
|
||||
<div class="card text-center">
|
||||
<div class="text-4xl mb-4 text-teal-600"><i class="fa-solid fa-rocket"></i></div>
|
||||
<h3 class="text-xl font-bold text-teal-800 mb-2">즉시 실현 가능</h3>
|
||||
<p class="text-gray-700">팀이 보유한 <strong>PHP 8.4 (Laravel)</strong> 및 <strong>Next.js</strong> 전문성을 즉시 활용</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 2: Problem -->
|
||||
<section id="problem" 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">
|
||||
현재 시스템의 한계와 개선이 필요한 부분을 분석합니다.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="card">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="text-3xl mr-3 text-teal-600"><i class="fa-solid fa-money-bill-wave"></i></div>
|
||||
<h3 class="text-xl font-bold text-teal-800">비용 비효율성</h3>
|
||||
</div>
|
||||
<p class="text-gray-700">기존 GCP 인프라 비용 외에 Notion AI(인당 $10-16) 비용이 이중으로 발생하고 있습니다. 팀 규모가 커질수록 이 비용은 비효율적으로 증가합니다.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="text-3xl mr-3 text-teal-600"><i class="fa-solid fa-layer-group"></i></div>
|
||||
<h3 class="text-xl font-bold text-teal-800">데이터 사일로 (Silos)</h3>
|
||||
</div>
|
||||
<p class="text-gray-700">Notion AI는 강력하지만 Notion 내부에 국한됩니다. Google Drive의 기술 문서, Jira 티켓, Slack 논의 내용을 통합 검색할 수 없습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 3: Solution -->
|
||||
<section id="solution" class="content-section mb-12">
|
||||
<h2 class="text-3xl font-bold text-center mb-6 text-teal-900">Vertex AI Search 도입 제안</h2>
|
||||
<p class="text-lg text-gray-700 mb-8 max-w-3xl mx-auto text-center">
|
||||
Google Gemini 모델 기반의 완전 관리형 엔터프라이즈 검색 및 대화 플랫폼입니다.
|
||||
</p>
|
||||
|
||||
<div class="card">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="text-center">
|
||||
<div class="text-4xl mb-3 text-teal-600"><i class="fa-solid fa-link"></i></div>
|
||||
<h3 class="text-lg font-bold text-teal-800 mb-2">통합 인덱스</h3>
|
||||
<p class="text-sm text-gray-700">Notion, Drive, Jira, 웹사이트 연결</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-4xl mb-3 text-teal-600"><i class="fa-solid fa-brain"></i></div>
|
||||
<h3 class="text-lg font-bold text-teal-800 mb-2">RAG 지원</h3>
|
||||
<p class="text-sm text-gray-700">단순 링크가 아닌 출처가 포함된 요약 답변 제공</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-4xl mb-3 text-teal-600"><i class="fa-solid fa-shield-halved"></i></div>
|
||||
<h3 class="text-lg font-bold text-teal-800 mb-2">보안</h3>
|
||||
<p class="text-sm text-gray-700">사내 IAM 정책을 준수하는 엔터프라이즈급 보안</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 4: Comparison -->
|
||||
<section id="comparison" class="content-section mb-12">
|
||||
<h2 class="text-3xl font-bold text-center mb-6 text-teal-900">Notion AI vs. GCP Vertex AI 비교</h2>
|
||||
<p class="text-lg text-gray-700 mb-8 max-w-3xl mx-auto text-center">
|
||||
두 솔루션의 주요 차이점을 비교 분석합니다.
|
||||
</p>
|
||||
|
||||
<div class="card overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left">
|
||||
<thead class="bg-teal-50">
|
||||
<tr>
|
||||
<th class="px-6 py-4 text-teal-800 font-bold">기능</th>
|
||||
<th class="px-6 py-4 text-teal-800 font-bold">Notion AI</th>
|
||||
<th class="px-6 py-4 text-teal-800 font-bold">GCP Vertex AI (제안)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
<tr>
|
||||
<td class="px-6 py-4 font-medium text-gray-900">비용 모델</td>
|
||||
<td class="px-6 py-4 text-gray-700">고정 (인당 월 $10-$16)</td>
|
||||
<td class="px-6 py-4 text-gray-700"><strong>사용량 기반 (종량제)</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-6 py-4 font-medium text-gray-900">검색 범위</td>
|
||||
<td class="px-6 py-4 text-gray-700">Notion 페이지만</td>
|
||||
<td class="px-6 py-4 text-gray-700"><strong>전사 데이터</strong> (Notion, Drive, Jira, Slack)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-6 py-4 font-medium text-gray-900">커스터마이징</td>
|
||||
<td class="px-6 py-4 text-gray-700">불가 (블랙박스)</td>
|
||||
<td class="px-6 py-4 text-gray-700"><strong>높음</strong> (UI, 프롬프트, 로직 커스텀 가능)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-6 py-4 font-medium text-gray-900">통합 방식</td>
|
||||
<td class="px-6 py-4 text-gray-700">내장형</td>
|
||||
<td class="px-6 py-4 text-gray-700">자체 개발 필요 (Laravel/Next.js)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 5: Cost Analysis -->
|
||||
<section id="cost" class="content-section mb-12">
|
||||
<h2 class="text-3xl font-bold text-center mb-6 text-teal-900">연간 비용 예측 (10명 기준)</h2>
|
||||
<p class="text-lg text-gray-700 mb-8 max-w-3xl mx-auto text-center">
|
||||
비용 절감 효과를 수치로 확인하세요.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
||||
<div class="card text-center">
|
||||
<div class="text-6xl font-bold text-red-500 mb-2">$1,920</div>
|
||||
<div class="text-xl font-bold text-gray-900 mb-2">Notion AI</div>
|
||||
<div class="text-sm text-gray-600">월 $16/인 기준</div>
|
||||
</div>
|
||||
<div class="card text-center">
|
||||
<div class="text-6xl font-bold text-teal-600 mb-2">~$240</div>
|
||||
<div class="text-xl font-bold text-gray-900 mb-2">GCP Vertex AI</div>
|
||||
<div class="text-sm text-gray-600">월 5,000 쿼리 예상 기준</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card text-center bg-teal-50 border-teal-200">
|
||||
<p class="text-2xl font-bold text-teal-800">기대 효과: 연간 운영 비용 <span class="text-teal-600">85% 이상 절감</span></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 6: Architecture -->
|
||||
<section id="architecture" 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">
|
||||
제안하는 시스템의 전체 구조를 설명합니다.
|
||||
</p>
|
||||
|
||||
<div class="card">
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-start">
|
||||
<div class="flex-shrink-0 w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center text-teal-700 font-bold text-xl mr-4">1</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-teal-800 mb-2">백엔드 (ETL)</h3>
|
||||
<p class="text-gray-700"><strong>PHP 8.4 & Laravel</strong>을 사용하여 Notion/Jira API에서 데이터를 추출하고 Google Cloud Storage에 동기화합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<div class="flex-shrink-0 w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center text-teal-700 font-bold text-xl mr-4">2</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-teal-800 mb-2">AI 엔진</h3>
|
||||
<p class="text-gray-700"><strong>Vertex AI Agent Builder</strong>가 스토리지를 인덱싱하고 Gemini 1.5 Pro를 사용하여 자연어 질의를 처리합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<div class="flex-shrink-0 w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center text-teal-700 font-bold text-xl mr-4">3</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-teal-800 mb-2">프론트엔드 (UI)</h3>
|
||||
<p class="text-gray-700">Cloud Run에서 실행되는 <strong>Next.js</strong> 애플리케이션으로, 빠르고 안전한 검색 인터페이스를 제공합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 7: Implementation -->
|
||||
<section id="implementation" 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">
|
||||
현재 기술 스택을 활용하여 러닝 커브 없이 신속한 배포가 가능합니다.
|
||||
</p>
|
||||
|
||||
<div class="card">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h3 class="text-lg font-bold text-teal-800 mb-2"><span class="text-teal-600">1단계:</span> 데이터 동기화 (Laravel)</h3>
|
||||
<p class="text-gray-700">Notion 페이지를 가져와 Markdown으로 변환하는 스케줄러 구축</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-bold text-teal-800 mb-2"><span class="text-teal-600">2단계:</span> 엔진 설정</h3>
|
||||
<p class="text-gray-700">GCS 버킷을 Vertex AI에 연결하고 GenAI 요약 모델 구성</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-bold text-teal-800 mb-2"><span class="text-teal-600">3단계:</span> UI 구축 (Next.js)</h3>
|
||||
<p class="text-gray-700">Google Client 라이브러리를 활용해 검색창 및 결과 화면 개발</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 8: Security -->
|
||||
<section id="security" 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">
|
||||
기업 환경에 적합한 보안 및 확장성 기능을 제공합니다.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="card text-center">
|
||||
<div class="text-5xl mb-4 text-teal-600"><i class="fa-solid fa-user-shield"></i></div>
|
||||
<h3 class="text-xl font-bold text-teal-800 mb-2">IAM & IAP</h3>
|
||||
<p class="text-gray-700">새로운 비밀번호 불필요. Identity-Aware Proxy를 통한 기존 Google Workspace 계정 연동 인증.</p>
|
||||
</div>
|
||||
<div class="card text-center">
|
||||
<div class="text-5xl mb-4 text-teal-600"><i class="fa-solid fa-server"></i></div>
|
||||
<h3 class="text-xl font-bold text-teal-800 mb-2">서버리스 (Serverless)</h3>
|
||||
<p class="text-gray-700">Cloud Run과 Vertex AI는 미사용 시 0으로 스케일링되어 사용한 만큼만 비용을 지불합니다.</p>
|
||||
</div>
|
||||
<div class="card text-center">
|
||||
<div class="text-5xl mb-4 text-teal-600"><i class="fa-solid fa-file-shield"></i></div>
|
||||
<h3 class="text-xl font-bold text-teal-800 mb-2">데이터 프라이버시</h3>
|
||||
<p class="text-gray-700">사내 데이터는 비공개로 유지됩니다. Vertex AI(Enterprise)는 우리 데이터를 Google 공용 모델 학습에 사용하지 않습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 9: Roadmap -->
|
||||
<section id="roadmap" class="content-section mb-12">
|
||||
<h2 class="text-3xl font-bold text-center mb-6 text-teal-900">3주 출시 계획 (Roadmap)</h2>
|
||||
<p class="text-lg text-gray-700 mb-8 max-w-3xl mx-auto text-center">
|
||||
단계별 구현 일정을 확인하세요.
|
||||
</p>
|
||||
|
||||
<div class="card">
|
||||
<div class="relative">
|
||||
<div class="absolute top-12 left-0 right-0 h-1 bg-gray-200 hidden md:block"></div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 relative">
|
||||
<div class="text-center">
|
||||
<div class="w-12 h-12 bg-teal-600 rounded-full flex items-center justify-center text-white font-bold text-xl mx-auto mb-4 relative z-10">1</div>
|
||||
<h3 class="text-lg font-bold text-teal-800 mb-2">1주차</h3>
|
||||
<p class="text-sm text-gray-700"><strong>POC & ETL</strong><br>Notion API 연결<br>GCS 동기화 검증</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-12 h-12 bg-teal-600 rounded-full flex items-center justify-center text-white font-bold text-xl mx-auto mb-4 relative z-10">2</div>
|
||||
<h3 class="text-lg font-bold text-teal-800 mb-2">2주차</h3>
|
||||
<p class="text-sm text-gray-700"><strong>UI 개발</strong><br>Next.js 프론트엔드<br>검색 로직 통합</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-12 h-12 bg-teal-600 rounded-full flex items-center justify-center text-white font-bold text-xl mx-auto mb-4 relative z-10">3</div>
|
||||
<h3 class="text-lg font-bold text-teal-800 mb-2">3주차</h3>
|
||||
<p class="text-sm text-gray-700"><strong>테스트 및 출시</strong><br>사내 QA<br>Cloud Run 배포</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-12 h-12 bg-teal-600 rounded-full flex items-center justify-center text-white font-bold text-xl mx-auto mb-4 relative z-10">+</div>
|
||||
<h3 class="text-lg font-bold text-teal-800 mb-2">출시 후</h3>
|
||||
<p class="text-sm text-gray-700"><strong>확장 (Expand)</strong><br>Jira & Slack 추가<br>프롬프트 최적화</p>
|
||||
</div>
|
||||
</div>
|
||||
</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 사내 지식 검색 시스템 제안서. GCP 및 기존 기술 스택을 활용한 효율성 극대화 전략.</p>
|
||||
<div class="mt-4 flex justify-center space-x-4 text-2xl text-gray-400">
|
||||
<i class="fa-brands fa-google"></i>
|
||||
<i class="fa-brands fa-laravel"></i>
|
||||
<i class="fa-brands fa-react"></i>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
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'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
initNav();
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
332
resources/views/lab/strategy/kodata-vs-nice.blade.php
Normal file
332
resources/views/lab/strategy/kodata-vs-nice.blade.php
Normal file
@@ -0,0 +1,332 @@
|
||||
@extends('layouts.presentation')
|
||||
|
||||
@section('title', 'KoDATA vs NICE API 중장기 도입 전략')
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
.section {
|
||||
margin-bottom: 50px;
|
||||
padding: 30px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 15px;
|
||||
border-left: 5px solid #1e3c72;
|
||||
}
|
||||
.section h2 {
|
||||
color: #1e3c72;
|
||||
font-size: 2em;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
.section h3 {
|
||||
color: #2a5298;
|
||||
font-size: 1.5em;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 15px;
|
||||
padding-left: 15px;
|
||||
border-left: 3px solid #2a5298;
|
||||
}
|
||||
.section p, .section ul, .section ol {
|
||||
line-height: 1.8;
|
||||
font-size: 1.1em;
|
||||
color: #555;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.section ul, .section ol {
|
||||
padding-left: 30px;
|
||||
}
|
||||
.section li {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.comparison-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 25px 0;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.comparison-table thead {
|
||||
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
|
||||
color: white;
|
||||
}
|
||||
.comparison-table th {
|
||||
padding: 18px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.comparison-table td {
|
||||
padding: 15px 18px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
.comparison-table tbody tr:hover {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
.highlight {
|
||||
background: #fff3cd;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
border-left: 5px solid #ffc107;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.info-box {
|
||||
background: #e7f3ff;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
border-left: 5px solid #2196f3;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.warning-box {
|
||||
background: #ffebee;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
border-left: 5px solid #f44336;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 5px 12px;
|
||||
border-radius: 15px;
|
||||
font-size: 0.85em;
|
||||
font-weight: 600;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.badge.blue { background: #2196f3; color: white; }
|
||||
.badge.green { background: #4caf50; color: white; }
|
||||
.badge.orange { background: #ff9800; color: white; }
|
||||
.badge.red { background: #f44336; color: white; }
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="min-h-screen" style="background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); padding: 20px;">
|
||||
<div class="max-w-7xl mx-auto bg-white rounded-2xl p-12 shadow-2xl">
|
||||
|
||||
<div class="text-center mb-12 border-b-4 border-blue-900 pb-8">
|
||||
<h1 class="text-4xl font-bold text-blue-900 mb-4">KoDATA vs NICE 기업신용등급 API</h1>
|
||||
<p class="text-xl text-gray-600">중장기 도입 전략 및 종합 비교 분석</p>
|
||||
</div>
|
||||
|
||||
<!-- 1. 개요 -->
|
||||
<div class="section">
|
||||
<h2><span>📋</span> 1. 개요</h2>
|
||||
<p>
|
||||
기업 신용평가 정보를 제공하는 API로 국내에서 주요한 두 업체는 <strong>한국평가데이터(KoDATA)</strong>와
|
||||
<strong>NICE평가정보</strong>입니다. 이 분석은 상용 서비스에 기업신용등급 API를 도입하려는 경우
|
||||
두 업체의 가격 정책과 이용 조건을 비교합니다.
|
||||
</p>
|
||||
<div class="info-box">
|
||||
<strong>🎯 분석 목표</strong>
|
||||
<ul>
|
||||
<li>KoDATA와 NICE의 가격 정책 및 과금 구조 비교</li>
|
||||
<li>라이선싱 및 계약 요건 파악</li>
|
||||
<li>기술적 API 제공 방식 및 데이터 범위 검토</li>
|
||||
<li>보안 컴플라이언스 및 기술 요구사항 분석</li>
|
||||
<li>상용 서비스 도입 시 의사결정 기준 제시</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. 회사 개요 -->
|
||||
<div class="section">
|
||||
<h2><span>🏢</span> 2. 회사 개요 및 서비스 배경</h2>
|
||||
|
||||
<h3>2.1 한국평가데이터 (KoDATA)</h3>
|
||||
<p><strong>중소기업 전문 신용평가기관</strong>으로 국내 최대 규모(약 1,370만 개 기업)의 기업 데이터베이스를 보유한 업체입니다.</p>
|
||||
<ul>
|
||||
<li><strong>데이터 규모:</strong> 약 1,370만 개 기업 정보 (국내 최다)</li>
|
||||
<li><strong>전문 분야:</strong> 전체 보유 정보 중 약 75%가 중소기업 관련 정보</li>
|
||||
<li><strong>평가 방식:</strong> 11개 지역 평가본부를 통한 현장 실사 기반 정보 수집</li>
|
||||
<li><strong>신용등급:</strong> KoDATA K Rating 제공</li>
|
||||
<li><strong>공신력:</strong> 금융위원회 인가 신용정보사</li>
|
||||
</ul>
|
||||
|
||||
<h3>2.2 NICE평가정보 (NICE Information Service)</h3>
|
||||
<p><strong>국내 1위 신용정보 회사</strong>로 개인신용 및 기업신용 정보를 모두 다루는 종합 금융인프라 기업입니다.</p>
|
||||
<ul>
|
||||
<li><strong>데이터 규모:</strong> 약 1,000만 개 이상 국내 기업 정보</li>
|
||||
<li><strong>플랫폼:</strong> NICE BizINFO 웹 플랫폼 및 NICE BizAPI 운영</li>
|
||||
<li><strong>신용등급:</strong> CRI등급 등 NICE 자체 기업신용평가 등급</li>
|
||||
<li><strong>부가 서비스:</strong> 조기경보 서비스, 특허정보 등 통합 기업정보</li>
|
||||
<li><strong>공신력:</strong> 금융위원회 인가 신용정보사</li>
|
||||
</ul>
|
||||
|
||||
<div class="highlight">
|
||||
<strong>💡 핵심 차이점</strong><br>
|
||||
• KoDATA: 중소기업 전문, 현장 실사 기반 정보 수집<br>
|
||||
• NICE: 종합 신용정보 회사, 통합 플랫폼 및 부가 서비스 강점
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. 가격 모델 비교 -->
|
||||
<div class="section">
|
||||
<h2><span>💰</span> 3. 가격 모델과 과금 구조</h2>
|
||||
|
||||
<div class="warning-box">
|
||||
<strong>⚠️ 중요 사항</strong><br>
|
||||
두 업체의 API 가격 정책은 <strong>공개적으로 명시되어 있지 않으며</strong>,
|
||||
기관별 개별 계약에 따라 요금이 책정되는 방식입니다.
|
||||
</div>
|
||||
|
||||
<h3>3.1 일반적 과금 구조</h3>
|
||||
<p>양사 모두 다음과 같은 형태로 운영됩니다:</p>
|
||||
<ul>
|
||||
<li><strong>월 구독료</strong> (정액 기본료) + <strong>사용량 기반 추가과금</strong></li>
|
||||
<li>상세 금액은 제휴 협의를 통해 결정</li>
|
||||
<li>대량 이용 시 볼륨 할인 적용 가능</li>
|
||||
</ul>
|
||||
|
||||
<table class="comparison-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>비교 항목</th>
|
||||
<th>KoDATA</th>
|
||||
<th>NICE평가정보</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>가격 공개 여부</strong></td>
|
||||
<td>비공개 (별도 문의)</td>
|
||||
<td>비공개 (계약 협의)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>과금 구조</strong></td>
|
||||
<td>월 구독료 + 사용량 과금 (추정)</td>
|
||||
<td>TR시그니처 정액 후불제</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>기본 건수 포함</strong></td>
|
||||
<td>계약에 따라 상이</td>
|
||||
<td>월 기본 제공 건수 포함</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>볼륨 할인</strong></td>
|
||||
<td>대량 이용 시 할인 가능</td>
|
||||
<td>대량 고객 개별 할인 적용</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 4. API 제공 방식 -->
|
||||
<div class="section">
|
||||
<h2><span>⚙️</span> 4. API 제공 방식 및 기술적 접근</h2>
|
||||
|
||||
<p>두 업체 모두 <strong>RESTful API</strong> 형태로 실시간 기업정보 제공을 지원합니다.</p>
|
||||
|
||||
<table class="comparison-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>기술 항목</th>
|
||||
<th>KoDATA</th>
|
||||
<th>NICE평가정보</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>API 방식</strong></td>
|
||||
<td>REST API</td>
|
||||
<td>REST API</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>응답 형식</strong></td>
|
||||
<td>JSON / XML</td>
|
||||
<td>JSON</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>배치 처리</strong></td>
|
||||
<td>FTP 데이터 덤프</td>
|
||||
<td>FTP 일괄 제공</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>보안</strong></td>
|
||||
<td>HTTPS, 인증키</td>
|
||||
<td>HTTPS, 로그 모니터링</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>트래픽 제어</strong></td>
|
||||
<td>초당 호출 제한</td>
|
||||
<td>Rate Limit</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 5. 데이터 제공 내용 -->
|
||||
<div class="section">
|
||||
<h2><span>📊</span> 5. 데이터 제공 내용 비교</h2>
|
||||
|
||||
<table class="comparison-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>항목</th>
|
||||
<th>KoDATA</th>
|
||||
<th>NICE평가정보</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>데이터 규모</strong></td>
|
||||
<td>약 1,370만 개 기업 (국내 최다)</td>
|
||||
<td>약 1,000만 개 이상 기업</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>신용등급 체계</strong></td>
|
||||
<td>KoDATA K 등급 (자체 평가)</td>
|
||||
<td>CRI등급 (NICE 자체 평가)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>부가 서비스</strong></td>
|
||||
<td>연체정보, K-ETS, 상권분석</td>
|
||||
<td>조기경보, 특허/소송정보, NICE ID</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>글로벌 정보</strong></td>
|
||||
<td>글로벌 기업정보 서비스</td>
|
||||
<td>NICE D&B 5억 개 이상 기업</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 6. 결론 -->
|
||||
<div class="section">
|
||||
<h2><span>🎯</span> 6. 결론 및 의사결정 가이드</h2>
|
||||
|
||||
<div class="info-box">
|
||||
<strong>🔍 KoDATA를 선택해야 하는 경우</strong><br>
|
||||
<ul>
|
||||
<li>중소기업 전문성이 중요한 경우</li>
|
||||
<li>현장 실사 기반 정보가 필요한 경우</li>
|
||||
<li>대기업 협력사 평가 기준 활용</li>
|
||||
<li>최대 규모 데이터베이스 필요: 1,370만 개 기업 정보</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<strong>🔍 NICE를 선택해야 하는 경우</strong><br>
|
||||
<ul>
|
||||
<li>종합 플랫폼이 필요한 경우: BizINFO 통합 기업정보</li>
|
||||
<li>다양한 신용평가 정보 필요: 자체 + 타 기관 등급 통합</li>
|
||||
<li>실시간 모니터링: 조기경보 서비스</li>
|
||||
<li>부가 정보 필요: 특허, 소송, 전자서류 등</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="highlight">
|
||||
<strong>💡 최종 권고사항</strong><br>
|
||||
본 분석 자료를 토대로 KoDATA와 NICE 양사와 직접 상담하여
|
||||
<strong>최신 가격 제안과 계약 조건을 확인</strong>하시기 바랍니다.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
491
resources/views/lab/strategy/labor.blade.php
Normal file
491
resources/views/lab/strategy/labor.blade.php
Normal file
@@ -0,0 +1,491 @@
|
||||
@extends('layouts.presentation')
|
||||
|
||||
@section('title', '장기적 노무전략')
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
::-webkit-scrollbar-track { background: #f1f5f9; }
|
||||
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
|
||||
|
||||
.presentation-container { width: 100%; height: 100vh; position: relative; overflow: hidden; }
|
||||
.slide { width: 100%; height: 100vh; display: none; align-items: flex-start; justify-content: center; padding: 40px; position: absolute; top: 0; left: 0; overflow-y: auto; overflow-x: hidden; }
|
||||
.slide.active { display: flex; animation: slideInRight 0.5s ease-out; }
|
||||
.slide-content { background: rgba(255, 255, 255, 0.98); border-radius: 24px; padding: 60px; max-width: 1200px; width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05); animation: fadeIn 0.8s ease-out; margin: auto 0; border: 1px solid rgba(255, 255, 255, 0.2); }
|
||||
|
||||
h1 { color: #2563eb; font-size: 3em; margin-bottom: 20px; text-align: center; font-weight: 800; }
|
||||
h2 { color: #1e40af; font-size: 2.5em; margin-bottom: 30px; text-align: center; border-bottom: 3px solid #2563eb; padding-bottom: 15px; font-weight: 700; }
|
||||
h3 { color: #2563eb; font-size: 1.8em; margin: 25px 0 15px 0; font-weight: 700; }
|
||||
p, li { font-size: 1.2em; line-height: 1.8; color: #1e293b; margin-bottom: 15px; }
|
||||
ul { margin-left: 30px; }
|
||||
|
||||
.company-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 30px 0; }
|
||||
.info-card { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; padding: 25px; border-radius: 16px; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2); animation: scaleIn 0.5s ease-out; border: 1px solid rgba(255, 255, 255, 0.1); }
|
||||
.info-card h4 { font-size: 1.3em; margin-bottom: 10px; border-bottom: 2px solid rgba(255, 255, 255, 0.3); padding-bottom: 8px; }
|
||||
|
||||
.comparison-table { width: 100%; border-collapse: collapse; margin: 25px 0; font-size: 1em; }
|
||||
.comparison-table th, .comparison-table td { padding: 12px; border: 1px solid #ddd; text-align: left; }
|
||||
.comparison-table thead tr { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; }
|
||||
.comparison-table tbody tr:nth-of-type(even) { background: #f3f3f3; }
|
||||
|
||||
.feature-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin: 20px 0; }
|
||||
.feature-item { background: #f8fafc; padding: 20px; border-radius: 12px; border-left: 4px solid #2563eb; border: 1px solid #e2e8f0; border-left-width: 4px; }
|
||||
|
||||
.conclusion-box { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; padding: 30px; border-radius: 16px; margin: 20px 0; text-align: center; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2); }
|
||||
.conclusion-box p { color: white; }
|
||||
|
||||
.navigation { position: fixed; bottom: 30px; right: 30px; display: flex; gap: 15px; z-index: 1000; }
|
||||
.nav-btn { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; border: none; padding: 15px 30px; border-radius: 9999px; cursor: pointer; font-size: 1.1em; font-weight: 600; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); transition: all 0.3s ease; }
|
||||
.nav-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4); background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%); }
|
||||
.nav-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
.slide-number { position: fixed; bottom: 30px; left: 30px; background: rgba(255, 255, 255, 0.95); padding: 12px 24px; border-radius: 9999px; font-size: 1.1em; color: #2563eb; font-weight: 700; z-index: 1000; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border: 1px solid rgba(37, 99, 235, 0.1); }
|
||||
|
||||
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
|
||||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||
@keyframes scaleIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.slide-content { padding: 30px; }
|
||||
h1 { font-size: 2em; } h2 { font-size: 1.8em; } h3 { font-size: 1.4em; }
|
||||
p, li { font-size: 1em; }
|
||||
.navigation { bottom: 15px; right: 15px; }
|
||||
.nav-btn { padding: 10px 20px; font-size: 0.9em; }
|
||||
.slide-number { bottom: 15px; left: 15px; padding: 8px 15px; font-size: 0.9em; }
|
||||
.comparison-table { font-size: 0.8em; }
|
||||
.comparison-table th, .comparison-table td { padding: 8px; }
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="presentation-container">
|
||||
<!-- Slide 1: Cover -->
|
||||
<div class="slide active">
|
||||
<div class="slide-content">
|
||||
<h1>장기적 노무전략</h1>
|
||||
<h2 style="border: none; color: #2563eb;">통합 노무 관리 시스템 중장기 계획안</h2>
|
||||
<div style="text-align: center; margin-top: 50px;">
|
||||
<p style="font-size: 1.5em; color: #1e40af; font-weight: 600;">기획 · 디자인 · 백엔드 · 프론트엔드</p>
|
||||
<p style="margin-top: 30px; color: #64748b;">2025년 노무 자동화 솔루션 - 중장기 발전 계획</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 2: Project Vision -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>프로젝트 비전</h2>
|
||||
<div class="conclusion-box">
|
||||
<h3 style="color: white; margin-top: 0;">노무 업무의 디지털 혁신</h3>
|
||||
<p style="font-size: 1.3em;">복잡한 노무 업무를 자동화하고, 전략적 인사관리를 지원하는 통합 플랫폼</p>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>핵심 목표</h3>
|
||||
<div class="feature-list">
|
||||
<div class="feature-item"><h4>⏰ 근태 자동화</h4><p>출퇴근 관리 및 휴가 신청 자동 처리</p></div>
|
||||
<div class="feature-item"><h4>💰 급여 계산</h4><p>급여, 수당, 공제 자동 계산 및 명세서 발행</p></div>
|
||||
<div class="feature-item"><h4>🏥 4대보험 관리</h4><p>국민연금, 건강보험, 고용보험, 산재보험 자동 신고</p></div>
|
||||
<div class="feature-item"><h4>🎯 퇴직금 산정</h4><p>퇴직금 자동 계산 및 중간정산 관리</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>주요 타겟 사용자</h3>
|
||||
<ul>
|
||||
<li><strong>중소기업 인사팀:</strong> 효율적인 인사·노무 관리</li>
|
||||
<li><strong>노무사:</strong> 다수 기업 노무 관리 도구</li>
|
||||
<li><strong>스타트업:</strong> 초기 인사 시스템 구축</li>
|
||||
<li><strong>제조업체:</strong> 근로자 근태 및 급여 관리</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 3: Core Values -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>핵심 가치 제안</h2>
|
||||
<div class="company-info">
|
||||
<div class="info-card"><h4>🤖 자동화</h4><p>근태, 급여, 보험 업무 자동 처리</p><p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">월 100시간 노무 업무 절감</p></div>
|
||||
<div class="info-card"><h4>📊 정확성</h4><p>복잡한 급여 및 보험료 계산 오류 방지</p><p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">계산 오류 99% 감소</p></div>
|
||||
<div class="info-card"><h4>⚖️ 법규 준수</h4><p>근로기준법 및 4대보험 법규 자동 반영</p><p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">법적 리스크 최소화</p></div>
|
||||
<div class="info-card"><h4>📱 접근성</h4><p>모바일 앱을 통한 근태 및 급여 확인</p><p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">언제 어디서나 접근</p></div>
|
||||
<div class="info-card"><h4>🔗 통합성</h4><p>회계, ERP 시스템과 연동</p><p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">데이터 이중 입력 제거</p></div>
|
||||
<div class="info-card"><h4>🔐 보안</h4><p>개인정보 암호화 및 접근 제어</p><p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">ISMS 인증 수준 보안</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 4: Planning - Requirements -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>기획: 기능 요구사항</h2>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>1. 근태 관리</h3>
|
||||
<ul>
|
||||
<li>출퇴근 타임카드 및 GPS 기반 위치 확인</li>
|
||||
<li>연차, 반차, 병가 등 휴가 신청 및 승인</li>
|
||||
<li>야근, 특근, 휴일근무 신청 및 집계</li>
|
||||
<li>월별 근태 현황 리포트 및 통계</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>2. 급여 관리</h3>
|
||||
<ul>
|
||||
<li>기본급, 수당, 상여금 자동 계산</li>
|
||||
<li>4대보험료, 소득세 자동 공제</li>
|
||||
<li>급여명세서 자동 생성 및 발송</li>
|
||||
<li>연봉 계약 관리 및 인상률 반영</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>3. 4대보험 관리</h3>
|
||||
<ul>
|
||||
<li>국민연금, 건강보험 자동 계산 및 신고</li>
|
||||
<li>고용보험, 산재보험 신고 자동화</li>
|
||||
<li>보험료 납부 내역 관리</li>
|
||||
<li>취득/상실 신고 자동 처리</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>4. 퇴직금 관리</h3>
|
||||
<ul>
|
||||
<li>퇴직금 자동 계산 (평균임금 기준)</li>
|
||||
<li>퇴직연금 DC/DB 관리</li>
|
||||
<li>중간정산 신청 및 처리</li>
|
||||
<li>퇴직금 지급 내역 기록</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 5: User Scenarios -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>기획: 사용자 시나리오</h2>
|
||||
<div style="background: #dbeafe; padding: 25px; border-radius: 16px; margin: 20px 0; border-left: 5px solid #2563eb; border: 1px solid #bfdbfe;">
|
||||
<h3 style="margin-top: 0; color: #1e40af; font-weight: 700;">시나리오 1: 월급여 처리 프로세스</h3>
|
||||
<ol style="color: #333;">
|
||||
<li><strong>근태 마감:</strong> 월말 근태 데이터 확정 (출퇴근, 휴가, 야근)</li>
|
||||
<li><strong>급여 계산:</strong> 기본급 + 수당 - 공제 자동 계산</li>
|
||||
<li><strong>명세서 생성:</strong> 개인별 급여명세서 자동 생성</li>
|
||||
<li><strong>승인:</strong> 인사 담당자 검토 및 승인</li>
|
||||
<li><strong>발송:</strong> 직원 이메일/모바일 앱 전송</li>
|
||||
<li><strong>지급:</strong> 은행 연동 일괄 이체 또는 이체 파일 생성</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div style="background: #e0e7ff; padding: 25px; border-radius: 16px; margin: 20px 0; border-left: 5px solid #1e40af; border: 1px solid #c7d2fe;">
|
||||
<h3 style="margin-top: 0; color: #1e40af; font-weight: 700;">시나리오 2: 신규 직원 입사 처리</h3>
|
||||
<ol style="color: #333;">
|
||||
<li><strong>정보 등록:</strong> 인적사항, 연봉, 계약 조건 입력</li>
|
||||
<li><strong>4대보험 취득:</strong> 자동으로 취득 신고 데이터 생성</li>
|
||||
<li><strong>계정 생성:</strong> 근태/급여 시스템 계정 자동 생성</li>
|
||||
<li><strong>승인 절차:</strong> 부서장 승인 워크플로우</li>
|
||||
<li><strong>온보딩:</strong> 시스템 사용 가이드 자동 발송</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div style="background: #dbeafe; padding: 25px; border-radius: 16px; margin: 20px 0; border-left: 5px solid #2563eb; border: 1px solid #bfdbfe;">
|
||||
<h3 style="margin-top: 0; color: #1e40af; font-weight: 700;">시나리오 3: 퇴직 처리</h3>
|
||||
<ol style="color: #333;">
|
||||
<li><strong>퇴직 신청:</strong> 퇴직 예정일 및 사유 입력</li>
|
||||
<li><strong>퇴직금 계산:</strong> 평균임금 자동 산정 및 퇴직금 계산</li>
|
||||
<li><strong>정산 처리:</strong> 마지막 급여 및 퇴직금 정산</li>
|
||||
<li><strong>4대보험 상실:</strong> 자동 상실 신고</li>
|
||||
<li><strong>문서 발급:</strong> 퇴직증명서, 경력증명서 발급</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 6: Advanced Features -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>기획: 고급 기능</h2>
|
||||
<div class="feature-list">
|
||||
<div class="feature-item"><h4>📱 모바일 앱</h4><p>출퇴근 타임카드, 급여 조회, 휴가 신청</p><p style="font-size: 0.9em; margin-top: 5px; color: #666;">iOS/Android 지원</p></div>
|
||||
<div class="feature-item"><h4>🔔 알림 시스템</h4><p>급여일, 보험료 납부일, 계약 갱신 알림</p><p style="font-size: 0.9em; margin-top: 5px; color: #666;">푸시, 이메일, SMS</p></div>
|
||||
<div class="feature-item"><h4>📊 인사 대시보드</h4><p>직원 현황, 급여 통계, 퇴사율 분석</p><p style="font-size: 0.9em; margin-top: 5px; color: #666;">실시간 인사 KPI</p></div>
|
||||
<div class="feature-item"><h4>📑 전자문서</h4><p>근로계약서, 급여명세서 전자서명</p><p style="font-size: 0.9em; margin-top: 5px; color: #666;">법적 효력 보장</p></div>
|
||||
<div class="feature-item"><h4>🔗 ERP 연동</h4><p>회계 시스템 자동 연동</p><p style="font-size: 0.9em; margin-top: 5px; color: #666;">급여 → 회계 자동 전표</p></div>
|
||||
<div class="feature-item"><h4>🤖 AI 추천</h4><p>급여 이상 패턴 감지 및 알림</p><p style="font-size: 0.9em; margin-top: 5px; color: #666;">오류 사전 방지</p></div>
|
||||
</div>
|
||||
<div style="margin-top: 30px; padding: 25px; background: #fef3c7; border-radius: 16px; border-left: 5px solid #f59e0b; border: 1px solid #fde68a;">
|
||||
<h3 style="margin-top: 0; color: #92400e; font-weight: 700;">컴플라이언스 기능</h3>
|
||||
<ul style="color: #78350f;">
|
||||
<li><strong>근로기준법 준수:</strong> 근로시간, 연차, 최저임금 자동 검증</li>
|
||||
<li><strong>개인정보보호법:</strong> 직원 개인정보 암호화 및 접근 로그</li>
|
||||
<li><strong>4대보험 신고:</strong> 공단 연동 자동 신고</li>
|
||||
<li><strong>감사 추적:</strong> 모든 급여 및 인사 변경 이력 기록</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 7: Design - UI/UX Strategy -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>디자인: UI/UX 전략</h2>
|
||||
<div class="conclusion-box">
|
||||
<h3 style="color: white; margin-top: 0;">디자인 철학</h3>
|
||||
<p style="font-size: 1.2em;">"복잡한 노무를 간단하게, 직원 중심으로"</p>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>핵심 디자인 원칙</h3>
|
||||
<div class="feature-list">
|
||||
<div class="feature-item"><h4>👤 사용자 중심</h4><p>직원과 관리자 모두 쉽게 사용</p></div>
|
||||
<div class="feature-item"><h4>⚡ 빠른 처리</h4><p>최소 클릭으로 업무 완료</p></div>
|
||||
<div class="feature-item"><h4>📱 모바일 우선</h4><p>스마트폰에서 주요 기능 사용</p></div>
|
||||
<div class="feature-item"><h4>🔐 보안 강조</h4><p>개인정보 보호 시각화</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>주요 화면 구성</h3>
|
||||
<ul>
|
||||
<li><strong>관리자 대시보드:</strong> 직원 현황, 급여 통계, 보험료 현황</li>
|
||||
<li><strong>직원 대시보드:</strong> 내 급여, 연차 현황, 출퇴근 기록</li>
|
||||
<li><strong>근태 관리:</strong> 출퇴근 타임카드, 휴가 신청, 야근 신청</li>
|
||||
<li><strong>급여 관리:</strong> 급여 계산, 명세서 발행, 지급 내역</li>
|
||||
<li><strong>4대보험:</strong> 보험료 현황, 신고 내역, 납부 관리</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 8: Backend - Architecture -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>백엔드: 시스템 아키텍처</h2>
|
||||
<div class="conclusion-box">
|
||||
<h3 style="color: white; margin-top: 0;">마이크로서비스 아키텍처</h3>
|
||||
<p style="font-size: 1.2em;">확장 가능하고 안정적인 노무 관리 시스템</p>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>주요 서비스 구성</h3>
|
||||
<div class="company-info">
|
||||
<div class="info-card"><h4>👤 인사 정보 서비스</h4><p>직원 정보 관리 및 조직도</p></div>
|
||||
<div class="info-card"><h4>⏰ 근태 서비스</h4><p>출퇴근, 휴가, 야근 관리</p></div>
|
||||
<div class="info-card"><h4>💰 급여 계산 엔진</h4><p>급여, 수당, 공제 자동 계산</p></div>
|
||||
<div class="info-card"><h4>🏥 보험 서비스</h4><p>4대보험 계산 및 신고</p></div>
|
||||
<div class="info-card"><h4>🎯 퇴직금 서비스</h4><p>퇴직금 계산 및 정산</p></div>
|
||||
<div class="info-card"><h4>🔔 알림 서비스</h4><p>푸시, 이메일, SMS 발송</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>기술 스택</h3>
|
||||
<table class="comparison-table">
|
||||
<thead><tr><th>레이어</th><th>기술</th><th>목적</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><strong>Application</strong></td><td>Node.js (NestJS) / Python (FastAPI)</td><td>비즈니스 로직 처리</td></tr>
|
||||
<tr><td><strong>Database</strong></td><td>PostgreSQL</td><td>관계형 데이터 저장</td></tr>
|
||||
<tr><td><strong>Cache</strong></td><td>Redis</td><td>세션 및 계산 결과 캐싱</td></tr>
|
||||
<tr><td><strong>Message Queue</strong></td><td>RabbitMQ</td><td>비동기 처리 (급여 계산 등)</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 9: Database Design -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>백엔드: 데이터베이스 설계</h2>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>핵심 테이블 구조</h3>
|
||||
<table class="comparison-table">
|
||||
<thead><tr><th>테이블명</th><th>주요 필드</th><th>관계</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><strong>employees</strong></td><td>id, name, dept, position, hire_date, salary</td><td>1:N attendance, payroll</td></tr>
|
||||
<tr><td><strong>attendance</strong></td><td>id, employee_id, date, check_in, check_out</td><td>N:1 employees</td></tr>
|
||||
<tr><td><strong>leave_requests</strong></td><td>id, employee_id, type, start_date, end_date</td><td>N:1 employees</td></tr>
|
||||
<tr><td><strong>payroll</strong></td><td>id, employee_id, period, base_pay, deductions</td><td>N:1 employees</td></tr>
|
||||
<tr><td><strong>insurance</strong></td><td>id, employee_id, type, premium, period</td><td>N:1 employees</td></tr>
|
||||
<tr><td><strong>severance_pay</strong></td><td>id, employee_id, years, avg_wage, amount</td><td>N:1 employees</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>데이터 보안 전략</h3>
|
||||
<ul>
|
||||
<li><strong>암호화:</strong> 주민번호, 계좌번호 AES-256 암호화</li>
|
||||
<li><strong>접근 제어:</strong> 역할 기반 접근 제어 (RBAC)</li>
|
||||
<li><strong>감사 로그:</strong> 모든 급여 및 인사 변경 이력 기록</li>
|
||||
<li><strong>백업:</strong> 일일 자동 백업 및 복구 테스트</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 10: Frontend - Tech Stack -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>프론트엔드: 기술 스택</h2>
|
||||
<div class="conclusion-box">
|
||||
<h3 style="color: white; margin-top: 0;">현대적인 프론트엔드 아키텍처</h3>
|
||||
<p style="font-size: 1.2em;">React 18 + TypeScript 기반 SPA & 모바일 앱</p>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>웹 애플리케이션</h3>
|
||||
<table class="comparison-table">
|
||||
<thead><tr><th>카테고리</th><th>기술</th><th>목적</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><strong>프레임워크</strong></td><td>React 18 + TypeScript</td><td>컴포넌트 기반 UI 구축</td></tr>
|
||||
<tr><td><strong>상태 관리</strong></td><td>Zustand / React Query</td><td>전역 상태 및 서버 상태 관리</td></tr>
|
||||
<tr><td><strong>UI 라이브러리</strong></td><td>Material-UI (MUI)</td><td>디자인 시스템 구현</td></tr>
|
||||
<tr><td><strong>차트</strong></td><td>Recharts</td><td>통계 데이터 시각화</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>모바일 애플리케이션</h3>
|
||||
<table class="comparison-table">
|
||||
<thead><tr><th>카테고리</th><th>기술</th><th>목적</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><strong>프레임워크</strong></td><td>React Native</td><td>크로스 플랫폼 앱 개발</td></tr>
|
||||
<tr><td><strong>내비게이션</strong></td><td>React Navigation</td><td>화면 전환 관리</td></tr>
|
||||
<tr><td><strong>푸시 알림</strong></td><td>Firebase Cloud Messaging</td><td>실시간 알림 발송</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 11: Development Roadmap -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>개발 로드맵</h2>
|
||||
<table class="comparison-table">
|
||||
<thead><tr><th>단계</th><th>기간</th><th>주요 마일스톤</th><th>산출물</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><strong>Phase 1: 기획</strong></td><td>4주</td><td>요구사항 정의, 시스템 설계</td><td>PRD, 아키텍처 문서</td></tr>
|
||||
<tr><td><strong>Phase 2: 디자인</strong></td><td>4주</td><td>UI/UX 설계, 디자인 시스템</td><td>Figma 프로토타입</td></tr>
|
||||
<tr><td><strong>Phase 3: MVP 개발</strong></td><td>12주</td><td>근태, 급여 핵심 기능 구현</td><td>Alpha 버전</td></tr>
|
||||
<tr><td><strong>Phase 4: 통합 테스트</strong></td><td>4주</td><td>4대보험 연동 및 테스트</td><td>Beta 버전</td></tr>
|
||||
<tr><td><strong>Phase 5: 파일럿</strong></td><td>4주</td><td>실사용자 테스트</td><td>개선사항 리스트</td></tr>
|
||||
<tr><td><strong>Phase 6: 정식 출시</strong></td><td>2주</td><td>버그 수정 및 최적화</td><td>v1.0 릴리스</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div style="margin-top: 30px; padding: 25px; background: #fef3c7; border-radius: 16px; border-left: 5px solid #f59e0b; border: 1px solid #fde68a;">
|
||||
<h3 style="margin-top: 0; color: #92400e; font-weight: 700;">예상 리소스</h3>
|
||||
<ul style="color: #78350f;">
|
||||
<li><strong>기획:</strong> PM 1명, 노무 전문가 1명</li>
|
||||
<li><strong>디자인:</strong> UI/UX 디자이너 2명</li>
|
||||
<li><strong>백엔드:</strong> 시니어 3명, 주니어 2명</li>
|
||||
<li><strong>프론트엔드:</strong> 웹 2명, 모바일 2명</li>
|
||||
<li><strong>QA:</strong> 테스터 2명</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 12: Success Metrics -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>성공 지표</h2>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>📊 정량적 KPI</h3>
|
||||
<table class="comparison-table">
|
||||
<thead><tr><th>지표</th><th>목표치</th><th>측정 방법</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><strong>업무 시간 절감</strong></td><td>70% 이상</td><td>급여 처리 소요 시간 비교</td></tr>
|
||||
<tr><td><strong>계산 오류율</strong></td><td>99% 감소</td><td>급여 및 보험료 오류 건수</td></tr>
|
||||
<tr><td><strong>사용자 만족도</strong></td><td>NPS 60 이상</td><td>분기별 만족도 조사</td></tr>
|
||||
<tr><td><strong>시스템 가용성</strong></td><td>99.9% 이상</td><td>Uptime 모니터링</td></tr>
|
||||
<tr><td><strong>모바일 사용률</strong></td><td>60% 이상</td><td>모바일 앱 활성 사용자</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 13: Conclusion -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>맺음말</h2>
|
||||
<div class="conclusion-box">
|
||||
<h3 style="color: white; margin-top: 0;">노무 관리의 새로운 패러다임</h3>
|
||||
<p style="font-size: 1.3em;">자동화로 시간을 절약하고, 정확성으로 신뢰를 높이며, 통합으로 효율을 극대화하는 노무 솔루션</p>
|
||||
</div>
|
||||
<div style="margin-top: 40px;">
|
||||
<h3>핵심 차별점</h3>
|
||||
<div class="company-info">
|
||||
<div class="info-card"><h4>⚡ 완전 자동화</h4><p>근태부터 급여까지 End-to-End 자동화</p></div>
|
||||
<div class="info-card"><h4>📱 모바일 우선</h4><p>언제 어디서나 근태 및 급여 확인</p></div>
|
||||
<div class="info-card"><h4>⚖️ 법규 준수</h4><p>근로기준법 및 4대보험 자동 반영</p></div>
|
||||
<div class="info-card"><h4>🔐 강력한 보안</h4><p>개인정보 암호화 및 접근 제어</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 40px; text-align: center;">
|
||||
<p style="font-size: 1.3em; color: #2563eb; font-weight: 700;"><strong>예상 효과</strong></p>
|
||||
<p style="font-size: 1.1em; margin-top: 20px;">업무 시간 <span style="background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; padding: 5px 10px; border-radius: 8px;">70% 절감</span> | 계산 오류 <span style="background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; padding: 5px 10px; border-radius: 8px;">99% 감소</span> | 법규 준수 <span style="background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; padding: 5px 10px; border-radius: 8px;">자동 보장</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 14: Thank You -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h1 style="font-size: 4em; margin-bottom: 40px;">감사합니다</h1>
|
||||
<div style="text-align: center;">
|
||||
<p style="font-size: 1.5em; color: #2563eb; margin-bottom: 30px; font-weight: 700;">장기적 노무전략 - 중장기 계획안</p>
|
||||
<div style="margin-top: 50px; padding: 30px; background: #f1f5f9; border-radius: 16px; border: 1px solid #e2e8f0;">
|
||||
<h3>문의 및 피드백</h3>
|
||||
<p style="margin-top: 20px;">본 계획안에 대한 의견이나 추가 논의가 필요하신 경우</p>
|
||||
<p>프로젝트 팀으로 연락 주시기 바랍니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide-number">
|
||||
<span id="currentSlide">1</span> / <span id="totalSlides">14</span>
|
||||
</div>
|
||||
|
||||
<div class="navigation">
|
||||
<button class="nav-btn" id="prevBtn" onclick="changeSlide(-1)">← 이전</button>
|
||||
<button class="nav-btn" id="nextBtn" onclick="changeSlide(1)">다음 →</button>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
let currentSlide = 1;
|
||||
const totalSlides = 14;
|
||||
let touchStartX = 0;
|
||||
let touchEndX = 0;
|
||||
|
||||
document.getElementById('totalSlides').textContent = totalSlides;
|
||||
|
||||
function showSlide(n) {
|
||||
const slides = document.querySelectorAll('.slide');
|
||||
if (n > totalSlides) currentSlide = 1;
|
||||
if (n < 1) currentSlide = totalSlides;
|
||||
slides.forEach(slide => slide.classList.remove('active'));
|
||||
slides[currentSlide - 1].classList.add('active');
|
||||
document.getElementById('currentSlide').textContent = currentSlide;
|
||||
document.getElementById('prevBtn').disabled = (currentSlide === 1);
|
||||
document.getElementById('nextBtn').disabled = (currentSlide === totalSlides);
|
||||
}
|
||||
|
||||
function changeSlide(direction) {
|
||||
currentSlide += direction;
|
||||
showSlide(currentSlide);
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key === 'ArrowLeft') changeSlide(-1);
|
||||
else if (event.key === 'ArrowRight' || event.key === ' ') { event.preventDefault(); changeSlide(1); }
|
||||
});
|
||||
|
||||
document.addEventListener('touchstart', function(event) { touchStartX = event.changedTouches[0].screenX; });
|
||||
document.addEventListener('touchend', function(event) { touchEndX = event.changedTouches[0].screenX; handleSwipe(); });
|
||||
|
||||
function handleSwipe() {
|
||||
if (touchEndX < touchStartX - 50) changeSlide(1);
|
||||
if (touchEndX > touchStartX + 50) changeSlide(-1);
|
||||
}
|
||||
|
||||
showSlide(currentSlide);
|
||||
</script>
|
||||
@endpush
|
||||
106
resources/views/lab/strategy/mrp-overseas.blade.php
Normal file
106
resources/views/lab/strategy/mrp-overseas.blade.php
Normal file
@@ -0,0 +1,106 @@
|
||||
@extends('layouts.presentation')
|
||||
|
||||
@section('title', '해외 MRP 시스템 분석')
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
.placeholder-container {
|
||||
min-height: 70vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.placeholder-icon {
|
||||
font-size: 5rem;
|
||||
margin-bottom: 2rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.placeholder-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #1e3a8a;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.placeholder-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: #64748b;
|
||||
max-width: 500px;
|
||||
text-align: center;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.placeholder-badge {
|
||||
margin-top: 2rem;
|
||||
padding: 0.5rem 1.5rem;
|
||||
background: linear-gradient(135deg, #10b981, #059669);
|
||||
color: white;
|
||||
border-radius: 9999px;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="min-h-screen bg-gradient-to-br from-emerald-50 to-teal-100">
|
||||
<div class="container mx-auto px-4 py-12">
|
||||
|
||||
<div class="placeholder-container">
|
||||
<div class="placeholder-icon">🏭</div>
|
||||
<h1 class="placeholder-title">해외 MRP 시스템 분석</h1>
|
||||
<p class="placeholder-subtitle">
|
||||
글로벌 MRP(Material Requirements Planning) 솔루션 비교와
|
||||
해외 제조 기업의 도입 사례를 분석합니다.
|
||||
</p>
|
||||
<div class="placeholder-badge">Coming Soon</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-4xl mx-auto mt-12">
|
||||
<div class="bg-white rounded-2xl shadow-lg p-8">
|
||||
<h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center">
|
||||
<span class="mr-3">📋</span>
|
||||
예정 콘텐츠
|
||||
</h2>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div class="p-4 bg-emerald-50 rounded-lg">
|
||||
<h3 class="font-semibold text-emerald-800 mb-2">글로벌 MRP 솔루션</h3>
|
||||
<ul class="text-sm text-gray-600 space-y-1">
|
||||
<li>• SAP S/4HANA</li>
|
||||
<li>• Oracle Cloud SCM</li>
|
||||
<li>• Microsoft Dynamics 365</li>
|
||||
<li>• Infor CloudSuite</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="p-4 bg-blue-50 rounded-lg">
|
||||
<h3 class="font-semibold text-blue-800 mb-2">기능 비교</h3>
|
||||
<ul class="text-sm text-gray-600 space-y-1">
|
||||
<li>• 수요 예측 알고리즘</li>
|
||||
<li>• 재고 최적화 기능</li>
|
||||
<li>• 공급망 가시성</li>
|
||||
<li>• AI/ML 통합 수준</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="p-4 bg-purple-50 rounded-lg">
|
||||
<h3 class="font-semibold text-purple-800 mb-2">도입 사례</h3>
|
||||
<ul class="text-sm text-gray-600 space-y-1">
|
||||
<li>• 자동차 산업 적용 사례</li>
|
||||
<li>• 전자 제조업 도입 효과</li>
|
||||
<li>• 중소기업 맞춤 솔루션</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="p-4 bg-orange-50 rounded-lg">
|
||||
<h3 class="font-semibold text-orange-800 mb-2">비용 분석</h3>
|
||||
<ul class="text-sm text-gray-600 space-y-1">
|
||||
<li>• 라이선스 모델 비교</li>
|
||||
<li>• 구현 비용 산정</li>
|
||||
<li>• TCO(총소유비용) 분석</li>
|
||||
<li>• ROI 기대 효과</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
107
resources/views/lab/strategy/qa-solution.blade.php
Normal file
107
resources/views/lab/strategy/qa-solution.blade.php
Normal file
@@ -0,0 +1,107 @@
|
||||
@extends('layouts.presentation')
|
||||
|
||||
@section('title', 'QA 솔루션 비교')
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
.placeholder-container {
|
||||
min-height: 70vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.placeholder-icon {
|
||||
font-size: 5rem;
|
||||
margin-bottom: 2rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.placeholder-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #1e3a8a;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.placeholder-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: #64748b;
|
||||
max-width: 500px;
|
||||
text-align: center;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.placeholder-badge {
|
||||
margin-top: 2rem;
|
||||
padding: 0.5rem 1.5rem;
|
||||
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
|
||||
color: white;
|
||||
border-radius: 9999px;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="min-h-screen bg-gradient-to-br from-violet-50 to-purple-100">
|
||||
<div class="container mx-auto px-4 py-12">
|
||||
|
||||
<div class="placeholder-container">
|
||||
<div class="placeholder-icon">🔍</div>
|
||||
<h1 class="placeholder-title">QA 솔루션 비교</h1>
|
||||
<p class="placeholder-subtitle">
|
||||
소프트웨어 품질 보증(QA) 도구 및 테스팅 플랫폼에 대한
|
||||
종합 비교 분석 자료가 준비 중입니다.
|
||||
</p>
|
||||
<div class="placeholder-badge">Coming Soon</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-4xl mx-auto mt-12">
|
||||
<div class="bg-white rounded-2xl shadow-lg p-8">
|
||||
<h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center">
|
||||
<span class="mr-3">📋</span>
|
||||
예정 콘텐츠
|
||||
</h2>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div class="p-4 bg-violet-50 rounded-lg">
|
||||
<h3 class="font-semibold text-violet-800 mb-2">테스트 자동화 도구</h3>
|
||||
<ul class="text-sm text-gray-600 space-y-1">
|
||||
<li>• Selenium / Playwright</li>
|
||||
<li>• Cypress / Puppeteer</li>
|
||||
<li>• Appium (모바일)</li>
|
||||
<li>• JMeter / k6 (성능)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="p-4 bg-blue-50 rounded-lg">
|
||||
<h3 class="font-semibold text-blue-800 mb-2">테스트 관리 플랫폼</h3>
|
||||
<ul class="text-sm text-gray-600 space-y-1">
|
||||
<li>• TestRail</li>
|
||||
<li>• Zephyr Scale</li>
|
||||
<li>• qTest</li>
|
||||
<li>• PractiTest</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="p-4 bg-green-50 rounded-lg">
|
||||
<h3 class="font-semibold text-green-800 mb-2">CI/CD 통합</h3>
|
||||
<ul class="text-sm text-gray-600 space-y-1">
|
||||
<li>• GitHub Actions 연동</li>
|
||||
<li>• Jenkins 파이프라인</li>
|
||||
<li>• GitLab CI 통합</li>
|
||||
<li>• Azure DevOps 연계</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="p-4 bg-orange-50 rounded-lg">
|
||||
<h3 class="font-semibold text-orange-800 mb-2">AI 기반 QA</h3>
|
||||
<ul class="text-sm text-gray-600 space-y-1">
|
||||
<li>• 자동 테스트 생성</li>
|
||||
<li>• 시각적 회귀 테스트</li>
|
||||
<li>• 지능형 테스트 유지보수</li>
|
||||
<li>• 결함 예측 분석</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
479
resources/views/lab/strategy/rag-startups.blade.php
Normal file
479
resources/views/lab/strategy/rag-startups.blade.php
Normal file
@@ -0,0 +1,479 @@
|
||||
@extends('layouts.presentation')
|
||||
|
||||
@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">
|
||||
<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 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>© 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
|
||||
341
resources/views/lab/strategy/sales-strategy.blade.php
Normal file
341
resources/views/lab/strategy/sales-strategy.blade.php
Normal file
@@ -0,0 +1,341 @@
|
||||
@extends('layouts.presentation')
|
||||
|
||||
@section('title', 'CodeBridgeX SAM 영업전략')
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
.slide {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
}
|
||||
.slide.active {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
}
|
||||
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
||||
.animate-fadeIn { animation: fadeIn 0.8s forwards; }
|
||||
@keyframes bounce { 0%, 100% { transform: translateY(-5%); } 50% { transform: translateY(0); } }
|
||||
.animate-bounce-custom { animation: bounce 2s infinite; }
|
||||
::-webkit-scrollbar { width: 8px; }
|
||||
::-webkit-scrollbar-track { background: #f1f1f1; }
|
||||
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="bg-gray-100 min-h-screen">
|
||||
<div class="flex items-center justify-center min-h-screen py-8">
|
||||
<div id="deck-container" class="w-full max-w-6xl h-[700px] relative bg-slate-900 rounded-xl shadow-2xl overflow-hidden border border-slate-200/20 text-white transition-colors duration-700">
|
||||
|
||||
<!-- Watermark -->
|
||||
<div class="absolute top-8 left-8 text-sm font-bold tracking-widest opacity-50 flex items-center gap-2 z-50">
|
||||
CodeBridgeX : SAM
|
||||
</div>
|
||||
|
||||
<!-- Slides Wrapper -->
|
||||
<div id="slides-wrapper" class="w-full h-full relative">
|
||||
|
||||
<!-- Slide 0: Cover -->
|
||||
<div class="slide active w-full h-full flex-col items-center justify-center text-center px-4" data-bg="bg-slate-900" data-text="text-white">
|
||||
<h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight animate-fadeIn">
|
||||
대표님, 어제는<br>편안히 주무셨습니까?
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl text-slate-300 font-light max-w-3xl mb-12 animate-fadeIn" style="animation-delay: 0.2s">
|
||||
직원들은 절대 모르는, 오직 대표님만의 '20가지' 무거운 짐
|
||||
</p>
|
||||
<button onclick="nextSlide()" class="px-8 py-3 bg-red-600 hover:bg-red-700 text-white rounded-full font-bold flex items-center gap-2 transition-all transform hover:scale-105 animate-fadeIn" style="animation-delay: 0.4s">
|
||||
시작하기 →
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Slide 1: Pain Points -->
|
||||
<div class="slide w-full h-full flex-col justify-center px-4 md:px-12" data-bg="bg-red-50" data-text="text-slate-900">
|
||||
<div class="text-center mb-8">
|
||||
<h2 class="text-3xl font-bold text-slate-800 mb-2">혹시 이런 상황, 겪어보지 않으셨나요?</h2>
|
||||
<p class="text-slate-600">CEO를 괴롭히는 20가지 Pain Points</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 overflow-y-auto max-h-[400px] p-2" id="pain-grid">
|
||||
<!-- Items will be injected by JS -->
|
||||
</div>
|
||||
<div class="mt-8 text-center">
|
||||
<p class="text-red-600 font-bold animate-pulse">이 중 하나라도 해당된다면, 다음 장을 넘겨주세요.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 2: Solution Intro -->
|
||||
<div class="slide w-full h-full flex-col items-center justify-center text-center px-4" data-bg="bg-blue-600" data-text="text-white">
|
||||
<h2 class="text-2xl md:text-4xl font-light mb-4 animate-fadeIn">이 모든 골치 아픈 문제들...</h2>
|
||||
<h3 class="text-3xl md:text-5xl font-bold mb-12 animate-fadeIn" style="animation-delay: 0.2s">이제 '사람' 말고 '시스템'에게 맡기십시오.</h3>
|
||||
<div class="bg-white text-blue-600 px-12 py-8 rounded-2xl shadow-2xl transform hover:scale-105 transition-transform duration-500 animate-fadeIn" style="animation-delay: 0.4s">
|
||||
<h1 class="text-6xl md:text-8xl font-black tracking-tighter mb-2">S.A.M</h1>
|
||||
<p class="text-lg md:text-xl font-medium tracking-widest uppercase text-slate-500">Smart Automation Management</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 3: Strategy 1 (Money) -->
|
||||
<div class="slide w-full h-full flex-col md:flex-row items-center justify-center px-4 md:px-16 gap-8" data-bg="bg-white" data-text="text-slate-800">
|
||||
<div class="md:w-1/3 flex flex-col items-center md:items-start text-center md:text-left mb-8 md:mb-0">
|
||||
<div class="mb-6 p-6 bg-slate-50 rounded-full shadow-lg">
|
||||
<span class="text-5xl">💳</span>
|
||||
</div>
|
||||
<span class="inline-block px-3 py-1 bg-slate-200 text-slate-600 rounded-full text-xs font-bold mb-4 tracking-wider">STRATEGY 01 : MONEY</span>
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 leading-tight text-slate-900">CEO 전용 시크릿 대시보드</h2>
|
||||
<p class="text-slate-600 text-lg mb-6">직원들은 못 봅니다. 오직 대표님만 확인하십시오.</p>
|
||||
</div>
|
||||
<div class="md:w-2/3 w-full grid gap-6">
|
||||
<div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-blue-500 hover:shadow-lg transition-shadow">
|
||||
<h3 class="text-xl font-bold text-slate-800 mb-2 flex items-center gap-2">✅ 오늘의 이슈 브리핑</h3>
|
||||
<p class="text-slate-600 ml-7">지각, 재고미달, 사고 발생 전 알림</p>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-blue-500 hover:shadow-lg transition-shadow">
|
||||
<h3 class="text-xl font-bold text-slate-800 mb-2 flex items-center gap-2">✅ 세무 리스크 실시간 감지</h3>
|
||||
<p class="text-slate-600 ml-7">가지급금 이자 4.6% 자동 계산, 법인세 예측</p>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-blue-500 hover:shadow-lg transition-shadow">
|
||||
<h3 class="text-xl font-bold text-slate-800 mb-2 flex items-center gap-2">✅ 자금 흐름의 투명화</h3>
|
||||
<p class="text-slate-600 ml-7">예상 부가세, 접대비 한도, 카드 사용내역 통합</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 4: Strategy 2 (Law) -->
|
||||
<div class="slide w-full h-full flex-col md:flex-row items-center justify-center px-4 md:px-16 gap-8" data-bg="bg-slate-50" data-text="text-slate-800">
|
||||
<div class="md:w-1/3 flex flex-col items-center md:items-start text-center md:text-left mb-8 md:mb-0">
|
||||
<div class="mb-6 p-6 bg-white rounded-full shadow-lg">
|
||||
<span class="text-5xl">⚖️</span>
|
||||
</div>
|
||||
<span class="inline-block px-3 py-1 bg-slate-200 text-slate-600 rounded-full text-xs font-bold mb-4 tracking-wider">STRATEGY 02 : LAW</span>
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 leading-tight text-slate-900">착수금 0원, 대표님의 '개인 로펌'</h2>
|
||||
<p class="text-slate-600 text-lg">돈 떼일 걱정, 법적 분쟁의 공포에서 해방시켜 드립니다.</p>
|
||||
</div>
|
||||
<div class="md:w-2/3 w-full grid gap-6">
|
||||
<div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-red-500 hover:shadow-lg transition-shadow">
|
||||
<h3 class="text-xl font-bold text-slate-800 mb-2 flex items-center gap-2">✅ 미수금/채권 추심 특화</h3>
|
||||
<p class="text-slate-600 ml-7">변호사 직접 관리, 법원 출석 대행</p>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-red-500 hover:shadow-lg transition-shadow">
|
||||
<h3 class="text-xl font-bold text-slate-800 mb-2 flex items-center gap-2">✅ 파격적인 조건</h3>
|
||||
<p class="text-slate-600 ml-7">착수금 0원 / 성공보수 20% (성공했을 때만 지급)</p>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-red-500 hover:shadow-lg transition-shadow">
|
||||
<h3 class="text-xl font-bold text-slate-800 mb-2 flex items-center gap-2">✅ 거래처 리스크 제로화</h3>
|
||||
<p class="text-slate-600 ml-7">신규 업체 기업 분석 서비스로 '우량 기업' 판별</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 5: Strategy 3 (AI) -->
|
||||
<div class="slide w-full h-full flex-col md:flex-row items-center justify-center px-4 md:px-16 gap-8" data-bg="bg-slate-50" data-text="text-slate-800">
|
||||
<div class="md:w-1/3 flex flex-col items-center md:items-start text-center md:text-left">
|
||||
<div class="mb-6 p-6 bg-white rounded-full shadow-lg">
|
||||
<span class="text-5xl">🤖</span>
|
||||
</div>
|
||||
<span class="inline-block px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-xs font-bold mb-4 tracking-wider">STRATEGY 03 : AI ASSISTANT</span>
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 leading-tight text-slate-900">말 한마디로 끝나는 경영 관리</h2>
|
||||
<p class="text-slate-600 text-lg mb-6">AI 비서 '헤이 SAM'을 체험해보세요.</p>
|
||||
<div class="text-sm text-slate-400 bg-white p-4 rounded-lg border">
|
||||
<p class="font-bold mb-2">💡 이렇게 물어보세요:</p>
|
||||
<ul class="space-y-1">
|
||||
<li>"거래처에 보낼 추석 인사말 써줘"</li>
|
||||
<li>"이번 달 예상 부가세가 얼마야?"</li>
|
||||
<li>"직원 근태 관리 규정 초안 만들어줘"</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-2/3 w-full h-[400px] bg-white rounded-2xl shadow-xl overflow-hidden border border-slate-200 flex flex-col">
|
||||
<div class="bg-purple-600 p-4 text-white flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-2xl">🤖</span>
|
||||
<div><h3 class="font-bold">Hey SAM</h3><p class="text-xs text-purple-200">Smart Automation Management</p></div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<span class="w-3 h-3 bg-red-400 rounded-full"></span>
|
||||
<span class="w-3 h-3 bg-yellow-400 rounded-full"></span>
|
||||
<span class="w-3 h-3 bg-green-400 rounded-full"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chat-messages" class="flex-1 p-4 bg-slate-50 overflow-y-auto space-y-4">
|
||||
<div class="flex justify-start">
|
||||
<div class="bg-white text-slate-800 shadow-sm border border-slate-200 p-3 rounded-2xl rounded-tl-none max-w-[80%]">
|
||||
<div class="text-xs text-purple-600 font-bold mb-1">SAM</div>
|
||||
대표님, 무엇을 도와드릴까요?
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form onsubmit="handleChat(event)" class="p-4 bg-white border-t border-slate-100 flex gap-2">
|
||||
<input type="text" id="chat-input" placeholder="SAM에게 업무를 지시하세요..." class="flex-1 bg-slate-100 border-none rounded-full px-4 py-3 focus:ring-2 focus:ring-purple-500 outline-none">
|
||||
<button type="submit" class="p-3 bg-purple-600 text-white rounded-full hover:bg-purple-700 transition-colors">→</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 6: Strategy 4 (Freedom) -->
|
||||
<div class="slide w-full h-full flex-col md:flex-row items-center justify-center px-4 md:px-16 gap-8" data-bg="bg-white" data-text="text-slate-800">
|
||||
<div class="md:w-1/3 flex flex-col items-center md:items-start text-center md:text-left mb-8 md:mb-0">
|
||||
<div class="mb-6 p-6 bg-slate-50 rounded-full shadow-lg">
|
||||
<span class="text-5xl">📍</span>
|
||||
</div>
|
||||
<span class="inline-block px-3 py-1 bg-slate-200 text-slate-600 rounded-full text-xs font-bold mb-4 tracking-wider">STRATEGY 04 : FREEDOM</span>
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 leading-tight text-slate-900">사무실 밖에서도 '전지적 대표 시점'</h2>
|
||||
<p class="text-slate-600 text-lg">현장과 사무실의 경계가 사라집니다.</p>
|
||||
</div>
|
||||
<div class="md:w-2/3 grid gap-6 w-full">
|
||||
<div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-blue-500 hover:shadow-lg transition-shadow">
|
||||
<h3 class="text-xl font-bold text-slate-800 mb-2 flex items-center gap-2">✅ 압도적 인프라</h3>
|
||||
<p class="text-slate-600 ml-7">접속 IP 무제한 + 모바일 완벽 지원</p>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-blue-500 hover:shadow-lg transition-shadow">
|
||||
<h3 class="text-xl font-bold text-slate-800 mb-2 flex items-center gap-2">✅ GPS 근태 관리 (무료)</h3>
|
||||
<p class="text-slate-600 ml-7">현장 직원이 어디에 있는지, 출근은 했는지 지도 확인</p>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-blue-500 hover:shadow-lg transition-shadow">
|
||||
<h3 class="text-xl font-bold text-slate-800 mb-2 flex items-center gap-2">✅ AI 비서 '헤이 SAM'</h3>
|
||||
<p class="text-slate-600 ml-7">음성으로 업무 지시, 챗봇으로 데이터 검색</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 7: Emotion -->
|
||||
<div class="slide w-full h-full flex-col items-center justify-center text-center px-4" data-bg="bg-slate-900" data-text="text-white">
|
||||
<span class="text-6xl mb-4 animate-bounce-custom">🔔</span>
|
||||
<h2 class="text-4xl md:text-6xl font-black mb-4 text-yellow-400 drop-shadow-lg">띵동! "SAM~"</h2>
|
||||
<h3 class="text-xl md:text-3xl font-bold mb-8 max-w-2xl leading-relaxed">대표님을 미소 짓게 하는 세상에서 가장 기분 좋은 알림</h3>
|
||||
<div class="bg-white/10 backdrop-blur-md p-8 rounded-2xl max-w-3xl border border-white/20">
|
||||
<p class="text-lg text-slate-200 mb-6 leading-relaxed">수주가 등록되거나 발주가 나갈 때, 대표님 핸드폰으로만 알림이 갑니다.</p>
|
||||
<p class="text-2xl font-serif italic text-white">"골치 아픈 보고 대신, 매일 매출이 오르는 소리를 들으세요."</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 8: CTA -->
|
||||
<div class="slide w-full h-full flex-col items-center justify-center text-center px-4" data-bg="bg-blue-700" data-text="text-white">
|
||||
<div class="grid grid-cols-4 gap-4 mb-12 opacity-50 text-white text-4xl">
|
||||
<span>💼</span><span>⚖️</span><span>👥</span><span>🛡️</span>
|
||||
</div>
|
||||
<h2 class="text-3xl md:text-5xl font-bold mb-6 leading-tight">변호사, 세무사, 비서, 감사팀...</h2>
|
||||
<p class="text-xl md:text-2xl text-blue-200 mb-12 font-light">이 모든 전문가를 월 O만원에 고용하시겠습니까?</p>
|
||||
<button class="px-10 py-5 bg-white text-blue-700 rounded-full font-bold text-xl shadow-xl hover:bg-blue-50 transition-all transform hover:scale-105 flex items-center gap-3">
|
||||
CodeBridgeX SAM 도입 문의 →
|
||||
</button>
|
||||
<p class="mt-8 text-sm text-blue-300">* 초기 도입 컨설팅 무료 진행 중</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Controls -->
|
||||
<div class="absolute bottom-8 right-8 flex gap-4 z-40">
|
||||
<button onclick="prevSlide()" id="btn-prev" class="p-3 rounded-full backdrop-blur-sm border border-current hover:bg-white/20 active:scale-95 transition-all">←</button>
|
||||
<button onclick="nextSlide()" id="btn-next" class="p-3 rounded-full backdrop-blur-sm border border-current hover:bg-white/20 active:scale-95 transition-all">→</button>
|
||||
</div>
|
||||
|
||||
<!-- Progress Indicator -->
|
||||
<div class="absolute bottom-8 left-8 flex gap-2" id="progress-dots"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
const painPoints = [
|
||||
"핵심인력 퇴사/정보유출", "가지급금 이자폭탄", "미수금 회수 불가", "예상 부가세 깜깜이",
|
||||
"지출결의서 분실", "현장 직원 근태불명", "재고 구멍/생산중단", "견적 실수/마진하락",
|
||||
"법인세 가산세 걱정", "불량 거래처 계약", "인수인계 엉망", "차량/설비 AS 비용",
|
||||
"외근 중 업무 마비", "잦은 서류 누락", "복잡한 급여/노무", "소송 착수금 부담",
|
||||
"접대비 한도 초과", "담당자 부재시 혼란", "발주 오타 사고", "밤낮 없는 업무보고"
|
||||
];
|
||||
|
||||
const painGrid = document.getElementById('pain-grid');
|
||||
painPoints.forEach(item => {
|
||||
const div = document.createElement('div');
|
||||
div.className = "bg-white p-4 rounded-lg shadow-sm border border-red-100 flex items-center justify-center text-center hover:bg-red-50 hover:border-red-300 transition-colors";
|
||||
div.innerHTML = `<div class="flex flex-col items-center gap-2"><span class="text-red-400">⚠️</span><span class="text-sm font-medium text-slate-700 break-keep">${item}</span></div>`;
|
||||
painGrid.appendChild(div);
|
||||
});
|
||||
|
||||
const slides = document.querySelectorAll('.slide');
|
||||
const container = document.getElementById('deck-container');
|
||||
const dotsContainer = document.getElementById('progress-dots');
|
||||
let currentSlide = 0;
|
||||
|
||||
slides.forEach((_, idx) => {
|
||||
const dot = document.createElement('div');
|
||||
dot.className = `h-1.5 rounded-full transition-all duration-300 ${idx === 0 ? 'w-8 bg-current opacity-100' : 'w-2 bg-current opacity-30'}`;
|
||||
dotsContainer.appendChild(dot);
|
||||
});
|
||||
|
||||
function updateSlide() {
|
||||
slides.forEach((slide, idx) => {
|
||||
slide.classList.toggle('active', idx === currentSlide);
|
||||
});
|
||||
|
||||
const activeSlide = slides[currentSlide];
|
||||
container.className = `w-full max-w-6xl h-[700px] relative rounded-xl shadow-2xl overflow-hidden border border-slate-200/20 transition-colors duration-700 ${activeSlide.dataset.bg} ${activeSlide.dataset.text}`;
|
||||
|
||||
const dots = dotsContainer.children;
|
||||
Array.from(dots).forEach((dot, idx) => {
|
||||
dot.className = `h-1.5 rounded-full transition-all duration-300 ${idx === currentSlide ? 'w-8 bg-current opacity-100' : 'w-2 bg-current opacity-30'}`;
|
||||
});
|
||||
|
||||
document.getElementById('btn-prev').style.opacity = currentSlide === 0 ? '0.3' : '1';
|
||||
document.getElementById('btn-next').style.opacity = currentSlide === slides.length - 1 ? '0.3' : '1';
|
||||
}
|
||||
|
||||
function nextSlide() {
|
||||
if (currentSlide < slides.length - 1) {
|
||||
currentSlide++;
|
||||
updateSlide();
|
||||
}
|
||||
}
|
||||
|
||||
function prevSlide() {
|
||||
if (currentSlide > 0) {
|
||||
currentSlide--;
|
||||
updateSlide();
|
||||
}
|
||||
}
|
||||
|
||||
function handleChat(e) {
|
||||
e.preventDefault();
|
||||
const input = document.getElementById('chat-input');
|
||||
const msg = input.value.trim();
|
||||
if (!msg) return;
|
||||
|
||||
const chatBox = document.getElementById('chat-messages');
|
||||
const userDiv = document.createElement('div');
|
||||
userDiv.className = "flex justify-end";
|
||||
userDiv.innerHTML = `<div class="bg-purple-600 text-white rounded-2xl rounded-tr-none p-3 max-w-[80%]">${msg}</div>`;
|
||||
chatBox.appendChild(userDiv);
|
||||
input.value = '';
|
||||
chatBox.scrollTop = chatBox.scrollHeight;
|
||||
|
||||
setTimeout(() => {
|
||||
let reply = "네, 알겠습니다. 해당 업무를 SAM 대시보드에 등록하고 담당자에게 알림을 보냈습니다. ✅";
|
||||
|
||||
if (msg.includes("인사") || msg.includes("추석") || msg.includes("메일")) {
|
||||
reply = "네, 대표님. 거래처용 정중한 인사말 초안을 작성하여 메일함에 저장해 두겠습니다. ✨";
|
||||
} else if (msg.includes("부가세") || msg.includes("세금")) {
|
||||
reply = "이번 달 예상 부가세는 약 1,250만 원입니다. 매입 자료가 3건 누락되어 있으니 확인해 주세요. 💰";
|
||||
} else if (msg.includes("근태") || msg.includes("직원")) {
|
||||
reply = "현재 현장 직원 3명이 GPS 범위 내에서 출근 체크를 완료했습니다. 📍";
|
||||
} else if (msg.includes("미수금")) {
|
||||
reply = "A업체의 미수금 500만 원이 3개월째 연체 중입니다. 내용증명 발송을 준비할까요? ⚖️";
|
||||
}
|
||||
|
||||
const botDiv = document.createElement('div');
|
||||
botDiv.className = "flex justify-start";
|
||||
botDiv.innerHTML = `<div class="bg-white text-slate-800 shadow-sm border border-slate-200 p-3 rounded-2xl rounded-tl-none max-w-[80%]"><div class="text-xs text-purple-600 font-bold mb-1">SAM</div>${reply}</div>`;
|
||||
chatBox.appendChild(botDiv);
|
||||
chatBox.scrollTop = chatBox.scrollHeight;
|
||||
}, 800);
|
||||
}
|
||||
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
|
||||
if (e.key === 'ArrowRight') nextSlide();
|
||||
if (e.key === 'ArrowLeft') prevSlide();
|
||||
});
|
||||
|
||||
updateSlide();
|
||||
</script>
|
||||
@endpush
|
||||
103
resources/views/lab/strategy/stablecoin.blade.php
Normal file
103
resources/views/lab/strategy/stablecoin.blade.php
Normal file
@@ -0,0 +1,103 @@
|
||||
@extends('layouts.presentation')
|
||||
|
||||
@section('title', '스테이블코인 전략')
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
.placeholder-container {
|
||||
min-height: 70vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.placeholder-icon {
|
||||
font-size: 5rem;
|
||||
margin-bottom: 2rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.placeholder-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #1e3a8a;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.placeholder-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: #64748b;
|
||||
max-width: 500px;
|
||||
text-align: center;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.placeholder-badge {
|
||||
margin-top: 2rem;
|
||||
padding: 0.5rem 1.5rem;
|
||||
background: linear-gradient(135deg, #f59e0b, #d97706);
|
||||
color: white;
|
||||
border-radius: 9999px;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
|
||||
<div class="container mx-auto px-4 py-12">
|
||||
|
||||
<div class="placeholder-container">
|
||||
<div class="placeholder-icon">💰</div>
|
||||
<h1 class="placeholder-title">스테이블코인 전략</h1>
|
||||
<p class="placeholder-subtitle">
|
||||
스테이블코인의 시장 동향, 규제 환경, 기업 도입 전략에 대한
|
||||
종합적인 분석 자료가 준비 중입니다.
|
||||
</p>
|
||||
<div class="placeholder-badge">Coming Soon</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-4xl mx-auto mt-12">
|
||||
<div class="bg-white rounded-2xl shadow-lg p-8">
|
||||
<h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center">
|
||||
<span class="mr-3">📋</span>
|
||||
예정 콘텐츠
|
||||
</h2>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div class="p-4 bg-blue-50 rounded-lg">
|
||||
<h3 class="font-semibold text-blue-800 mb-2">시장 분석</h3>
|
||||
<ul class="text-sm text-gray-600 space-y-1">
|
||||
<li>• USDT, USDC, DAI 비교</li>
|
||||
<li>• 시장 점유율 및 거래량</li>
|
||||
<li>• 가격 안정성 메커니즘</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="p-4 bg-green-50 rounded-lg">
|
||||
<h3 class="font-semibold text-green-800 mb-2">규제 환경</h3>
|
||||
<ul class="text-sm text-gray-600 space-y-1">
|
||||
<li>• 국내외 규제 동향</li>
|
||||
<li>• 법적 리스크 분석</li>
|
||||
<li>• 컴플라이언스 요건</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="p-4 bg-purple-50 rounded-lg">
|
||||
<h3 class="font-semibold text-purple-800 mb-2">기업 활용</h3>
|
||||
<ul class="text-sm text-gray-600 space-y-1">
|
||||
<li>• 결제 시스템 통합</li>
|
||||
<li>• 국제 송금 효율화</li>
|
||||
<li>• 재무 관리 전략</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="p-4 bg-orange-50 rounded-lg">
|
||||
<h3 class="font-semibold text-orange-800 mb-2">기술 분석</h3>
|
||||
<ul class="text-sm text-gray-600 space-y-1">
|
||||
<li>• 블록체인 인프라</li>
|
||||
<li>• 스마트 컨트랙트 보안</li>
|
||||
<li>• API 연동 가이드</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
870
resources/views/lab/strategy/tax.blade.php
Normal file
870
resources/views/lab/strategy/tax.blade.php
Normal file
@@ -0,0 +1,870 @@
|
||||
@extends('layouts.presentation')
|
||||
|
||||
@section('title', '장기적 세무전략')
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
/* Custom Scrollbar */
|
||||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
::-webkit-scrollbar-track { background: #f1f5f9; }
|
||||
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
|
||||
|
||||
.presentation-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slide {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: none;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 40px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.slide.active {
|
||||
display: flex;
|
||||
animation: slideInRight 0.5s ease-out;
|
||||
}
|
||||
|
||||
.slide-content {
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border-radius: 24px;
|
||||
padding: 60px;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
|
||||
animation: fadeIn 0.8s ease-out;
|
||||
margin: auto 0;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
h1 { color: #2563eb; font-size: 3em; margin-bottom: 20px; text-align: center; font-weight: 800; }
|
||||
h2 { color: #1e40af; font-size: 2.5em; margin-bottom: 30px; text-align: center; border-bottom: 3px solid #2563eb; padding-bottom: 15px; font-weight: 700; }
|
||||
h3 { color: #2563eb; font-size: 1.8em; margin: 25px 0 15px 0; font-weight: 700; }
|
||||
p, li { font-size: 1.2em; line-height: 1.8; color: #1e293b; margin-bottom: 15px; }
|
||||
ul { margin-left: 30px; }
|
||||
|
||||
.company-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 30px 0; }
|
||||
.info-card {
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
|
||||
color: white;
|
||||
padding: 25px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
|
||||
animation: scaleIn 0.5s ease-out;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.info-card h4 { font-size: 1.3em; margin-bottom: 10px; border-bottom: 2px solid rgba(255, 255, 255, 0.3); padding-bottom: 8px; }
|
||||
|
||||
.comparison-table { width: 100%; border-collapse: collapse; margin: 25px 0; font-size: 1em; }
|
||||
.comparison-table th, .comparison-table td { padding: 12px; border: 1px solid #ddd; text-align: left; }
|
||||
.comparison-table thead tr { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; }
|
||||
.comparison-table tbody tr:nth-of-type(even) { background: #f3f3f3; }
|
||||
|
||||
.pricing-table { width: 100%; border-collapse: collapse; margin: 25px 0; font-size: 1.1em; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); animation: slideInLeft 0.5s ease-out; }
|
||||
.pricing-table thead tr { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; text-align: left; }
|
||||
.pricing-table th, .pricing-table td { padding: 15px; border: 1px solid #ddd; }
|
||||
.pricing-table tbody tr { background: white; }
|
||||
.pricing-table tbody tr:nth-of-type(even) { background: #f3f3f3; }
|
||||
.pricing-table tbody tr:hover { background: #e8e8ff; }
|
||||
|
||||
.highlight { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; padding: 5px 10px; border-radius: 8px; font-weight: 700; }
|
||||
|
||||
.navigation { position: fixed; bottom: 30px; right: 30px; display: flex; gap: 15px; z-index: 1000; }
|
||||
.nav-btn {
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 15px 30px;
|
||||
border-radius: 9999px;
|
||||
cursor: pointer;
|
||||
font-size: 1.1em;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.nav-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4); background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%); }
|
||||
.nav-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
.slide-number {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
left: 30px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
padding: 12px 24px;
|
||||
border-radius: 9999px;
|
||||
font-size: 1.1em;
|
||||
color: #2563eb;
|
||||
font-weight: 700;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.feature-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin: 20px 0; }
|
||||
.feature-item { background: #f8fafc; padding: 20px; border-radius: 12px; border-left: 4px solid #2563eb; border: 1px solid #e2e8f0; border-left-width: 4px; }
|
||||
|
||||
.conclusion-box {
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
|
||||
color: white;
|
||||
padding: 30px;
|
||||
border-radius: 16px;
|
||||
margin: 20px 0;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
|
||||
}
|
||||
.conclusion-box p { color: white; }
|
||||
|
||||
.scenario-box {
|
||||
padding: 25px;
|
||||
border-radius: 16px;
|
||||
margin: 20px 0;
|
||||
border-left: 5px solid;
|
||||
}
|
||||
.scenario-box.blue { background: #dbeafe; border-left-color: #2563eb; }
|
||||
.scenario-box.indigo { background: #e0e7ff; border-left-color: #1e40af; }
|
||||
.scenario-box.amber { background: #fef3c7; border-left-color: #f59e0b; border: 1px solid #fde68a; }
|
||||
.scenario-box h3 { margin-top: 0; color: #1e40af; font-weight: 700; }
|
||||
|
||||
.info-box {
|
||||
margin-top: 30px;
|
||||
padding: 25px;
|
||||
background: #f1f5f9;
|
||||
border-radius: 16px;
|
||||
border-left: 5px solid #2563eb;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
.info-box h3 { margin-top: 0; }
|
||||
|
||||
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
|
||||
@keyframes slideInLeft { from { transform: translateX(-50px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
|
||||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||
@keyframes scaleIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.slide-content { padding: 30px; }
|
||||
h1 { font-size: 2em; }
|
||||
h2 { font-size: 1.8em; }
|
||||
h3 { font-size: 1.4em; }
|
||||
p, li { font-size: 1em; }
|
||||
.navigation { bottom: 15px; right: 15px; }
|
||||
.nav-btn { padding: 10px 20px; font-size: 0.9em; }
|
||||
.slide-number { bottom: 15px; left: 15px; padding: 8px 15px; font-size: 0.9em; }
|
||||
.pricing-table, .comparison-table { font-size: 0.8em; }
|
||||
.pricing-table th, .pricing-table td, .comparison-table th, .comparison-table td { padding: 8px; }
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="presentation-container">
|
||||
<!-- Slide 1: Cover -->
|
||||
<div class="slide active">
|
||||
<div class="slide-content">
|
||||
<h1>장기적 세무전략</h1>
|
||||
<h2 style="border: none; color: #2563eb;">통합 세무 관리 시스템 중장기 계획안</h2>
|
||||
<div style="text-align: center; margin-top: 50px;">
|
||||
<p style="font-size: 1.5em; color: #1e40af; font-weight: 600;">기획 · 디자인 · 백엔드 · 프론트엔드</p>
|
||||
<p style="margin-top: 30px; color: #64748b;">2025년 세무 자동화 솔루션 - 중장기 발전 계획</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 2: Table of Contents -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>목차</h2>
|
||||
<div style="margin-top: 40px;">
|
||||
<div class="feature-item"><h3 style="margin: 0; font-size: 1.3em;">1-4. 프로젝트 개요</h3><p style="margin: 10px 0 0 0;">비전, 목표, 핵심 가치, 기대 효과</p></div>
|
||||
<div class="feature-item"><h3 style="margin: 0; font-size: 1.3em;">5-8. 기획 관점</h3><p style="margin: 10px 0 0 0;">요구사항 정의, 사용자 시나리오, 기능 명세</p></div>
|
||||
<div class="feature-item"><h3 style="margin: 0; font-size: 1.3em;">9-11. 디자인 관점</h3><p style="margin: 10px 0 0 0;">UI/UX 전략, 디자인 시스템, 사용자 경험</p></div>
|
||||
<div class="feature-item"><h3 style="margin: 0; font-size: 1.3em;">12-14. 백엔드 관점</h3><p style="margin: 10px 0 0 0;">시스템 아키텍처, 데이터베이스 설계, API 설계</p></div>
|
||||
<div class="feature-item"><h3 style="margin: 0; font-size: 1.3em;">15-16. 프론트엔드 관점</h3><p style="margin: 10px 0 0 0;">기술 스택, 컴포넌트 구조, 개발 로드맵</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 3: Project Vision -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>프로젝트 비전</h2>
|
||||
<div class="conclusion-box">
|
||||
<h3 style="color: white; margin-top: 0;">세무 업무의 디지털 혁신</h3>
|
||||
<p style="font-size: 1.3em;">복잡한 세무 업무를 자동화하고, 전략적 의사결정을 지원하는 통합 플랫폼</p>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>핵심 목표</h3>
|
||||
<div class="feature-list">
|
||||
<div class="feature-item"><h4>⚡ 업무 자동화</h4><p>반복적인 세무 업무를 90% 이상 자동화</p></div>
|
||||
<div class="feature-item"><h4>📊 데이터 통합</h4><p>회계, 인사, 영업 데이터의 실시간 통합</p></div>
|
||||
<div class="feature-item"><h4>🛡️ 리스크 관리</h4><p>세무 리스크 사전 감지 및 알림</p></div>
|
||||
<div class="feature-item"><h4>📈 전략 수립</h4><p>데이터 기반 세무 전략 의사결정 지원</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>주요 타겟 사용자</h3>
|
||||
<ul>
|
||||
<li><strong>세무사/회계사:</strong> 전문가용 세무 관리 도구</li>
|
||||
<li><strong>기업 재무팀:</strong> 내부 세무 업무 자동화</li>
|
||||
<li><strong>중소기업:</strong> 간편한 세무 컴플라이언스 관리</li>
|
||||
<li><strong>스타트업:</strong> 초기 세무 구조 설계 지원</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 4: Core Values -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>핵심 가치 제안</h2>
|
||||
<div class="company-info">
|
||||
<div class="info-card"><h4>🤖 자동화</h4><p>세금 계산, 신고서 작성, 납부 관리 자동화</p><p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">매월 80시간 업무 시간 절감</p></div>
|
||||
<div class="info-card"><h4>🔗 통합성</h4><p>회계 시스템, ERP, 급여 시스템 연동</p><p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">데이터 이중 입력 제거</p></div>
|
||||
<div class="info-card"><h4>📱 접근성</h4><p>클라우드 기반 언제 어디서나 접근</p><p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">PC, 태블릿, 모바일 지원</p></div>
|
||||
<div class="info-card"><h4>🎯 정확성</h4><p>최신 세법 자동 반영 및 검증</p><p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">인적 오류 95% 감소</p></div>
|
||||
<div class="info-card"><h4>💡 인사이트</h4><p>AI 기반 세무 최적화 제안</p><p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">절세 기회 자동 발견</p></div>
|
||||
<div class="info-card"><h4>🔐 보안</h4><p>금융권 수준의 데이터 보안</p><p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">암호화 및 접근 제어</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 5: Planning - Requirements -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>기획: 기능 요구사항</h2>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>1. 세무 신고 관리</h3>
|
||||
<ul>
|
||||
<li>부가가치세 신고서 자동 작성 및 전송</li>
|
||||
<li>법인세/소득세 예정/확정 신고 관리</li>
|
||||
<li>원천세 신고 및 납부 스케줄링</li>
|
||||
<li>지방세 통합 관리 (취득세, 재산세 등)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>2. 세무 회계 처리</h3>
|
||||
<ul>
|
||||
<li>매입매출 전표 자동 분개 처리</li>
|
||||
<li>계정과목 자동 매핑 및 학습</li>
|
||||
<li>세무조정 항목 관리</li>
|
||||
<li>손익계산서 및 재무상태표 생성</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>3. 증빙 관리</h3>
|
||||
<ul>
|
||||
<li>전자세금계산서 발행 및 수신</li>
|
||||
<li>현금영수증 및 카드매출 통합</li>
|
||||
<li>증빙 스캔 및 OCR 자동 인식</li>
|
||||
<li>증빙 보관 및 검색 시스템</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 6: User Scenarios -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>기획: 사용자 시나리오</h2>
|
||||
<div class="scenario-box blue">
|
||||
<h3>시나리오 1: 부가세 신고 프로세스</h3>
|
||||
<ol style="color: #333;">
|
||||
<li><strong>데이터 수집:</strong> ERP 및 회계 시스템에서 매입/매출 데이터 자동 수집</li>
|
||||
<li><strong>검증:</strong> AI 기반 이상 거래 탐지 및 알림</li>
|
||||
<li><strong>신고서 작성:</strong> 부가세 신고서 자동 생성 및 미리보기</li>
|
||||
<li><strong>승인:</strong> 담당자 검토 및 전자서명</li>
|
||||
<li><strong>전송:</strong> 국세청 홈택스 자동 전송</li>
|
||||
<li><strong>납부:</strong> 계좌 연동 자동 납부 또는 납부서 출력</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="scenario-box indigo">
|
||||
<h3>시나리오 2: 절세 전략 수립</h3>
|
||||
<ol style="color: #333;">
|
||||
<li><strong>현황 분석:</strong> 현재 세무 부담 및 비용 구조 분석</li>
|
||||
<li><strong>시뮬레이션:</strong> 다양한 절세 시나리오 자동 시뮬레이션</li>
|
||||
<li><strong>추천:</strong> AI 기반 최적 절세 방안 제시</li>
|
||||
<li><strong>실행:</strong> 선택한 전략의 단계별 실행 가이드</li>
|
||||
<li><strong>모니터링:</strong> 효과 추적 및 리포팅</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 7: Advanced Features -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>기획: 고급 기능</h2>
|
||||
<div class="feature-list">
|
||||
<div class="feature-item"><h4>🤖 AI 세무 어시스턴트</h4><p>자연어 질의응답으로 세무 문의 즉시 해결</p><p style="font-size: 0.9em; margin-top: 5px; color: #666;">"이번 달 부가세 예상액은?" 같은 질문에 즉시 답변</p></div>
|
||||
<div class="feature-item"><h4>📊 세무 대시보드</h4><p>실시간 세무 현황 및 KPI 모니터링</p><p style="font-size: 0.9em; margin-top: 5px; color: #666;">납부 일정, 세부담률, 공제 현황 한눈에 확인</p></div>
|
||||
<div class="feature-item"><h4>⚠️ 리스크 알림</h4><p>세무 리스크 사전 감지 및 예방</p><p style="font-size: 0.9em; margin-top: 5px; color: #666;">신고 누락, 기한 임박, 이상 거래 자동 알림</p></div>
|
||||
<div class="feature-item"><h4>📈 절세 시뮬레이터</h4><p>다양한 시나리오별 세금 영향 분석</p><p style="font-size: 0.9em; margin-top: 5px; color: #666;">투자, 채용, 구조조정 시 세무 영향 사전 검토</p></div>
|
||||
<div class="feature-item"><h4>🔗 외부 시스템 연동</h4><p>ERP, 급여, 회계 시스템 자동 연동</p><p style="font-size: 0.9em; margin-top: 5px; color: #666;">더존, 영림원, SAP, 더블린 등 주요 시스템 지원</p></div>
|
||||
<div class="feature-item"><h4>📱 모바일 승인</h4><p>언제 어디서나 신고서 검토 및 승인</p><p style="font-size: 0.9em; margin-top: 5px; color: #666;">푸시 알림 및 생체인증 기반 전자서명</p></div>
|
||||
</div>
|
||||
<div class="scenario-box amber">
|
||||
<h3 style="color: #92400e;">컴플라이언스 기능</h3>
|
||||
<ul style="color: #78350f;">
|
||||
<li><strong>세법 자동 업데이트:</strong> 개정 세법 자동 반영 및 영향 분석</li>
|
||||
<li><strong>전자신고 통합:</strong> 홈택스, 위택스 등 전자신고 시스템 연동</li>
|
||||
<li><strong>감사 추적:</strong> 모든 세무 처리 이력 완벽 기록 및 추적</li>
|
||||
<li><strong>권한 관리:</strong> 역할 기반 접근 제어 및 승인 워크플로우</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 8: User Roles -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>기획: 사용자 권한 체계</h2>
|
||||
<table class="comparison-table">
|
||||
<thead><tr><th>역할</th><th>주요 권한</th><th>접근 범위</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><strong>시스템 관리자</strong></td><td>전체 시스템 설정, 사용자 관리, 감사 로그 조회</td><td>전체</td></tr>
|
||||
<tr><td><strong>세무 책임자</strong></td><td>신고서 최종 승인, 전략 수립, 리포트 생성</td><td>전체 세무 데이터</td></tr>
|
||||
<tr><td><strong>세무 담당자</strong></td><td>신고서 작성, 증빙 처리, 세무조정</td><td>담당 업무 데이터</td></tr>
|
||||
<tr><td><strong>회계 담당자</strong></td><td>전표 입력, 계정 관리, 증빙 등록</td><td>회계 데이터</td></tr>
|
||||
<tr><td><strong>경영진</strong></td><td>대시보드 조회, 리포트 확인 (읽기 전용)</td><td>요약 데이터</td></tr>
|
||||
<tr><td><strong>외부 세무사</strong></td><td>자문, 검토, 신고 대행 (제한적 접근)</td><td>위임받은 데이터</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>워크플로우 승인 체계</h3>
|
||||
<div style="background: #f1f5f9; padding: 20px; border-radius: 12px; margin: 15px 0; border: 1px solid #e2e8f0;">
|
||||
<p><strong>1단계:</strong> 세무 담당자가 신고서 작성</p>
|
||||
<p><strong>2단계:</strong> 회계 담당자가 데이터 검증</p>
|
||||
<p><strong>3단계:</strong> 세무 책임자가 최종 승인</p>
|
||||
<p><strong>4단계:</strong> 시스템 자동 전송 또는 경영진 통보</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 9: UI/UX Strategy -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>디자인: UI/UX 전략</h2>
|
||||
<div class="conclusion-box">
|
||||
<h3 style="color: white; margin-top: 0;">디자인 철학</h3>
|
||||
<p style="font-size: 1.2em;">"복잡한 세무를 단순하게, 전문성을 직관적으로"</p>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>핵심 디자인 원칙</h3>
|
||||
<div class="feature-list">
|
||||
<div class="feature-item"><h4>🎯 단순성</h4><p>복잡한 세무 프로세스를 단계별로 분해</p><p style="font-size: 0.9em; color: #666;">마법사(Wizard) 형태의 진행 방식</p></div>
|
||||
<div class="feature-item"><h4>📊 시각화</h4><p>숫자와 데이터를 직관적인 차트로 표현</p><p style="font-size: 0.9em; color: #666;">인포그래픽 중심의 대시보드</p></div>
|
||||
<div class="feature-item"><h4>⚡ 효율성</h4><p>최소 클릭으로 작업 완료</p><p style="font-size: 0.9em; color: #666;">자주 쓰는 기능 빠른 실행</p></div>
|
||||
<div class="feature-item"><h4>🎨 일관성</h4><p>통일된 디자인 언어 및 패턴</p><p style="font-size: 0.9em; color: #666;">학습 곡선 최소화</p></div>
|
||||
<div class="feature-item"><h4>♿ 접근성</h4><p>WCAG 2.1 AA 레벨 준수</p><p style="font-size: 0.9em; color: #666;">키보드 내비게이션 완벽 지원</p></div>
|
||||
<div class="feature-item"><h4>📱 반응형</h4><p>모든 디바이스에서 최적 경험</p><p style="font-size: 0.9em; color: #666;">PC, 태블릿, 모바일 대응</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>컬러 시스템</h3>
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-top: 15px;">
|
||||
<div style="background: #2563eb; color: white; padding: 20px; border-radius: 12px; text-align: center;"><p style="margin: 0; color: white; font-weight: 700;"><strong>Primary</strong></p><p style="margin: 5px 0 0 0; font-size: 0.9em; color: white;">#2563eb</p></div>
|
||||
<div style="background: #10b981; color: white; padding: 20px; border-radius: 12px; text-align: center;"><p style="margin: 0; color: white; font-weight: 700;"><strong>Success</strong></p><p style="margin: 5px 0 0 0; font-size: 0.9em; color: white;">#10b981</p></div>
|
||||
<div style="background: #f59e0b; color: white; padding: 20px; border-radius: 12px; text-align: center;"><p style="margin: 0; color: white; font-weight: 700;"><strong>Warning</strong></p><p style="margin: 5px 0 0 0; font-size: 0.9em; color: white;">#f59e0b</p></div>
|
||||
<div style="background: #ef4444; color: white; padding: 20px; border-radius: 12px; text-align: center;"><p style="margin: 0; color: white; font-weight: 700;"><strong>Danger</strong></p><p style="margin: 5px 0 0 0; font-size: 0.9em; color: white;">#ef4444</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 10: Design System -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>디자인: 디자인 시스템</h2>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>컴포넌트 라이브러리</h3>
|
||||
<table class="comparison-table">
|
||||
<thead><tr><th>컴포넌트</th><th>용도</th><th>변형</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><strong>Button</strong></td><td>주요 액션 실행</td><td>Primary, Secondary, Outline, Text</td></tr>
|
||||
<tr><td><strong>Card</strong></td><td>정보 그룹핑</td><td>Basic, Elevated, Outlined</td></tr>
|
||||
<tr><td><strong>Table</strong></td><td>데이터 표시</td><td>Sortable, Filterable, Paginated</td></tr>
|
||||
<tr><td><strong>Form</strong></td><td>데이터 입력</td><td>Input, Select, Datepicker, Autocomplete</td></tr>
|
||||
<tr><td><strong>Modal</strong></td><td>팝업 대화상자</td><td>Alert, Confirm, Form</td></tr>
|
||||
<tr><td><strong>Chart</strong></td><td>데이터 시각화</td><td>Line, Bar, Pie, Donut</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>타이포그래피</h3>
|
||||
<div style="background: #f1f5f9; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0;">
|
||||
<p><strong>본문:</strong> Noto Sans KR (가독성 최적화)</p>
|
||||
<p><strong>숫자:</strong> Roboto Mono (표 및 금액 표시)</p>
|
||||
<p><strong>제목:</strong> Spoqa Han Sans (명확한 위계)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>아이콘 시스템</h3>
|
||||
<ul>
|
||||
<li>Material Icons (기본 UI 아이콘)</li>
|
||||
<li>Custom Tax Icons (세무 특화 아이콘)</li>
|
||||
<li>일관된 24x24px 그리드 시스템</li>
|
||||
<li>Outlined, Filled 스타일 제공</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 11: User Experience -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>디자인: 사용자 경험 설계</h2>
|
||||
<div class="scenario-box blue">
|
||||
<h3 style="color: #004085;">대시보드 레이아웃</h3>
|
||||
<ul style="color: #333;">
|
||||
<li><strong>상단:</strong> 주요 KPI 카드 (이번 달 납부 세액, 공제액, 세부담률)</li>
|
||||
<li><strong>중단:</strong> 일정 타임라인 (다가오는 신고 및 납부 일정)</li>
|
||||
<li><strong>하단:</strong> 상세 차트 (월별 세금 추이, 업종 비교)</li>
|
||||
<li><strong>사이드:</strong> 빠른 실행 메뉴 및 알림 센터</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="scenario-box indigo">
|
||||
<h3 style="color: #6a1b9a;">신고서 작성 UX</h3>
|
||||
<ol style="color: #333;">
|
||||
<li><strong>Step 1 - 기간 선택:</strong> 신고 대상 기간 및 신고 유형 선택</li>
|
||||
<li><strong>Step 2 - 데이터 확인:</strong> 자동 수집된 데이터 검토 및 수정</li>
|
||||
<li><strong>Step 3 - 계산 검증:</strong> 세액 계산 결과 미리보기</li>
|
||||
<li><strong>Step 4 - 첨부 서류:</strong> 필요 서류 업로드 및 전자서명</li>
|
||||
<li><strong>Step 5 - 최종 확인:</strong> 요약 정보 확인 및 제출</li>
|
||||
</ol>
|
||||
<p style="margin-top: 15px; color: #333;"><strong>진행 표시:</strong> 각 단계별 진행 상황 프로그레스 바 표시</p>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>피드백 및 알림 시스템</h3>
|
||||
<div class="feature-list">
|
||||
<div class="feature-item"><h4>✅ 성공 메시지</h4><p>작업 완료 시 명확한 확인 메시지</p></div>
|
||||
<div class="feature-item"><h4>⚠️ 경고 알림</h4><p>주의가 필요한 항목 강조 표시</p></div>
|
||||
<div class="feature-item"><h4>❌ 오류 안내</h4><p>문제 발생 시 해결 방법 제시</p></div>
|
||||
<div class="feature-item"><h4>💡 도움말</h4><p>컨텍스트 기반 도움말 제공</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 12: Backend Architecture -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>백엔드: 시스템 아키텍처</h2>
|
||||
<div class="conclusion-box">
|
||||
<h3 style="color: white; margin-top: 0;">마이크로서비스 아키텍처</h3>
|
||||
<p style="font-size: 1.2em;">확장 가능하고 유지보수가 쉬운 분산 시스템</p>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>주요 서비스 구성</h3>
|
||||
<div class="company-info">
|
||||
<div class="info-card"><h4>🔐 인증 서비스</h4><p>JWT 기반 인증 및 권한 관리</p><p style="font-size: 0.9em; margin-top: 5px;">OAuth 2.0, 2FA 지원</p></div>
|
||||
<div class="info-card"><h4>📊 데이터 수집 서비스</h4><p>외부 시스템 데이터 수집 및 변환</p><p style="font-size: 0.9em; margin-top: 5px;">ETL 파이프라인</p></div>
|
||||
<div class="info-card"><h4>🧮 계산 엔진</h4><p>세금 계산 및 시뮬레이션</p><p style="font-size: 0.9em; margin-top: 5px;">규칙 엔진 기반</p></div>
|
||||
<div class="info-card"><h4>📄 신고서 생성</h4><p>각종 신고서 자동 작성</p><p style="font-size: 0.9em; margin-top: 5px;">PDF/XML 변환</p></div>
|
||||
<div class="info-card"><h4>🔗 통합 서비스</h4><p>ERP 및 회계 시스템 연동</p><p style="font-size: 0.9em; margin-top: 5px;">API Gateway</p></div>
|
||||
<div class="info-card"><h4>🤖 AI 서비스</h4><p>자연어 처리 및 예측 분석</p><p style="font-size: 0.9em; margin-top: 5px;">TensorFlow/PyTorch</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>기술 스택</h3>
|
||||
<table class="comparison-table">
|
||||
<thead><tr><th>레이어</th><th>기술</th><th>목적</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><strong>API Gateway</strong></td><td>Kong / AWS API Gateway</td><td>라우팅, 인증, 속도 제한</td></tr>
|
||||
<tr><td><strong>Application</strong></td><td>Node.js (NestJS) / Python (FastAPI)</td><td>비즈니스 로직 처리</td></tr>
|
||||
<tr><td><strong>Database</strong></td><td>PostgreSQL / MongoDB</td><td>관계형/문서형 데이터 저장</td></tr>
|
||||
<tr><td><strong>Cache</strong></td><td>Redis</td><td>세션, 계산 결과 캐싱</td></tr>
|
||||
<tr><td><strong>Message Queue</strong></td><td>RabbitMQ / Apache Kafka</td><td>비동기 처리, 이벤트 스트리밍</td></tr>
|
||||
<tr><td><strong>Search</strong></td><td>Elasticsearch</td><td>전체 텍스트 검색, 로그 분석</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 13: Database Design -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>백엔드: 데이터베이스 설계</h2>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>핵심 테이블 구조</h3>
|
||||
<table class="comparison-table">
|
||||
<thead><tr><th>테이블명</th><th>주요 필드</th><th>관계</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><strong>companies</strong></td><td>id, name, business_number, tax_type</td><td>1:N users, tax_returns</td></tr>
|
||||
<tr><td><strong>users</strong></td><td>id, email, role, company_id</td><td>N:1 companies</td></tr>
|
||||
<tr><td><strong>tax_returns</strong></td><td>id, type, period, status, company_id</td><td>N:1 companies, 1:N items</td></tr>
|
||||
<tr><td><strong>tax_items</strong></td><td>id, return_id, account, amount</td><td>N:1 tax_returns</td></tr>
|
||||
<tr><td><strong>receipts</strong></td><td>id, type, date, amount, file_path</td><td>N:1 companies</td></tr>
|
||||
<tr><td><strong>tax_rules</strong></td><td>id, name, formula, effective_date</td><td>독립 테이블</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>데이터 보안 전략</h3>
|
||||
<ul>
|
||||
<li><strong>암호화:</strong> 민감 데이터 AES-256 암호화 (금액, 계좌번호 등)</li>
|
||||
<li><strong>접근 제어:</strong> Row-Level Security (RLS) 적용</li>
|
||||
<li><strong>감사 로그:</strong> 모든 데이터 변경 이력 자동 기록</li>
|
||||
<li><strong>백업:</strong> 일일 자동 백업 및 Point-in-Time Recovery 지원</li>
|
||||
<li><strong>다중화:</strong> Master-Slave Replication으로 고가용성 확보</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<h3>성능 최적화</h3>
|
||||
<ul>
|
||||
<li>주요 쿼리 대상 컬럼에 인덱스 생성</li>
|
||||
<li>자주 조회되는 집계 데이터 Materialized View 활용</li>
|
||||
<li>파티셔닝: 연도별 세금 신고 데이터 분할</li>
|
||||
<li>커넥션 풀링으로 DB 연결 관리 최적화</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 14: API Design -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>백엔드: API 설계</h2>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>RESTful API 엔드포인트</h3>
|
||||
<table class="comparison-table">
|
||||
<thead><tr><th>엔드포인트</th><th>메서드</th><th>설명</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>/api/v1/auth/login</td><td>POST</td><td>사용자 로그인 및 JWT 발급</td></tr>
|
||||
<tr><td>/api/v1/tax-returns</td><td>GET</td><td>세금 신고서 목록 조회</td></tr>
|
||||
<tr><td>/api/v1/tax-returns</td><td>POST</td><td>새 신고서 생성</td></tr>
|
||||
<tr><td>/api/v1/tax-returns/:id</td><td>PUT</td><td>신고서 수정</td></tr>
|
||||
<tr><td>/api/v1/tax-returns/:id/submit</td><td>POST</td><td>신고서 제출</td></tr>
|
||||
<tr><td>/api/v1/receipts/upload</td><td>POST</td><td>증빙 파일 업로드 및 OCR 처리</td></tr>
|
||||
<tr><td>/api/v1/dashboard/summary</td><td>GET</td><td>대시보드 요약 정보</td></tr>
|
||||
<tr><td>/api/v1/ai/ask</td><td>POST</td><td>AI 세무 어시스턴트 질의</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>API 보안 및 품질</h3>
|
||||
<div class="feature-list">
|
||||
<div class="feature-item"><h4>🔐 인증/인가</h4><p>JWT Bearer Token 기반 인증</p><p style="font-size: 0.9em; color: #666;">역할 기반 접근 제어 (RBAC)</p></div>
|
||||
<div class="feature-item"><h4>📝 문서화</h4><p>OpenAPI 3.0 (Swagger) 자동 생성</p><p style="font-size: 0.9em; color: #666;">인터랙티브 API 문서</p></div>
|
||||
<div class="feature-item"><h4>⚡ 속도 제한</h4><p>Rate Limiting (100 req/min/user)</p><p style="font-size: 0.9em; color: #666;">DDoS 방어</p></div>
|
||||
<div class="feature-item"><h4>✅ 입력 검증</h4><p>DTO 기반 자동 검증</p><p style="font-size: 0.9em; color: #666;">타입 안전성 보장</p></div>
|
||||
<div class="feature-item"><h4>📊 모니터링</h4><p>API 성능 및 오류율 추적</p><p style="font-size: 0.9em; color: #666;">Prometheus + Grafana</p></div>
|
||||
<div class="feature-item"><h4>🔄 버전 관리</h4><p>URL 기반 버저닝 (/v1/, /v2/)</p><p style="font-size: 0.9em; color: #666;">하위 호환성 보장</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 15: Frontend Tech Stack -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>프론트엔드: 기술 스택</h2>
|
||||
<div class="conclusion-box">
|
||||
<h3 style="color: white; margin-top: 0;">현대적인 프론트엔드 아키텍처</h3>
|
||||
<p style="font-size: 1.2em;">React 18 + TypeScript 기반 SPA</p>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>핵심 기술 스택</h3>
|
||||
<table class="comparison-table">
|
||||
<thead><tr><th>카테고리</th><th>기술</th><th>목적</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><strong>프레임워크</strong></td><td>React 18</td><td>컴포넌트 기반 UI 구축</td></tr>
|
||||
<tr><td><strong>언어</strong></td><td>TypeScript</td><td>타입 안전성, 개발 생산성</td></tr>
|
||||
<tr><td><strong>상태 관리</strong></td><td>Zustand / React Query</td><td>전역 상태 및 서버 상태 관리</td></tr>
|
||||
<tr><td><strong>라우팅</strong></td><td>React Router v6</td><td>SPA 페이지 라우팅</td></tr>
|
||||
<tr><td><strong>UI 라이브러리</strong></td><td>Material-UI (MUI)</td><td>디자인 시스템 구현</td></tr>
|
||||
<tr><td><strong>차트</strong></td><td>Recharts / Chart.js</td><td>데이터 시각화</td></tr>
|
||||
<tr><td><strong>폼 관리</strong></td><td>React Hook Form</td><td>폼 검증 및 상태 관리</td></tr>
|
||||
<tr><td><strong>스타일링</strong></td><td>Emotion / Styled Components</td><td>CSS-in-JS</td></tr>
|
||||
<tr><td><strong>빌드 도구</strong></td><td>Vite</td><td>빠른 개발 서버 및 빌드</td></tr>
|
||||
<tr><td><strong>테스트</strong></td><td>Vitest / Testing Library</td><td>유닛/통합 테스트</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<h3>개발 도구</h3>
|
||||
<ul>
|
||||
<li><strong>코드 품질:</strong> ESLint, Prettier, Husky (pre-commit hooks)</li>
|
||||
<li><strong>번들 분석:</strong> Vite Bundle Analyzer로 최적화</li>
|
||||
<li><strong>성능 모니터링:</strong> React DevTools, Lighthouse CI</li>
|
||||
<li><strong>문서화:</strong> Storybook으로 컴포넌트 문서화</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 16: Component Structure -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>프론트엔드: 컴포넌트 구조</h2>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>폴더 구조</h3>
|
||||
<div style="background: #f1f5f9; padding: 20px; border-radius: 12px; font-family: monospace; font-size: 0.9em; border: 1px solid #e2e8f0;">
|
||||
<pre style="margin: 0; color: #333;">src/
|
||||
├── components/ # 재사용 가능 컴포넌트
|
||||
│ ├── common/ # 공통 UI 컴포넌트 (Button, Input 등)
|
||||
│ ├── layout/ # 레이아웃 컴포넌트 (Header, Sidebar)
|
||||
│ └── domain/ # 도메인 특화 컴포넌트
|
||||
├── pages/ # 페이지 컴포넌트
|
||||
│ ├── Dashboard/
|
||||
│ ├── TaxReturn/
|
||||
│ └── Settings/
|
||||
├── hooks/ # 커스텀 React Hooks
|
||||
├── services/ # API 호출 로직
|
||||
├── stores/ # 상태 관리 (Zustand)
|
||||
├── types/ # TypeScript 타입 정의
|
||||
├── utils/ # 유틸리티 함수
|
||||
└── assets/ # 정적 파일 (이미지, 폰트)</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>주요 컴포넌트</h3>
|
||||
<div class="feature-list">
|
||||
<div class="feature-item"><h4>📊 DashboardWidget</h4><p>대시보드 KPI 카드 및 차트</p></div>
|
||||
<div class="feature-item"><h4>📝 TaxReturnWizard</h4><p>단계별 신고서 작성 마법사</p></div>
|
||||
<div class="feature-item"><h4>📁 ReceiptUploader</h4><p>증빙 파일 업로드 및 OCR</p></div>
|
||||
<div class="feature-item"><h4>📈 TaxChart</h4><p>세무 데이터 시각화</p></div>
|
||||
<div class="feature-item"><h4>🔔 NotificationCenter</h4><p>알림 및 작업 센터</p></div>
|
||||
<div class="feature-item"><h4>🤖 AIAssistant</h4><p>채팅 기반 세무 도우미</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>성능 최적화 전략</h3>
|
||||
<ul>
|
||||
<li><strong>Code Splitting:</strong> 페이지 단위 lazy loading으로 초기 로딩 속도 개선</li>
|
||||
<li><strong>Memoization:</strong> React.memo, useMemo, useCallback 활용</li>
|
||||
<li><strong>Virtual Scrolling:</strong> 대용량 테이블 렌더링 최적화</li>
|
||||
<li><strong>이미지 최적화:</strong> WebP 포맷, lazy loading, responsive images</li>
|
||||
<li><strong>캐싱:</strong> React Query로 서버 데이터 캐싱 및 재검증</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 17: Development Roadmap -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>개발 로드맵</h2>
|
||||
<table class="pricing-table">
|
||||
<thead><tr><th>단계</th><th>기간</th><th>주요 마일스톤</th><th>산출물</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><strong>Phase 1: 기획</strong></td><td>4주</td><td>요구사항 정의, 시스템 설계</td><td>PRD, 아키텍처 문서</td></tr>
|
||||
<tr><td><strong>Phase 2: 디자인</strong></td><td>4주</td><td>UI/UX 설계, 디자인 시스템 구축</td><td>Figma 프로토타입, 디자인 가이드</td></tr>
|
||||
<tr><td><strong>Phase 3: MVP 개발</strong></td><td>12주</td><td>핵심 기능 구현 (신고, 증빙, 대시보드)</td><td>Alpha 버전</td></tr>
|
||||
<tr><td><strong>Phase 4: 통합 테스트</strong></td><td>4주</td><td>외부 시스템 연동 및 테스트</td><td>Beta 버전</td></tr>
|
||||
<tr><td><strong>Phase 5: 파일럿</strong></td><td>4주</td><td>실사용자 테스트 및 피드백 수집</td><td>개선사항 리스트</td></tr>
|
||||
<tr><td><strong>Phase 6: 정식 출시</strong></td><td>2주</td><td>버그 수정 및 성능 최적화</td><td>v1.0 릴리스</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="scenario-box blue" style="margin-top: 30px;">
|
||||
<h3>주요 기술 과제</h3>
|
||||
<ul>
|
||||
<li><strong>세법 규칙 엔진:</strong> 복잡한 세법 규칙의 유연한 모델링</li>
|
||||
<li><strong>대용량 데이터 처리:</strong> 수백만 건의 거래 데이터 실시간 처리</li>
|
||||
<li><strong>외부 시스템 통합:</strong> 다양한 ERP/회계 시스템 API 연동</li>
|
||||
<li><strong>보안 및 컴플라이언스:</strong> 금융권 수준의 보안 요구사항 충족</li>
|
||||
<li><strong>AI 모델 학습:</strong> 세무 데이터 기반 예측 모델 개발</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="scenario-box amber" style="margin-top: 20px;">
|
||||
<h3 style="color: #92400e;">예상 리소스</h3>
|
||||
<ul style="color: #78350f;">
|
||||
<li><strong>기획:</strong> PM 1명, 세무 도메인 전문가 1명</li>
|
||||
<li><strong>디자인:</strong> UI/UX 디자이너 2명</li>
|
||||
<li><strong>백엔드:</strong> 시니어 개발자 3명, 주니어 개발자 2명</li>
|
||||
<li><strong>프론트엔드:</strong> 시니어 개발자 2명, 주니어 개발자 2명</li>
|
||||
<li><strong>QA:</strong> 테스터 2명</li>
|
||||
<li><strong>DevOps:</strong> 인프라 엔지니어 1명</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 18: Success Metrics -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>성공 지표</h2>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>📊 정량적 KPI</h3>
|
||||
<table class="comparison-table">
|
||||
<thead><tr><th>지표</th><th>목표치</th><th>측정 방법</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><strong>업무 시간 절감</strong></td><td>80% 이상</td><td>신고 준비 소요 시간 Before/After 비교</td></tr>
|
||||
<tr><td><strong>오류율 감소</strong></td><td>95% 이상</td><td>수정 신고 건수 감소율</td></tr>
|
||||
<tr><td><strong>사용자 만족도</strong></td><td>NPS 50 이상</td><td>분기별 사용자 설문 조사</td></tr>
|
||||
<tr><td><strong>시스템 가용성</strong></td><td>99.9% 이상</td><td>Uptime 모니터링</td></tr>
|
||||
<tr><td><strong>API 응답 속도</strong></td><td>평균 200ms 이하</td><td>APM 도구 (New Relic/Datadog)</td></tr>
|
||||
<tr><td><strong>월간 활성 사용자</strong></td><td>80% 이상</td><td>Google Analytics / Mixpanel</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>🎯 정성적 목표</h3>
|
||||
<div class="feature-list">
|
||||
<div class="feature-item"><h4>💡 혁신성</h4><p>국내 최초 AI 기반 세무 자동화 플랫폼 구축</p></div>
|
||||
<div class="feature-item"><h4>🏆 시장 포지션</h4><p>중소기업 세무 솔루션 시장 점유율 Top 3</p></div>
|
||||
<div class="feature-item"><h4>🤝 파트너십</h4><p>주요 ERP/회계 시스템과 공식 파트너십 체결</p></div>
|
||||
<div class="feature-item"><h4>🔐 보안 인증</h4><p>ISO 27001, SOC 2 Type 2 인증 획득</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 19: Risk & Mitigation -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>리스크 관리</h2>
|
||||
<table class="comparison-table">
|
||||
<thead><tr><th>리스크</th><th>영향</th><th>대응 전략</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><strong>세법 변경</strong></td><td>높음</td><td>규칙 엔진 기반 설계로 신속 대응, 법률 자문 확보</td></tr>
|
||||
<tr><td><strong>외부 시스템 장애</strong></td><td>중간</td><td>Fallback 메커니즘, 수동 입력 옵션 제공</td></tr>
|
||||
<tr><td><strong>데이터 보안 침해</strong></td><td>매우 높음</td><td>다층 보안 체계, 정기 보안 감사, 침해 대응 계획 수립</td></tr>
|
||||
<tr><td><strong>개발 일정 지연</strong></td><td>중간</td><td>Agile 방법론, 단계별 마일스톤 관리</td></tr>
|
||||
<tr><td><strong>사용자 채택률 저조</strong></td><td>높음</td><td>직관적 UX, 충분한 교육 및 온보딩, 전담 지원팀</td></tr>
|
||||
<tr><td><strong>AI 모델 정확도</strong></td><td>중간</td><td>Human-in-the-loop 검증, 점진적 자동화 확대</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="scenario-box amber" style="margin-top: 30px;">
|
||||
<h3 style="color: #92400e;">규제 준수 전략</h3>
|
||||
<ul style="color: #78350f;">
|
||||
<li><strong>전자세금계산서법:</strong> 국세청 표준 XML 스키마 준수</li>
|
||||
<li><strong>개인정보보호법:</strong> PIMS 인증 획득, 개인정보 암호화 저장</li>
|
||||
<li><strong>전자금융거래법:</strong> 전자서명 및 공인인증서 연동</li>
|
||||
<li><strong>회계 기준:</strong> K-IFRS 및 일반기업회계기준 준수</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 20: Conclusion -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h2>맺음말</h2>
|
||||
<div class="conclusion-box">
|
||||
<h3 style="color: white; margin-top: 0;">세무 업무의 새로운 패러다임</h3>
|
||||
<p style="font-size: 1.3em;">자동화로 시간을 절약하고, AI로 인사이트를 발견하며, 통합으로 효율을 극대화하는 차세대 세무 솔루션</p>
|
||||
</div>
|
||||
<div style="margin-top: 40px;">
|
||||
<h3>핵심 차별점</h3>
|
||||
<div class="company-info">
|
||||
<div class="info-card"><h4>⚡ 완전 자동화</h4><p>데이터 수집부터 신고까지 End-to-End 자동화</p></div>
|
||||
<div class="info-card"><h4>🤖 AI 기반</h4><p>머신러닝으로 패턴 학습 및 절세 전략 제안</p></div>
|
||||
<div class="info-card"><h4>🔗 완벽한 통합</h4><p>모든 주요 ERP/회계 시스템 네이티브 연동</p></div>
|
||||
<div class="info-card"><h4>📱 언제 어디서나</h4><p>클라우드 기반으로 시간과 장소의 제약 없음</p></div>
|
||||
<div class="info-card"><h4>🛡️ 기업급 보안</h4><p>금융권 수준의 다층 보안 체계</p></div>
|
||||
<div class="info-card"><h4>💡 직관적 UX</h4><p>복잡한 세무를 누구나 쉽게 처리</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 40px; text-align: center;">
|
||||
<p style="font-size: 1.3em; color: #2563eb; font-weight: 700;"><strong>예상 효과</strong></p>
|
||||
<p style="font-size: 1.1em; margin-top: 20px;">업무 시간 <span class="highlight">80% 절감</span> | 오류율 <span class="highlight">95% 감소</span> | 절세 기회 <span class="highlight">자동 발견</span></p>
|
||||
</div>
|
||||
<div class="info-box" style="margin-top: 40px;">
|
||||
<h3 style="text-align: center;">Next Steps</h3>
|
||||
<ol style="font-size: 1.1em; margin-top: 20px;">
|
||||
<li>이해관계자 승인 및 예산 확보</li>
|
||||
<li>개발팀 구성 및 킥오프 미팅</li>
|
||||
<li>Phase 1 상세 요구사항 정의 착수</li>
|
||||
<li>디자인 시스템 프로토타입 개발</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 21: Thank You -->
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<h1 style="font-size: 4em; margin-bottom: 40px;">감사합니다</h1>
|
||||
<div style="text-align: center;">
|
||||
<p style="font-size: 1.5em; color: #2563eb; margin-bottom: 30px; font-weight: 700;">장기적 세무전략 - 중장기 계획안</p>
|
||||
<div style="margin-top: 50px; padding: 30px; background: #f1f5f9; border-radius: 16px; border: 1px solid #e2e8f0;">
|
||||
<h3>문의 및 피드백</h3>
|
||||
<p style="margin-top: 20px;">본 계획안에 대한 의견이나 추가 논의가 필요하신 경우</p>
|
||||
<p>프로젝트 팀으로 연락 주시기 바랍니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide-number">
|
||||
<span id="currentSlide">1</span> / <span id="totalSlides">21</span>
|
||||
</div>
|
||||
|
||||
<div class="navigation">
|
||||
<button class="nav-btn" id="prevBtn" onclick="changeSlide(-1)">← 이전</button>
|
||||
<button class="nav-btn" id="nextBtn" onclick="changeSlide(1)">다음 →</button>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
let currentSlide = 1;
|
||||
const totalSlides = 21;
|
||||
let touchStartX = 0;
|
||||
let touchEndX = 0;
|
||||
|
||||
document.getElementById('totalSlides').textContent = totalSlides;
|
||||
|
||||
function showSlide(n) {
|
||||
const slides = document.querySelectorAll('.slide');
|
||||
|
||||
if (n > totalSlides) currentSlide = 1;
|
||||
if (n < 1) currentSlide = totalSlides;
|
||||
|
||||
slides.forEach(slide => slide.classList.remove('active'));
|
||||
|
||||
if (slides[currentSlide - 1]) {
|
||||
slides[currentSlide - 1].classList.add('active');
|
||||
}
|
||||
document.getElementById('currentSlide').textContent = currentSlide;
|
||||
|
||||
const prevBtn = document.getElementById('prevBtn');
|
||||
const nextBtn = document.getElementById('nextBtn');
|
||||
if (prevBtn) prevBtn.disabled = (currentSlide === 1);
|
||||
if (nextBtn) nextBtn.disabled = (currentSlide === totalSlides);
|
||||
}
|
||||
|
||||
function changeSlide(direction) {
|
||||
currentSlide += direction;
|
||||
showSlide(currentSlide);
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key === 'ArrowLeft') {
|
||||
changeSlide(-1);
|
||||
} else if (event.key === 'ArrowRight' || event.key === ' ') {
|
||||
event.preventDefault();
|
||||
changeSlide(1);
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('touchstart', function(event) {
|
||||
touchStartX = event.changedTouches[0].screenX;
|
||||
});
|
||||
|
||||
document.addEventListener('touchend', function(event) {
|
||||
touchEndX = event.changedTouches[0].screenX;
|
||||
handleSwipe();
|
||||
});
|
||||
|
||||
function handleSwipe() {
|
||||
if (touchEndX < touchStartX - 50) changeSlide(1);
|
||||
if (touchEndX > touchStartX + 50) changeSlide(-1);
|
||||
}
|
||||
|
||||
showSlide(currentSlide);
|
||||
</script>
|
||||
@endpush
|
||||
25
resources/views/layouts/presentation.blade.php
Normal file
25
resources/views/layouts/presentation.blade.php
Normal file
@@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
<title>@yield('title', '프레젠테이션') - {{ config('app.name') }}</title>
|
||||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||
@stack('styles')
|
||||
</head>
|
||||
<body class="bg-gradient-to-br from-blue-600 to-blue-800 min-h-screen overflow-x-hidden">
|
||||
<!-- 돌아가기 버튼 -->
|
||||
<a href="{{ url()->previous() }}"
|
||||
class="fixed top-4 left-4 z-50 bg-white/90 hover:bg-white text-gray-700 px-4 py-2 rounded-full shadow-lg flex items-center gap-2 transition-all hover:scale-105">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
|
||||
</svg>
|
||||
<span class="text-sm font-medium">돌아가기</span>
|
||||
</a>
|
||||
|
||||
@yield('content')
|
||||
|
||||
@stack('scripts')
|
||||
</body>
|
||||
</html>
|
||||
@@ -402,7 +402,7 @@ class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-700 hover:
|
||||
|
||||
<!-- S. Strategy 메뉴 (16개) -->
|
||||
<ul id="lab-panel-s" class="lab-panel space-y-1">
|
||||
<li><span class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-400 cursor-not-allowed" title="세무 전략 (준비중)"><svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg><span class="font-medium sidebar-text">세무 전략</span></span></li>
|
||||
<li><a href="{{ route('lab.strategy.tax') }}" class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-colors" title="세무 전략"><svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg><span class="font-medium sidebar-text">세무 전략</span></a></li>
|
||||
<li><span class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-400 cursor-not-allowed" title="노무 전략 (준비중)"><svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" /></svg><span class="font-medium sidebar-text">노무 전략</span></span></li>
|
||||
<li><span class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-400 cursor-not-allowed" title="채권추심 전략 (준비중)"><svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg><span class="font-medium sidebar-text">채권추심 전략</span></span></li>
|
||||
<li class="border-t border-gray-100 pt-1 mt-1"></li>
|
||||
@@ -495,7 +495,7 @@ class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-700 hover:
|
||||
<div class="p-2 max-h-64 overflow-y-auto">
|
||||
<!-- S. Strategy (16개) -->
|
||||
<ul id="lab-flyout-panel-s" class="lab-flyout-panel space-y-0.5">
|
||||
<li><span class="block px-2 py-1 text-xs text-gray-400 rounded hover:bg-gray-50">세무 전략</span></li>
|
||||
<li><a href="{{ route('lab.strategy.tax') }}" class="block px-2 py-1 text-xs text-gray-600 rounded hover:bg-gray-100 hover:text-gray-900">세무 전략</a></li>
|
||||
<li><span class="block px-2 py-1 text-xs text-gray-400 rounded hover:bg-gray-50">노무 전략</span></li>
|
||||
<li><span class="block px-2 py-1 text-xs text-gray-400 rounded hover:bg-gray-50">채권추심 전략</span></li>
|
||||
<li class="border-t border-gray-100 my-1"></li>
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
use App\Http\Controllers\RolePermissionController;
|
||||
use App\Http\Controllers\TenantController;
|
||||
use App\Http\Controllers\ItemFieldController;
|
||||
use App\Http\Controllers\Lab\StrategyController;
|
||||
use App\Http\Controllers\UserController;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
|
||||
@@ -196,6 +197,32 @@
|
||||
return redirect()->route('dashboard');
|
||||
});
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| 실험실 Routes (5130 마이그레이션)
|
||||
|--------------------------------------------------------------------------
|
||||
*/
|
||||
Route::prefix('lab')->name('lab.')->group(function () {
|
||||
// S. 전략 (Strategy)
|
||||
Route::prefix('strategy')->name('strategy.')->group(function () {
|
||||
Route::get('/tax', [StrategyController::class, 'tax'])->name('tax');
|
||||
Route::get('/labor', [StrategyController::class, 'labor'])->name('labor');
|
||||
Route::get('/debt', [StrategyController::class, 'debt'])->name('debt');
|
||||
Route::get('/stablecoin', [StrategyController::class, 'stablecoin'])->name('stablecoin');
|
||||
Route::get('/mrp-overseas', [StrategyController::class, 'mrpOverseas'])->name('mrp-overseas');
|
||||
Route::get('/chatbot', [StrategyController::class, 'chatbot'])->name('chatbot');
|
||||
Route::get('/kodata-vs-nice', [StrategyController::class, 'kodataVsNice'])->name('kodata-vs-nice');
|
||||
Route::get('/barobill-vs-popbill', [StrategyController::class, 'barobillVsPopbill'])->name('barobill-vs-popbill');
|
||||
Route::get('/knowledge-search', [StrategyController::class, 'knowledgeSearch'])->name('knowledge-search');
|
||||
Route::get('/chatbot-compare', [StrategyController::class, 'chatbotCompare'])->name('chatbot-compare');
|
||||
Route::get('/rag-startups', [StrategyController::class, 'ragStartups'])->name('rag-startups');
|
||||
Route::get('/douzone', [StrategyController::class, 'douzone'])->name('douzone');
|
||||
Route::get('/confluence-vs-notion', [StrategyController::class, 'confluenceVsNotion'])->name('confluence-vs-notion');
|
||||
Route::get('/qa-solution', [StrategyController::class, 'qaSolution'])->name('qa-solution');
|
||||
Route::get('/sales-strategy', [StrategyController::class, 'salesStrategy'])->name('sales-strategy');
|
||||
});
|
||||
});
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| 개발 도구 Routes
|
||||
|
||||
Reference in New Issue
Block a user