SamProject/sam-sales
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
179c89a5147c419c9b5e28321c5deee926d4ed16
sam-sales/plan/index.php
aweso f6e127dfb8 쿠콘 문의사항 추가 
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-01-12 14:53:23 +09:00

877 lines
51 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제조 견적서 자동 생성 AI 워크플로우</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
* { font-family: 'Noto Sans KR', sans-serif; }
.nav-active { border-bottom: 3px solid #0d9488; color: #0d9488; font-weight: 700; }
.fade-in { animation: fadeIn 0.5s ease-out forwards; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.custom-scroll::-webkit-scrollbar { width: 6px; }
.custom-scroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
.custom-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.card-hover { transition: all 0.3s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.flow-arrow { animation: flowPulse 2s infinite; }
@keyframes flowPulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
</style>
</head>
<body class="bg-gray-100 min-h-screen">
<!-- Header -->
<header class="bg-white shadow-sm sticky top-0 z-50">
<div class="max-w-6xl mx-auto px-4">
<div class="flex items-center justify-between py-4">
<div class="flex items-center space-x-4">
<a href="../index.php" class="flex items-center justify-center w-10 h-10 bg-slate-100 hover:bg-teal-100 rounded-lg transition-colors" title="홈으로">
<span class="text-xl">🏠</span>
</a>
<div>
<h1 class="text-xl font-bold text-slate-800">제조 견적서 자동 생성 AI 워크플로우</h1>
<p class="text-xs text-slate-500">Gemini + Claude 기반 자동화 시스템</p>
</div>
</div>
<span class="text-sm text-slate-500"><?php echo date('Y-m-d'); ?></span>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="bg-slate-800 text-white py-12">
<div class="max-w-6xl mx-auto px-4">
<div class="flex items-center gap-4 mb-4">
<span class="text-4xl">🤖</span>
<div>
<p class="text-teal-400 text-sm font-medium tracking-wider">AI WORKFLOW DOCUMENTATION</p>
<h2 class="text-2xl md:text-3xl font-bold">음성에서 견적서까지, 자동으로</h2>
</div>
</div>
<p class="text-slate-300 mt-4 max-w-2xl leading-relaxed">
제조 현장의 목소리를 데이터화하고 자동으로 문서화하는 프로세스입니다.<br>
<strong class="text-white">Gemini의 멀티모달 분석</strong>과 <strong class="text-white">Claude의 코드 생성 능력</strong>을 결합한 최적의 솔루션
</p>
<div class="mt-6 flex flex-wrap gap-2">
<span class="bg-teal-600/30 px-3 py-1 rounded-full text-sm">음성 → 텍스트</span>
<span class="bg-teal-600/30 px-3 py-1 rounded-full text-sm">비정형 → 정형 데이터</span>
<span class="bg-teal-600/30 px-3 py-1 rounded-full text-sm">JSON → PPTX</span>
</div>
</div>
</section>
<!-- Main Content -->
<main class="max-w-6xl mx-auto px-4 py-8">
<!-- Overview Section -->
<section class="mb-12 fade-in">
<h2 class="text-lg font-bold text-slate-700 mb-4 flex items-center gap-2">
<span class="text-xl">📋</span>
워크플로우 개요
</h2>
<div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-teal-600">
<div class="grid md:grid-cols-3 gap-6 text-center">
<div class="p-4 bg-slate-50 rounded-xl">
<div class="text-3xl mb-2">🎤</div>
<h3 class="font-semibold text-slate-800 mb-1">Input</h3>
<p class="text-slate-600 text-sm">음성 녹음 파일<br>(MP3, WAV)</p>
</div>
<div class="p-4 bg-slate-50 rounded-xl relative">
<div class="absolute left-0 top-1/2 -translate-x-1/2 -translate-y-1/2 text-teal-500 text-xl hidden md:block flow-arrow">→</div>
<div class="text-3xl mb-2">⚙️</div>
<h3 class="font-semibold text-slate-800 mb-1">Process</h3>
<p class="text-slate-600 text-sm">AI 분석 & 변환<br>(Gemini + Claude)</p>
<div class="absolute right-0 top-1/2 translate-x-1/2 -translate-y-1/2 text-teal-500 text-xl hidden md:block flow-arrow">→</div>
</div>
<div class="p-4 bg-slate-50 rounded-xl">
<div class="text-3xl mb-2">📊</div>
<h3 class="font-semibold text-slate-800 mb-1">Output</h3>
<p class="text-slate-600 text-sm">견적서 PPTX 파일<br>(자동 생성)</p>
</div>
</div>
</div>
</section>
<!-- 4 Steps Process -->
<section class="mb-12 fade-in">
<h2 class="text-lg font-bold text-slate-700 mb-4 flex items-center gap-2">
<span class="text-xl">🔄</span>
상세 프로세스 (4단계)
</h2>
<!-- Step 1 -->
<div class="mb-6 card-hover">
<div class="bg-white rounded-xl shadow-sm overflow-hidden border-l-4 border-teal-600">
<div class="bg-teal-600 text-white px-4 py-3 flex items-center gap-3">
<span class="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center text-lg font-bold">1</span>
<div class="flex-1">
<h3 class="font-bold">음성 데이터 분석 및 데이터 구조화</h3>
<p class="text-teal-100 text-xs">Gemini 1.5 Pro 활용</p>
</div>
<span class="bg-white/20 px-2 py-1 rounded text-xs">🎯 Gemini</span>
</div>
<div class="p-4">
<div class="grid md:grid-cols-3 gap-4">
<div>
<h4 class="font-semibold text-slate-700 mb-2 text-sm flex items-center gap-1">
<span class="text-teal-600">📥</span> Input
</h4>
<ul class="space-y-1 text-sm text-slate-600">
<li class="flex items-start gap-1">
<span class="text-teal-500">•</span>
음성 파일 (MP3, WAV 등)
</li>
<li class="flex items-start gap-1">
<span class="text-teal-500">•</span>
기존 견적서 양식 샘플
</li>
</ul>
</div>
<div>
<h4 class="font-semibold text-slate-700 mb-2 text-sm flex items-center gap-1">
<span class="text-teal-600">⚙️</span> Process
</h4>
<ul class="space-y-1 text-sm text-slate-600">
<li class="flex items-start gap-1">
<span class="text-teal-500">•</span>
대화 내용을 텍스트로 변환 (STT)
</li>
<li class="flex items-start gap-1">
<span class="text-teal-500">•</span>
맥락 파악 및 규칙 정리
</li>
</ul>
</div>
<div>
<h4 class="font-semibold text-slate-700 mb-2 text-sm flex items-center gap-1">
<span class="text-teal-600">📤</span> Output
</h4>
<div class="bg-slate-800 rounded-lg p-3 text-xs">
<p class="text-slate-400 text-xs mb-1">// Structured Data (JSON)</p>
<pre class="text-green-400 overflow-x-auto"><code>{
"customer": "A사",
"items": [...],
"total_price": "..."
}</code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Step 2 -->
<div class="mb-6 card-hover">
<div class="bg-white rounded-xl shadow-sm overflow-hidden border-l-4 border-teal-600">
<div class="bg-teal-600 text-white px-4 py-3 flex items-center gap-3">
<span class="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center text-lg font-bold">2</span>
<div class="flex-1">
<h3 class="font-bold">웹 기반 중간 검토 및 데이터 보정</h3>
<p class="text-teal-100 text-xs">Claude Web Page Skill</p>
</div>
<span class="bg-white/20 px-2 py-1 rounded text-xs">🔧 Claude</span>
</div>
<div class="p-4">
<div class="grid md:grid-cols-2 gap-4">
<div>
<h4 class="font-semibold text-slate-700 mb-2 text-sm">⚙️ Process</h4>
<ul class="space-y-2 text-sm text-slate-600">
<li class="flex items-start gap-2">
<span class="w-5 h-5 bg-teal-100 rounded-full flex items-center justify-center text-teal-600 text-xs font-bold flex-shrink-0">1</span>
추출된 데이터를 테이블 형태로 표시
</li>
<li class="flex items-start gap-2">
<span class="w-5 h-5 bg-teal-100 rounded-full flex items-center justify-center text-teal-600 text-xs font-bold flex-shrink-0">2</span>
사용자가 오인식된 항목을 직접 수정
</li>
<li class="flex items-start gap-2">
<span class="w-5 h-5 bg-teal-100 rounded-full flex items-center justify-center text-teal-600 text-xs font-bold flex-shrink-0">3</span>
수정 사항 즉시 JSON 데이터에 반영
</li>
</ul>
</div>
<div>
<h4 class="font-semibold text-slate-700 mb-2 text-sm">✨ Key Feature</h4>
<div class="bg-slate-50 rounded-xl p-4 border border-slate-200">
<div class="flex items-center gap-2 mb-2">
<span class="px-3 py-1 bg-teal-600 text-white rounded text-sm font-semibold">
데이터 확정
</span>
<span class="text-slate-500 text-sm">버튼 클릭</span>
</div>
<p class="text-sm text-slate-600">
확정 버튼을 누르면 <strong class="text-teal-700">PPTX 생성 스크립트</strong>로 데이터가 전달됩니다.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Step 3 -->
<div class="mb-6 card-hover">
<div class="bg-white rounded-xl shadow-sm overflow-hidden border-l-4 border-teal-600">
<div class="bg-teal-600 text-white px-4 py-3 flex items-center gap-3">
<span class="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center text-lg font-bold">3</span>
<div class="flex-1">
<h3 class="font-bold">PPTX 생성 로직 실행</h3>
<p class="text-teal-100 text-xs">Claude Code Skill</p>
</div>
<span class="bg-white/20 px-2 py-1 rounded text-xs">💻 Claude</span>
</div>
<div class="p-4">
<div class="grid md:grid-cols-2 gap-4">
<div>
<h4 class="font-semibold text-slate-700 mb-2 text-sm">⚙️ Process</h4>
<ul class="space-y-2 text-sm text-slate-600">
<li class="flex items-start gap-2">
<span class="w-5 h-5 bg-teal-100 rounded-full flex items-center justify-center text-teal-600 text-xs font-bold flex-shrink-0">1</span>
<code class="bg-slate-100 px-1 rounded text-xs">python-pptx</code> 라이브러리 활용
</li>
<li class="flex items-start gap-2">
<span class="w-5 h-5 bg-teal-100 rounded-full flex items-center justify-center text-teal-600 text-xs font-bold flex-shrink-0">2</span>
템플릿 슬라이드에 데이터 매핑
</li>
<li class="flex items-start gap-2">
<span class="w-5 h-5 bg-teal-100 rounded-full flex items-center justify-center text-teal-600 text-xs font-bold flex-shrink-0">3</span>
코드 자동 작성 및 실행
</li>
</ul>
</div>
<div>
<h4 class="font-semibold text-slate-700 mb-2 text-sm">📐 레이아웃 자동 배치</h4>
<div class="space-y-2">
<div class="flex items-center gap-2 p-2 bg-slate-50 rounded-lg text-sm">
<span class="text-teal-600">📄</span>
<span class="text-slate-700">품목이 많으면 슬라이드 자동 복제</span>
</div>
<div class="flex items-center gap-2 p-2 bg-slate-50 rounded-lg text-sm">
<span class="text-teal-600">📊</span>
<span class="text-slate-700">표 크기 자동 조절 로직 포함</span>
</div>
</div>
</div>
</div>
<div class="mt-4 p-3 bg-teal-600 rounded-xl text-white flex items-center gap-3">
<span class="text-2xl">📊</span>
<div>
<p class="text-teal-100 text-xs">OUTPUT</p>
<p class="font-bold">최종 견적서 파일 (.pptx)</p>
</div>
</div>
</div>
</div>
</div>
<!-- Step 4 -->
<div class="mb-6 card-hover">
<div class="bg-white rounded-xl shadow-sm overflow-hidden border-l-4 border-teal-600">
<div class="bg-teal-600 text-white px-4 py-3 flex items-center gap-3">
<span class="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center text-lg font-bold">4</span>
<div class="flex-1">
<h3 class="font-bold">최종 산출물 피드백 및 저장</h3>
<p class="text-teal-100 text-xs">Review & Iteration</p>
</div>
<span class="bg-white/20 px-2 py-1 rounded text-xs">🔄 반복</span>
</div>
<div class="p-4">
<div class="grid md:grid-cols-2 gap-4">
<div>
<h4 class="font-semibold text-slate-700 mb-2 text-sm">📋 프로세스</h4>
<ul class="space-y-2 text-sm text-slate-600">
<li class="flex items-start gap-1">
<span class="text-teal-500">✓</span>
생성된 PPTX 파일을 사용자에게 제공
</li>
<li class="flex items-start gap-1">
<span class="text-teal-500">✓</span>
디자인/내용 수정 필요 시 Claude에게 요청
</li>
<li class="flex items-start gap-1">
<span class="text-teal-500">✓</span>
코드 즉시 재수정 가능
</li>
</ul>
</div>
<div>
<h4 class="font-semibold text-slate-700 mb-2 text-sm">💬 수정 요청 예시</h4>
<div class="space-y-2">
<div class="p-2 bg-slate-50 rounded-lg border-l-4 border-teal-600">
<p class="text-sm text-slate-700 italic">"표의 색상을 변경해줘"</p>
</div>
<div class="p-2 bg-slate-50 rounded-lg border-l-4 border-teal-600">
<p class="text-sm text-slate-700 italic">"마지막에 안내 문구를 추가해줘"</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Tech Stack Table -->
<section class="mb-12 fade-in">
<h2 class="text-lg font-bold text-slate-700 mb-4 flex items-center gap-2">
<span class="text-xl">🛠</span>
주요 기술 스택 및 역할 분담
</h2>
<div class="bg-white rounded-xl shadow-sm overflow-hidden border-l-4 border-teal-600">
<div class="overflow-x-auto custom-scroll">
<table class="w-full">
<thead>
<tr class="bg-teal-600 text-white">
<th class="px-4 py-3 text-left font-semibold text-sm">단계</th>
<th class="px-4 py-3 text-left font-semibold text-sm">담당 AI</th>
<th class="px-4 py-3 text-left font-semibold text-sm">기술 및 도구</th>
<th class="px-4 py-3 text-left font-semibold text-sm">비고</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-4 py-3">
<span class="font-semibold text-slate-800 text-sm">음성 인식 & 추론</span>
</td>
<td class="px-4 py-3">
<span class="bg-teal-100 text-teal-700 px-2 py-1 rounded text-xs font-medium">Gemini</span>
</td>
<td class="px-4 py-3 text-slate-600">
<code class="bg-slate-100 px-2 py-1 rounded text-xs">Multimodal Audio Input</code>
</td>
<td class="px-4 py-3 text-slate-500 text-sm">긴 대화의 맥락 파악에 최적</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors bg-slate-50/50">
<td class="px-4 py-3">
<span class="font-semibold text-slate-800 text-sm">데이터 구조화</span>
</td>
<td class="px-4 py-3">
<span class="bg-teal-100 text-teal-700 px-2 py-1 rounded text-xs font-medium">Gemini / Claude</span>
</td>
<td class="px-4 py-3 text-slate-600">
<code class="bg-slate-100 px-2 py-1 rounded text-xs">JSON Schema 추출</code>
</td>
<td class="px-4 py-3 text-slate-500 text-sm">비정형 → 정형 데이터 변환</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-4 py-3">
<span class="font-semibold text-slate-800 text-sm">UI/UX 구성</span>
</td>
<td class="px-4 py-3">
<span class="bg-teal-100 text-teal-700 px-2 py-1 rounded text-xs font-medium">Claude</span>
</td>
<td class="px-4 py-3 text-slate-600">
<code class="bg-slate-100 px-2 py-1 rounded text-xs">React / HTML/JS</code>
</td>
<td class="px-4 py-3 text-slate-500 text-sm">사용자 데이터 확인 인터페이스</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors bg-slate-50/50">
<td class="px-4 py-3">
<span class="font-semibold text-slate-800 text-sm">문서 생성</span>
</td>
<td class="px-4 py-3">
<span class="bg-teal-100 text-teal-700 px-2 py-1 rounded text-xs font-medium">Claude</span>
</td>
<td class="px-4 py-3 text-slate-600">
<code class="bg-slate-100 px-2 py-1 rounded text-xs">Python (python-pptx)</code>
</td>
<td class="px-4 py-3 text-slate-500 text-sm">실제 파일 바이너리 생성</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Success Tips -->
<section class="mb-12 fade-in">
<h2 class="text-lg font-bold text-slate-700 mb-4 flex items-center gap-2">
<span class="text-xl">💡</span>
성공적인 자동화를 위한 팁
</h2>
<div class="grid md:grid-cols-3 gap-4">
<!-- Tip 1 -->
<div class="bg-white rounded-xl shadow-sm p-5 border-l-4 border-teal-600 card-hover">
<div class="w-10 h-10 bg-teal-600 rounded-lg flex items-center justify-center text-white text-lg font-bold mb-3">
1
</div>
<h3 class="font-bold text-slate-800 mb-2 text-sm">프롬프트 엔지니어링 (Few-shot)</h3>
<p class="text-slate-600 text-sm leading-relaxed">
Gemini에게 음성을 넘길 때, <strong class="text-teal-600">"이전 견적서 사례" 2~3개</strong>를 함께 예시로 주면 추출 정확도가 대폭 향상됩니다.
</p>
<div class="mt-3 p-2 bg-slate-50 rounded-lg">
<p class="text-xs text-teal-700">
<span class="font-semibold">핵심:</span> 예시 기반 학습으로 정확도 향상
</p>
</div>
</div>
<!-- Tip 2 -->
<div class="bg-white rounded-xl shadow-sm p-5 border-l-4 border-teal-600 card-hover">
<div class="w-10 h-10 bg-teal-600 rounded-lg flex items-center justify-center text-white text-lg font-bold mb-3">
2
</div>
<h3 class="font-bold text-slate-800 mb-2 text-sm">템플릿 고정</h3>
<p class="text-slate-600 text-sm leading-relaxed">
PPTX의 배경 디자인이나 로고는 미리 만든 <code class="bg-slate-100 px-1 rounded text-xs">template.pptx</code> 파일을 활용하고, AI는 <strong class="text-teal-600">값만 채우도록</strong> 설정
</p>
<div class="mt-3 p-2 bg-slate-50 rounded-lg">
<p class="text-xs text-teal-700">
<span class="font-semibold">핵심:</span> 디자인 품질 유지에 유리
</p>
</div>
</div>
<!-- Tip 3 -->
<div class="bg-white rounded-xl shadow-sm p-5 border-l-4 border-teal-600 card-hover">
<div class="w-10 h-10 bg-teal-600 rounded-lg flex items-center justify-center text-white text-lg font-bold mb-3">
3
</div>
<h3 class="font-bold text-slate-800 mb-2 text-sm">예외 처리</h3>
<p class="text-slate-600 text-sm leading-relaxed">
대화 중 불확실한 내용은 <code class="bg-amber-100 text-amber-700 px-1 rounded text-xs">Unconfirmed</code> 플래그를 달아 웹 페이지에서 <strong class="text-teal-600">강조 표시</strong>되도록 설계
</p>
<div class="mt-3 p-2 bg-slate-50 rounded-lg">
<p class="text-xs text-teal-700">
<span class="font-semibold">핵심:</span> 불확실성 명시적 관리
</p>
</div>
</div>
</div>
</section>
<!-- Claude Code Skills Section -->
<section class="mb-12 fade-in">
<h2 class="text-lg font-bold text-slate-700 mb-4 flex items-center gap-2">
<span class="text-xl">🔧</span>
Claude Code Skills 기반 구현
</h2>
<p class="text-slate-600 text-sm mb-4">음성 → 텍스트 변환 이후 PPTX 생성까지 Claude Code의 Subagent와 Skills를 활용한 자동화 파이프라인</p>
<!-- Skills Architecture -->
<div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-teal-600 mb-6">
<h3 class="font-bold text-slate-800 mb-4 flex items-center gap-2">
<span class="text-lg">🏗️</span> Skills 아키텍처
</h3>
<div class="grid md:grid-cols-3 gap-4">
<!-- Text Analyzer Skill -->
<div class="bg-slate-50 rounded-xl p-4 border border-slate-200">
<div class="flex items-center gap-2 mb-3">
<span class="w-8 h-8 bg-teal-600 rounded-lg flex items-center justify-center text-white text-sm font-bold">1</span>
<h4 class="font-bold text-slate-800 text-sm">text-analyzer-skill</h4>
</div>
<p class="text-slate-600 text-xs mb-3">자연어 텍스트 분석 및 PDF 템플릿 구조 매핑</p>
<div class="space-y-1">
<div class="flex items-center gap-1 text-xs text-slate-500">
<span class="text-teal-500">•</span> 섹션 패턴 인식
</div>
<div class="flex items-center gap-1 text-xs text-slate-500">
<span class="text-teal-500">•</span> 콘텐츠 자동 분류
</div>
<div class="flex items-center gap-1 text-xs text-slate-500">
<span class="text-teal-500">•</span> JSON Schema 추출
</div>
</div>
<div class="mt-3 p-2 bg-slate-800 rounded text-xs">
<code class="text-green-400">node txt-to-pptx.js</code>
</div>
</div>
<!-- Proposal Skill -->
<div class="bg-slate-50 rounded-xl p-4 border border-slate-200">
<div class="flex items-center gap-2 mb-3">
<span class="w-8 h-8 bg-teal-600 rounded-lg flex items-center justify-center text-white text-sm font-bold">2</span>
<h4 class="font-bold text-slate-800 text-sm">proposal-skill</h4>
</div>
<p class="text-slate-600 text-xs mb-3">PDF 기획서 분석 및 PPT 기획서 자동 생성</p>
<div class="space-y-1">
<div class="flex items-center gap-1 text-xs text-slate-500">
<span class="text-teal-500">•</span> PDF 구조 분석
</div>
<div class="flex items-center gap-1 text-xs text-slate-500">
<span class="text-teal-500">•</span> 템플릿 추출
</div>
<div class="flex items-center gap-1 text-xs text-slate-500">
<span class="text-teal-500">•</span> 콘텐츠 자동 매핑
</div>
</div>
<div class="mt-3 p-2 bg-slate-800 rounded text-xs">
<code class="text-green-400">npm run create-proposal</code>
</div>
</div>
<!-- PPTX Skill -->
<div class="bg-slate-50 rounded-xl p-4 border border-slate-200">
<div class="flex items-center gap-2 mb-3">
<span class="w-8 h-8 bg-teal-600 rounded-lg flex items-center justify-center text-white text-sm font-bold">3</span>
<h4 class="font-bold text-slate-800 text-sm">pptx-skill</h4>
</div>
<p class="text-slate-600 text-xs mb-3">HTML 슬라이드를 PowerPoint 파일로 변환</p>
<div class="space-y-1">
<div class="flex items-center gap-1 text-xs text-slate-500">
<span class="text-teal-500">•</span> HTML → PPTX 변환
</div>
<div class="flex items-center gap-1 text-xs text-slate-500">
<span class="text-teal-500">•</span> PptxGenJS 라이브러리
</div>
<div class="flex items-center gap-1 text-xs text-slate-500">
<span class="text-teal-500">•</span> 썸네일 검증
</div>
</div>
<div class="mt-3 p-2 bg-slate-800 rounded text-xs">
<code class="text-green-400">node html2pptx.js</code>
</div>
</div>
</div>
</div>
<!-- PPT Team Agent Flow -->
<div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-teal-600 mb-6">
<h3 class="font-bold text-slate-800 mb-4 flex items-center gap-2">
<span class="text-lg">📊</span> PPT Team Agent 워크플로우
</h3>
<div class="bg-slate-50 rounded-xl p-4 mb-4">
<div class="flex flex-wrap items-center justify-center gap-2 text-sm">
<div class="bg-white px-3 py-2 rounded-lg border border-slate-200 text-center">
<p class="text-xs text-slate-500">Input</p>
<p class="font-semibold text-slate-700">source/*.txt</p>
</div>
<span class="text-teal-500 flow-arrow">→</span>
<div class="bg-white px-3 py-2 rounded-lg border border-slate-200 text-center">
<p class="text-xs text-slate-500">Parser</p>
<p class="font-semibold text-slate-700">텍스트 파싱</p>
</div>
<span class="text-teal-500 flow-arrow">→</span>
<div class="bg-white px-3 py-2 rounded-lg border border-slate-200 text-center">
<p class="text-xs text-slate-500">Analyzer</p>
<p class="font-semibold text-slate-700">섹션 인식</p>
</div>
<span class="text-teal-500 flow-arrow">→</span>
<div class="bg-white px-3 py-2 rounded-lg border border-slate-200 text-center">
<p class="text-xs text-slate-500">Mapper</p>
<p class="font-semibold text-slate-700">템플릿 매핑</p>
</div>
<span class="text-teal-500 flow-arrow">→</span>
<div class="bg-teal-600 px-3 py-2 rounded-lg text-center text-white">
<p class="text-xs text-teal-100">Output</p>
<p class="font-semibold">PPTX 생성</p>
</div>
</div>
</div>
<!-- Directory Structure -->
<div class="grid md:grid-cols-2 gap-4">
<div>
<h4 class="font-semibold text-slate-700 mb-2 text-sm">📁 디렉터리 구조</h4>
<div class="bg-slate-800 rounded-lg p-3 text-xs font-mono">
<pre class="text-green-400 overflow-x-auto">flow-chart/
├── source/ <span class="text-slate-500"># TXT 입력 파일</span>
├── pptx/ <span class="text-slate-500"># PPTX 출력</span>
├── templates/ <span class="text-slate-500"># JSON 템플릿</span>
├── data/ <span class="text-slate-500"># 샘플 데이터</span>
├── run.js <span class="text-slate-500"># 통합 실행</span>
└── estimate-pptx-generator.js</pre>
</div>
</div>
<div>
<h4 class="font-semibold text-slate-700 mb-2 text-sm">⚡ 실행 명령어</h4>
<div class="space-y-2">
<div class="bg-slate-800 rounded-lg p-2 text-xs">
<code class="text-cyan-400">npm run ppt</code>
<span class="text-slate-500 ml-2"># TXT → PPTX</span>
</div>
<div class="bg-slate-800 rounded-lg p-2 text-xs">
<code class="text-cyan-400">npm run estimate</code>
<span class="text-slate-500 ml-2"># 견적서 생성</span>
</div>
<div class="bg-slate-800 rounded-lg p-2 text-xs">
<code class="text-cyan-400">npm run template</code>
<span class="text-slate-500 ml-2"># 템플릿 기반</span>
</div>
</div>
</div>
</div>
</div>
<!-- Estimate PPTX Generator -->
<div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-teal-600">
<h3 class="font-bold text-slate-800 mb-4 flex items-center gap-2">
<span class="text-lg">📋</span> SAM ERP 견적서 생성기
</h3>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h4 class="font-semibold text-slate-700 mb-3 text-sm">생성되는 슬라이드 구성</h4>
<div class="space-y-2">
<div class="flex items-center gap-2 p-2 bg-slate-50 rounded-lg">
<span class="w-6 h-6 bg-teal-100 rounded flex items-center justify-center text-teal-600 text-xs font-bold">1</span>
<span class="text-sm text-slate-700">표지 (SAM 로고 및 시스템 소개)</span>
</div>
<div class="flex items-center gap-2 p-2 bg-slate-50 rounded-lg">
<span class="w-6 h-6 bg-teal-100 rounded flex items-center justify-center text-teal-600 text-xs font-bold">2</span>
<span class="text-sm text-slate-700">견적관리 메인 (필터, 통계, 목록)</span>
</div>
<div class="flex items-center gap-2 p-2 bg-slate-50 rounded-lg">
<span class="w-6 h-6 bg-teal-100 rounded flex items-center justify-center text-teal-600 text-xs font-bold">3</span>
<span class="text-sm text-slate-700">견적 상세 (정보 입력 폼)</span>
</div>
<div class="flex items-center gap-2 p-2 bg-slate-50 rounded-lg">
<span class="w-6 h-6 bg-teal-100 rounded flex items-center justify-center text-teal-600 text-xs font-bold">4</span>
<span class="text-sm text-slate-700">견적서 문서 (요약)</span>
</div>
<div class="flex items-center gap-2 p-2 bg-slate-50 rounded-lg">
<span class="w-6 h-6 bg-teal-100 rounded flex items-center justify-center text-teal-600 text-xs font-bold">5</span>
<span class="text-sm text-slate-700">견적서 문서 (항목별 상세 내역)</span>
</div>
</div>
</div>
<div>
<h4 class="font-semibold text-slate-700 mb-3 text-sm">견적 데이터 구조 (JSON)</h4>
<div class="bg-slate-800 rounded-lg p-3 text-xs">
<pre class="text-green-400 overflow-x-auto"><code>{
"company": "(주) 주일기업",
"documentNumber": "ABC123",
"client": {
"name": "회사명",
"site": "현장명",
"contact": "연락처"
},
"items": [
{
"name": "FSSB01(주차장)",
"width": 2530,
"height": 2550,
"materialCost": 1420000,
"laborCost": 510000
}
],
"summary": {
"grandTotal": 93950000
}
}</code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- Technical Implementation -->
<section class="mb-12 fade-in">
<h2 class="text-lg font-bold text-slate-700 mb-4 flex items-center gap-2">
<span class="text-xl">⚙️</span>
기술 구현 세부사항
</h2>
<div class="grid md:grid-cols-2 gap-4">
<!-- Text Parser -->
<div class="bg-white rounded-xl shadow-sm p-5 border-l-4 border-teal-600">
<h3 class="font-bold text-slate-800 mb-3 text-sm flex items-center gap-2">
<span class="text-teal-600">📝</span> 텍스트 파서 (TextParser)
</h3>
<p class="text-slate-600 text-xs mb-3">자연어 텍스트의 구조와 내용을 자동 파싱</p>
<div class="bg-slate-50 rounded-lg p-3 mb-3">
<p class="text-xs text-slate-500 mb-2">섹션 인식 패턴:</p>
<div class="space-y-1 text-xs">
<div class="flex items-center gap-2">
<code class="bg-slate-200 px-1 rounded">프로젝트명:</code>
<span class="text-slate-600">메타데이터 추출</span>
</div>
<div class="flex items-center gap-2">
<code class="bg-slate-200 px-1 rounded">=== 섹션 ===</code>
<span class="text-slate-600">주요 섹션 구분</span>
</div>
<div class="flex items-center gap-2">
<code class="bg-slate-200 px-1 rounded">1. 항목</code>
<span class="text-slate-600">번호 목록 인식</span>
</div>
</div>
</div>
<div class="text-xs text-teal-700 bg-teal-50 p-2 rounded">
<strong>정확도:</strong> 섹션 인식률 90% 이상
</div>
</div>
<!-- Template Mapper -->
<div class="bg-white rounded-xl shadow-sm p-5 border-l-4 border-teal-600">
<h3 class="font-bold text-slate-800 mb-3 text-sm flex items-center gap-2">
<span class="text-teal-600">🗺️</span> 템플릿 매퍼 (TemplateMapper)
</h3>
<p class="text-slate-600 text-xs mb-3">파싱된 데이터를 PDF 템플릿 구조에 매핑</p>
<div class="bg-slate-50 rounded-lg p-3 mb-3">
<p class="text-xs text-slate-500 mb-2">매핑 대상:</p>
<div class="grid grid-cols-2 gap-2 text-xs">
<div class="bg-white p-2 rounded border border-slate-200">
<span class="text-slate-700">표지 (Cover)</span>
</div>
<div class="bg-white p-2 rounded border border-slate-200">
<span class="text-slate-700">문서 히스토리</span>
</div>
<div class="bg-white p-2 rounded border border-slate-200">
<span class="text-slate-700">메뉴 구조</span>
</div>
<div class="bg-white p-2 rounded border border-slate-200">
<span class="text-slate-700">상세 화면</span>
</div>
</div>
</div>
<div class="text-xs text-teal-700 bg-teal-50 p-2 rounded">
<strong>일치도:</strong> SAM_ERP 스토리보드 95% 일치
</div>
</div>
<!-- PptxGenJS -->
<div class="bg-white rounded-xl shadow-sm p-5 border-l-4 border-teal-600">
<h3 class="font-bold text-slate-800 mb-3 text-sm flex items-center gap-2">
<span class="text-teal-600">📊</span> PptxGenJS 라이브러리
</h3>
<p class="text-slate-600 text-xs mb-3">JavaScript 기반 PowerPoint 생성</p>
<div class="bg-slate-800 rounded-lg p-3 text-xs mb-3">
<pre class="text-green-400"><code>// 색상 코드 (# 없이)
{ color: 'FF0000' }
{ fill: { color: '1e3a5f' } }
// 슬라이드 크기 (16:9)
pres.defineLayout({
name: 'CUSTOM_16x9',
width: 10,
height: 5.625
});</code></pre>
</div>
<div class="text-xs text-amber-700 bg-amber-50 p-2 rounded">
<strong>주의:</strong> 색상 코드에 # 접두사 사용 금지
</div>
</div>
<!-- HTML2PPTX -->
<div class="bg-white rounded-xl shadow-sm p-5 border-l-4 border-teal-600">
<h3 class="font-bold text-slate-800 mb-3 text-sm flex items-center gap-2">
<span class="text-teal-600">🔄</span> HTML → PPTX 변환
</h3>
<p class="text-slate-600 text-xs mb-3">Playwright + PptxGenJS 조합</p>
<div class="bg-slate-50 rounded-lg p-3 mb-3">
<p class="text-xs text-slate-500 mb-2">HTML 작성 규칙:</p>
<div class="space-y-1 text-xs text-slate-600">
<div class="flex items-start gap-1">
<span class="text-red-500">✗</span>
<span>텍스트에 border/background 금지</span>
</div>
<div class="flex items-start gap-1">
<span class="text-red-500">✗</span>
<span>불릿 기호로 시작하는 텍스트 금지</span>
</div>
<div class="flex items-start gap-1">
<span class="text-red-500">✗</span>
<span>table 태그 사용 금지 (flexbox 사용)</span>
</div>
<div class="flex items-start gap-1">
<span class="text-green-500">✓</span>
<span>body: 720pt × 405pt (16:9)</span>
</div>
</div>
</div>
<div class="text-xs text-teal-700 bg-teal-50 p-2 rounded">
<strong>검증:</strong> thumbnail.py로 시각적 확인
</div>
</div>
</div>
</section>
<!-- Visual Flow Diagram -->
<section class="mb-12 fade-in">
<h2 class="text-lg font-bold text-slate-700 mb-4 flex items-center gap-2">
<span class="text-xl">🔀</span>
전체 흐름도
</h2>
<div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-teal-600">
<div class="flex flex-wrap items-center justify-center gap-3">
<div class="text-center">
<div class="w-16 h-16 bg-teal-600 rounded-xl flex items-center justify-center text-3xl mb-1">
🎤
</div>
<p class="text-xs font-medium text-slate-600">음성 녹음</p>
</div>
<div class="text-teal-500 text-xl flow-arrow hidden sm:block">→</div>
<div class="text-center">
<div class="w-16 h-16 bg-teal-600 rounded-xl flex items-center justify-center text-3xl mb-1">
🤖
</div>
<p class="text-xs font-medium text-slate-600">Gemini STT</p>
</div>
<div class="text-teal-500 text-xl flow-arrow hidden sm:block">→</div>
<div class="text-center">
<div class="w-16 h-16 bg-teal-600 rounded-xl flex items-center justify-center text-3xl mb-1">
📋
</div>
<p class="text-xs font-medium text-slate-600">JSON 데이터</p>
</div>
<div class="text-teal-500 text-xl flow-arrow hidden sm:block">→</div>
<div class="text-center">
<div class="w-16 h-16 bg-teal-600 rounded-xl flex items-center justify-center text-3xl mb-1">
🖥️
</div>
<p class="text-xs font-medium text-slate-600">웹 검토</p>
</div>
<div class="text-teal-500 text-xl flow-arrow hidden sm:block">→</div>
<div class="text-center">
<div class="w-16 h-16 bg-teal-600 rounded-xl flex items-center justify-center text-3xl mb-1">
⚙️
</div>
<p class="text-xs font-medium text-slate-600">Claude Code</p>
</div>
<div class="text-teal-500 text-xl flow-arrow hidden sm:block">→</div>
<div class="text-center">
<div class="w-16 h-16 bg-slate-800 rounded-xl flex items-center justify-center text-3xl mb-1">
📊
</div>
<p class="text-xs font-medium text-slate-600">PPTX 완성</p>
</div>
</div>
<!-- Legend -->
<div class="mt-6 pt-4 border-t border-slate-200">
<div class="flex flex-wrap justify-center gap-4 text-xs">
<div class="flex items-center gap-1">
<span class="w-3 h-3 bg-teal-600 rounded"></span>
<span class="text-slate-600">AI 처리 단계</span>
</div>
<div class="flex items-center gap-1">
<span class="w-3 h-3 bg-slate-800 rounded"></span>
<span class="text-slate-600">최종 산출물</span>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-slate-800 text-white py-8 mt-12">
<div class="max-w-6xl mx-auto px-4 text-center">
<div class="flex items-center justify-center gap-2 mb-2">
<span class="text-xl">🤖</span>
<p class="font-semibold">AI 기반 제조 견적서 자동화 시스템</p>
</div>
<p class="text-slate-400 text-sm">Powered by Gemini + Claude</p>
<p class="text-xs text-slate-500 mt-4">© SAM</p>
</div>
</footer>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink