1486 lines
60 KiB
PHP
1486 lines
60 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>MVP 채권추심 전략 - 6주 실행 계획</title>
|
||
|
|
<style>
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
|
|
background: linear-gradient(135deg, #26a69a 0%, #00897b 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.95);
|
||
|
|
border-radius: 20px;
|
||
|
|
padding: 60px;
|
||
|
|
max-width: 1200px;
|
||
|
|
width: 100%;
|
||
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||
|
|
animation: fadeIn 0.8s ease-out;
|
||
|
|
margin: auto 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
color: #26a69a;
|
||
|
|
font-size: 3em;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2 {
|
||
|
|
color: #00897b;
|
||
|
|
font-size: 2.5em;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
text-align: center;
|
||
|
|
border-bottom: 3px solid #26a69a;
|
||
|
|
padding-bottom: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
h3 {
|
||
|
|
color: #26a69a;
|
||
|
|
font-size: 1.8em;
|
||
|
|
margin: 25px 0 15px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
h4 {
|
||
|
|
color: #00897b;
|
||
|
|
font-size: 1.3em;
|
||
|
|
margin: 15px 0 10px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
p, li {
|
||
|
|
font-size: 1.2em;
|
||
|
|
line-height: 1.8;
|
||
|
|
color: #333;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul, ol {
|
||
|
|
margin-left: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.week-card {
|
||
|
|
background: linear-gradient(135deg, #26a69a 0%, #00897b 100%);
|
||
|
|
color: white;
|
||
|
|
padding: 30px;
|
||
|
|
border-radius: 15px;
|
||
|
|
margin: 20px 0;
|
||
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.week-card h3 {
|
||
|
|
color: white;
|
||
|
|
margin-top: 0;
|
||
|
|
border-bottom: 2px solid rgba(255, 255, 255, 0.3);
|
||
|
|
padding-bottom: 10px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.week-card p, .week-card li {
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.task-list {
|
||
|
|
background: #e0f2f1;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 10px;
|
||
|
|
margin: 15px 0;
|
||
|
|
border-left: 4px solid #26a69a;
|
||
|
|
}
|
||
|
|
|
||
|
|
.task-list h4 {
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.deliverable-box {
|
||
|
|
background: #fff3cd;
|
||
|
|
border-left: 5px solid #ffc107;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 10px;
|
||
|
|
margin: 15px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.deliverable-box h4 {
|
||
|
|
color: #856404;
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.deliverable-box p, .deliverable-box li {
|
||
|
|
color: #856404;
|
||
|
|
}
|
||
|
|
|
||
|
|
.success-metrics {
|
||
|
|
background: #d4edda;
|
||
|
|
border-left: 5px solid #28a745;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 10px;
|
||
|
|
margin: 15px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.success-metrics h4 {
|
||
|
|
color: #155724;
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.success-metrics p, .success-metrics li {
|
||
|
|
color: #155724;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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, #26a69a 0%, #00897b 100%);
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.comparison-table tbody tr:nth-of-type(even) {
|
||
|
|
background: #f3f3f3;
|
||
|
|
}
|
||
|
|
|
||
|
|
.highlight-box {
|
||
|
|
background: linear-gradient(135deg, #26a69a 0%, #00897b 100%);
|
||
|
|
color: white;
|
||
|
|
padding: 30px;
|
||
|
|
border-radius: 15px;
|
||
|
|
margin: 20px 0;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.highlight-box p {
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.navigation {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 30px;
|
||
|
|
right: 30px;
|
||
|
|
display: flex;
|
||
|
|
gap: 15px;
|
||
|
|
z-index: 1000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-btn {
|
||
|
|
background: linear-gradient(135deg, #26a69a 0%, #00897b 100%);
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
padding: 15px 30px;
|
||
|
|
border-radius: 50px;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 1.1em;
|
||
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-btn:hover {
|
||
|
|
transform: translateY(-3px);
|
||
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
|
||
|
|
}
|
||
|
|
|
||
|
|
.home-btn {
|
||
|
|
position: fixed;
|
||
|
|
top: 30px;
|
||
|
|
left: 30px;
|
||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
padding: 12px 25px;
|
||
|
|
border-radius: 50px;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 1em;
|
||
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
z-index: 1000;
|
||
|
|
text-decoration: none;
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.home-btn:hover {
|
||
|
|
transform: translateY(-3px);
|
||
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
|
||
|
|
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.slide-number {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 30px;
|
||
|
|
left: 30px;
|
||
|
|
background: rgba(255, 255, 255, 0.9);
|
||
|
|
padding: 10px 20px;
|
||
|
|
border-radius: 25px;
|
||
|
|
font-size: 1.1em;
|
||
|
|
color: #26a69a;
|
||
|
|
font-weight: bold;
|
||
|
|
z-index: 1000;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes slideInRight {
|
||
|
|
from {
|
||
|
|
transform: translateX(100%);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: translateX(0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeIn {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.slide-content {
|
||
|
|
padding: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
font-size: 2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2 {
|
||
|
|
font-size: 1.8em;
|
||
|
|
}
|
||
|
|
|
||
|
|
h3 {
|
||
|
|
font-size: 1.4em;
|
||
|
|
}
|
||
|
|
|
||
|
|
h4 {
|
||
|
|
font-size: 1.1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.home-btn {
|
||
|
|
top: 15px;
|
||
|
|
left: 15px;
|
||
|
|
padding: 10px 20px;
|
||
|
|
font-size: 0.9em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.comparison-table {
|
||
|
|
font-size: 0.8em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.comparison-table th,
|
||
|
|
.comparison-table td {
|
||
|
|
padding: 8px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- Home Button -->
|
||
|
|
<a href="../index.php" class="home-btn">
|
||
|
|
<span>🏠</span>
|
||
|
|
<span>홈으로</span>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<div class="presentation-container">
|
||
|
|
<!-- Slide 1: Cover -->
|
||
|
|
<div class="slide active">
|
||
|
|
<div class="slide-content">
|
||
|
|
<h1>MVP 채권추심 전략</h1>
|
||
|
|
<h2 style="border: none; color: #26a69a;">6주 실행 계획</h2>
|
||
|
|
<div style="text-align: center; margin-top: 50px;">
|
||
|
|
<p style="font-size: 1.5em; color: #00897b;">즉시 실행 가능한 핵심 채권관리 솔루션</p>
|
||
|
|
<p style="margin-top: 30px; color: #666;">1인 파트별 현실적 구현 방안</p>
|
||
|
|
<div class="highlight-box" style="margin-top: 50px;">
|
||
|
|
<p style="font-size: 1.3em;"><strong>목표:</strong> 6주 안에 실무에서 사용 가능한 채권관리 시스템 MVP 완성</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Slide 2: Overview & Philosophy -->
|
||
|
|
<div class="slide">
|
||
|
|
<div class="slide-content">
|
||
|
|
<h2>MVP 철학 및 범위</h2>
|
||
|
|
|
||
|
|
<div class="highlight-box">
|
||
|
|
<h3 style="color: white; margin-top: 0;">핵심 원칙</h3>
|
||
|
|
<p style="font-size: 1.2em;">"완벽한 전체보다 작동하는 핵심"</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="margin-top: 30px;">
|
||
|
|
<h3>🎯 MVP 목표</h3>
|
||
|
|
<ul>
|
||
|
|
<li>즉시 사용 가능한 핵심 채권관리 기능에 집중</li>
|
||
|
|
<li>각 파트 1인이 6주 내 완성 가능한 범위</li>
|
||
|
|
<li>실무에서 가장 빈번한 채권 업무 자동화</li>
|
||
|
|
<li>점진적 확장 가능한 기반 구조</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="margin-top: 30px;">
|
||
|
|
<h3>🚫 MVP 범위 밖</h3>
|
||
|
|
<ul>
|
||
|
|
<li>복잡한 법적 절차 자동화 (Phase 2 이후)</li>
|
||
|
|
<li>모바일 앱 (Phase 2 이후)</li>
|
||
|
|
<li>AI 기반 추심 추천 (Phase 2 이후)</li>
|
||
|
|
<li>ERP 시스템 연동 (Phase 2 이후)</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="margin-top: 30px;">
|
||
|
|
<h3>✅ MVP 핵심 기능</h3>
|
||
|
|
<ul>
|
||
|
|
<li>채권 등록 및 관리</li>
|
||
|
|
<li>추심 활동 기록 (전화, 문자)</li>
|
||
|
|
<li>간단한 회수 내역 관리</li>
|
||
|
|
<li>채권 현황 대시보드</li>
|
||
|
|
<li>추심 일정 관리</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Slide 3: Team Structure -->
|
||
|
|
<div class="slide">
|
||
|
|
<div class="slide-content">
|
||
|
|
<h2>팀 구성 및 역할 (1인 파트)</h2>
|
||
|
|
|
||
|
|
<table class="comparison-table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>역할</th>
|
||
|
|
<th>주요 책임</th>
|
||
|
|
<th>6주 목표</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td><strong>기획 1명</strong></td>
|
||
|
|
<td>요구사항 정의, 기능 명세, 테스트 시나리오</td>
|
||
|
|
<td>MVP 기능 명세서, 사용자 스토리 10개, 테스트 케이스</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>디자인 1명</strong></td>
|
||
|
|
<td>화면 설계, UI 디자인, 프로토타입</td>
|
||
|
|
<td>6개 핵심 화면 디자인, 기본 컴포넌트 라이브러리</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>백엔드 1명</strong></td>
|
||
|
|
<td>API 개발, 데이터베이스 설계, 비즈니스 로직</td>
|
||
|
|
<td>핵심 API 20개, DB 스키마, 채권 관리 엔진</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>프론트엔드 1명</strong></td>
|
||
|
|
<td>화면 구현, API 연동, 사용자 경험</td>
|
||
|
|
<td>6개 핵심 화면, 데이터 테이블, 반응형 UI</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<div class="deliverable-box" style="margin-top: 30px;">
|
||
|
|
<h4>⚠️ 현실적 제약 사항</h4>
|
||
|
|
<ul>
|
||
|
|
<li>각 파트 1명이므로 병목 현상 발생 가능</li>
|
||
|
|
<li>동시 작업 최대화를 위한 명확한 인터페이스 정의 필요</li>
|
||
|
|
<li>주간 동기화 미팅으로 의존성 관리</li>
|
||
|
|
<li>우선순위 조정을 통한 6주 내 완성 보장</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Slide 4: Week 1-2 -->
|
||
|
|
<div class="slide">
|
||
|
|
<div class="slide-content">
|
||
|
|
<h2>Week 1-2: 기반 구축 및 핵심 설계</h2>
|
||
|
|
|
||
|
|
<div class="week-card">
|
||
|
|
<h3>🏗️ Week 1-2 목표</h3>
|
||
|
|
<p>프로젝트 기반 설정 및 핵심 아키텍처 구축</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="task-list">
|
||
|
|
<h4>📋 기획 (Week 1-2)</h4>
|
||
|
|
<ul>
|
||
|
|
<li><strong>Week 1:</strong> MVP 기능 명세서 작성
|
||
|
|
<ul>
|
||
|
|
<li>채권 관리 프로세스 정의</li>
|
||
|
|
<li>추심 활동 프로세스 명세</li>
|
||
|
|
<li>사용자 스토리 10개 작성</li>
|
||
|
|
<li>데이터 모델 초안</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li><strong>Week 2:</strong> 화면 플로우 및 테스트 케이스
|
||
|
|
<ul>
|
||
|
|
<li>화면 전환 플로우 다이어그램</li>
|
||
|
|
<li>API 명세 초안 (백엔드 협업)</li>
|
||
|
|
<li>핵심 테스트 케이스 20개</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="task-list">
|
||
|
|
<h4>🎨 디자인 (Week 1-2)</h4>
|
||
|
|
<ul>
|
||
|
|
<li><strong>Week 1:</strong> 디자인 시스템 구축
|
||
|
|
<ul>
|
||
|
|
<li>컬러 팔레트 및 타이포그래피</li>
|
||
|
|
<li>기본 컴포넌트 (버튼, 입력, 카드)</li>
|
||
|
|
<li>와이어프레임 6개 화면</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li><strong>Week 2:</strong> 핵심 화면 디자인
|
||
|
|
<ul>
|
||
|
|
<li>채권 관리 대시보드 디자인</li>
|
||
|
|
<li>채권 등록/조회 화면</li>
|
||
|
|
<li>추심 활동 기록 화면</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="task-list">
|
||
|
|
<h4>⚙️ 백엔드 (Week 1-2)</h4>
|
||
|
|
<ul>
|
||
|
|
<li><strong>Week 1:</strong> 프로젝트 설정
|
||
|
|
<ul>
|
||
|
|
<li>Node.js + Express 프로젝트 초기화</li>
|
||
|
|
<li>PostgreSQL 데이터베이스 설정</li>
|
||
|
|
<li>JWT 인증 구현</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li><strong>Week 2:</strong> 핵심 DB 및 API
|
||
|
|
<ul>
|
||
|
|
<li>데이터베이스 스키마 구축 (6개 테이블)</li>
|
||
|
|
<li>사용자 관리 API 4개</li>
|
||
|
|
<li>채무자 정보 CRUD API 4개</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="task-list">
|
||
|
|
<h4>💻 프론트엔드 (Week 1-2)</h4>
|
||
|
|
<ul>
|
||
|
|
<li><strong>Week 1:</strong> 프로젝트 설정
|
||
|
|
<ul>
|
||
|
|
<li>React + TypeScript 프로젝트 초기화</li>
|
||
|
|
<li>라우팅 및 상태 관리 설정</li>
|
||
|
|
<li>공통 컴포넌트 3개 구현</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li><strong>Week 2:</strong> 레이아웃 및 인증
|
||
|
|
<ul>
|
||
|
|
<li>기본 레이아웃 (헤더, 사이드바)</li>
|
||
|
|
<li>로그인/회원가입 화면</li>
|
||
|
|
<li>API 연동 설정</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="deliverable-box">
|
||
|
|
<h4>📦 Week 1-2 산출물</h4>
|
||
|
|
<ul>
|
||
|
|
<li>MVP 기능 명세서 (기획)</li>
|
||
|
|
<li>디자인 시스템 및 와이어프레임 (디자인)</li>
|
||
|
|
<li>인증 API + DB 스키마 (백엔드)</li>
|
||
|
|
<li>프로젝트 기반 + 로그인 UI (프론트엔드)</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Slide 5: Week 3-4 -->
|
||
|
|
<div class="slide">
|
||
|
|
<div class="slide-content">
|
||
|
|
<h2>Week 3-4: 핵심 기능 구현</h2>
|
||
|
|
|
||
|
|
<div class="week-card">
|
||
|
|
<h3>⚡ Week 3-4 목표</h3>
|
||
|
|
<p>채권 관리 및 추심 활동 핵심 기능 완성</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="task-list">
|
||
|
|
<h4>📋 기획 (Week 3-4)</h4>
|
||
|
|
<ul>
|
||
|
|
<li><strong>Week 3:</strong> 상세 프로세스 정의
|
||
|
|
<ul>
|
||
|
|
<li>회수 계산 로직 상세 명세</li>
|
||
|
|
<li>데이터 검증 규칙 정의</li>
|
||
|
|
<li>리포트 템플릿 설계</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li><strong>Week 4:</strong> QA 준비
|
||
|
|
<ul>
|
||
|
|
<li>테스트 시나리오 작성</li>
|
||
|
|
<li>버그 트래킹 시스템 준비</li>
|
||
|
|
<li>사용자 가이드 초안</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="task-list">
|
||
|
|
<h4>🎨 디자인 (Week 3-4)</h4>
|
||
|
|
<ul>
|
||
|
|
<li><strong>Week 3:</strong> 나머지 화면 디자인
|
||
|
|
<ul>
|
||
|
|
<li>회수 관리 화면</li>
|
||
|
|
<li>일정 관리 캘린더</li>
|
||
|
|
<li>통계 리포트 화면</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li><strong>Week 4:</strong> 디자인 QA 및 개선
|
||
|
|
<ul>
|
||
|
|
<li>프론트엔드 구현 리뷰</li>
|
||
|
|
<li>반응형 디자인 검증</li>
|
||
|
|
<li>UX 개선 사항 반영</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="task-list">
|
||
|
|
<h4>⚙️ 백엔드 (Week 3-4)</h4>
|
||
|
|
<ul>
|
||
|
|
<li><strong>Week 3:</strong> 채권 및 추심 API
|
||
|
|
<ul>
|
||
|
|
<li>채권 관리 API 6개 (등록, 조회, 수정, 삭제, 상태변경)</li>
|
||
|
|
<li>추심 활동 기록 API 4개</li>
|
||
|
|
<li>회수 관리 API 3개</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li><strong>Week 4:</strong> 일정 및 리포트 API
|
||
|
|
<ul>
|
||
|
|
<li>일정 관리 API 3개</li>
|
||
|
|
<li>대시보드 통계 API 2개</li>
|
||
|
|
<li>리포트 생성 API</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="task-list">
|
||
|
|
<h4>💻 프론트엔드 (Week 3-4)</h4>
|
||
|
|
<ul>
|
||
|
|
<li><strong>Week 3:</strong> 채권 관리 화면
|
||
|
|
<ul>
|
||
|
|
<li>채권 등록/수정 폼</li>
|
||
|
|
<li>채권 목록 테이블</li>
|
||
|
|
<li>추심 활동 기록 폼</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li><strong>Week 4:</strong> 회수 관리 및 통계
|
||
|
|
<ul>
|
||
|
|
<li>회수 내역 입력 화면</li>
|
||
|
|
<li>대시보드 KPI 카드</li>
|
||
|
|
<li>일정 관리 캘린더</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="deliverable-box">
|
||
|
|
<h4>📦 Week 3-4 산출물</h4>
|
||
|
|
<ul>
|
||
|
|
<li>테스트 시나리오 및 사용자 가이드 (기획)</li>
|
||
|
|
<li>전체 화면 디자인 완료 (디자인)</li>
|
||
|
|
<li>채권·추심·회수 API 완성 (백엔드)</li>
|
||
|
|
<li>채권 관리 및 대시보드 화면 (프론트엔드)</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Slide 6: Week 5-6 -->
|
||
|
|
<div class="slide">
|
||
|
|
<div class="slide-content">
|
||
|
|
<h2>Week 5-6: 통합 테스트 및 런칭 준비</h2>
|
||
|
|
|
||
|
|
<div class="week-card">
|
||
|
|
<h3>🚀 Week 5-6 목표</h3>
|
||
|
|
<p>통합, 테스트, 버그 수정 및 MVP 런칭</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="task-list">
|
||
|
|
<h4>📋 기획 (Week 5-6)</h4>
|
||
|
|
<ul>
|
||
|
|
<li><strong>Week 5:</strong> 통합 테스트 진행
|
||
|
|
<ul>
|
||
|
|
<li>End-to-End 테스트 수행</li>
|
||
|
|
<li>버그 우선순위 관리</li>
|
||
|
|
<li>사용자 가이드 완성</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li><strong>Week 6:</strong> 런칭 준비
|
||
|
|
<ul>
|
||
|
|
<li>최종 테스트 및 검수</li>
|
||
|
|
<li>릴리스 노트 작성</li>
|
||
|
|
<li>Phase 2 백로그 정리</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="task-list">
|
||
|
|
<h4>🎨 디자인 (Week 5-6)</h4>
|
||
|
|
<ul>
|
||
|
|
<li><strong>Week 5:</strong> 디자인 QA
|
||
|
|
<ul>
|
||
|
|
<li>크로스 브라우저 테스트</li>
|
||
|
|
<li>반응형 디자인 검증</li>
|
||
|
|
<li>접근성 체크</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li><strong>Week 6:</strong> 마케팅 자료
|
||
|
|
<ul>
|
||
|
|
<li>프로덕트 스크린샷</li>
|
||
|
|
<li>데모 시나리오 준비</li>
|
||
|
|
<li>UI 개선 사항 문서화</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="task-list">
|
||
|
|
<h4>⚙️ 백엔드 (Week 5-6)</h4>
|
||
|
|
<ul>
|
||
|
|
<li><strong>Week 5:</strong> 성능 최적화
|
||
|
|
<ul>
|
||
|
|
<li>API 성능 테스트 및 최적화</li>
|
||
|
|
<li>데이터베이스 인덱스 최적화</li>
|
||
|
|
<li>에러 핸들링 개선</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li><strong>Week 6:</strong> 배포 준비
|
||
|
|
<ul>
|
||
|
|
<li>프로덕션 환경 설정</li>
|
||
|
|
<li>백업 및 모니터링 구성</li>
|
||
|
|
<li>API 문서화 완료</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="task-list">
|
||
|
|
<h4>💻 프론트엔드 (Week 5-6)</h4>
|
||
|
|
<ul>
|
||
|
|
<li><strong>Week 5:</strong> 버그 수정 및 최적화
|
||
|
|
<ul>
|
||
|
|
<li>통합 테스트 버그 수정</li>
|
||
|
|
<li>성능 최적화 (번들 사이즈)</li>
|
||
|
|
<li>로딩 상태 및 에러 처리</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li><strong>Week 6:</strong> 최종 점검 및 배포
|
||
|
|
<ul>
|
||
|
|
<li>프로덕션 빌드 최적화</li>
|
||
|
|
<li>브라우저 호환성 검증</li>
|
||
|
|
<li>배포 및 모니터링</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="deliverable-box">
|
||
|
|
<h4>📦 Week 5-6 산출물</h4>
|
||
|
|
<ul>
|
||
|
|
<li>테스트 리포트 및 릴리스 노트 (기획)</li>
|
||
|
|
<li>마케팅 자료 및 UI 문서 (디자인)</li>
|
||
|
|
<li>프로덕션 API + 모니터링 (백엔드)</li>
|
||
|
|
<li>배포된 프로덕션 웹앱 (프론트엔드)</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Slide 7: Success Metrics -->
|
||
|
|
<div class="slide">
|
||
|
|
<div class="slide-content">
|
||
|
|
<h2>성공 지표 및 완료 기준</h2>
|
||
|
|
|
||
|
|
<div class="highlight-box">
|
||
|
|
<h3 style="color: white; margin-top: 0;">MVP 완료 정의</h3>
|
||
|
|
<p style="font-size: 1.2em;">"실제 사용자가 채권을 등록하고 추심 활동을 기록하며 회수 현황을 확인할 수 있어야 함"</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>회원가입, 로그인, 권한 관리</td>
|
||
|
|
<td>관리자/담당자 각 3명 동시 로그인</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>채권 등록</strong></td>
|
||
|
|
<td>채무자 정보 및 채권 내역 입력</td>
|
||
|
|
<td>50건 채권 데이터 입력 및 확인</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>추심 활동</strong></td>
|
||
|
|
<td>전화/문자 추심 기록</td>
|
||
|
|
<td>20건 추심 활동 기록 테스트</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>회수 관리</strong></td>
|
||
|
|
<td>회수금 입금 기록 및 계산</td>
|
||
|
|
<td>10건 회수 데이터 정확도 검증</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>
|
||
|
|
|
||
|
|
<div class="success-metrics" style="margin-top: 30px;">
|
||
|
|
<h4>📊 정량적 목표</h4>
|
||
|
|
<ul>
|
||
|
|
<li><strong>기능 완성도:</strong> 핵심 기능 6개 100% 동작</li>
|
||
|
|
<li><strong>API 응답 속도:</strong> 평균 500ms 이하</li>
|
||
|
|
<li><strong>버그 제로:</strong> Critical 버그 0건</li>
|
||
|
|
<li><strong>코드 커버리지:</strong> 핵심 기능 80% 이상</li>
|
||
|
|
<li><strong>사용자 테스트:</strong> 10명 이상 실제 사용 가능</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="deliverable-box" style="margin-top: 30px;">
|
||
|
|
<h4>⚠️ 리스크 관리</h4>
|
||
|
|
<ul>
|
||
|
|
<li><strong>일정 지연 리스크:</strong> 주간 진도 체크 및 우선순위 조정</li>
|
||
|
|
<li><strong>기술 리스크:</strong> 1-2주차에 기술 검증 완료</li>
|
||
|
|
<li><strong>통합 리스크:</strong> 4주차부터 점진적 통합 시작</li>
|
||
|
|
<li><strong>품질 리스크:</strong> 주간 코드 리뷰 및 테스트</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Slide 8: Technical Stack -->
|
||
|
|
<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>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td><strong>Node.js + Express</strong></td>
|
||
|
|
<td>빠른 개발 속도, 생태계 풍부, JavaScript 통일</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>PostgreSQL</strong></td>
|
||
|
|
<td>안정성, 관계형 데이터, 무료 오픈소스</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>JWT 인증</strong></td>
|
||
|
|
<td>간단한 구현, 확장 가능</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>PDF 생성: PDFKit</strong></td>
|
||
|
|
<td>Node.js 네이티브, 한글 지원</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="margin-top: 30px;">
|
||
|
|
<h3>💻 프론트엔드 스택</h3>
|
||
|
|
<table class="comparison-table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>기술</th>
|
||
|
|
<th>선택 이유</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td><strong>React 18 + TypeScript</strong></td>
|
||
|
|
<td>타입 안전성, 생산성, 대중성</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>Vite</strong></td>
|
||
|
|
<td>빠른 개발 서버, 간단한 설정</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>Material-UI (MUI)</strong></td>
|
||
|
|
<td>빠른 UI 구축, 디자인 일관성</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>React Query</strong></td>
|
||
|
|
<td>서버 상태 관리 간소화</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>Recharts</strong></td>
|
||
|
|
<td>간단한 차트 라이브러리</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="margin-top: 30px;">
|
||
|
|
<h3>🛠️ 개발 도구</h3>
|
||
|
|
<ul>
|
||
|
|
<li><strong>버전 관리:</strong> Git + GitHub</li>
|
||
|
|
<li><strong>협업:</strong> Slack, Notion</li>
|
||
|
|
<li><strong>디자인:</strong> Figma</li>
|
||
|
|
<li><strong>테스트:</strong> Vitest, React Testing Library</li>
|
||
|
|
<li><strong>배포:</strong> Vercel (프론트), Railway (백엔드)</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="deliverable-box" style="margin-top: 30px;">
|
||
|
|
<h4>💡 기술 결정 원칙</h4>
|
||
|
|
<ul>
|
||
|
|
<li>검증된 기술 우선 (실험적 기술 배제)</li>
|
||
|
|
<li>학습 곡선 최소화 (팀원 역량 고려)</li>
|
||
|
|
<li>커뮤니티 및 문서 풍부</li>
|
||
|
|
<li>무료 또는 저비용 솔루션</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Slide 9: Database Design -->
|
||
|
|
<div class="slide">
|
||
|
|
<div class="slide-content">
|
||
|
|
<h2>데이터베이스 설계 (MVP 범위)</h2>
|
||
|
|
|
||
|
|
<div style="margin-top: 30px;">
|
||
|
|
<h3>📊 핵심 테이블 (6개)</h3>
|
||
|
|
<table class="comparison-table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>테이블명</th>
|
||
|
|
<th>주요 필드</th>
|
||
|
|
<th>용도</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td><strong>users</strong></td>
|
||
|
|
<td>id, email, password, role</td>
|
||
|
|
<td>사용자 계정 관리</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>debtors</strong></td>
|
||
|
|
<td>id, name, phone, address, company</td>
|
||
|
|
<td>채무자 정보 관리</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>debts</strong></td>
|
||
|
|
<td>id, debtor_id, amount, due_date, status</td>
|
||
|
|
<td>채권 정보 관리</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>collection_activities</strong></td>
|
||
|
|
<td>id, debt_id, type, date, content, result</td>
|
||
|
|
<td>추심 활동 기록</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>payments</strong></td>
|
||
|
|
<td>id, debt_id, amount, date, method</td>
|
||
|
|
<td>회수금 입금 기록</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>schedules</strong></td>
|
||
|
|
<td>id, debt_id, due_date, type, completed</td>
|
||
|
|
<td>추심 일정 관리</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="margin-top: 30px; background: #e0f2f1; padding: 20px; border-radius: 10px;">
|
||
|
|
<h4>🔗 데이터 관계</h4>
|
||
|
|
<ul>
|
||
|
|
<li><strong>debtors → debts:</strong> 1:N (채무자 한 명이 여러 채권)</li>
|
||
|
|
<li><strong>debts → collection_activities:</strong> 1:N (채권 하나에 여러 추심 활동)</li>
|
||
|
|
<li><strong>debts → payments:</strong> 1:N (채권 하나에 여러 회수 내역)</li>
|
||
|
|
<li><strong>debts → schedules:</strong> 1:N (채권 하나에 여러 추심 일정)</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="success-metrics" style="margin-top: 30px;">
|
||
|
|
<h4>✅ 데이터 검증 규칙</h4>
|
||
|
|
<ul>
|
||
|
|
<li>금액 필드: 0 이상의 숫자, 최대 12자리</li>
|
||
|
|
<li>날짜: YYYY-MM-DD 형식</li>
|
||
|
|
<li>상태: 정상/연체/회수/손실 enum으로 제한</li>
|
||
|
|
<li>전화번호: 숫자 및 하이픈만 허용</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Slide 10: API Design -->
|
||
|
|
<div class="slide">
|
||
|
|
<div class="slide-content">
|
||
|
|
<h2>API 설계 (20개 핵심 API)</h2>
|
||
|
|
|
||
|
|
<div style="margin-top: 30px;">
|
||
|
|
<h3>🔐 인증 API (4개)</h3>
|
||
|
|
<table class="comparison-table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>엔드포인트</th>
|
||
|
|
<th>메서드</th>
|
||
|
|
<th>설명</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>/api/auth/register</td>
|
||
|
|
<td>POST</td>
|
||
|
|
<td>회원가입</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>/api/auth/login</td>
|
||
|
|
<td>POST</td>
|
||
|
|
<td>로그인 및 JWT 발급</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>/api/auth/logout</td>
|
||
|
|
<td>POST</td>
|
||
|
|
<td>로그아웃</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>/api/auth/profile</td>
|
||
|
|
<td>GET</td>
|
||
|
|
<td>사용자 프로필 조회</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="margin-top: 30px;">
|
||
|
|
<h3>👤 채무자 관리 API (4개)</h3>
|
||
|
|
<table class="comparison-table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>엔드포인트</th>
|
||
|
|
<th>메서드</th>
|
||
|
|
<th>설명</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>/api/debtors</td>
|
||
|
|
<td>GET</td>
|
||
|
|
<td>채무자 목록 조회</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>/api/debtors</td>
|
||
|
|
<td>POST</td>
|
||
|
|
<td>신규 채무자 등록</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>/api/debtors/:id</td>
|
||
|
|
<td>PUT</td>
|
||
|
|
<td>채무자 정보 수정</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>/api/debtors/:id</td>
|
||
|
|
<td>DELETE</td>
|
||
|
|
<td>채무자 삭제</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="margin-top: 30px;">
|
||
|
|
<h3>💼 채권 관리 API (6개)</h3>
|
||
|
|
<table class="comparison-table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>엔드포인트</th>
|
||
|
|
<th>메서드</th>
|
||
|
|
<th>설명</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>/api/debts</td>
|
||
|
|
<td>GET</td>
|
||
|
|
<td>채권 목록 조회</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>/api/debts</td>
|
||
|
|
<td>POST</td>
|
||
|
|
<td>신규 채권 등록</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>/api/debts/:id</td>
|
||
|
|
<td>GET</td>
|
||
|
|
<td>채권 상세 조회</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>/api/debts/:id</td>
|
||
|
|
<td>PUT</td>
|
||
|
|
<td>채권 정보 수정</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>/api/debts/:id/status</td>
|
||
|
|
<td>PATCH</td>
|
||
|
|
<td>채권 상태 변경</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>/api/debts/:id</td>
|
||
|
|
<td>DELETE</td>
|
||
|
|
<td>채권 삭제</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="margin-top: 30px;">
|
||
|
|
<h3>📞 추심 활동 & 회수 API (6개)</h3>
|
||
|
|
<table class="comparison-table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>엔드포인트</th>
|
||
|
|
<th>메서드</th>
|
||
|
|
<th>설명</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>/api/activities</td>
|
||
|
|
<td>GET</td>
|
||
|
|
<td>추심 활동 목록 조회</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>/api/activities</td>
|
||
|
|
<td>POST</td>
|
||
|
|
<td>추심 활동 기록</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>/api/payments</td>
|
||
|
|
<td>GET</td>
|
||
|
|
<td>회수 내역 조회</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>/api/payments</td>
|
||
|
|
<td>POST</td>
|
||
|
|
<td>회수금 입금 기록</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>/api/schedules</td>
|
||
|
|
<td>GET/POST</td>
|
||
|
|
<td>일정 목록 및 생성</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>/api/dashboard/stats</td>
|
||
|
|
<td>GET</td>
|
||
|
|
<td>대시보드 통계</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Slide 11: UI Screens -->
|
||
|
|
<div class="slide">
|
||
|
|
<div class="slide-content">
|
||
|
|
<h2>핵심 화면 (6개)</h2>
|
||
|
|
|
||
|
|
<div style="margin-top: 30px;">
|
||
|
|
<h3>1️⃣ 대시보드</h3>
|
||
|
|
<div class="task-list">
|
||
|
|
<h4>주요 요소</h4>
|
||
|
|
<ul>
|
||
|
|
<li><strong>KPI 카드 4개:</strong> 전체 채권 수, 총 채권 금액, 회수율, 연체율</li>
|
||
|
|
<li><strong>채권 현황:</strong> 상태별 채권 분포 (정상/연체/회수/손실)</li>
|
||
|
|
<li><strong>최근 활동:</strong> 최근 추심 활동 5건</li>
|
||
|
|
<li><strong>빠른 액션:</strong> 채권 등록, 추심 기록 버튼</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="margin-top: 30px;">
|
||
|
|
<h3>2️⃣ 채권 관리</h3>
|
||
|
|
<div class="task-list">
|
||
|
|
<h4>주요 요소</h4>
|
||
|
|
<ul>
|
||
|
|
<li><strong>채권 목록:</strong> 채무자명, 채권금액, 상태, 발생일</li>
|
||
|
|
<li><strong>필터/검색:</strong> 상태별, 기간별 필터링</li>
|
||
|
|
<li><strong>등록 폼:</strong> 채무자 선택, 금액, 발생일 입력</li>
|
||
|
|
<li><strong>상세 정보:</strong> 추심 활동 이력, 회수 내역</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="margin-top: 30px;">
|
||
|
|
<h3>3️⃣ 추심 활동 기록</h3>
|
||
|
|
<div class="task-list">
|
||
|
|
<h4>주요 요소</h4>
|
||
|
|
<ul>
|
||
|
|
<li><strong>활동 유형:</strong> 전화, 문자, 우편, 방문 선택</li>
|
||
|
|
<li><strong>활동 내용:</strong> 통화 내용, 채무자 반응 입력</li>
|
||
|
|
<li><strong>약속 일자:</strong> 다음 약속 날짜 설정</li>
|
||
|
|
<li><strong>활동 이력:</strong> 시간순 활동 타임라인</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="margin-top: 30px;">
|
||
|
|
<h3>4️⃣ 회수 관리</h3>
|
||
|
|
<div class="task-list">
|
||
|
|
<h4>주요 요소</h4>
|
||
|
|
<ul>
|
||
|
|
<li><strong>입금 기록:</strong> 회수금액, 입금일, 방법 입력</li>
|
||
|
|
<li><strong>회수 내역:</strong> 채권별 회수 이력 조회</li>
|
||
|
|
<li><strong>잔액 계산:</strong> 채권금액 - 회수금액 자동 계산</li>
|
||
|
|
<li><strong>회수율:</strong> 채권별, 전체 회수율 통계</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="margin-top: 30px;">
|
||
|
|
<h3>5️⃣ 일정 관리</h3>
|
||
|
|
<div class="task-list">
|
||
|
|
<h4>주요 요소</h4>
|
||
|
|
<ul>
|
||
|
|
<li><strong>캘린더 뷰:</strong> 월간 추심 일정 표시</li>
|
||
|
|
<li><strong>일정 등록:</strong> 채권 선택, 일자, 메모</li>
|
||
|
|
<li><strong>알림 설정:</strong> D-1, D-3 알림 옵션</li>
|
||
|
|
<li><strong>오늘 할 일:</strong> 오늘 예정된 추심 목록</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="margin-top: 30px;">
|
||
|
|
<h3>6️⃣ 채무자 관리</h3>
|
||
|
|
<div class="task-list">
|
||
|
|
<h4>주요 요소</h4>
|
||
|
|
<ul>
|
||
|
|
<li><strong>채무자 목록:</strong> 이름, 연락처, 주소 테이블</li>
|
||
|
|
<li><strong>등록 폼:</strong> 개인/법인 정보 입력</li>
|
||
|
|
<li><strong>상세 정보:</strong> 보유 채권 목록, 총 채권액</li>
|
||
|
|
<li><strong>추심 이력:</strong> 채무자별 추심 활동 요약</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Slide 12: Phase 2 Roadmap -->
|
||
|
|
<div class="slide">
|
||
|
|
<div class="slide-content">
|
||
|
|
<h2>Phase 2 계획 (MVP 이후)</h2>
|
||
|
|
|
||
|
|
<div class="highlight-box">
|
||
|
|
<h3 style="color: white; margin-top: 0;">MVP 성공 후 확장 로드맵</h3>
|
||
|
|
<p style="font-size: 1.2em;">사용자 피드백 기반 점진적 기능 확장</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="margin-top: 30px;">
|
||
|
|
<h3>📈 Phase 2 목표 (3개월)</h3>
|
||
|
|
<ul>
|
||
|
|
<li><strong>법적 절차 자동화:</strong> 독촉장, 내용증명 자동 생성</li>
|
||
|
|
<li><strong>모바일 앱:</strong> React Native 기반 현장 추심 기록</li>
|
||
|
|
<li><strong>문자 발송 연동:</strong> SMS API 연동 자동 발송</li>
|
||
|
|
<li><strong>분할 상환 관리:</strong> 분할 납부 계획 및 추적</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="margin-top: 30px;">
|
||
|
|
<h3>🔮 Phase 3 목표 (6개월)</h3>
|
||
|
|
<ul>
|
||
|
|
<li><strong>AI 추심 추천:</strong> 최적 추심 시간 및 방법 제안</li>
|
||
|
|
<li><strong>ERP 연동:</strong> 회계 시스템 자동 연동</li>
|
||
|
|
<li><strong>법원 전자소송:</strong> 지급명령 전자 신청</li>
|
||
|
|
<li><strong>고급 분석:</strong> 회수 성공률 예측, 채무자 신용 분석</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="deliverable-box" style="margin-top: 30px;">
|
||
|
|
<h4>💡 확장 우선순위 결정 기준</h4>
|
||
|
|
<ul>
|
||
|
|
<li><strong>사용자 요청:</strong> 실제 사용자 피드백 반영</li>
|
||
|
|
<li><strong>사용 빈도:</strong> 가장 많이 사용되는 기능 개선</li>
|
||
|
|
<li><strong>회수율 향상:</strong> 회수 성공률에 직접 기여</li>
|
||
|
|
<li><strong>기술 복잡도:</strong> 구현 난이도와 리소스 고려</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="success-metrics" style="margin-top: 30px;">
|
||
|
|
<h4>🎯 장기 비전</h4>
|
||
|
|
<p>중소기업을 위한 <strong>올인원 채권관리 플랫폼</strong>으로 성장</p>
|
||
|
|
<ul>
|
||
|
|
<li>월간 활성 사용자 300개 기업 이상</li>
|
||
|
|
<li>채권 관리 업무 시간 60% 절감</li>
|
||
|
|
<li>회수율 평균 15% 향상</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Slide 13: Final Summary -->
|
||
|
|
<div class="slide">
|
||
|
|
<div class="slide-content">
|
||
|
|
<h2>6주 MVP 요약</h2>
|
||
|
|
|
||
|
|
<div class="highlight-box">
|
||
|
|
<h3 style="color: white; margin-top: 0;">핵심 메시지</h3>
|
||
|
|
<p style="font-size: 1.3em;">"작지만 완벽하게 작동하는 채권관리 솔루션을 6주 안에"</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="margin-top: 40px;">
|
||
|
|
<h3>✅ 최종 체크리스트</h3>
|
||
|
|
<table class="comparison-table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>주차</th>
|
||
|
|
<th>핵심 산출물</th>
|
||
|
|
<th>검증 방법</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td><strong>Week 1-2</strong></td>
|
||
|
|
<td>기반 구축 완료</td>
|
||
|
|
<td>로그인 성공, DB 연결 확인</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>Week 3-4</strong></td>
|
||
|
|
<td>핵심 기능 완성</td>
|
||
|
|
<td>채권 등록 및 추심 기록 동작</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>Week 5-6</strong></td>
|
||
|
|
<td>통합 및 배포</td>
|
||
|
|
<td>10명 사용자 실제 테스트</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="margin-top: 40px; text-align: center;">
|
||
|
|
<p style="font-size: 1.3em; color: #26a69a;"><strong>성공 지표</strong></p>
|
||
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 30px;">
|
||
|
|
<div class="task-list">
|
||
|
|
<p style="font-size: 1.5em; color: #26a69a; font-weight: bold; margin: 0;">6개</p>
|
||
|
|
<p style="font-size: 1em; margin: 5px 0 0 0;">핵심 기능</p>
|
||
|
|
</div>
|
||
|
|
<div class="task-list">
|
||
|
|
<p style="font-size: 1.5em; color: #26a69a; font-weight: bold; margin: 0;">20개</p>
|
||
|
|
<p style="font-size: 1em; margin: 5px 0 0 0;">API 엔드포인트</p>
|
||
|
|
</div>
|
||
|
|
<div class="task-list">
|
||
|
|
<p style="font-size: 1.5em; color: #26a69a; font-weight: bold; margin: 0;">6개</p>
|
||
|
|
<p style="font-size: 1em; margin: 5px 0 0 0;">핵심 화면</p>
|
||
|
|
</div>
|
||
|
|
<div class="task-list">
|
||
|
|
<p style="font-size: 1.5em; color: #26a69a; font-weight: bold; margin: 0;">4명</p>
|
||
|
|
<p style="font-size: 1em; margin: 5px 0 0 0;">개발 팀원</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="margin-top: 40px; padding: 30px; background: #e0f2f1; border-radius: 15px;">
|
||
|
|
<h3 style="text-align: center;">Next Actions</h3>
|
||
|
|
<ol style="font-size: 1.1em; margin-top: 20px;">
|
||
|
|
<li>팀 구성 및 킥오프 미팅 (Day 1)</li>
|
||
|
|
<li>개발 환경 설정 및 프로젝트 초기화 (Day 1-2)</li>
|
||
|
|
<li>주간 스프린트 시작 (매주 월요일)</li>
|
||
|
|
<li>주간 동기화 미팅 (매주 금요일)</li>
|
||
|
|
</ol>
|
||
|
|
</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: #26a69a; margin-bottom: 30px;">MVP 채권추심 전략 - 6주 실행 계획</p>
|
||
|
|
<div class="highlight-box" style="margin-top: 50px;">
|
||
|
|
<h3 style="color: white; margin-top: 0;">함께 만들어가는 성공</h3>
|
||
|
|
<p style="font-size: 1.2em;">작지만 확실한 시작으로 큰 목표를 향해</p>
|
||
|
|
</div>
|
||
|
|
<div style="margin-top: 50px; padding: 30px; background: #e0f2f1; border-radius: 15px;">
|
||
|
|
<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);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|