2026-01-08 14:38:08 +09:00
<! DOCTYPE html >
< html lang = " ko " >
< head >
< meta charset = " UTF-8 " >
< meta name = " viewport " content = " width=device-width, initial-scale=1.0 " >
< title > 경정청구의 전산화와 조세 행정의 패러다임 전환 </ title >
2026-01-31 18:47:01 +09:00
<!-- Favicon -->
< link rel = " apple-touch-icon " sizes = " 180x180 " href = " ../img/apple-touch-icon.png " >
< link rel = " icon " type = " image/png " sizes = " 32x32 " href = " ../img/favicon-32x32.png " >
< link rel = " icon " type = " image/png " sizes = " 16x16 " href = " ../img/favicon-16x16.png " >
< link rel = " shortcut icon " href = " ../img/favicon.png " >
2026-01-08 14:38:08 +09:00
< 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 : 3 px 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.5 s ease - out forwards ;
}
@ keyframes fadeIn {
from { opacity : 0 ; transform : translateY ( 10 px ); }
to { opacity : 1 ; transform : translateY ( 0 ); }
}
. custom - scroll ::- webkit - scrollbar { width : 6 px ; height : 6 px ; }
. 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 : 600 px ;
margin - left : auto ;
margin - right : auto ;
height : 300 px ;
}
@ media ( min - width : 768 px ) {
. chart - container { height : 350 px ; }
}
. step - connector :: after {
content : '' ;
position : absolute ;
top : 50 % ;
left : 100 % ;
width : 100 % ;
height : 2 px ;
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 " >
2026-01-31 19:04:26 +09:00
< a href = " ../index.php " class = " flex items-center gap-3 cursor-pointer " >
< img src = " ../img/favicon-32x32.png " alt = " SAM " class = " w-10 h-10 rounded-xl " >
< div class = " flex flex-col " >
< span class = " text-lg font-bold text-slate-800 leading-tight " > SAM </ span >
< span class = " text-xs text-slate-500 leading-tight " > Smart Automation Management </ span >
</ div >
</ a >
< a href = " ../index.php " class = " text-sm font-medium text-slate-500 hover:text-slate-900 transition-colors " > 홈 </ a >
2026-01-08 14:38:08 +09:00
</ 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 >
