Files
sam-kd/strategy/cardstrategy_index.php
hskwon aca1767eb9 초기 커밋: 5130 레거시 시스템
- URL 하드코딩 → .env APP_URL 기반 동적 URL로 변경
- DB 연결 하드코딩 → .env 기반으로 변경
- MySQL strict mode DATE 오류 수정
2025-12-10 20:14:31 +09:00

1145 lines
46 KiB
PHP

<?php
require_once($_SERVER['DOCUMENT_ROOT'] . "/session.php");
?>
<!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;
}
h4 {
color: #1e40af;
font-size: 1.3em;
margin: 15px 0 10px 0;
font-weight: 700;
}
p, li {
font-size: 1.2em;
line-height: 1.8;
color: #1e293b;
margin-bottom: 15px;
}
ul, ol {
margin-left: 30px;
}
.company-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin: 30px 0;
}
.info-card {
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
color: white;
padding: 25px;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
animation: scaleIn 0.5s ease-out;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.info-card h4 {
color: white;
font-size: 1.3em;
margin-bottom: 10px;
border-bottom: 2px solid rgba(255, 255, 255, 0.3);
padding-bottom: 8px;
}
.info-card p {
color: white;
font-size: 1em;
}
.comparison-table {
width: 100%;
border-collapse: collapse;
margin: 25px 0;
font-size: 1em;
}
.comparison-table th,
.comparison-table td {
padding: 12px;
border: 1px solid #ddd;
text-align: left;
}
.comparison-table thead tr {
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
color: white;
}
.comparison-table tbody tr:nth-of-type(even) {
background: #f3f3f3;
}
.feature-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
margin: 20px 0;
}
.feature-item {
background: #f8fafc;
padding: 20px;
border-radius: 12px;
border-left: 4px solid #2563eb;
border: 1px solid #e2e8f0;
border-left-width: 4px;
}
.feature-item h4 {
color: #1e40af;
margin-top: 0;
}
.conclusion-box {
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
color: white;
padding: 30px;
border-radius: 16px;
margin: 20px 0;
text-align: center;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}
.conclusion-box p, .conclusion-box h3 {
color: white;
}
.warning-box {
background: #fef3c7;
border-left: 5px solid #f59e0b;
padding: 25px;
border-radius: 16px;
margin: 20px 0;
border: 1px solid #fde68a;
}
.warning-box h3, .warning-box li {
color: #92400e;
}
.flow-diagram {
background: #f1f5f9;
padding: 25px;
border-radius: 16px;
margin: 20px 0;
border: 2px solid #2563eb;
}
.flow-diagram pre {
font-size: 1em;
line-height: 1.6;
color: #1e293b;
overflow-x: auto;
}
.navigation {
position: fixed;
bottom: 30px;
right: 30px;
display: flex;
gap: 15px;
z-index: 1000;
}
.nav-btn {
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
color: white;
border: none;
padding: 15px 30px;
border-radius: 9999px;
cursor: pointer;
font-size: 1.1em;
font-weight: 600;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
transition: all 0.3s ease;
}
.nav-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
}
.nav-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.slide-number {
position: fixed;
bottom: 30px;
left: 30px;
background: rgba(255, 255, 255, 0.95);
padding: 12px 24px;
border-radius: 9999px;
font-size: 1.1em;
color: #2563eb;
font-weight: 700;
z-index: 1000;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(37, 99, 235, 0.1);
}
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes scaleIn {
from {
transform: scale(0.9);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
@media (max-width: 768px) {
.slide-content {
padding: 30px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.4em;
}
p, li {
font-size: 1em;
}
.navigation {
bottom: 15px;
right: 15px;
}
.nav-btn {
padding: 10px 20px;
font-size: 0.9em;
}
.slide-number {
bottom: 15px;
left: 15px;
padding: 8px 15px;
font-size: 0.9em;
}
.comparison-table {
font-size: 0.8em;
}
.comparison-table th,
.comparison-table td {
padding: 8px;
}
}
</style>
</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">
C
</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;">바로빌 카드조회 API 기반 완전 자동화 시스템</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;">법인카드 사용부터 세무 처리까지 완전 자동화</p>
</div>
</div>
</div>
<!-- Slide 2: Project Overview -->
<div class="slide">
<div class="slide-content">
<h2>프로젝트 개요</h2>
<div class="conclusion-box">
<h3 style="color: white; margin-top: 0;">배경</h3>
<p style="font-size: 1.2em;">법인카드 사용 내역을 바로빌 API로 자동 수집하여<br>승인↔매입 매핑, VAT 처리, 계정과목 분류를 자동화하고<br>금전출납부 및 일일일보에 즉시 반영</p>
</div>
<div style="margin-top: 30px;">
<h3>핵심 목표</h3>
<ul>
<li><strong>바로빌 카드조회 API 통합:</strong> 모든 법인카드 내역을 단일 API로 통합 수집</li>
<li><strong>승인↔매입 자동 매핑:</strong> 카드 승인 내역과 매입 전표를 자동으로 연결</li>
<li><strong>VAT/불공제 자동 판정:</strong> 접대비, 복리후생비 등 불공제 항목 자동 분류</li>
<li><strong>계정과목 자동 분류:</strong> 룰 기반 + ML 하이브리드 엔진으로 정확도 95% 달성</li>
<li><strong>금전출납부/일일일보 자동 생성:</strong> 카드 사용 시점부터 회계 처리까지 실시간 반영</li>
<li><strong>멀티테넌트 구조:</strong> 여러 법인의 카드를 안전하게 격리 관리</li>
</ul>
</div>
</div>
</div>
<!-- Slide 3: Project Scope -->
<div class="slide">
<div class="slide-content">
<h2>프로젝트 범위</h2>
<div class="company-info">
<div class="info-card">
<h4>✅ 포함 범위</h4>
<p><strong>카드 내역 수집:</strong> 바로빌 카드조회 API 연동, 일일 자동 수집</p>
<p><strong>데이터 정규화:</strong> 승인/매입 분리, 중복 제거, 취소 매칭</p>
<p><strong>자동 전표화:</strong> 계정과목, 거래처, 사업자등록번호, VAT 분류</p>
<p><strong>금전출납부/일보:</strong> 실시간 리포트 생성 및 검토 화면</p>
<p><strong>엑스포트:</strong> 세무사 제출용 CSV/Excel 내보내기</p>
</div>
<div class="info-card">
<h4>❌ 제외 범위</h4>
<p><strong>영수증 OCR:</strong> 향후 로드맵 (Phase 2)</p>
<p><strong>법인카드 실물 발급:</strong> 카드사 직접 처리</p>
<p><strong>실시간 결제 알림:</strong> 카드사 앱 활용</p>
<p><strong>여신 관리:</strong> 카드사 관리 기능</p>
</div>
</div>
</div>
</div>
<!-- Slide 4: Architecture Overview -->
<div class="slide">
<div class="slide-content">
<h2>시스템 아키텍처 개요</h2>
<div class="flow-diagram">
<pre>
[카드사 1, 2, 3...N] → [바로빌 API] → [ETL/수집 스케줄러]
[정규화 & 중복제거 & 취소 매핑]
[분류 엔진: Rule + ML Hybrid]
[승인↔매입 매칭 & VAT 처리 & 계정과목 분류]
[전표 생성 & 금전출납부/일일일보 반영]
[검토 대시보드 & 예외 처리 & 세무사 제출용 리포트]
</pre>
</div>
<div style="margin-top: 30px;">
<h3>아키텍처 핵심 전략</h3>
<ul>
<li><strong>멀티테넌시:</strong> 테넌트별 카드 등록정보/인증 격리, 데이터 완전 분리</li>
<li><strong>일일 배치 수집:</strong> 매일 오전 자동 수집 + 수동 즉시 수집 옵션</li>
<li><strong>이중화 설계:</strong> (카드번호, 승인번호, 승인일시) 고유키로 중복 방지</li>
<li><strong>하이브리드 분류:</strong> 룰 기반 1차 분류 + ML 모델 2차 보조</li>
</ul>
</div>
</div>
</div>
<!-- Slide 5: Functional Requirements -->
<div class="slide">
<div class="slide-content">
<h2>기능 요구사항 (Functional Requirements)</h2>
<table class="comparison-table">
<thead>
<tr>
<th>ID</th>
<th>기능명</th>
<th>설명</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>F1</strong></td>
<td>카드 등록/인증</td>
<td>테넌트별 법인카드 등록, 바로빌 인증 정보 안전 보관</td>
</tr>
<tr>
<td><strong>F2</strong></td>
<td>내역 자동 수집</td>
<td>일일 배치 + 수동 즉시 수집, 승인/매입 분리 저장</td>
</tr>
<tr>
<td><strong>F3</strong></td>
<td>데이터 정규화</td>
<td>가맹점명 표준화, 중복 제거, 취소 건 자동 매칭</td>
</tr>
<tr>
<td><strong>F4</strong></td>
<td>분류 엔진 (Rule + ML)</td>
<td>계정과목, VAT 처리, 불공제 판정 자동화</td>
</tr>
<tr>
<td><strong>F5</strong></td>
<td>승인↔매입 매칭 & 전표 생성</td>
<td>승인/매입 쌍 연결, 차액 발생 시 알림</td>
</tr>
<tr>
<td><strong>F6</strong></td>
<td>금전출납부/일일일보 통합</td>
<td>실시간 리포트 생성, 월말 마감 자동화</td>
</tr>
<tr>
<td><strong>F7</strong></td>
<td>감사 추적</td>
<td>모든 수정/분류 이력 로그, 담당자 기록</td>
</tr>
<tr>
<td><strong>F8</strong></td>
<td>내보내기/연동</td>
<td>CSV/Excel 추출, 세무사 제출용 포맷</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Slide 6: Non-Functional Requirements -->
<div class="slide">
<div class="slide-content">
<h2>비기능 요구사항 (Non-Functional Requirements)</h2>
<div class="company-info">
<div class="info-card">
<h4>N1. 멀티테넌시 격리</h4>
<p>모든 테이블 tenant_id 분리</p>
<p>카드 인증정보 암호화 보관</p>
<p>테넌트별 데이터 완전 격리</p>
</div>
<div class="info-card">
<h4>N2. 보안/컴플라이언스</h4>
<p>카드번호 마스킹 (끝 4자리만)</p>
<p>HTTPS 통신 필수</p>
<p>개인정보 최소 수집</p>
</div>
<div class="info-card">
<h4>N3. 확장성</h4>
<p>월 10만 건 처리 가능</p>
<p>테넌트 50개 동시 지원</p>
<p>API 호출 rate limit 준수</p>
</div>
<div class="info-card">
<h4>N4. 가용성/복구</h4>
<p>수집 실패 시 재시도 3회</p>
<p>데이터 백업 일 1회</p>
<p>장애 시 수동 수집 가능</p>
</div>
</div>
</div>
</div>
<!-- Slide 7: Data Flow -->
<div class="slide">
<div class="slide-content">
<h2>데이터 플로우 (End-to-End)</h2>
<ol style="font-size: 1.1em; line-height: 2;">
<li><strong>카드 등록:</strong> 법인카드 정보 + 바로빌 인증 정보 등록 → 시스템에 안전 저장</li>
<li><strong>자동 수집:</strong> 스케줄러가 매일 오전 바로빌 API 호출 → 승인/매입 내역 수집</li>
<li><strong>정규화:</strong> 가맹점명 표준화, 중복 제거, 취소 건 원 거래와 매칭</li>
<li><strong>분류 엔진:</strong> 룰 기반 1차 분류 → ML 모델 2차 검증 → 계정과목 확정</li>
<li><strong>승인↔매입 매칭:</strong> 승인번호 기준으로 승인/매입 쌍 연결, 차액 발생 시 알림</li>
<li><strong>전표 생성:</strong> 계정과목, 거래처, VAT, 불공제 여부 포함한 전표 생성</li>
<li><strong>검토:</strong> 담당자가 미분류/예외 건 검토 → 수정 시 학습 데이터 축적</li>
<li><strong>금전출납부/일보 반영:</strong> 확정된 전표를 금전출납부/일일일보에 자동 반영</li>
<li><strong>내보내기:</strong> 세무사 제출용 CSV/Excel 생성</li>
</ol>
</div>
</div>
<!-- Slide 8: Database Schema -->
<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>cards</strong></td>
<td>id, tenant_id, card_no_masked, card_name, issuer, status</td>
<td>법인카드 등록 정보</td>
</tr>
<tr>
<td><strong>card_transactions_raw</strong></td>
<td>id, tenant_id, card_id, trans_type (승인/매입), approval_no, amount, merchant_name, trans_datetime, status</td>
<td>바로빌 API 원본 데이터</td>
</tr>
<tr>
<td><strong>merchants</strong></td>
<td>id, tenant_id, merchant_raw_name, merchant_std_name, bizno, category, vat_type</td>
<td>가맹점 마스터 (표준화)</td>
</tr>
<tr>
<td><strong>classification_rules</strong></td>
<td>id, tenant_id, condition (merchant/category/amount), account_code, vat_flag, priority</td>
<td>룰 기반 분류 규칙</td>
</tr>
<tr>
<td><strong>card_postings</strong></td>
<td>id, tenant_id, approval_trans_id, purchase_trans_id, account_code, amount, vat, is_non_deductible, posting_date, status</td>
<td>확정된 회계 전표</td>
</tr>
<tr>
<td><strong>reports_cashbook</strong></td>
<td>id, tenant_id, posting_id, date, debit_account, credit_account, amount, description</td>
<td>금전출납부 생성 데이터</td>
</tr>
<tr>
<td><strong>audit_logs</strong></td>
<td>id, tenant_id, entity_type, entity_id, action, old_value, new_value, actor, timestamp</td>
<td>모든 수정 이력 추적</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Slide 9: Classification Engine -->
<div class="slide">
<div class="slide-content">
<h2>분류 엔진 (Rule + ML Hybrid)</h2>
<div style="margin-top: 30px;">
<h3>1차: 룰 기반 분류 (Rule-Based)</h3>
<ul>
<li><strong>가맹점명 매칭:</strong> "GS25" → 복리후생비, "현대오일뱅크" → 차량유지비</li>
<li><strong>카테고리 매칭:</strong> "주유소" → 차량유지비, "식당" → 접대비/복리후생비</li>
<li><strong>금액 기준:</strong> 3만원 이상 식사 → 접대비, 3만원 미만 → 복리후생비</li>
<li><strong>VAT 처리:</strong> 면세 가맹점 자동 판정, 불공제 항목 자동 마킹</li>
</ul>
</div>
<div style="margin-top: 30px;">
<h3>2차: ML 모델 보조 (Machine Learning)</h3>
<ul>
<li><strong>학습 데이터:</strong> 담당자가 수정한 이력을 학습 데이터로 축적</li>
<li><strong>특징 추출:</strong> 가맹점명, 시간대, 요일, 금액, 사용자, 카테고리</li>
<li><strong>모델:</strong> Random Forest 또는 XGBoost로 계정과목 추천</li>
<li><strong>신뢰도 표시:</strong> 95% 이상 → 자동 확정, 미만 → 검토 필요 마킹</li>
</ul>
</div>
<div style="margin-top: 30px;">
<h3>피드백 루프 (Continuous Learning)</h3>
<div class="flow-diagram">
<pre>
[분류 엔진 예측] → [담당자 검토/수정] → [audit_logs 저장]
[학습 데이터셋 업데이트] → [모델 재학습]
[정확도 향상] → [자동화율 증가]
</pre>
</div>
</div>
</div>
</div>
<!-- Slide 10: Accounting/Tax Processing -->
<div class="slide">
<div class="slide-content">
<h2>회계/세무 처리 규칙</h2>
<div style="margin-top: 30px;">
<h3>승인 vs 매입 처리</h3>
<ul>
<li><strong>승인 내역:</strong> 카드 사용 시점 (실시간 알림용, 경비 지출 추적)</li>
<li><strong>매입 내역:</strong> 실제 결제 확정 시점 (회계 전표 기준)</li>
<li><strong>매칭 로직:</strong> (승인번호, 금액, 가맹점) 3개 기준으로 쌍 연결</li>
<li><strong>차액 발생:</strong> 팁, 부분 취소 등으로 차액 발생 시 알림 → 수동 검토</li>
</ul>
</div>
<div style="margin-top: 30px;">
<h3>VAT 처리</h3>
<ul>
<li><strong>과세 거래:</strong> 공급가액 + VAT 10% 분리 저장</li>
<li><strong>면세 거래:</strong> 전액 공급가액, VAT 0원</li>
<li><strong>불공제 항목:</strong> 접대비, 개인 경비 등은 매입세액 불공제 마킹</li>
<li><strong>영수증 매칭:</strong> 향후 OCR 연동 시 영수증 이미지와 카드 내역 자동 매칭</li>
</ul>
</div>
<div style="margin-top: 30px;">
<h3>증빙 우선순위</h3>
<ol>
<li><strong>세금계산서:</strong> 최우선 증빙 (VAT 공제 가능)</li>
<li><strong>신용카드 매출전표:</strong> 2순위 (사업용 신용카드 등록 시 공제 가능)</li>
<li><strong>현금영수증:</strong> 3순위 (간이과세자 등)</li>
<li><strong>간이영수증:</strong> 3만원 미만 소액 (공제 불가, 경비 인정용)</li>
</ol>
</div>
<div style="margin-top: 30px;">
<h3>사업용 신용카드 등록</h3>
<p>국세청에 사업용 신용카드로 등록된 카드는 세금계산서 없이도 매입세액 공제 가능<br>→ 시스템에서 카드별 "사업용 등록 여부" 플래그 관리</p>
</div>
</div>
</div>
<!-- Slide 11: Reports & Dashboard -->
<div class="slide">
<div class="slide-content">
<h2>리포트 & 대시보드</h2>
<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>검토 필요 건, ML 신뢰도 낮은 건 실시간 표시</p>
</div>
<div class="feature-item">
<h4>📅 월말 마감 리포트</h4>
<p>월별 카드 사용 집계, 계정과목별 요약</p>
</div>
<div class="feature-item">
<h4>📋 세무사 제출용 리포트</h4>
<p>CSV/Excel 내보내기, 전표별 증빙 첨부</p>
</div>
<div class="feature-item">
<h4>📉 불공제 내역 리포트</h4>
<p>접대비, 개인 경비 등 불공제 항목 집계</p>
</div>
</div>
<div style="margin-top: 30px;">
<h3>실시간 알림</h3>
<ul>
<li><strong>미분류 건:</strong> 분류 실패 또는 ML 신뢰도 낮은 건 즉시 알림</li>
<li><strong>승인↔매입 불일치:</strong> 금액 차이 발생 시 담당자에게 알림</li>
<li><strong>고액 사용:</strong> 일정 금액 이상 카드 사용 시 관리자 알림</li>
<li><strong>월말 마감 임박:</strong> 마감 D-3, D-1 알림</li>
</ul>
</div>
</div>
</div>
<!-- Slide 12: Multi-Tenancy Design -->
<div class="slide">
<div class="slide-content">
<h2>멀티테넌시 설계</h2>
<div style="margin-top: 30px;">
<h3>논리적 격리 (Logical Isolation)</h3>
<ul>
<li><strong>tenant_id 필수:</strong> 모든 테이블에 tenant_id 컬럼, 쿼리 시 필터링</li>
<li><strong>인덱스 최적화:</strong> (tenant_id, created_at) 복합 인덱스로 성능 확보</li>
<li><strong>데이터 완전 분리:</strong> 테넌트 간 데이터 조회 절대 불가</li>
</ul>
</div>
<div style="margin-top: 30px;">
<h3>자격증명 격리 (Credential Isolation)</h3>
<ul>
<li><strong>바로빌 API Key:</strong> 테넌트별 별도 등록, 암호화 저장</li>
<li><strong>카드 인증 정보:</strong> AES-256 암호화, 사용 시에만 복호화</li>
<li><strong>접근 제어:</strong> 테넌트 관리자만 자신의 카드 정보 열람 가능</li>
</ul>
</div>
<div style="margin-top: 30px;">
<h3>속도 제한 & 쿼터 (Rate Limit & Quota)</h3>
<ul>
<li><strong>API 호출 제한:</strong> 테넌트별 일일 API 호출 횟수 제한</li>
<li><strong>데이터 용량:</strong> 테넌트별 월 거래 건수 쿼터 설정</li>
<li><strong>공정 사용:</strong> 과도한 사용 시 경고 및 제한</li>
</ul>
</div>
</div>
</div>
<!-- Slide 13: Security & Compliance -->
<div class="slide">
<div class="slide-content">
<h2>보안 & 컴플라이언스</h2>
<div class="company-info">
<div class="info-card">
<h4>🔐 데이터 암호화</h4>
<p>전송 중: HTTPS/TLS 1.3</p>
<p>저장 시: AES-256 암호화</p>
<p>카드번호: 마스킹 (끝 4자리만)</p>
</div>
<div class="info-card">
<h4>🛡️ 접근 제어</h4>
<p>역할 기반 권한 (RBAC)</p>
<p>테넌트 관리자/회계담당자/열람자</p>
<p>IP 화이트리스트 옵션</p>
</div>
<div class="info-card">
<h4>📋 감사 지표</h4>
<p>모든 수정 이력 로그</p>
<p>누가, 언제, 무엇을 변경했는지 추적</p>
<p>7년간 로그 보관</p>
</div>
<div class="info-card">
<h4>🔒 개인정보 최소화</h4>
<p>필요한 정보만 수집</p>
<p>사용자 동의 기반</p>
<p>개인정보 보호법 준수</p>
</div>
</div>
<div style="margin-top: 30px;">
<h3>컴플라이언스 체크리스트</h3>
<ul>
<li>✅ 개인정보 보호법 준수 (카드번호 마스킹, 암호화)</li>
<li>✅ 전자금융거래법 준수 (인증, 암호화 통신)</li>
<li>✅ 법인세법 시행령 (증빙 보관 7년)</li>
<li>✅ 부가가치세법 (매입세액 공제 요건 충족)</li>
</ul>
</div>
</div>
</div>
<!-- Slide 14: Development Roadmap -->
<div class="slide">
<div class="slide-content">
<h2>개발 로드맵 (6 Phase, 18주)</h2>
<table class="comparison-table">
<thead>
<tr>
<th>단계</th>
<th>기간</th>
<th>주요 마일스톤</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Phase 1</strong></td>
<td>W1-3</td>
<td>바로빌 API 연동, 스키마 설계, 카드 등록 기능</td>
</tr>
<tr>
<td><strong>Phase 2</strong></td>
<td>W4-6</td>
<td>자동 수집 스케줄러, 데이터 정규화, 중복 제거</td>
</tr>
<tr>
<td><strong>Phase 3</strong></td>
<td>W7-9</td>
<td>룰 기반 분류 엔진, 가맹점 마스터 구축</td>
</tr>
<tr>
<td><strong>Phase 4</strong></td>
<td>W10-12</td>
<td>승인↔매입 매칭, 전표 생성, 금전출납부/일보 연동</td>
</tr>
<tr>
<td><strong>Phase 5</strong></td>
<td>W13-15</td>
<td>ML 모델 개발, 학습 데이터 수집, 피드백 루프</td>
</tr>
<tr>
<td><strong>Phase 6</strong></td>
<td>W16-18</td>
<td>대시보드, 리포트, 내보내기, 테스트 & 베타 운영</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Slide 15: KPI & Success Metrics -->
<div class="slide">
<div class="slide-content">
<h2>KPI & 성공 지표</h2>
<table class="comparison-table">
<thead>
<tr>
<th>지표</th>
<th>현재</th>
<th>목표</th>
<th>측정 방법</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>계정과목 분류 자동화율</strong></td>
<td>50% (수동)</td>
<td>95%</td>
<td>자동 분류 건수 / 전체 건수</td>
</tr>
<tr>
<td><strong>월말 마감 소요 시간</strong></td>
<td>8시간</td>
<td>1시간</td>
<td>카드 내역 정리 시작~완료 시간</td>
</tr>
<tr>
<td><strong>미분류/예외 건수</strong></td>
<td>월 평균 200건</td>
<td>월 10건 이하</td>
<td>검토 필요 건수</td>
</tr>
<tr>
<td><strong>승인↔매입 매칭 정확도</strong></td>
<td>70% (수동)</td>
<td>98%</td>
<td>정확히 매칭된 건수 / 전체 건수</td>
</tr>
<tr>
<td><strong>ML 모델 정확도</strong></td>
<td>N/A</td>
<td>90% (F1 Score)</td>
<td>테스트 데이터셋 검증</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Slide 16: Future Roadmap -->
<div class="slide">
<div class="slide-content">
<h2>향후 로드맵</h2>
<div class="company-info">
<div class="info-card">
<h4>📸 영수증 OCR</h4>
<p>영수증 이미지 자동 인식</p>
<p>카드 내역과 자동 매칭</p>
<p>증빙 자료 디지털화</p>
</div>
<div class="info-card">
<h4>🔗 ERP 동기화</h4>
<p>회계 시스템 실시간 연동</p>
<p>전표 자동 전송</p>
<p>양방향 데이터 동기화</p>
</div>
<div class="info-card">
<h4>🤖 ML 고도화</h4>
<p>딥러닝 모델 적용</p>
<p>이상 거래 탐지</p>
<p>비용 최적화 제안</p>
</div>
<div class="info-card">
<h4>📊 홈택스 신고 보조</h4>
<p>부가세 신고서 자동 작성</p>
<p>매입세액 공제 최적화</p>
<p>세무사 협업 기능</p>
</div>
<div class="info-card">
<h4>📱 모바일 앱</h4>
<p>현장 영수증 촬영</p>
<p>카드 사용 즉시 알림</p>
<p>승인/반려 워크플로우</p>
</div>
<div class="info-card">
<h4>📈 고급 분석</h4>
<p>부서별 비용 분석</p>
<p>예산 대비 실적</p>
<p>비용 절감 인사이트</p>
</div>
</div>
</div>
</div>
<!-- Slide 17: 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">17</span>
</div>
<div class="navigation">
<button class="nav-btn" id="prevBtn" onclick="changeSlide(-1)">← 이전</button>
<button class="nav-btn" id="nextBtn" onclick="changeSlide(1)">다음 →</button>
</div>
<script>
let currentSlide = 1;
const totalSlides = 17;
let touchStartX = 0;
let touchEndX = 0;
document.getElementById('totalSlides').textContent = totalSlides;
function showSlide(n) {
const slides = document.querySelectorAll('.slide');
if (n > totalSlides) {
currentSlide = 1;
}
if (n < 1) {
currentSlide = totalSlides;
}
slides.forEach(slide => {
slide.classList.remove('active');
});
slides[currentSlide - 1].classList.add('active');
document.getElementById('currentSlide').textContent = currentSlide;
document.getElementById('prevBtn').disabled = (currentSlide === 1);
document.getElementById('nextBtn').disabled = (currentSlide === totalSlides);
}
function changeSlide(direction) {
currentSlide += direction;
showSlide(currentSlide);
}
document.addEventListener('keydown', function(event) {
if (event.key === 'ArrowLeft') {
changeSlide(-1);
} else if (event.key === 'ArrowRight' || event.key === ' ') {
event.preventDefault();
changeSlide(1);
}
});
document.addEventListener('touchstart', function(event) {
touchStartX = event.changedTouches[0].screenX;
});
document.addEventListener('touchend', function(event) {
touchEndX = event.changedTouches[0].screenX;
handleSwipe();
});
function handleSwipe() {
if (touchEndX < touchStartX - 50) {
changeSlide(1);
}
if (touchEndX > touchStartX + 50) {
changeSlide(-1);
}
}
showSlide(currentSlide);
// Initialize Lucide icons
if (typeof lucide !== 'undefined') {
lucide.createIcons();
}
</script>
</body>
</html>