1153 lines
74 KiB
PHP
1153 lines
74 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>경정청구의 전산화와 조세 행정의 패러다임 전환</title>
|
|
<!-- Favicon -->
|
|
<link rel="apple-touch-icon" sizes="180x180" href="../img/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="../img/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="../img/favicon-16x16.png">
|
|
<link rel="shortcut icon" href="../img/favicon.png">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { font-family: 'Noto Sans KR', sans-serif; }
|
|
.nav-active { border-bottom: 3px solid #0d9488; color: #0d9488; font-weight: 700; }
|
|
.nav-inactive { color: #64748B; border-bottom: 3px solid transparent; }
|
|
.nav-inactive:hover { color: #0d9488; }
|
|
.fade-in {
|
|
animation: fadeIn 0.5s ease-out forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.custom-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
.custom-scroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
|
|
.custom-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
|
|
.custom-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
|
|
.chart-container {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
height: 300px;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.chart-container { height: 350px; }
|
|
}
|
|
.step-connector::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 100%;
|
|
width: 100%;
|
|
height: 2px;
|
|
background-color: #E2E8F0;
|
|
z-index: 0;
|
|
transform: translateY(-50%);
|
|
}
|
|
.step-connector:last-child::after { display: none; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-100 min-h-screen">
|
|
<!-- Sticky Header -->
|
|
<header class="bg-white shadow-sm sticky top-0 z-50">
|
|
<div class="max-w-6xl mx-auto px-4">
|
|
<div class="flex items-center justify-between py-4">
|
|
<a href="../index.php" class="flex items-center gap-3 cursor-pointer">
|
|
<img src="../img/favicon-32x32.png" alt="SAM" class="w-10 h-10 rounded-xl">
|
|
<div class="flex flex-col">
|
|
<span class="text-lg font-bold text-slate-800 leading-tight">SAM</span>
|
|
<span class="text-xs text-slate-500 leading-tight">Smart Automation Management</span>
|
|
</div>
|
|
</a>
|
|
<a href="../index.php" class="text-sm font-medium text-slate-500 hover:text-slate-900 transition-colors">홈</a>
|
|
</div>
|
|
<nav class="flex space-x-1 overflow-x-auto custom-scroll" id="nav-container">
|
|
<button onclick="switchTab('overview')" id="tab-overview" class="px-4 py-3 text-sm font-medium whitespace-nowrap nav-active">종합 요약</button>
|
|
<button onclick="switchTab('intro')" id="tab-intro" class="px-4 py-3 text-sm font-medium whitespace-nowrap nav-inactive">서론</button>
|
|
<button onclick="switchTab('process')" id="tab-process" class="px-4 py-3 text-sm font-medium whitespace-nowrap nav-inactive">프로세스 비교</button>
|
|
<button onclick="switchTab('analytics')" id="tab-analytics" class="px-4 py-3 text-sm font-medium whitespace-nowrap nav-inactive">데이터 분석</button>
|
|
<button onclick="switchTab('benefits')" id="tab-benefits" class="px-4 py-3 text-sm font-medium whitespace-nowrap nav-inactive">효익 분석</button>
|
|
<button onclick="switchTab('issues')" id="tab-issues" class="px-4 py-3 text-sm font-medium whitespace-nowrap nav-inactive">쟁점</button>
|
|
<button onclick="switchTab('future')" id="tab-future" class="px-4 py-3 text-sm font-medium whitespace-nowrap nav-inactive">미래 전망</button>
|
|
<button onclick="switchTab('quiz')" id="tab-quiz" class="px-4 py-3 text-sm font-medium whitespace-nowrap nav-inactive">학습 가이드</button>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="max-w-6xl mx-auto px-4 py-8">
|
|
<!-- Dynamic Content Container -->
|
|
<div id="content-area" class="min-h-screen fade-in">
|
|
<!-- Content injected by JS -->
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-slate-800 text-white py-8 mt-12">
|
|
<div class="max-w-6xl mx-auto px-4 text-center">
|
|
<p class="text-sm text-slate-400">작성자: 조세 정책 및 리걸테크 수석 연구원</p>
|
|
<p class="text-sm text-slate-400 mt-1">작성일: 2026년 1월 8일</p>
|
|
<p class="text-xs text-slate-500 mt-4">© SAM - 경정청구 자동화 시스템</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// --- State Management ---
|
|
const state = {
|
|
currentTab: 'overview',
|
|
processMode: 'manual'
|
|
};
|
|
|
|
// --- Data Store ---
|
|
const dataStore = {
|
|
metrics: [
|
|
{ label: '처리 기간 단축', value: '90%', desc: '14일 → 1.4일', color: 'text-teal-600' },
|
|
{ label: '행정 비용 절감', value: '75%', desc: '건당 5만원 → 1.2만원', color: 'text-green-600' },
|
|
{ label: '오류 발생률 감소', value: '95%', desc: '입력 오류 자동 검증', color: 'text-amber-600' }
|
|
],
|
|
platformStats: [
|
|
{ label: '삼쩜삼 가입자', value: '2,300만 명', icon: '👥' },
|
|
{ label: '누적 환급 신고액', value: '1조 6,700억 원', icon: '💰' },
|
|
{ label: '무료 환급 이용자', value: '120만 명', icon: '🎁' }
|
|
],
|
|
processSteps: {
|
|
manual: [
|
|
{ step: 1, title: '신청서 작성', icon: '📝', desc: '납세자가 복잡한 법령을 확인하며 수기로 작성' },
|
|
{ step: 2, title: '방문/우편 접수', icon: '🏢', desc: '세무서 방문 또는 등기 우편 발송 (이동 시간 소요)' },
|
|
{ step: 3, title: '담당자 수동 배정', icon: '👤', desc: '문서 접수 후 담당자 지정까지 대기' },
|
|
{ step: 4, title: '서류 검토', icon: '🔍', desc: '담당자가 종이 서류를 육안으로 검토 및 대조' },
|
|
{ step: 5, title: '수동 입력', icon: '⌨️', desc: '검토 결과를 내부 시스템에 직접 타이핑 (오류 위험)' },
|
|
{ step: 6, title: '결과 통지', icon: '📮', desc: '우편으로 결과 발송 (2-3일 소요)' }
|
|
],
|
|
digital: [
|
|
{ step: 1, title: '본인 인증', icon: '🔐', desc: '간편 인증을 통한 즉시 로그인' },
|
|
{ step: 2, title: '데이터 자동 채움', icon: '⚡', desc: '기존 신고 내역 자동 연동 및 신청서 생성' },
|
|
{ step: 3, title: 'AI 자동 검증', icon: '🤖', desc: 'AI 알고리즘이 오류 및 누락 사항 1차 검증' },
|
|
{ step: 4, title: '즉시 접수', icon: '🚀', desc: '클릭 한 번으로 관할 세무서 시스템 등재' },
|
|
{ step: 5, title: '실시간 조회', icon: '📱', desc: '카카오톡/문자로 진행 상황 실시간 알림' }
|
|
]
|
|
},
|
|
charts: {
|
|
timeComparison: {
|
|
labels: ['신청서 작성', '접수/이동', '담당자 배정', '검토/처리', '결과 통지'],
|
|
manual: [4, 4, 24, 48, 48],
|
|
digital: [0.5, 0, 0, 4, 0]
|
|
},
|
|
costSavings: {
|
|
labels: ['2024', '2025', '2026', '2027', '2028'],
|
|
manualData: [10, 11, 12.1, 13.3, 14.6],
|
|
digitalData: [3, 2.8, 2.6, 2.5, 2.4]
|
|
},
|
|
errorTypes: {
|
|
labels: ['계산 오류', '기재 누락', '증빙 미비', '법령 오적용'],
|
|
data: [45, 30, 15, 10]
|
|
},
|
|
adoptionTrend: {
|
|
labels: ['2020', '2021', '2022', '2023', '2024', '2025'],
|
|
users: [50, 200, 800, 1500, 2000, 2300]
|
|
}
|
|
}
|
|
};
|
|
|
|
// --- Core Rendering Functions ---
|
|
function init() {
|
|
renderContent();
|
|
}
|
|
|
|
function switchTab(tabId) {
|
|
state.currentTab = tabId;
|
|
|
|
// Update nav styles
|
|
document.querySelectorAll('#nav-container button').forEach(btn => {
|
|
btn.classList.remove('nav-active');
|
|
btn.classList.add('nav-inactive');
|
|
});
|
|
document.getElementById('tab-' + tabId).classList.remove('nav-inactive');
|
|
document.getElementById('tab-' + tabId).classList.add('nav-active');
|
|
|
|
renderContent();
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
}
|
|
|
|
function renderContent() {
|
|
const container = document.getElementById('content-area');
|
|
container.innerHTML = '';
|
|
container.classList.remove('fade-in');
|
|
void container.offsetWidth;
|
|
container.classList.add('fade-in');
|
|
|
|
switch (state.currentTab) {
|
|
case 'overview': renderOverview(container); break;
|
|
case 'intro': renderIntro(container); break;
|
|
case 'process': renderProcess(container); break;
|
|
case 'analytics': renderAnalytics(container); break;
|
|
case 'benefits': renderBenefits(container); break;
|
|
case 'issues': renderIssues(container); break;
|
|
case 'future': renderFuture(container); break;
|
|
case 'quiz': renderQuiz(container); break;
|
|
}
|
|
}
|
|
|
|
// --- Section Renderers ---
|
|
function renderOverview(container) {
|
|
container.innerHTML = `
|
|
<div class="space-y-8">
|
|
<!-- Hero Section -->
|
|
<div class="bg-gradient-to-r from-teal-600 to-slate-800 text-white rounded-2xl p-8 shadow-lg">
|
|
<h2 class="text-3xl font-bold mb-4">납세자 권익 보호와 행정 효율의 혁신</h2>
|
|
<p class="text-teal-100 text-lg leading-relaxed max-w-3xl">
|
|
경정청구 전산화는 <strong class="text-white">행정 효율성</strong>,
|
|
<strong class="text-white">비용 절감</strong>, 그리고
|
|
<strong class="text-white">오류 감소</strong>를 통해
|
|
조세 정의 실현과 경제 활성화라는 거시적 효익을 창출합니다.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- KPI Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
${dataStore.metrics.map(metric => `
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 text-center hover:shadow-md transition-shadow">
|
|
<p class="text-slate-500 font-medium mb-2">${metric.label}</p>
|
|
<p class="text-4xl font-extrabold ${metric.color} mb-2">${metric.value}</p>
|
|
<p class="text-sm text-slate-400">${metric.desc}</p>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
|
|
<!-- Platform Stats -->
|
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
|
<h3 class="text-lg font-bold text-slate-700 mb-4">플랫폼 성과 현황</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
${dataStore.platformStats.map(stat => `
|
|
<div class="bg-teal-50 rounded-lg p-4 text-center">
|
|
<span class="text-3xl">${stat.icon}</span>
|
|
<p class="text-2xl font-bold text-teal-600 mt-2">${stat.value}</p>
|
|
<p class="text-sm text-slate-600">${stat.label}</p>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Key Findings -->
|
|
<div class="bg-teal-50 p-8 rounded-2xl border border-teal-100">
|
|
<h3 class="text-xl font-bold text-teal-900 mb-4">💡 연구의 핵심 결론</h3>
|
|
<ul class="space-y-3 text-teal-800">
|
|
<li class="flex items-start">
|
|
<span class="text-teal-600 mr-2">✓</span>
|
|
<span>단순 반복 업무의 자동화로 세무 공무원은 <strong>고부가가치 조사 업무에 집중</strong> 가능</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="text-teal-600 mr-2">✓</span>
|
|
<span>복잡한 세법 계산의 자동화로 <strong>납세 협력 비용 획기적 감소</strong></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="text-teal-600 mr-2">✓</span>
|
|
<span>데이터 기반의 세수 예측 및 <strong>정책 수립의 정확도 향상</strong></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="text-teal-600 mr-2">✓</span>
|
|
<span><strong>1조 6,700억 원</strong> 이상의 유동성 공급을 통한 경제 활성화</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Quick Navigation -->
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<button onclick="switchTab('process')" class="bg-white p-4 rounded-xl shadow-sm hover:shadow-md transition-shadow text-left">
|
|
<span class="text-2xl">🔄</span>
|
|
<p class="font-medium text-slate-700 mt-2">프로세스 비교</p>
|
|
<p class="text-xs text-slate-500">수기 vs 전산화</p>
|
|
</button>
|
|
<button onclick="switchTab('analytics')" class="bg-white p-4 rounded-xl shadow-sm hover:shadow-md transition-shadow text-left">
|
|
<span class="text-2xl">📊</span>
|
|
<p class="font-medium text-slate-700 mt-2">데이터 분석</p>
|
|
<p class="text-xs text-slate-500">차트로 보는 변화</p>
|
|
</button>
|
|
<button onclick="switchTab('issues')" class="bg-white p-4 rounded-xl shadow-sm hover:shadow-md transition-shadow text-left">
|
|
<span class="text-2xl">⚠️</span>
|
|
<p class="font-medium text-slate-700 mt-2">주요 쟁점</p>
|
|
<p class="text-xs text-slate-500">갈등과 위험 요인</p>
|
|
</button>
|
|
<button onclick="switchTab('quiz')" class="bg-white p-4 rounded-xl shadow-sm hover:shadow-md transition-shadow text-left">
|
|
<span class="text-2xl">📚</span>
|
|
<p class="font-medium text-slate-700 mt-2">학습 가이드</p>
|
|
<p class="text-xs text-slate-500">용어와 퀴즈</p>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function renderIntro(container) {
|
|
container.innerHTML = `
|
|
<div class="space-y-6">
|
|
<div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-teal-600">
|
|
<h2 class="text-2xl font-bold text-slate-800 mb-4">경정청구의 전산화와 조세 행정의 패러다임 전환</h2>
|
|
<p class="text-slate-600 leading-relaxed">효익, 쟁점, 그리고 미래에 관한 심층 보고서</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
<div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow">
|
|
<div class="flex items-center mb-4">
|
|
<span class="text-3xl mr-3">🎯</span>
|
|
<h3 class="text-lg font-bold text-slate-700">연구 배경 및 목적</h3>
|
|
</div>
|
|
<p class="text-slate-600 leading-relaxed text-sm">
|
|
4차 산업혁명의 물결은 금융, 의료, 법률 등 전문직 서비스 영역의 진입장벽을 허물고 있습니다.
|
|
특히 보수적이고 폐쇄적인 영역으로 간주되던 세무·회계 시장은 AI, 빅데이터, 클라우드 컴퓨팅 기술의 결합을 통해
|
|
급격한 '디지털 전환(Digital Transformation, DX)'을 겪고 있습니다.
|
|
</p>
|
|
</div>
|
|
<div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow">
|
|
<div class="flex items-center mb-4">
|
|
<span class="text-3xl mr-3">📋</span>
|
|
<h3 class="text-lg font-bold text-slate-700">경정청구란?</h3>
|
|
</div>
|
|
<p class="text-slate-600 leading-relaxed text-sm">
|
|
「국세기본법」 제45조의2에 의거, 납세자가 법정신고기한 내에 세금을 신고·납부했으나,
|
|
착오나 누락 등으로 인해 정당한 세액보다 과다하게 납부한 경우 과세관청에 이를 바로잡아 줄 것을 청구하는 제도입니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
|
<h3 class="text-lg font-bold text-slate-700 mb-4">세무 행정 환경의 변화</h3>
|
|
<div class="grid md:grid-cols-3 gap-4">
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
<span class="text-2xl">👥</span>
|
|
<p class="text-sm font-medium text-slate-700 mt-2">다양한 고용 형태</p>
|
|
<p class="text-xs text-slate-500 mt-1">플랫폼 노동자, 프리랜서, N잡러 증가</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
<span class="text-2xl">📊</span>
|
|
<p class="text-sm font-medium text-slate-700 mt-2">세법 복잡성 증가</p>
|
|
<p class="text-xs text-slate-500 mt-1">매년 개정되는 조세특례제한법</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
<span class="text-2xl">🤖</span>
|
|
<p class="text-sm font-medium text-slate-700 mt-2">AI 국세행정 추진</p>
|
|
<p class="text-xs text-slate-500 mt-1">2026년 자동화 수준 획기적 향상 목표</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
|
<h3 class="text-lg font-bold text-slate-700 mb-4">전통적 경정청구 방식의 한계점</h3>
|
|
<div class="space-y-4">
|
|
<div class="flex items-start p-4 bg-red-50 rounded-lg">
|
|
<span class="text-xl mr-3">🔒</span>
|
|
<div>
|
|
<p class="font-medium text-slate-700">정보의 비대칭성과 접근성 제한</p>
|
|
<p class="text-sm text-slate-600 mt-1">환급 가능성을 납세자 스스로 인지하기 어려우며, 소액인 경우 수수료 부담으로 권리 행사 포기</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start p-4 bg-amber-50 rounded-lg">
|
|
<span class="text-xl mr-3">⏱️</span>
|
|
<div>
|
|
<p class="font-medium text-slate-700">절차의 복잡성 및 시간 소요</p>
|
|
<p class="text-sm text-slate-600 mt-1">방대한 증빙 서류 준비, 수동 작성, 관할 세무서 제출 후 통상 2개월 소요</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start p-4 bg-orange-50 rounded-lg">
|
|
<span class="text-xl mr-3">⚠️</span>
|
|
<div>
|
|
<p class="font-medium text-slate-700">인적 오류(Human Error)의 위험</p>
|
|
<p class="text-sm text-slate-600 mt-1">계산 착오, 개정 세법 미반영으로 인한 과소/과다 환급 위험</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function renderProcess(container) {
|
|
const steps = dataStore.processSteps[state.processMode];
|
|
const isManual = state.processMode === 'manual';
|
|
|
|
container.innerHTML = `
|
|
<div class="space-y-8">
|
|
<div class="text-center space-y-4">
|
|
<h2 class="text-2xl font-bold text-slate-800">프로세스 비교 시뮬레이션</h2>
|
|
<p class="text-slate-600 max-w-2xl mx-auto">
|
|
기존의 복잡한 수기 절차와 전산화된 간소화 절차를 비교해보세요.
|
|
</p>
|
|
<div class="inline-flex bg-slate-200 rounded-lg p-1">
|
|
<button onclick="toggleProcess('manual')" class="px-6 py-2 rounded-md text-sm font-medium transition-all ${isManual ? 'bg-white text-slate-800 shadow-sm' : 'text-slate-600 hover:text-slate-800'}">
|
|
기존 (수기 방식)
|
|
</button>
|
|
<button onclick="toggleProcess('digital')" class="px-6 py-2 rounded-md text-sm font-medium transition-all ${!isManual ? 'bg-teal-600 text-white shadow-sm' : 'text-slate-600 hover:text-slate-800'}">
|
|
신규 (전산화)
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white p-8 rounded-2xl shadow-md overflow-x-auto custom-scroll">
|
|
<div class="flex items-start justify-between min-w-[800px] relative px-4 py-8">
|
|
${steps.map((step, index) => `
|
|
<div class="flex flex-col items-center relative z-10 w-40 step-connector group">
|
|
<div class="w-16 h-16 rounded-full flex items-center justify-center text-3xl mb-4 transition-all duration-300 ${isManual ? 'bg-slate-100 text-slate-500 group-hover:bg-slate-200' : 'bg-teal-100 text-teal-600 group-hover:bg-teal-200 group-hover:scale-110 shadow-lg'}">
|
|
${step.icon}
|
|
</div>
|
|
<h3 class="font-bold text-slate-800 mb-2 text-center">${step.title}</h3>
|
|
<p class="text-xs text-center text-slate-500 px-2">${step.desc}</p>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="bg-red-50 p-6 rounded-xl border border-red-100 ${isManual ? 'block' : 'hidden'}">
|
|
<h4 class="font-bold text-red-800 mb-3">⚠️ 주요 문제점 (Pain Points)</h4>
|
|
<ul class="space-y-2 text-sm text-red-700">
|
|
<li>• 서류 미비로 인한 반려율이 높음</li>
|
|
<li>• 담당자 배정까지 평균 3일 소요</li>
|
|
<li>• 수기 입력 과정에서 오타 발생 가능성 상존</li>
|
|
<li>• 복잡한 세법 규정 이해의 어려움</li>
|
|
</ul>
|
|
</div>
|
|
<div class="bg-green-50 p-6 rounded-xl border border-green-100 ${!isManual ? 'block' : 'hidden'}">
|
|
<h4 class="font-bold text-green-800 mb-3">✅ 개선 효과 (Benefits)</h4>
|
|
<ul class="space-y-2 text-sm text-green-700">
|
|
<li>• 데이터 자동 검증으로 반려율 0% 도전</li>
|
|
<li>• 시스템 즉시 배정으로 대기 시간 "0"</li>
|
|
<li>• 입력 불필요, 클릭만으로 신청 완료</li>
|
|
<li>• AI가 최적의 공제 항목 자동 추천</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Technology Comparison Table -->
|
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
|
<h3 class="text-lg font-bold text-slate-700 mb-4">핵심 기술: 데이터 수집 기술의 진화</h3>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm">
|
|
<thead class="bg-slate-800 text-white">
|
|
<tr>
|
|
<th class="px-4 py-3 text-left rounded-tl-lg">구분</th>
|
|
<th class="px-4 py-3 text-left">스크래핑 (Scraping)</th>
|
|
<th class="px-4 py-3 text-left rounded-tr-lg">API (마이데이터)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-200">
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-3 font-medium text-slate-700">작동 원리</td>
|
|
<td class="px-4 py-3 text-slate-600">화면 정보 자동 추출</td>
|
|
<td class="px-4 py-3 text-slate-600">서버 간 표준화된 데이터 전송</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-3 font-medium text-slate-700">속도</td>
|
|
<td class="px-4 py-3 text-slate-600">상대적으로 느림</td>
|
|
<td class="px-4 py-3 text-teal-600 font-medium">매우 빠름</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-3 font-medium text-slate-700">보안성</td>
|
|
<td class="px-4 py-3 text-red-600">취약 (인증정보 저장 이슈)</td>
|
|
<td class="px-4 py-3 text-teal-600 font-medium">안전 (암호화 전송)</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-3 font-medium text-slate-700">안정성</td>
|
|
<td class="px-4 py-3 text-slate-600">UI 변경 시 서비스 중단</td>
|
|
<td class="px-4 py-3 text-teal-600 font-medium">표준 규격 유지로 안정적</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-3 font-medium text-slate-700">비용</td>
|
|
<td class="px-4 py-3 text-teal-600 font-medium">낮음</td>
|
|
<td class="px-4 py-3 text-slate-600">높음 (API 호출 수수료)</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI Features -->
|
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
|
<h3 class="text-lg font-bold text-slate-700 mb-4">AI 기반 세액 분석 알고리즘</h3>
|
|
<div class="grid md:grid-cols-3 gap-4">
|
|
<div class="bg-teal-50 rounded-lg p-4 border-l-4 border-teal-600">
|
|
<p class="font-medium text-slate-700">패턴 매칭 및 누락 탐지</p>
|
|
<p class="text-sm text-slate-600 mt-2">5년간 신고 내역 스캔하여 누락된 세액공제 즉시 식별</p>
|
|
</div>
|
|
<div class="bg-teal-50 rounded-lg p-4 border-l-4 border-teal-600">
|
|
<p class="font-medium text-slate-700">시뮬레이션 및 최적화</p>
|
|
<p class="text-sm text-slate-600 mt-2">모든 공제 조합을 시뮬레이션하여 최유리 결과 제시</p>
|
|
</div>
|
|
<div class="bg-teal-50 rounded-lg p-4 border-l-4 border-teal-600">
|
|
<p class="font-medium text-slate-700">OCR 활용</p>
|
|
<p class="text-sm text-slate-600 mt-2">종이 영수증, 비정형 문서를 디지털화하여 증빙 누락 방지</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function toggleProcess(mode) {
|
|
state.processMode = mode;
|
|
renderContent();
|
|
}
|
|
|
|
function renderAnalytics(container) {
|
|
container.innerHTML = `
|
|
<div class="space-y-8">
|
|
<div class="text-center">
|
|
<h2 class="text-2xl font-bold text-slate-800 mb-2">데이터로 보는 변화</h2>
|
|
<p class="text-slate-600">전산화 전후의 성과를 정량적인 데이터로 비교 분석합니다.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<!-- Time Comparison Chart -->
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
|
|
<h3 class="text-sm font-bold text-slate-500 uppercase tracking-wide mb-4">단계별 소요 시간 비교 (단위: 시간)</h3>
|
|
<div class="chart-container">
|
|
<canvas id="timeChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cost Savings Chart -->
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
|
|
<h3 class="text-sm font-bold text-slate-500 uppercase tracking-wide mb-4">연도별 운영 비용 절감 예측 (단위: 억원)</h3>
|
|
<div class="chart-container">
|
|
<canvas id="costChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error Types Chart -->
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
|
|
<h3 class="text-sm font-bold text-slate-500 uppercase tracking-wide mb-4">기존 수기 방식의 주요 오류 유형 분석</h3>
|
|
<div class="chart-container">
|
|
<canvas id="errorChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Adoption Trend Chart -->
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
|
|
<h3 class="text-sm font-bold text-slate-500 uppercase tracking-wide mb-4">플랫폼 이용자 증가 추이 (단위: 만 명)</h3>
|
|
<div class="chart-container">
|
|
<canvas id="adoptionChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Insights Block -->
|
|
<div class="bg-slate-50 p-6 rounded-xl border border-slate-200">
|
|
<h3 class="font-bold text-slate-800 mb-4 text-lg">💡 데이터 분석 인사이트</h3>
|
|
<div class="grid md:grid-cols-3 gap-6 text-sm text-slate-600">
|
|
<div>
|
|
<p class="font-medium text-teal-600 mb-2">시간 효율성</p>
|
|
<p>가장 큰 병목 구간인 '검토 및 처리' 단계가 전산 검증으로 90% 이상 단축됩니다.</p>
|
|
</div>
|
|
<div>
|
|
<p class="font-medium text-green-600 mb-2">비용 효율성</p>
|
|
<p>초기 시스템 구축 비용이 발생하지만, 2년 차부터 BEP(손익분기점)를 달성합니다.</p>
|
|
</div>
|
|
<div>
|
|
<p class="font-medium text-amber-600 mb-2">품질 향상</p>
|
|
<p>단순 계산 오류(45%)가 시스템 자동 계산으로 인해 원천 차단됩니다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
setTimeout(() => {
|
|
initTimeChart();
|
|
initCostChart();
|
|
initErrorChart();
|
|
initAdoptionChart();
|
|
}, 100);
|
|
}
|
|
|
|
function renderBenefits(container) {
|
|
container.innerHTML = `
|
|
<div class="space-y-6">
|
|
<div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-teal-600">
|
|
<h2 class="text-2xl font-bold text-slate-800 mb-2">경정청구 전산화의 다차원적 효익 분석</h2>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
<div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow">
|
|
<div class="flex items-center mb-4">
|
|
<span class="text-3xl mr-3">🌐</span>
|
|
<h3 class="text-lg font-bold text-slate-700">접근성 혁명</h3>
|
|
</div>
|
|
<p class="text-slate-600 leading-relaxed text-sm mb-4">
|
|
'세무 서비스의 민주화' - 기존 세무 시장은 높은 수수료를 지불할 수 있는 법인과 고소득 개인사업자 중심이었으나,
|
|
전산화된 플랫폼이 소액 납세자들을 제도권 세무 서비스로 편입시켰습니다.
|
|
</p>
|
|
<div class="bg-teal-50 rounded-lg p-4">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<span class="text-sm font-medium text-slate-700">삼쩜삼 가입자</span>
|
|
<span class="text-lg font-bold text-teal-600">2,300만 명</span>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-sm font-medium text-slate-700">누적 환급 신고액</span>
|
|
<span class="text-lg font-bold text-teal-600">1조 6,700억 원</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow">
|
|
<div class="flex items-center mb-4">
|
|
<span class="text-3xl mr-3">✅</span>
|
|
<h3 class="text-lg font-bold text-slate-700">정확성과 완전성</h3>
|
|
</div>
|
|
<p class="text-slate-600 leading-relaxed text-sm mb-4">
|
|
AI 기반 분석은 인간이 범하기 쉬운 실수와 누락을 체계적으로 방지합니다.
|
|
고용증대세액공제 같은 복잡한 항목도 100% 찾아냅니다.
|
|
</p>
|
|
<div class="bg-amber-50 rounded-lg p-4">
|
|
<p class="text-sm text-slate-700"><strong>사례:</strong> 인천 제조업체 A사는 경정청구 플랫폼 진단을 통해 3년간 누락된 세액공제 <span class="text-amber-600 font-bold">1억 원</span>을 일괄 환급받았습니다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Process Comparison Table -->
|
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
|
<h3 class="text-lg font-bold text-slate-700 mb-4">프로세스 혁신: 시간과 비용의 획기적 절감</h3>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm">
|
|
<thead class="bg-slate-800 text-white">
|
|
<tr>
|
|
<th class="px-4 py-3 text-left rounded-tl-lg">비교 항목</th>
|
|
<th class="px-4 py-3 text-left">전통적 대면 방식</th>
|
|
<th class="px-4 py-3 text-left">전산화/플랫폼 방식</th>
|
|
<th class="px-4 py-3 text-left rounded-tr-lg">효익</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-200">
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-3 font-medium text-slate-700">탐색 비용</td>
|
|
<td class="px-4 py-3 text-slate-600">세무사 수소문 및 상담 발품</td>
|
|
<td class="px-4 py-3 text-teal-600">앱 설치 및 본인 인증 (5분)</td>
|
|
<td class="px-4 py-3 text-teal-600 font-medium">99% 단축</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-3 font-medium text-slate-700">진단 시간</td>
|
|
<td class="px-4 py-3 text-slate-600">자료 전달 후 수일 소요</td>
|
|
<td class="px-4 py-3 text-teal-600">데이터 연동 후 즉시 결과</td>
|
|
<td class="px-4 py-3 text-teal-600 font-medium">실시간</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-3 font-medium text-slate-700">수수료</td>
|
|
<td class="px-4 py-3 text-slate-600">착수금 + 성공보수 (20~30%)</td>
|
|
<td class="px-4 py-3 text-teal-600">무료 진단 + 성공보수 (10~20%)</td>
|
|
<td class="px-4 py-3 text-teal-600 font-medium">비용 장벽 제거</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-3 font-medium text-slate-700">처리 기간</td>
|
|
<td class="px-4 py-3 text-slate-600">세무서 검토 2개월 소요</td>
|
|
<td class="px-4 py-3 text-teal-600">표준화된 데이터로 검토 용이</td>
|
|
<td class="px-4 py-3 text-teal-600 font-medium">행정력 절감</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Qualitative Benefits -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div class="group bg-white p-6 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
|
|
<div class="w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center text-2xl mb-4 group-hover:scale-110 transition-transform">👀</div>
|
|
<h3 class="text-lg font-bold text-slate-800 mb-2">투명성 강화</h3>
|
|
<p class="text-slate-600 text-sm">
|
|
모든 처리 과정이 실시간으로 기록되고 납세자에게 공개됩니다. '깜깜이 행정'이라는 오명을 벗고 행정의 신뢰도를 제고할 수 있습니다.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="group bg-white p-6 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
|
|
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center text-2xl mb-4 group-hover:scale-110 transition-transform">♿</div>
|
|
<h3 class="text-lg font-bold text-slate-800 mb-2">접근성 개선</h3>
|
|
<p class="text-slate-600 text-sm">
|
|
세무서 방문이 어려운 도서 산간 지역 거주자나 거동이 불편한 납세자도 집에서 PC나 모바일로 손쉽게 권리를 행사할 수 있습니다.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="group bg-white p-6 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
|
|
<div class="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center text-2xl mb-4 group-hover:scale-110 transition-transform">🛡️</div>
|
|
<h3 class="text-lg font-bold text-slate-800 mb-2">정보 보호</h3>
|
|
<p class="text-slate-600 text-sm">
|
|
종이 서류의 분실 및 도난 위험이 사라집니다. 암호화된 DB 관리와 접근 제어를 통해 개인정보 유출 위험을 원천 차단합니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Economic Effect -->
|
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
|
<h3 class="text-lg font-bold text-slate-700 mb-4">거시경제적 효과</h3>
|
|
<div class="grid md:grid-cols-2 gap-4">
|
|
<div class="bg-teal-50 rounded-lg p-4">
|
|
<span class="text-2xl">💰</span>
|
|
<p class="font-medium text-slate-700 mt-2">소상공인 경영 안정</p>
|
|
<p class="text-sm text-slate-600 mt-1">평균 700~900만 원의 환급금이 영세 사업자의 임대료나 인건비 방어에 기여</p>
|
|
</div>
|
|
<div class="bg-teal-50 rounded-lg p-4">
|
|
<span class="text-2xl">🔄</span>
|
|
<p class="font-medium text-slate-700 mt-2">경제 선순환</p>
|
|
<p class="text-sm text-slate-600 mt-1">환급 자금의 소비·재투자로 내수 경기 활성화 및 납세 순응도 향상</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function renderIssues(container) {
|
|
container.innerHTML = `
|
|
<div class="space-y-6">
|
|
<div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-amber-500">
|
|
<h2 class="text-2xl font-bold text-slate-800 mb-2">전산화의 그늘: 주요 쟁점, 갈등 및 위험 요인</h2>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
|
<div class="flex items-center mb-4">
|
|
<span class="text-2xl mr-3">⚔️</span>
|
|
<h3 class="text-lg font-bold text-slate-700">직역 간 갈등: 한국세무사회 vs 택스테크 기업</h3>
|
|
</div>
|
|
<div class="grid md:grid-cols-2 gap-4">
|
|
<div class="bg-red-50 rounded-lg p-4">
|
|
<p class="font-medium text-red-700">세무사회 입장</p>
|
|
<p class="text-sm text-slate-600 mt-2">세무사 자격 없이 영리 목적으로 세무 대리 업무 수행 및 알선 수수료 수취는 「세무사법」 위반</p>
|
|
</div>
|
|
<div class="bg-teal-50 rounded-lg p-4">
|
|
<p class="font-medium text-teal-700">플랫폼 입장</p>
|
|
<p class="text-sm text-slate-600 mt-2">전문 세무사 서비스를 이용하기 힘든 계층에게 환급 서비스를 제공하여 신고 문화 확산</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
|
<div class="flex items-center mb-4">
|
|
<span class="text-2xl mr-3">📢</span>
|
|
<h3 class="text-lg font-bold text-slate-700">과장 광고와 소비자 기만 이슈</h3>
|
|
</div>
|
|
<div class="bg-amber-50 rounded-lg p-4">
|
|
<p class="text-sm text-slate-700">
|
|
<strong>공정위 제재:</strong> 실제 환급액이 0원임에도 "환급액 도착", "떼인 세금 받아가세요" 등의 광고 메시지 발송 →
|
|
<span class="text-amber-600 font-bold">과징금 7,100만 원</span> 및 시정명령
|
|
</p>
|
|
<p class="text-sm text-slate-600 mt-2">소비자의 오인을 유발하는 '다크 패턴(Dark Pattern)'으로 지적</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
|
<div class="flex items-center mb-4">
|
|
<span class="text-2xl mr-3">💣</span>
|
|
<h3 class="text-lg font-bold text-slate-700">부실 신고와 가산세 폭탄의 위험</h3>
|
|
</div>
|
|
<ul class="space-y-2 text-sm text-slate-600">
|
|
<li class="flex items-start">
|
|
<span class="text-red-500 mr-2">•</span>
|
|
부양가족 중복 공제나 소득 금액 요건 위반으로 환급금 회수 및 가산세 추징 발생
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="text-red-500 mr-2">•</span>
|
|
플랫폼은 "입력된 정보에 따른 결과일 뿐"이라며 납세자에게 책임 전가 경향
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="text-red-500 mr-2">•</span>
|
|
국세청의 사후 검증으로 납세자에게 가산세 부과하는 행정 편의주의 비판
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
|
<div class="flex items-center mb-4">
|
|
<span class="text-2xl mr-3">🔐</span>
|
|
<h3 class="text-lg font-bold text-slate-700">개인정보 보안 및 데이터 주권</h3>
|
|
</div>
|
|
<div class="bg-red-50 rounded-lg p-4">
|
|
<p class="text-sm text-slate-700">
|
|
<strong>개인정보위 제재:</strong> 법적 근거 없이 주민등록번호 수집·보유 →
|
|
<span class="text-red-600 font-bold">과징금 8억 5천만 원</span> 및 시정명령
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 경정청구 장벽 요인 -->
|
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
|
<div class="flex items-center mb-4">
|
|
<span class="text-2xl mr-3">🧶</span>
|
|
<h3 class="text-lg font-bold text-slate-700">기업의 경정청구 저해 요인</h3>
|
|
</div>
|
|
<p class="text-sm text-slate-600 mb-4">마치 <strong>복잡하게 얽힌 실타래</strong>에서 한 가닥을 잘못 당겼다가 전체가 엉켜버릴까 봐 두려워하는 것과 같습니다.</p>
|
|
<div class="grid md:grid-cols-2 gap-4">
|
|
<div class="space-y-3">
|
|
<div class="flex items-start p-3 bg-slate-50 rounded-lg">
|
|
<span class="text-amber-500 mr-2">⚡</span>
|
|
<div>
|
|
<p class="font-medium text-slate-700 text-sm">세법의 복잡성</p>
|
|
<p class="text-xs text-slate-500">군 복무 기간 산입 등 복잡한 로직</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start p-3 bg-slate-50 rounded-lg">
|
|
<span class="text-amber-500 mr-2">📊</span>
|
|
<div>
|
|
<p class="font-medium text-slate-700 text-sm">데이터 파편화</p>
|
|
<p class="text-xs text-slate-500">인사/재무/현장 데이터 분산</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<div class="flex items-start p-3 bg-slate-50 rounded-lg">
|
|
<span class="text-amber-500 mr-2">⚠️</span>
|
|
<div>
|
|
<p class="font-medium text-slate-700 text-sm">사후관리 규정 부담</p>
|
|
<p class="text-xs text-slate-500">고용 감소 시 환급액 반납 우려</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start p-3 bg-slate-50 rounded-lg">
|
|
<span class="text-amber-500 mr-2">🔍</span>
|
|
<div>
|
|
<p class="font-medium text-slate-700 text-sm">세무조사 두려움</p>
|
|
<p class="text-xs text-slate-500">실사 및 추징 위험 회피 심리</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function renderFuture(container) {
|
|
container.innerHTML = `
|
|
<div class="space-y-6">
|
|
<div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-teal-600">
|
|
<h2 class="text-2xl font-bold text-slate-800 mb-2">미래 전망: AI 국세행정과 민간 플랫폼의 공존</h2>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
|
<div class="flex items-center mb-4">
|
|
<span class="text-2xl mr-3">🏛️</span>
|
|
<h3 class="text-lg font-bold text-slate-700">국세청의 디지털 대전환</h3>
|
|
</div>
|
|
<div class="border-l-2 border-slate-200 pl-4 space-y-4">
|
|
<div class="relative">
|
|
<div class="absolute -left-6 w-3 h-3 bg-teal-600 rounded-full"></div>
|
|
<p class="font-medium text-slate-700">지능형 홈택스 구축 (2026)</p>
|
|
<p class="text-sm text-slate-600">AI 검색과 '세금비서' 기능으로 신고서 작성부터 제출까지 대화형 지원</p>
|
|
</div>
|
|
<div class="relative">
|
|
<div class="absolute -left-6 w-3 h-3 bg-teal-600 rounded-full"></div>
|
|
<p class="font-medium text-slate-700">과학 세정의 고도화</p>
|
|
<p class="text-sm text-slate-600">AI와 빅데이터로 탈세 분석 및 부정 환급 시도 사전 차단</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
|
<div class="flex items-center mb-4">
|
|
<span class="text-2xl mr-3">🚀</span>
|
|
<h3 class="text-lg font-bold text-slate-700">시장의 진화</h3>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div class="bg-teal-50 rounded-lg p-4">
|
|
<p class="font-medium text-slate-700">하이브리드 모델</p>
|
|
<p class="text-sm text-slate-600 mt-1">AI가 1차 진단, 복잡한 이슈는 제휴 세무사가 2차 검토</p>
|
|
</div>
|
|
<div class="bg-teal-50 rounded-lg p-4">
|
|
<p class="font-medium text-slate-700">사업 다각화</p>
|
|
<p class="text-sm text-slate-600 mt-1">세무를 넘어 보험, 통신, 상조 등 생활 밀착형 금융 서비스로 확장</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
|
<h3 class="text-lg font-bold text-slate-700 mb-4">정책 제언</h3>
|
|
<div class="grid md:grid-cols-3 gap-4">
|
|
<div class="bg-slate-800 text-white rounded-lg p-4">
|
|
<span class="text-2xl">⚖️</span>
|
|
<p class="font-medium mt-2">규제와 혁신의 균형</p>
|
|
<p class="text-sm text-slate-300 mt-1">명확한 가이드라인 + 규제 샌드박스 활용</p>
|
|
</div>
|
|
<div class="bg-slate-800 text-white rounded-lg p-4">
|
|
<span class="text-2xl">📂</span>
|
|
<p class="font-medium mt-2">공공 마이데이터 개방</p>
|
|
<p class="text-sm text-slate-300 mt-1">API 형태의 공공 데이터 개방 확대</p>
|
|
</div>
|
|
<div class="bg-slate-800 text-white rounded-lg p-4">
|
|
<span class="text-2xl">🎓</span>
|
|
<p class="font-medium mt-2">전문가 역할 재정립</p>
|
|
<p class="text-sm text-slate-300 mt-1">고부가가치 컨설팅으로 전문성 고도화</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-teal-600 text-white rounded-xl shadow-sm p-8">
|
|
<h3 class="text-xl font-bold mb-3">결론</h3>
|
|
<p class="leading-relaxed">
|
|
경정청구 전산화는 되돌릴 수 없는 시대적 흐름입니다. 중요한 것은 기술 그 자체가 아니라,
|
|
기술이 지향하는 방향이 <strong>'납세자의 권익 보호'</strong>와 <strong>'투명하고 공정한 조세 행정'</strong>에
|
|
부합하도록 제도적, 사회적 합의를 만들어가는 것입니다.
|
|
</p>
|
|
<button onclick="switchTab('overview')" class="mt-4 bg-white text-teal-700 px-6 py-2 rounded-lg font-medium hover:bg-teal-50 transition-colors">
|
|
처음으로 돌아가기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function renderQuiz(container) {
|
|
container.innerHTML = `
|
|
<div class="space-y-6">
|
|
<div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-teal-600">
|
|
<h2 class="text-2xl font-bold text-slate-800 mb-2">세법상 청년 기준 및 경정청구 학습 가이드</h2>
|
|
</div>
|
|
|
|
<!-- 주요 용어 -->
|
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
|
<h3 class="text-lg font-bold text-slate-700 mb-4">주요 용어 해설</h3>
|
|
<div class="grid gap-4">
|
|
<div class="bg-gray-50 rounded-lg p-4 border-l-4 border-teal-600">
|
|
<p class="font-medium text-teal-700">경정청구(更正請求)</p>
|
|
<p class="text-sm text-slate-600 mt-1">기업이 세금을 더 많이 냈거나 잘못 냈을 경우, 이를 바로잡아 과세관청에 환급을 요청하는 정당한 권리</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4 border-l-4 border-amber-500">
|
|
<p class="font-medium text-amber-700">고용증대 세액공제</p>
|
|
<p class="text-sm text-slate-600 mt-1">기업이 직원을 고용했을 때 세금에서 일정 금액을 공제해주는 제도. 청년 분류 시 더 높은 공제액 적용</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4 border-l-4 border-slate-600">
|
|
<p class="font-medium text-slate-700">청년 (세법상)</p>
|
|
<p class="text-sm text-slate-600 mt-1">만 34세 이하. 군 복무 시 <code class="bg-slate-200 px-1 rounded">(현재 연령 - 군 복무 기간) ≤ 34</code> 공식 적용 (최대 6년 차감)</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4 border-l-4 border-slate-400">
|
|
<p class="font-medium text-slate-700">사후관리 규정</p>
|
|
<p class="text-sm text-slate-600 mt-1">경정청구로 환급 후, 일정 기간 내 고용 인원 감소 시 환급액을 다시 납부해야 하는 규정</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4 border-l-4 border-slate-400">
|
|
<p class="font-medium text-slate-700">수도권 과밀억제권역</p>
|
|
<p class="text-sm text-slate-600 mt-1">수도권 내 인구와 산업의 집중을 억제하기 위해 지정된 지역. 소재지에 따라 세제 혜택 규모가 달라짐</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 핵심 비유 -->
|
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
|
<h3 class="text-lg font-bold text-slate-700 mb-4">핵심 비유로 이해하기</h3>
|
|
<div class="grid md:grid-cols-3 gap-4">
|
|
<div class="bg-teal-50 rounded-lg p-4">
|
|
<span class="text-3xl">🏃</span>
|
|
<p class="font-medium text-slate-700 mt-2">마라톤의 보정 시간</p>
|
|
<p class="text-sm text-slate-600 mt-1">군 복무로 늦게 출발한 선수에게 지체된 시간만큼 기록에서 빼주는 것처럼, 군 복무 기간을 나이에서 차감</p>
|
|
</div>
|
|
<div class="bg-amber-50 rounded-lg p-4">
|
|
<span class="text-3xl">🧶</span>
|
|
<p class="font-medium text-slate-700 mt-2">얽힌 실타래</p>
|
|
<p class="text-sm text-slate-600 mt-1">복잡하게 얽힌 데이터에서 한 가닥을 잘못 당겼다가 전체가 엉켜버릴까 두려워하는 기업의 심리</p>
|
|
</div>
|
|
<div class="bg-slate-100 rounded-lg p-4">
|
|
<span class="text-3xl">🚇</span>
|
|
<p class="font-medium text-slate-700 mt-2">지하철 환승 할인</p>
|
|
<p class="text-sm text-slate-600 mt-1">내가 서 있는 지점이 할인 구역인지 아닌지에 따라 최종 지불 금액이 달라지는 것과 같은 원리</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 단답형 문제 -->
|
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
|
<h3 class="text-lg font-bold text-slate-700 mb-4">단답형 문제 (10문항)</h3>
|
|
<div class="space-y-4">
|
|
${[
|
|
{ q: "세법에서 '청년'을 정의하는 기본 연령 기준은 무엇이며, 군 복무는 이 기준에 어떤 영향을 미칩니까?", a: "세법상 '청년'의 기본 연령 기준은 <strong>만 34세 이하</strong>입니다. 군 복무를 이행한 경우, 실제 나이에서 최대 6년의 군 복무 기간을 차감하여 연령을 계산하므로, 청년으로 인정받을 수 있는 연령 기준이 상향 조정되는 효과가 있습니다." },
|
|
{ q: "군 복무 기간을 반영하여 세법상 청년 여부를 판정하는 구체적인 공식을 설명하시오.", a: "청년 여부 판정 공식은 <code class='bg-slate-200 px-1 rounded'>(현재 연령 - 군 복무 기간) ≤ 34</code>입니다. 예를 들어 현재 36세인 직원이 군 복무를 2년 했다면, 세법상 연령은 34세로 계산되어 청년으로 분류될 수 있습니다." },
|
|
{ q: "세법상 청년으로 판정되는 것이 기업에 중요한 이유는 무엇이며, 어떤 세제 혜택과 관련이 있습니까?", a: "직원이 청년으로 판정되면 <strong>'고용증대 세액공제'</strong> 등에서 일반 직원보다 더 높은 공제액을 적용받을 수 있기 때문입니다." },
|
|
{ q: "기업이 경정청구 행사를 주저하게 만드는 세 가지 핵심적인 원인은 무엇입니까?", a: "기업이 경정청구를 주저하는 핵심 원인은 <strong>세법의 복잡성</strong>, <strong>인사 및 세무 데이터의 단절</strong>, 그리고 <strong>환급 후 발생할 수 있는 추징 및 세무 실사에 대한 두려움</strong>입니다." },
|
|
{ q: "경정청구의 실무적 장벽 중 하나인 '사후관리 규정'이란 무엇이며, 기업에 어떤 부담을 줍니까?", a: "'사후관리 규정'은 경정청구로 세금을 환급받은 후, 일정 기간 내 고용 인원이 감소하면 환급액을 다시 납부해야 하는 규정입니다." },
|
|
{ q: "건설 및 제조업 분야에서 특히 경정청구를 위한 데이터 증빙이 어려운 이유는 무엇입니까?", a: "건설·제조업은 <strong>현장 출퇴근 기록과 같은 원시 데이터(Raw Data)와 실제 세무 신고 데이터가 일치하지 않는 경우가 많기 때문</strong>입니다." },
|
|
{ q: "세무 대리인들이 사업장 위치에 따른 세제 혜택 신고 시 보수적인 접근을 하는 경향이 있는 이유는 무엇입니까?", a: "사업장 위치가 '수도권 과밀억제권역'인지 '성장관리권역'인지의 <strong>경계가 지번 하나 차이로 바뀔 만큼 모호하기 때문</strong>입니다." },
|
|
{ q: "사업장 소재지가 '수도권 과밀억제권역'에 해당하는지 여부를 판정하는 것이 왜 중요한가요?", a: "사업장 위치가 어느 권역에 속하는지에 따라 <strong>기업이 받을 수 있는 각종 공제 및 면제 혜택의 규모가 직접적으로 결정</strong>되기 때문입니다." },
|
|
{ q: "자료에 언급된 'SAM'과 같은 자동화 시스템은 기업의 세무 실무에서 어떤 문제를 해결해 줄 수 있습니까?", a: "SAM과 같은 시스템은 <strong>인사 데이터와 병역 정보를 자동으로 연동</strong>하여, 실무자가 일일이 병적 증명서를 확인하지 않아도 청년 여부를 정확히 판정해 줍니다." },
|
|
{ q: "군 복무 기간을 연령 계산에 반영하는 제도를 '마라톤 경기의 보정 시간'에 비유한 이유를 설명하시오.", a: "군 복무로 인해 사회 진출이 늦어진 기간을 국가가 공식적으로 인정해 주는 것을 비유한 것입니다. <strong>군 복무 기간을 나이에서 차감하여 청년 세제 혜택의 기회를 공평하게 보장</strong>해 준다는 의미입니다." }
|
|
].map((item, idx) => `
|
|
<details class="bg-gray-50 rounded-lg">
|
|
<summary class="p-4 cursor-pointer font-medium text-slate-700 hover:bg-gray-100 rounded-lg">
|
|
${idx + 1}. ${item.q}
|
|
</summary>
|
|
<div class="p-4 pt-0 text-sm text-slate-600 border-t border-slate-200">
|
|
${item.a}
|
|
</div>
|
|
</details>
|
|
`).join('')}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// --- Chart Initialization ---
|
|
function initTimeChart() {
|
|
const ctx = document.getElementById('timeChart');
|
|
if (!ctx) return;
|
|
new Chart(ctx.getContext('2d'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: dataStore.charts.timeComparison.labels,
|
|
datasets: [
|
|
{
|
|
label: '기존 (수기)',
|
|
data: dataStore.charts.timeComparison.manual,
|
|
backgroundColor: '#94A3B8',
|
|
borderRadius: 4
|
|
},
|
|
{
|
|
label: '개선 (전산)',
|
|
data: dataStore.charts.timeComparison.digital,
|
|
backgroundColor: '#0d9488',
|
|
borderRadius: 4
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { position: 'bottom' },
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
return context.dataset.label + ': ' + context.raw + ' 시간';
|
|
}
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
title: { display: true, text: '소요 시간 (시간)' }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function initCostChart() {
|
|
const ctx = document.getElementById('costChart');
|
|
if (!ctx) return;
|
|
new Chart(ctx.getContext('2d'), {
|
|
type: 'line',
|
|
data: {
|
|
labels: dataStore.charts.costSavings.labels,
|
|
datasets: [
|
|
{
|
|
label: '기존 방식 비용 추이',
|
|
data: dataStore.charts.costSavings.manualData,
|
|
borderColor: '#94A3B8',
|
|
backgroundColor: '#94A3B8',
|
|
borderDash: [5, 5],
|
|
tension: 0.4
|
|
},
|
|
{
|
|
label: '전산화 도입 시 비용 추이',
|
|
data: dataStore.charts.costSavings.digitalData,
|
|
borderColor: '#0d9488',
|
|
backgroundColor: '#0d9488',
|
|
tension: 0.4,
|
|
fill: false
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { position: 'bottom' },
|
|
tooltip: { mode: 'index', intersect: false }
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
title: { display: true, text: '비용 (억원)' }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function initErrorChart() {
|
|
const ctx = document.getElementById('errorChart');
|
|
if (!ctx) return;
|
|
new Chart(ctx.getContext('2d'), {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: dataStore.charts.errorTypes.labels,
|
|
datasets: [{
|
|
data: dataStore.charts.errorTypes.data,
|
|
backgroundColor: ['#EF4444', '#F59E0B', '#0d9488', '#6366F1'],
|
|
borderWidth: 0
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { position: 'right' },
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
return context.label + ': ' + context.raw + '%';
|
|
}
|
|
}
|
|
}
|
|
},
|
|
cutout: '60%'
|
|
}
|
|
});
|
|
}
|
|
|
|
function initAdoptionChart() {
|
|
const ctx = document.getElementById('adoptionChart');
|
|
if (!ctx) return;
|
|
new Chart(ctx.getContext('2d'), {
|
|
type: 'line',
|
|
data: {
|
|
labels: dataStore.charts.adoptionTrend.labels,
|
|
datasets: [{
|
|
label: '플랫폼 이용자 수',
|
|
data: dataStore.charts.adoptionTrend.users,
|
|
borderColor: '#0d9488',
|
|
backgroundColor: 'rgba(13, 148, 136, 0.1)',
|
|
tension: 0.4,
|
|
fill: true
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { position: 'bottom' },
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
return context.raw + '만 명';
|
|
}
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
title: { display: true, text: '이용자 수 (만 명)' }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Initialize App
|
|
document.addEventListener('DOMContentLoaded', init);
|
|
</script>
|
|
</body>
|
|
</html>
|