hskwon
aca1767eb9
- URL 하드코딩 → .env APP_URL 기반 동적 URL로 변경 - DB 연결 하드코딩 → .env 기반으로 변경 - MySQL strict mode DATE 오류 수정
1741 lines
78 KiB
PHP
1741 lines
78 KiB
PHP
<?php
|
|
require_once($_SERVER['DOCUMENT_ROOT'] . "/session.php");
|
|
$root_dir = dirname($_SERVER['PHP_SELF']);
|
|
?>
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>장기적 세무전략 (중장기 계획)</title>
|
|
|
|
<!-- Fonts: Pretendard -->
|
|
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css" />
|
|
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Pretendard', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
background: 'rgb(250, 250, 250)',
|
|
primary: {
|
|
DEFAULT: '#2563eb', // blue-600
|
|
light: '#dbeafe', // blue-100
|
|
dark: '#1e40af', // blue-800
|
|
foreground: '#ffffff',
|
|
},
|
|
slate: {
|
|
850: '#1e293b', // Custom dark slate
|
|
}
|
|
},
|
|
borderRadius: {
|
|
'card': '12px',
|
|
'pill': '9999px',
|
|
},
|
|
animation: {
|
|
'fade-in': 'fadeIn 0.5s ease-out',
|
|
'slide-up': 'slideUp 0.5s ease-out',
|
|
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
slideUp: {
|
|
'0%': { transform: 'translateY(20px)', opacity: '0' },
|
|
'100%': { transform: 'translateY(0)', opacity: '1' },
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- Icons: Lucide -->
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
|
|
<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;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
|
|
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
@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>
|
|
</head>
|
|
<body class="bg-background text-slate-800 antialiased min-h-screen">
|
|
|
|
<!-- Navigation / Header -->
|
|
<header class="bg-white border-b border-slate-100 sticky top-0 z-50 shadow-sm">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center text-white font-bold shadow-md">
|
|
S
|
|
</div>
|
|
<h1 class="text-lg font-bold text-slate-900 tracking-tight">장기적 세무전략</h1>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<a href="../index.php" class="text-sm text-slate-500 hover:text-slate-900 flex items-center gap-1 font-medium transition-colors">
|
|
<i data-lucide="home" class="w-4 h-4"></i>
|
|
홈으로
|
|
</a>
|
|
<div class="h-4 w-px bg-slate-200"></div>
|
|
<span class="text-xs font-medium px-2.5 py-1 bg-slate-100 text-slate-600 rounded-full">중장기 계획</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<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: Planning - 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;">
|
|
<h3 style="margin-top: 0; color: #1e40af; font-weight: 700;">시나리오 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 style="background: #e0e7ff; padding: 25px; border-radius: 16px; margin: 20px 0; border-left: 5px solid #1e40af;">
|
|
<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> AI 기반 최적 절세 방안 제시</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;">
|
|
<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>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 7: Planning - 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 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>
|
|
|
|
<!-- Slide 8: Planning - 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: 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>
|
|
<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 - 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: Design - User Experience -->
|
|
<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;">
|
|
<h3 style="margin-top: 0; 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 style="background: #e0e7ff; padding: 25px; border-radius: 16px; margin: 20px 0; border-left: 5px solid #1e40af;">
|
|
<h3 style="margin-top: 0; 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: Backend - 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 style="margin-top: 30px; padding: 25px; background: #f1f5f9; border-radius: 16px; border-left: 5px solid #2563eb; border: 1px solid #e2e8f0;">
|
|
<h3 style="margin-top: 0;">성능 최적화</h3>
|
|
<ul>
|
|
<li>주요 쿼리 대상 컬럼에 인덱스 생성</li>
|
|
<li>자주 조회되는 집계 데이터 Materialized View 활용</li>
|
|
<li>파티셔닝: 연도별 세금 신고 데이터 분할</li>
|
|
<li>커넥션 풀링으로 DB 연결 관리 최적화</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 14: Backend - 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 style="margin-top: 30px; padding: 25px; background: #f1f5f9; border-radius: 16px; border-left: 5px solid #2563eb; border: 1px solid #e2e8f0;">
|
|
<h3 style="margin-top: 0;">개발 도구</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: Frontend - 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 style="margin-top: 30px; padding: 25px; background: #dbeafe; border-radius: 16px; border-left: 5px solid #2563eb; border: 1px solid #bfdbfe;">
|
|
<h3 style="margin-top: 0;">주요 기술 과제</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 style="margin-top: 20px; 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>
|
|
<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 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> 국세청 표준 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 style="margin-top: 40px; padding: 30px; background: #f1f5f9; border-radius: 16px; border: 1px solid #e2e8f0;">
|
|
<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>
|
|
|
|
<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);
|
|
|
|
// Initialize Lucide icons
|
|
if (typeof lucide !== 'undefined') {
|
|
lucide.createIcons();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|