hskwon
aca1767eb9
- URL 하드코딩 → .env APP_URL 기반 동적 URL로 변경 - DB 연결 하드코딩 → .env 기반으로 변경 - MySQL strict mode DATE 오류 수정
1136 lines
46 KiB
PHP
1136 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;
|
|
}
|
|
|
|
p, li {
|
|
font-size: 1.2em;
|
|
line-height: 1.8;
|
|
color: #1e293b;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
ul {
|
|
margin-left: 30px;
|
|
}
|
|
|
|
.company-info {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 20px;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.info-card {
|
|
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
|
|
color: white;
|
|
padding: 25px;
|
|
border-radius: 16px;
|
|
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
|
|
animation: scaleIn 0.5s ease-out;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.info-card h4 {
|
|
font-size: 1.3em;
|
|
margin-bottom: 10px;
|
|
border-bottom: 2px solid rgba(255, 255, 255, 0.3);
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.comparison-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 25px 0;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.comparison-table th,
|
|
.comparison-table td {
|
|
padding: 12px;
|
|
border: 1px solid #ddd;
|
|
text-align: left;
|
|
}
|
|
|
|
.comparison-table thead tr {
|
|
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
|
|
color: white;
|
|
}
|
|
|
|
.comparison-table tbody tr:nth-of-type(even) {
|
|
background: #f3f3f3;
|
|
}
|
|
|
|
.feature-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 15px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.feature-item {
|
|
background: #f8fafc;
|
|
padding: 20px;
|
|
border-radius: 12px;
|
|
border-left: 4px solid #2563eb;
|
|
border: 1px solid #e2e8f0;
|
|
border-left-width: 4px;
|
|
}
|
|
|
|
.conclusion-box {
|
|
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
|
|
color: white;
|
|
padding: 30px;
|
|
border-radius: 16px;
|
|
margin: 20px 0;
|
|
text-align: center;
|
|
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
|
|
}
|
|
|
|
.conclusion-box p {
|
|
color: white;
|
|
}
|
|
|
|
.navigation {
|
|
position: fixed;
|
|
bottom: 30px;
|
|
right: 30px;
|
|
display: flex;
|
|
gap: 15px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.nav-btn {
|
|
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
|
|
color: white;
|
|
border: none;
|
|
padding: 15px 30px;
|
|
border-radius: 9999px;
|
|
cursor: pointer;
|
|
font-size: 1.1em;
|
|
font-weight: 600;
|
|
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.nav-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
|
|
background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
|
|
}
|
|
|
|
.nav-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.slide-number {
|
|
position: fixed;
|
|
bottom: 30px;
|
|
left: 30px;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
padding: 12px 24px;
|
|
border-radius: 9999px;
|
|
font-size: 1.1em;
|
|
color: #2563eb;
|
|
font-weight: 700;
|
|
z-index: 1000;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
border: 1px solid rgba(37, 99, 235, 0.1);
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
from {
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes scaleIn {
|
|
from {
|
|
transform: scale(0.9);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.slide-content {
|
|
padding: 30px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2em;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.8em;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
p, li {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.navigation {
|
|
bottom: 15px;
|
|
right: 15px;
|
|
}
|
|
|
|
.nav-btn {
|
|
padding: 10px 20px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.slide-number {
|
|
bottom: 15px;
|
|
left: 15px;
|
|
padding: 8px 15px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.comparison-table {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.comparison-table th,
|
|
.comparison-table td {
|
|
padding: 8px;
|
|
}
|
|
}
|
|
</style>
|
|
</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">
|
|
D
|
|
</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;">SAM 프로젝트 - 중소기업 맞춤형 채권관리 시스템</h2>
|
|
<div style="text-align: center; margin-top: 50px;">
|
|
<p style="font-size: 1.5em; color: #1e40af; font-weight: 600;">기획 · 디자인 · 백엔드 · 프론트엔드</p>
|
|
<p style="margin-top: 30px; color: #64748b;">2025년 채권추심 자동화 솔루션 - 중장기 발전 계획</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 2: Project Vision -->
|
|
<div class="slide">
|
|
<div class="slide-content">
|
|
<h2>프로젝트 비전</h2>
|
|
<div class="conclusion-box">
|
|
<h3 style="color: white; margin-top: 0;">채권관리의 디지털 혁신</h3>
|
|
<p style="font-size: 1.3em;">복잡한 채권추심 업무를 자동화하고, 효율적인 회수 관리를 지원하는 통합 플랫폼</p>
|
|
</div>
|
|
|
|
<div style="margin-top: 30px;">
|
|
<h3>핵심 목표</h3>
|
|
<div class="feature-list">
|
|
<div class="feature-item">
|
|
<h4>💼 채권 관리</h4>
|
|
<p>채권 등록부터 회수까지 전체 생애주기 관리</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<h4>📞 추심 활동</h4>
|
|
<p>전화, 문자, 우편 등 다양한 추심 활동 기록 및 자동화</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<h4>⚖️ 법적 절차</h4>
|
|
<p>독촉장, 지급명령, 소송 등 법적 절차 관리</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<h4>💰 회수 관리</h4>
|
|
<p>회수 내역 기록 및 통계, 분석 리포트</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 30px;">
|
|
<h3>주요 타겟 사용자</h3>
|
|
<ul>
|
|
<li><strong>중소기업:</strong> 외상 매출 관리 및 채권 회수</li>
|
|
<li><strong>채권추심 대행사:</strong> 다수 채권 통합 관리</li>
|
|
<li><strong>법무법인:</strong> 법적 절차 진행 관리</li>
|
|
<li><strong>금융기관:</strong> 연체 채권 관리</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 3: Core Values -->
|
|
<div class="slide">
|
|
<div class="slide-content">
|
|
<h2>핵심 가치 제안</h2>
|
|
<div class="company-info">
|
|
<div class="info-card">
|
|
<h4>🤖 자동화</h4>
|
|
<p>추심 활동 자동 스케줄링</p>
|
|
<p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">월 80시간 업무 절감</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>📊 가시성</h4>
|
|
<p>채권 현황 및 회수율 실시간 모니터링</p>
|
|
<p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">대시보드 한눈에 확인</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>⚖️ 법규 준수</h4>
|
|
<p>공정채권추심법 자동 준수</p>
|
|
<p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">법적 리스크 최소화</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>📱 접근성</h4>
|
|
<p>모바일 앱을 통한 현장 추심 기록</p>
|
|
<p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">언제 어디서나 업무</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>🔗 통합성</h4>
|
|
<p>회계, ERP 시스템 연동</p>
|
|
<p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">데이터 자동 동기화</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>🔐 보안</h4>
|
|
<p>채무자 정보 암호화 및 접근 제어</p>
|
|
<p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">개인정보보호법 준수</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 4: Planning - Requirements -->
|
|
<div class="slide">
|
|
<div class="slide-content">
|
|
<h2>기획: 기능 요구사항</h2>
|
|
<div style="margin-top: 30px;">
|
|
<h3>1. 채권 관리</h3>
|
|
<ul>
|
|
<li>채권 등록 (채무자 정보, 채권 금액, 발생일)</li>
|
|
<li>채권 상태 관리 (정상/연체/회수/손실)</li>
|
|
<li>채무자 정보 관리 (연락처, 주소, 직장 정보)</li>
|
|
<li>채권 분류 및 그룹 관리</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div style="margin-top: 30px;">
|
|
<h3>2. 추심 활동 관리</h3>
|
|
<ul>
|
|
<li>전화 추심 기록 (통화 내용, 약속 일자)</li>
|
|
<li>문자 발송 및 이력 관리</li>
|
|
<li>우편물 발송 기록 (내용증명, 독촉장)</li>
|
|
<li>방문 추심 기록 (GPS 위치, 사진)</li>
|
|
<li>자동 추심 스케줄링</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div style="margin-top: 30px;">
|
|
<h3>3. 법적 절차 관리</h3>
|
|
<ul>
|
|
<li>독촉장 자동 생성 및 발송</li>
|
|
<li>지급명령 신청 관리</li>
|
|
<li>소송 진행 현황 관리</li>
|
|
<li>강제집행 절차 추적</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div style="margin-top: 30px;">
|
|
<h3>4. 회수 관리</h3>
|
|
<ul>
|
|
<li>회수금 입금 기록</li>
|
|
<li>분할 상환 관리</li>
|
|
<li>회수율 통계</li>
|
|
<li>미회수 채권 분석</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 5: User Scenarios -->
|
|
<div class="slide">
|
|
<div class="slide-content">
|
|
<h2>기획: 사용자 시나리오</h2>
|
|
|
|
<div style="background: #dbeafe; padding: 25px; border-radius: 16px; margin: 20px 0; border-left: 5px solid #2563eb; border: 1px solid #bfdbfe;">
|
|
<h3 style="margin-top: 0; color: #1e40af; font-weight: 700;">시나리오 1: 신규 채권 등록 프로세스</h3>
|
|
<ol style="color: #333;">
|
|
<li><strong>채권 발생:</strong> 매출 미수금 발생</li>
|
|
<li><strong>채권 등록:</strong> 채무자 정보, 채권 금액, 발생일 입력</li>
|
|
<li><strong>초기 접촉:</strong> 자동 문자 발송 (결제 요청)</li>
|
|
<li><strong>추심 스케줄:</strong> 7일, 14일, 21일 후 추심 활동 자동 생성</li>
|
|
<li><strong>진행 추적:</strong> 각 단계별 활동 기록</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div style="background: #e0e7ff; padding: 25px; border-radius: 16px; margin: 20px 0; border-left: 5px solid #1e40af; border: 1px solid #c7d2fe;">
|
|
<h3 style="margin-top: 0; color: #1e40af; font-weight: 700;">시나리오 2: 전화 추심 활동</h3>
|
|
<ol style="color: #333;">
|
|
<li><strong>추심 대상 확인:</strong> 오늘 추심할 채권 목록 조회</li>
|
|
<li><strong>전화 발신:</strong> 시스템 내 전화 기능 또는 외부 연동</li>
|
|
<li><strong>통화 기록:</strong> 통화 내용, 채무자 반응, 약속 일자 입력</li>
|
|
<li><strong>후속 조치:</strong> 약속일 알림 자동 설정</li>
|
|
<li><strong>이력 관리:</strong> 모든 통화 내역 자동 저장</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div style="background: #dbeafe; padding: 25px; border-radius: 16px; margin: 20px 0; border-left: 5px solid #2563eb; border: 1px solid #bfdbfe;">
|
|
<h3 style="margin-top: 0; color: #1e40af; font-weight: 700;">시나리오 3: 법적 절차 진행</h3>
|
|
<ol style="color: #333;">
|
|
<li><strong>절차 개시 결정:</strong> 임의 추심 실패 판단</li>
|
|
<li><strong>독촉장 발송:</strong> 시스템에서 독촉장 자동 생성</li>
|
|
<li><strong>지급명령 신청:</strong> 필요 서류 자동 작성</li>
|
|
<li><strong>법원 진행 추적:</strong> 각 단계별 진행 상황 기록</li>
|
|
<li><strong>강제집행:</strong> 집행 절차 관리 및 결과 기록</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 6: Advanced Features -->
|
|
<div class="slide">
|
|
<div class="slide-content">
|
|
<h2>기획: 고급 기능</h2>
|
|
|
|
<div class="feature-list">
|
|
<div class="feature-item">
|
|
<h4>📱 모바일 앱</h4>
|
|
<p>현장 추심 기록, 사진 첨부, GPS 위치 기록</p>
|
|
<p style="font-size: 0.9em; margin-top: 5px; color: #666;">iOS/Android 지원</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<h4>🔔 스마트 알림</h4>
|
|
<p>약속일 알림, 추심 예정일 알림</p>
|
|
<p style="font-size: 0.9em; margin-top: 5px; color: #666;">푸시, 이메일, SMS</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<h4>📊 대시보드</h4>
|
|
<p>채권 현황, 회수율, 부서별 성과</p>
|
|
<p style="font-size: 0.9em; margin-top: 5px; color: #666;">실시간 KPI</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<h4>📑 문서 자동화</h4>
|
|
<p>독촉장, 내용증명 자동 생성</p>
|
|
<p style="font-size: 0.9em; margin-top: 5px; color: #666;">PDF 다운로드</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<h4>🔗 ERP 연동</h4>
|
|
<p>회계 시스템 자동 연동</p>
|
|
<p style="font-size: 0.9em; margin-top: 5px; color: #666;">채권 → 회계 자동 반영</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<h4>🤖 AI 추천</h4>
|
|
<p>최적 추심 시간 및 방법 추천</p>
|
|
<p style="font-size: 0.9em; margin-top: 5px; color: #666;">회수 성공률 향상</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 30px; padding: 25px; background: #fef3c7; border-radius: 16px; border-left: 5px solid #f59e0b; border: 1px solid #fde68a;">
|
|
<h3 style="margin-top: 0; color: #92400e; font-weight: 700;">컴플라이언스 기능</h3>
|
|
<ul style="color: #78350f;">
|
|
<li><strong>공정채권추심법 준수:</strong> 추심 시간, 횟수 자동 검증</li>
|
|
<li><strong>개인정보보호법:</strong> 채무자 정보 암호화 및 접근 로그</li>
|
|
<li><strong>전자문서법:</strong> 문서 전자서명 및 보관</li>
|
|
<li><strong>감사 추적:</strong> 모든 추심 활동 이력 기록</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 7: Design - UI/UX Strategy -->
|
|
<div class="slide">
|
|
<div class="slide-content">
|
|
<h2>디자인: UI/UX 전략</h2>
|
|
|
|
<div class="conclusion-box">
|
|
<h3 style="color: white; margin-top: 0;">디자인 철학</h3>
|
|
<p style="font-size: 1.2em;">"복잡한 채권 업무를 간단하게, 직관적으로"</p>
|
|
</div>
|
|
|
|
<div style="margin-top: 30px;">
|
|
<h3>핵심 디자인 원칙</h3>
|
|
<div class="feature-list">
|
|
<div class="feature-item">
|
|
<h4>👤 사용자 중심</h4>
|
|
<p>추심 담당자가 쉽게 사용</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<h4>⚡ 빠른 접근</h4>
|
|
<p>핵심 기능 2클릭 이내</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<h4>📱 모바일 우선</h4>
|
|
<p>현장에서 즉시 기록</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<h4>🔐 보안 강조</h4>
|
|
<p>개인정보 보호 시각화</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 30px;">
|
|
<h3>주요 화면 구성</h3>
|
|
<ul>
|
|
<li><strong>관리자 대시보드:</strong> 채권 현황, 회수율, 부서별 성과</li>
|
|
<li><strong>추심 담당자 대시보드:</strong> 오늘 할 일, 약속 일정, 미완료 건</li>
|
|
<li><strong>채권 관리:</strong> 채권 등록, 조회, 수정, 상태 변경</li>
|
|
<li><strong>추심 활동:</strong> 전화/문자/방문 기록, 일정 관리</li>
|
|
<li><strong>법적 절차:</strong> 독촉장, 지급명령, 소송 관리</li>
|
|
<li><strong>회수 관리:</strong> 입금 기록, 분할 상환 관리</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 8: Backend - Architecture -->
|
|
<div class="slide">
|
|
<div class="slide-content">
|
|
<h2>백엔드: 시스템 아키텍처</h2>
|
|
|
|
<div class="conclusion-box">
|
|
<h3 style="color: white; margin-top: 0;">마이크로서비스 아키텍처</h3>
|
|
<p style="font-size: 1.2em;">확장 가능하고 안정적인 채권관리 시스템</p>
|
|
</div>
|
|
|
|
<div style="margin-top: 30px;">
|
|
<h3>주요 서비스 구성</h3>
|
|
<div class="company-info">
|
|
<div class="info-card">
|
|
<h4>💼 채권 정보 서비스</h4>
|
|
<p>채권 및 채무자 정보 관리</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>📞 추심 활동 서비스</h4>
|
|
<p>추심 활동 기록 및 스케줄링</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>⚖️ 법적 절차 서비스</h4>
|
|
<p>법적 절차 관리 및 문서 생성</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>💰 회수 관리 서비스</h4>
|
|
<p>회수금 처리 및 통계</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>🔔 알림 서비스</h4>
|
|
<p>푸시, 이메일, SMS 발송</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>📊 분석 서비스</h4>
|
|
<p>회수율 분석 및 리포트</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 30px;">
|
|
<h3>기술 스택</h3>
|
|
<table class="comparison-table">
|
|
<thead>
|
|
<tr>
|
|
<th>레이어</th>
|
|
<th>기술</th>
|
|
<th>목적</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>Application</strong></td>
|
|
<td>Node.js (NestJS) / Python (FastAPI)</td>
|
|
<td>비즈니스 로직 처리</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Database</strong></td>
|
|
<td>PostgreSQL</td>
|
|
<td>관계형 데이터 저장</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Cache</strong></td>
|
|
<td>Redis</td>
|
|
<td>세션 및 임시 데이터 캐싱</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Message Queue</strong></td>
|
|
<td>RabbitMQ</td>
|
|
<td>비동기 처리 (알림 발송 등)</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 9: Database Design -->
|
|
<div class="slide">
|
|
<div class="slide-content">
|
|
<h2>백엔드: 데이터베이스 설계</h2>
|
|
|
|
<div style="margin-top: 30px;">
|
|
<h3>핵심 테이블 구조</h3>
|
|
<table class="comparison-table">
|
|
<thead>
|
|
<tr>
|
|
<th>테이블명</th>
|
|
<th>주요 필드</th>
|
|
<th>관계</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>debtors</strong></td>
|
|
<td>id, name, phone, address, company</td>
|
|
<td>1:N debts</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>debts</strong></td>
|
|
<td>id, debtor_id, amount, due_date, status</td>
|
|
<td>N:1 debtors, 1:N activities</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>collection_activities</strong></td>
|
|
<td>id, debt_id, type, date, content, result</td>
|
|
<td>N:1 debts</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>legal_procedures</strong></td>
|
|
<td>id, debt_id, type, filed_date, status</td>
|
|
<td>N:1 debts</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>payments</strong></td>
|
|
<td>id, debt_id, amount, date, method</td>
|
|
<td>N:1 debts</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>schedules</strong></td>
|
|
<td>id, debt_id, due_date, type, completed</td>
|
|
<td>N:1 debts</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div style="margin-top: 30px;">
|
|
<h3>데이터 보안 전략</h3>
|
|
<ul>
|
|
<li><strong>암호화:</strong> 주민번호, 계좌번호 AES-256 암호화</li>
|
|
<li><strong>접근 제어:</strong> 역할 기반 접근 제어 (RBAC)</li>
|
|
<li><strong>감사 로그:</strong> 모든 채권 및 추심 활동 이력 기록</li>
|
|
<li><strong>백업:</strong> 일일 자동 백업 및 복구 테스트</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 10: Frontend - Tech Stack -->
|
|
<div class="slide">
|
|
<div class="slide-content">
|
|
<h2>프론트엔드: 기술 스택</h2>
|
|
|
|
<div class="conclusion-box">
|
|
<h3 style="color: white; margin-top: 0;">현대적인 프론트엔드 아키텍처</h3>
|
|
<p style="font-size: 1.2em;">React 18 + TypeScript 기반 SPA & 모바일 앱</p>
|
|
</div>
|
|
|
|
<div style="margin-top: 30px;">
|
|
<h3>웹 애플리케이션</h3>
|
|
<table class="comparison-table">
|
|
<thead>
|
|
<tr>
|
|
<th>카테고리</th>
|
|
<th>기술</th>
|
|
<th>목적</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>프레임워크</strong></td>
|
|
<td>React 18 + TypeScript</td>
|
|
<td>컴포넌트 기반 UI 구축</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>상태 관리</strong></td>
|
|
<td>Zustand / React Query</td>
|
|
<td>전역 상태 및 서버 상태 관리</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>UI 라이브러리</strong></td>
|
|
<td>Material-UI (MUI)</td>
|
|
<td>디자인 시스템 구현</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>차트</strong></td>
|
|
<td>Recharts</td>
|
|
<td>통계 데이터 시각화</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div style="margin-top: 30px;">
|
|
<h3>모바일 애플리케이션</h3>
|
|
<table class="comparison-table">
|
|
<thead>
|
|
<tr>
|
|
<th>카테고리</th>
|
|
<th>기술</th>
|
|
<th>목적</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>프레임워크</strong></td>
|
|
<td>React Native</td>
|
|
<td>크로스 플랫폼 앱 개발</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>위치 서비스</strong></td>
|
|
<td>React Native Geolocation</td>
|
|
<td>방문 추심 GPS 기록</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>푸시 알림</strong></td>
|
|
<td>Firebase Cloud Messaging</td>
|
|
<td>실시간 알림 발송</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 11: Development Roadmap -->
|
|
<div class="slide">
|
|
<div class="slide-content">
|
|
<h2>개발 로드맵</h2>
|
|
|
|
<table class="comparison-table">
|
|
<thead>
|
|
<tr>
|
|
<th>단계</th>
|
|
<th>기간</th>
|
|
<th>주요 마일스톤</th>
|
|
<th>산출물</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>Phase 1: 기획</strong></td>
|
|
<td>4주</td>
|
|
<td>요구사항 정의, 시스템 설계</td>
|
|
<td>PRD, 아키텍처 문서</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Phase 2: 디자인</strong></td>
|
|
<td>4주</td>
|
|
<td>UI/UX 설계, 디자인 시스템</td>
|
|
<td>Figma 프로토타입</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Phase 3: MVP 개발</strong></td>
|
|
<td>12주</td>
|
|
<td>채권 관리, 추심 활동 핵심 기능</td>
|
|
<td>Alpha 버전</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Phase 4: 통합 테스트</strong></td>
|
|
<td>4주</td>
|
|
<td>법적 절차 연동 및 테스트</td>
|
|
<td>Beta 버전</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Phase 5: 파일럿</strong></td>
|
|
<td>4주</td>
|
|
<td>실사용자 테스트</td>
|
|
<td>개선사항 리스트</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Phase 6: 정식 출시</strong></td>
|
|
<td>2주</td>
|
|
<td>버그 수정 및 최적화</td>
|
|
<td>v1.0 릴리스</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div style="margin-top: 30px; padding: 25px; background: #fef3c7; border-radius: 16px; border-left: 5px solid #f59e0b; border: 1px solid #fde68a;">
|
|
<h3 style="margin-top: 0; color: #92400e; font-weight: 700;">예상 리소스</h3>
|
|
<ul style="color: #78350f;">
|
|
<li><strong>기획:</strong> PM 1명, 채권추심 전문가 1명</li>
|
|
<li><strong>디자인:</strong> UI/UX 디자이너 2명</li>
|
|
<li><strong>백엔드:</strong> 시니어 3명, 주니어 2명</li>
|
|
<li><strong>프론트엔드:</strong> 웹 2명, 모바일 2명</li>
|
|
<li><strong>QA:</strong> 테스터 2명</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 12: Success Metrics -->
|
|
<div class="slide">
|
|
<div class="slide-content">
|
|
<h2>성공 지표</h2>
|
|
|
|
<div style="margin-top: 30px;">
|
|
<h3>📊 정량적 KPI</h3>
|
|
<table class="comparison-table">
|
|
<thead>
|
|
<tr>
|
|
<th>지표</th>
|
|
<th>목표치</th>
|
|
<th>측정 방법</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>업무 시간 절감</strong></td>
|
|
<td>60% 이상</td>
|
|
<td>추심 활동 소요 시간 비교</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>회수율 향상</strong></td>
|
|
<td>15% 증가</td>
|
|
<td>시스템 도입 전후 회수율 비교</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>사용자 만족도</strong></td>
|
|
<td>NPS 60 이상</td>
|
|
<td>분기별 만족도 조사</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>시스템 가용성</strong></td>
|
|
<td>99.9% 이상</td>
|
|
<td>Uptime 모니터링</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>모바일 사용률</strong></td>
|
|
<td>50% 이상</td>
|
|
<td>모바일 앱 활성 사용자</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 13: Conclusion -->
|
|
<div class="slide">
|
|
<div class="slide-content">
|
|
<h2>맺음말</h2>
|
|
|
|
<div class="conclusion-box">
|
|
<h3 style="color: white; margin-top: 0;">채권관리의 새로운 패러다임</h3>
|
|
<p style="font-size: 1.3em;">자동화로 시간을 절약하고, 체계적 관리로 회수율을 높이며, 법규 준수로 리스크를 최소화하는 채권추심 솔루션</p>
|
|
</div>
|
|
|
|
<div style="margin-top: 40px;">
|
|
<h3>핵심 차별점</h3>
|
|
<div class="company-info">
|
|
<div class="info-card">
|
|
<h4>⚡ 완전 자동화</h4>
|
|
<p>채권 등록부터 회수까지 End-to-End 자동화</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>📱 모바일 우선</h4>
|
|
<p>현장에서 즉시 추심 활동 기록</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>⚖️ 법규 준수</h4>
|
|
<p>공정채권추심법 자동 준수</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>🔐 강력한 보안</h4>
|
|
<p>개인정보 암호화 및 접근 제어</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 40px; text-align: center;">
|
|
<p style="font-size: 1.3em; color: #2563eb; font-weight: 700;"><strong>예상 효과</strong></p>
|
|
<p style="font-size: 1.1em; margin-top: 20px;">업무 시간 <span class="highlight">60% 절감</span> | 회수율 <span class="highlight">15% 향상</span> | 법규 준수 <span class="highlight">자동 보장</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 14: Thank You -->
|
|
<div class="slide">
|
|
<div class="slide-content">
|
|
<h1 style="font-size: 4em; margin-bottom: 40px;">감사합니다</h1>
|
|
<div style="text-align: center;">
|
|
<p style="font-size: 1.5em; color: #2563eb; margin-bottom: 30px; font-weight: 700;">장기적 채권추심 전략 - SAM 프로젝트</p>
|
|
<div style="margin-top: 50px; padding: 30px; background: #f1f5f9; border-radius: 16px; border: 1px solid #e2e8f0;">
|
|
<h3>문의 및 피드백</h3>
|
|
<p style="margin-top: 20px;">본 계획안에 대한 의견이나 추가 논의가 필요하신 경우</p>
|
|
<p>프로젝트 팀으로 연락 주시기 바랍니다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide-number">
|
|
<span id="currentSlide">1</span> / <span id="totalSlides">14</span>
|
|
</div>
|
|
|
|
<div class="navigation">
|
|
<button class="nav-btn" id="prevBtn" onclick="changeSlide(-1)">← 이전</button>
|
|
<button class="nav-btn" id="nextBtn" onclick="changeSlide(1)">다음 →</button>
|
|
</div>
|
|
|
|
<script>
|
|
let currentSlide = 1;
|
|
const totalSlides = 14;
|
|
let touchStartX = 0;
|
|
let touchEndX = 0;
|
|
|
|
document.getElementById('totalSlides').textContent = totalSlides;
|
|
|
|
function showSlide(n) {
|
|
const slides = document.querySelectorAll('.slide');
|
|
|
|
if (n > totalSlides) {
|
|
currentSlide = 1;
|
|
}
|
|
if (n < 1) {
|
|
currentSlide = totalSlides;
|
|
}
|
|
|
|
slides.forEach(slide => {
|
|
slide.classList.remove('active');
|
|
});
|
|
|
|
slides[currentSlide - 1].classList.add('active');
|
|
document.getElementById('currentSlide').textContent = currentSlide;
|
|
|
|
document.getElementById('prevBtn').disabled = (currentSlide === 1);
|
|
document.getElementById('nextBtn').disabled = (currentSlide === totalSlides);
|
|
}
|
|
|
|
function changeSlide(direction) {
|
|
currentSlide += direction;
|
|
showSlide(currentSlide);
|
|
}
|
|
|
|
document.addEventListener('keydown', function(event) {
|
|
if (event.key === 'ArrowLeft') {
|
|
changeSlide(-1);
|
|
} else if (event.key === 'ArrowRight' || event.key === ' ') {
|
|
event.preventDefault();
|
|
changeSlide(1);
|
|
}
|
|
});
|
|
|
|
document.addEventListener('touchstart', function(event) {
|
|
touchStartX = event.changedTouches[0].screenX;
|
|
});
|
|
|
|
document.addEventListener('touchend', function(event) {
|
|
touchEndX = event.changedTouches[0].screenX;
|
|
handleSwipe();
|
|
});
|
|
|
|
function handleSwipe() {
|
|
if (touchEndX < touchStartX - 50) {
|
|
changeSlide(1);
|
|
}
|
|
if (touchEndX > touchStartX + 50) {
|
|
changeSlide(-1);
|
|
}
|
|
}
|
|
|
|
showSlide(currentSlide);
|
|
|
|
// Initialize Lucide icons
|
|
if (typeof lucide !== 'undefined') {
|
|
lucide.createIcons();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|