모든 옵션이 클릭 한 번으로 상세한 비즈니스 가치를 전달할 수 있는 전문적인 영업 도구로 진화했

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
aweso
2026-01-07 09:57:30 +09:00
parent 227cb79d16
commit d293cdd7a1
3 changed files with 549 additions and 23 deletions

View File

@@ -120,7 +120,12 @@ if (file_exists('../session.php')) {
</div> </div>
<div class="ml-4 flex-1"> <div class="ml-4 flex-1">
<div class="flex justify-between items-start"> <div class="flex justify-between items-start">
<div class="flex items-center gap-2">
<span class="block text-base font-bold text-slate-900">제조업 기본 패키지</span> <span class="block text-base font-bold text-slate-900">제조업 기본 패키지</span>
<button type="button" onclick="openInfoModal('basic')" class="text-slate-400 hover:text-brand-600 transition-colors">
<i data-lucide="info" class="w-4 h-4"></i>
</button>
</div>
<span class="text-brand-600 font-bold">2,000만원</span> <span class="text-brand-600 font-bold">2,000만원</span>
</div> </div>
<p class="text-sm text-slate-500 mt-1">품목관리, 견적, 수주, 생산, 출하 (**ERP(인사/회계) 무료 포함**)</p> <p class="text-sm text-slate-500 mt-1">품목관리, 견적, 수주, 생산, 출하 (**ERP(인사/회계) 무료 포함**)</p>
@@ -135,11 +140,38 @@ if (file_exists('../session.php')) {
</div> </div>
<div class="ml-4 flex-1"> <div class="ml-4 flex-1">
<div class="flex justify-between items-start"> <div class="flex justify-between items-start">
<div class="flex items-center gap-2">
<span class="block text-base font-bold text-slate-900 group-hover:text-brand-700 transition-colors">품질관리(인정검사)</span> <span class="block text-base font-bold text-slate-900 group-hover:text-brand-700 transition-colors">품질관리(인정검사)</span>
<button type="button" onclick="openInfoModal('quality')" class="text-slate-400 hover:text-brand-600 transition-colors">
<i data-lucide="info" class="w-4 h-4"></i>
</button>
</div>
<span class="text-brand-600 font-bold">2,000만원</span> <span class="text-brand-600 font-bold">2,000만원</span>
</div> </div>
<p class="text-sm text-slate-500 mt-1">강화된 공정 검사 및 품질 데이터 분석 도구</p> <p class="text-sm text-slate-500 mt-1">국토교통부 고시 기준 성능 인정 (내화 1시간, 차연, 개폐)</p>
<div class="mt-2 text-[11px] font-semibold text-slate-400 uppercase tracking-widest">월 구독료: 50만원</div>
<!-- NEW: Detailed info for Quality Control -->
<div class="mt-3 p-3 bg-indigo-50/50 rounded-lg border border-indigo-100/50">
<h5 class="text-[11px] font-bold text-indigo-700 flex items-center gap-1.5 mb-2">
<i data-lucide="award" class="w-3 h-3"></i>
법적 근거 및 성능 기준
</h5>
<ul class="text-[10px] text-slate-600 space-y-1.5 leading-relaxed">
<li class="flex gap-1.5">
<span class="text-indigo-400">•</span>
<span><strong>국토부고시 제2021-1009호</strong> 준수 및 KICT 품질인정 완료</span>
</li>
<li class="flex gap-1.5">
<span class="text-indigo-400">•</span>
<span><strong>비차열 1시간 이상의 내화성능</strong> 및 차연성능 확보</span>
</li>
<li class="flex gap-1.5">
<span class="text-indigo-400">•</span>
<span>매년 KICT 공장심사 및 사후관리 프로세스 적용</span>
</li>
</ul>
</div>
<div class="mt-3 text-[11px] font-semibold text-slate-400 uppercase tracking-widest">월 구독료: 50만원</div>
</div> </div>
</label> </label>
</div> </div>
@@ -158,7 +190,12 @@ if (file_exists('../session.php')) {
<div class="flex items-start cursor-pointer" onclick="document.getElementById('item-line').click()"> <div class="flex items-start cursor-pointer" onclick="document.getElementById('item-line').click()">
<input type="checkbox" id="item-line" onchange="calculate()" data-join="5000000" data-monthly="100000" class="h-5 w-5 mt-1 text-indigo-600 focus:ring-indigo-500 border-slate-300 rounded transition-all" onclick="event.stopPropagation()"> <input type="checkbox" id="item-line" onchange="calculate()" data-join="5000000" data-monthly="100000" class="h-5 w-5 mt-1 text-indigo-600 focus:ring-indigo-500 border-slate-300 rounded transition-all" onclick="event.stopPropagation()">
<div class="ml-3 flex-1"> <div class="ml-3 flex-1">
<div class="flex items-center gap-2">
<span class="block text-sm font-bold text-slate-800">생산공정 추가</span> <span class="block text-sm font-bold text-slate-800">생산공정 추가</span>
<button type="button" onclick="openInfoModal('line')" class="text-slate-400 hover:text-indigo-600 transition-colors">
<i data-lucide="info" class="w-3.5 h-3.5"></i>
</button>
</div>
<span class="block text-xs text-indigo-600 font-medium mt-1">1개당 가입: 500만원 / 월: 10만원</span> <span class="block text-xs text-indigo-600 font-medium mt-1">1개당 가입: 500만원 / 월: 10만원</span>
</div> </div>
</div> </div>
@@ -176,7 +213,12 @@ if (file_exists('../session.php')) {
<label class="group flex items-start p-4 rounded-xl border border-slate-100 hover:border-indigo-200 hover:bg-indigo-50/30 transition-all cursor-pointer"> <label class="group flex items-start p-4 rounded-xl border border-slate-100 hover:border-indigo-200 hover:bg-indigo-50/30 transition-all cursor-pointer">
<input type="checkbox" id="item-photo" onchange="calculate()" data-join="0" data-monthly="100000" class="h-5 w-5 mt-1 text-indigo-600 focus:ring-indigo-500 border-slate-300 rounded transition-all"> <input type="checkbox" id="item-photo" onchange="calculate()" data-join="0" data-monthly="100000" class="h-5 w-5 mt-1 text-indigo-600 focus:ring-indigo-500 border-slate-300 rounded transition-all">
<div class="ml-3"> <div class="ml-3">
<div class="flex items-center gap-2">
<span class="block text-sm font-bold text-slate-800">사진 등록 기능</span> <span class="block text-sm font-bold text-slate-800">사진 등록 기능</span>
<button type="button" onclick="openInfoModal('photo')" class="text-slate-400 hover:text-indigo-600 transition-colors">
<i data-lucide="info" class="w-3.5 h-3.5"></i>
</button>
</div>
<span class="block text-xs text-indigo-600 font-medium mt-1">가입: 0원 / 월: 10만원</span> <span class="block text-xs text-indigo-600 font-medium mt-1">가입: 0원 / 월: 10만원</span>
</div> </div>
</label> </label>
@@ -184,10 +226,101 @@ if (file_exists('../session.php')) {
<label class="group flex items-start p-4 rounded-xl border border-slate-100 hover:border-indigo-200 hover:bg-indigo-50/30 transition-all cursor-pointer"> <label class="group flex items-start p-4 rounded-xl border border-slate-100 hover:border-indigo-200 hover:bg-indigo-50/30 transition-all cursor-pointer">
<input type="checkbox" id="item-chatbot" onchange="calculate()" data-join="0" data-monthly="200000" class="h-5 w-5 mt-1 text-indigo-600 focus:ring-indigo-500 border-slate-300 rounded transition-all"> <input type="checkbox" id="item-chatbot" onchange="calculate()" data-join="0" data-monthly="200000" class="h-5 w-5 mt-1 text-indigo-600 focus:ring-indigo-500 border-slate-300 rounded transition-all">
<div class="ml-3"> <div class="ml-3">
<div class="flex items-center gap-2">
<span class="block text-sm font-bold text-slate-800">챗봇/녹음/업무일지</span> <span class="block text-sm font-bold text-slate-800">챗봇/녹음/업무일지</span>
<button type="button" onclick="openInfoModal('ai')" class="text-slate-400 hover:text-indigo-600 transition-colors">
<i data-lucide="info" class="w-3.5 h-3.5"></i>
</button>
</div>
<span class="block text-xs text-indigo-600 font-medium mt-1">가입: 0원 / 월: 20만원</span> <span class="block text-xs text-indigo-600 font-medium mt-1">가입: 0원 / 월: 20만원</span>
</div> </div>
drum
</label> </label>
<!-- Option 4: 연구소 연구노트 (NEW) -->
<label class="group flex items-start p-4 rounded-xl border border-slate-100 hover:border-indigo-200 hover:bg-indigo-50/30 transition-all cursor-pointer">
<input type="checkbox" id="item-lab-note" onchange="calculate()" data-join="0" data-monthly="50000" class="h-5 w-5 mt-1 text-indigo-600 focus:ring-indigo-500 border-slate-300 rounded transition-all">
<div class="ml-3">
<div class="flex items-center gap-2">
<span class="block text-sm font-bold text-slate-800">연구소 연구노트</span>
<button type="button" onclick="openInfoModal('lab')" class="text-slate-400 hover:text-indigo-600 transition-colors">
<i data-lucide="info" class="w-3.5 h-3.5"></i>
</button>
</div>
<span class="block text-xs text-indigo-600 font-medium mt-1">가입: 0원 / 월: 5만원</span>
</div>
drum
</label>
<!-- Option 5: 장비점검, 사무소 정비 (NEW, 품질관리 미선택 시) -->
<div id="equip-check-container" class="transition-all duration-300">
<label class="group flex items-start p-4 rounded-xl border border-slate-100 hover:border-indigo-200 hover:bg-indigo-50/30 transition-all cursor-pointer">
<input type="checkbox" id="item-equip-check" onchange="calculate()" data-join="0" data-monthly="50000" class="h-5 w-5 mt-1 text-indigo-600 focus:ring-indigo-500 border-slate-300 rounded transition-all">
<div class="ml-3">
<div class="flex items-center gap-2">
<span class="block text-sm font-bold text-slate-800">장비점검, 사무소 정비</span>
<button type="button" onclick="openInfoModal('equip')" class="text-slate-400 hover:text-indigo-600 transition-colors">
<i data-lucide="info" class="w-3.5 h-3.5"></i>
</button>
</div>
<span class="block text-xs text-indigo-600 font-medium mt-1">가입: 0원 / 월: 5만원</span>
<p id="equip-check-hint" class="text-[10px] text-red-500 mt-1 hidden">* 품질관리 패키지에 포함된 기능입니다.</p>
</div>
drum
drum
</label>
</div>
</section>
<!-- NEW: Usage-based Pricing Section -->
<section class="bg-white rounded-3xl p-8 shadow-sm border border-slate-200 animate-fade-in-up" style="animation-delay: 0.15s;">
<div class="flex items-center gap-4 mb-8">
<div class="w-10 h-10 rounded-xl bg-amber-50 flex items-center justify-center text-amber-600">
<i data-lucide="bar-chart-3" class="w-6 h-6"></i>
</div>
<div>
<h2 class="text-xl font-bold text-slate-900">사용량 기반 추가 과금</h2>
<p class="text-xs text-slate-500 mt-1">기본 제공량 초과 시 발생하는 비용입니다.</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Storage Option -->
<div class="p-6 rounded-2xl border border-slate-100 bg-slate-50/30">
<div class="flex justify-between items-start mb-4">
<div>
<span class="block text-sm font-bold text-slate-800">파일 저장 공간</span>
<span class="block text-[11px] text-slate-500 mt-1">기본 100GB 제공</span>
</div>
<span class="text-xs font-bold text-amber-600 bg-amber-50 px-2 py-1 rounded-lg">100GB당 10만원</span>
</div>
<div class="flex items-center gap-3">
<span class="text-xs text-slate-500 font-medium">추가 용량:</span>
<div class="flex items-center">
<button onclick="changeStorage(-100)" class="w-8 h-8 rounded-l-lg border border-slate-200 bg-white flex items-center justify-center hover:bg-slate-50 transition-colors text-slate-600">-</button>
<input type="number" id="storage-qty" value="0" min="0" step="100" onchange="calculate()" class="w-16 h-8 border-y border-slate-200 text-center text-sm font-bold focus:outline-none focus:ring-0">
<button onclick="changeStorage(100)" class="w-8 h-8 rounded-r-lg border border-slate-200 bg-white flex items-center justify-center hover:bg-slate-50 transition-colors text-slate-600">+</button>
</div>
<span class="text-xs text-slate-400">GB</span>
</div>
</div>
<!-- AI Token Option -->
<div class="p-6 rounded-2xl border border-slate-100 bg-slate-50/30">
<div class="flex justify-between items-start mb-4">
<div>
<div class="flex items-center gap-2">
<span class="block text-sm font-bold text-slate-800">실험실 AI 토큰</span>
<button onclick="openTokenModal()" class="text-slate-400 hover:text-indigo-600 transition-colors">
<i data-lucide="info" class="w-4 h-4"></i>
</button>
</div>
<span class="block text-[11px] text-slate-500 mt-1">월 100만 토큰 기본 제공</span>
</div>
<span class="text-xs font-bold text-indigo-600 bg-indigo-50 px-2 py-1 rounded-lg">초과 시 실비</span>
</div>
<div class="flex items-center">
<span class="text-[11px] text-slate-400 leading-tight">기본 제공량 내에서는 추가 비용이 발생하지 않습니다.</span>
</div>
</div>
</div> </div>
</section> </section>
</div> </div>
@@ -274,11 +407,26 @@ if (file_exists('../session.php')) {
let totalMonthly = 500000; // 제조업 기본 패키지 500k let totalMonthly = 500000; // 제조업 기본 패키지 500k
// 품질관리(인정검사) 체크 확인 // 품질관리(인정검사) 체크 확인
if (document.getElementById('item-quality').checked) { const isQualityChecked = document.getElementById('item-quality').checked;
if (isQualityChecked) {
totalJoin += 20000000; totalJoin += 20000000;
totalMonthly += 500000; totalMonthly += 500000;
} }
// 장비점검 옵션 연동 (품질관리 선택 시 자동 포함 처리 느낌)
const equipCheck = document.getElementById('item-equip-check');
const equipHint = document.getElementById('equip-check-hint');
if (isQualityChecked) {
equipCheck.checked = false;
equipCheck.disabled = true;
equipHint.classList.remove('hidden');
equipCheck.parentElement.parentElement.classList.add('opacity-50', 'pointer-events-none');
} else {
equipCheck.disabled = false;
equipHint.classList.add('hidden');
equipCheck.parentElement.parentElement.classList.remove('opacity-50', 'pointer-events-none');
}
// 생산공정 체크 확인 (수량 반영) // 생산공정 체크 확인 (수량 반영)
const itemLine = document.getElementById('item-line'); const itemLine = document.getElementById('item-line');
if (itemLine.checked) { if (itemLine.checked) {
@@ -287,33 +435,25 @@ if (file_exists('../session.php')) {
totalMonthly += parseInt(itemLine.dataset.monthly || 0) * qty; totalMonthly += parseInt(itemLine.dataset.monthly || 0) * qty;
} }
// 나머지 추가 옵션들 // 추가 옵션들
const otherOptions = ['item-photo', 'item-chatbot']; const otherOptions = ['item-photo', 'item-chatbot', 'item-lab-note', 'item-equip-check'];
otherOptions.forEach(id => { otherOptions.forEach(id => {
const el = document.getElementById(id); const el = document.getElementById(id);
if (el.checked) { if (el && el.checked) {
totalJoin += parseInt(el.dataset.join || 0); totalJoin += parseInt(el.dataset.join || 0);
totalMonthly += parseInt(el.dataset.monthly || 0); totalMonthly += parseInt(el.dataset.monthly || 0);
} }
}); });
// 수당 계산 // 저장공간 추가 과금 (100GB당 10만원)
const sellerCommission = totalJoin * 0.20; const storageQty = parseInt(document.getElementById('storage-qty').value || 0);
const managerCommission = totalJoin * 0.05; totalMonthly += (storageQty / 100) * 100000;
// 표시 업데이트 // 표시 업데이트
document.getElementById('display-total-join').innerText = formatKRW(totalJoin); document.getElementById('display-total-join').innerText = formatKRW(totalJoin);
document.getElementById('display-total-monthly').innerText = formatKRW(totalMonthly); document.getElementById('display-total-monthly').innerText = formatKRW(totalMonthly);
document.getElementById('display-seller-commission').innerText = formatKRW(sellerCommission); document.getElementById('display-seller-commission').innerText = formatKRW(sellerCommission);
document.getElementById('display-manager-commission').innerText = formatKRW(managerCommission); document.getElementById('display-manager-commission').innerText = formatKRW(managerCommission);
// 숫자 강조 효과
const outputs = ['display-total-join', 'display-total-monthly', 'display-seller-commission', 'display-manager-commission'];
outputs.forEach(id => {
const el = document.getElementById(id);
el.classList.add('scale-105', 'text-brand-400');
setTimeout(() => el.classList.remove('scale-105', 'text-brand-400'), 200);
});
} }
function changeQty(delta) { function changeQty(delta) {
@@ -324,6 +464,188 @@ if (file_exists('../session.php')) {
calculate(); calculate();
} }
function changeStorage(delta) {
const el = document.getElementById('storage-qty');
let val = parseInt(el.value || 0) + delta;
if (val < 0) val = 0;
el.value = val;
calculate();
}
function openTokenModal() {
document.getElementById('token-modal').classList.remove('hidden');
document.body.style.overflow = 'hidden';
}
function closeTokenModal() {
document.getElementById('token-modal').classList.add('hidden');
document.body.style.overflow = 'auto';
}
function openInfoModal(type) {
const modal = document.getElementById('info-modal');
const title = document.getElementById('info-modal-title');
const content = document.getElementById('info-modal-content');
if (type === 'basic') {
title.innerText = '제조업 기본 패키지 상세 안내';
content.innerHTML = `
<div class="space-y-6">
<section>
<h4 class="font-bold text-slate-900 mb-2 flex items-center gap-2">
<i data-lucide="check-circle-2" class="w-4 h-4 text-brand-600"></i>
핵심 제공 기능
</h4>
<ul class="grid grid-cols-2 gap-2 text-sm text-slate-600">
<li class="bg-slate-50 p-2 rounded-lg">• 품목/자재 관리</li>
<li class="bg-slate-50 p-2 rounded-lg">• 견적 및 수주 관리</li>
<li class="bg-slate-50 p-2 rounded-lg">• 생산/공정 관리</li>
<li class="bg-slate-50 p-2 rounded-lg">• 출하 및 재고 관리</li>
<li class="bg-brand-50 p-2 rounded-lg border border-brand-100 font-bold text-brand-700">• ERP(인사/회계) 무료</li>
<li class="bg-slate-50 p-2 rounded-lg">• 바코드/QR 대응</li>
</ul>
</section>
<section class="bg-slate-50 p-4 rounded-2xl border border-slate-100 text-xs text-slate-500 leading-relaxed">
<p>제조업의 핵심 업무 프로세스를 표준화하여 디지털 전환의 기초를 마련해주는 패키지입니다. 특히 외부 ERP 연동 없이 인사와 회계 업무까지 통합 처리할 수 있는 환경을 기본으로 제공합니다.</p>
</section>
</div>
`;
} else if (type === 'quality') {
title.innerText = '품질관리(인정검사) 상세 안내';
content.innerHTML = `
<div class="space-y-6">
<section>
<h4 class="font-bold text-slate-900 mb-2 flex items-center gap-2">
<i data-lucide="award" class="w-4 h-4 text-indigo-600"></i>
법적 근거 및 인증 체계
</h4>
<div class="bg-indigo-50 border border-indigo-100 p-4 rounded-2xl">
<p class="text-sm font-bold text-indigo-900 mb-1">국토교통부 고시 제2021-1009호 준수</p>
<p class="text-xs text-indigo-700">방화문 및 자동방화셔터의 인정 및 관리기준에 따른 엄격한 품질 품질인정 획득</p>
</div>
</section>
<section>
<h4 class="font-bold text-slate-900 mb-3 flex items-center gap-2">
<i data-lucide="shield-check" class="w-4 h-4 text-indigo-600"></i>
주요 검증 성능
</h4>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
<div class="p-3 bg-white border border-slate-200 rounded-xl text-center">
<span class="block text-xs text-slate-400 mb-1">내화성능</span>
<span class="text-sm font-bold text-slate-800">비차열 1시간+</span>
</div>
<div class="p-3 bg-white border border-slate-200 rounded-xl text-center">
<span class="block text-xs text-slate-400 mb-1">차연성능</span>
<span class="text-sm font-bold text-slate-800">연기 완벽 차단</span>
</div>
<div class="p-3 bg-white border border-slate-200 rounded-xl text-center">
<span class="block text-xs text-slate-400 mb-1">개폐성능</span>
<span class="text-sm font-bold text-slate-800">비상 수동 조작</span>
</div>
</div>
</section>
<section class="bg-slate-50 p-4 rounded-2xl border border-slate-100 text-xs text-slate-500 leading-relaxed">
<p>한국건설기술연구원(KICT)의 정기 공장심사와 사후관리 프로세스를 시스템 내에서 자동 대응할 수 있도록 설계된 프리미엄 모듈입니다. '장비점검 및 사무소 정비' 기능이 기본 포함되어 있습니다.</p>
</section>
</div>
`;
} else if (type === 'line') {
title.innerText = '생산공정 추가 상세 안내';
content.innerHTML = `
<div class="space-y-6">
<section>
<h4 class="font-bold text-slate-900 mb-2 flex items-center gap-2">
<i data-lucide="settings-2" class="w-4 h-4 text-indigo-600"></i>
공정별 독립적 프로세스 구축
</h4>
<p class="text-sm text-slate-600 leading-relaxed">각 공정마다 작업지시서 발행, 결과 기록, 공정별 병목 분석 등 <strong>별도의 프로세스 개발 및 데이터 환경</strong>을 구축하는 비용이 포함됩니다.</p>
</section>
<ul class="space-y-2 text-xs text-slate-500 bg-slate-50 p-4 rounded-xl">
<li class="flex gap-2"><span>•</span> <span>다품종 소량 생산 체계에 필수적인 공정 독립성 확보</span></li>
<li class="flex gap-2"><span>•</span> <span>공정별 실시간 진척률 및 가동율 데이터 집계 지원</span></li>
</ul>
</div>
`;
} else if (type === 'photo') {
title.innerText = '사진 등록 기능 상세 안내';
content.innerHTML = `
<div class="space-y-6">
<section>
<h4 class="font-bold text-slate-900 mb-2 flex items-center gap-2">
<i data-lucide="camera" class="w-4 h-4 text-indigo-600"></i>
현장 기반 시각 데이터 관리
</h4>
<p class="text-sm text-slate-600 leading-relaxed">현장별, 공정별로 발생하는 <strong>증빙 사진을 실시간으로 촬영하고 시스템에 자동 분류/저장</strong>하는 기능입니다.</p>
</section>
<div class="p-4 bg-indigo-50 border border-indigo-100 rounded-2xl">
<h5 class="text-xs font-bold text-indigo-800 mb-2">추천 활용 분야</h5>
<p class="text-[11px] text-indigo-600 leading-relaxed">시공 현장 기록이 필수적인 건설사, 설치 완료 증빙이 필요한 제조사 등에 최적화되어 있습니다. 찍고 저장하는 번거로운 과정을 획기적으로 줄여줍니다.</p>
</div>
</div>
`;
} else if (type === 'ai') {
title.innerText = 'AI 업무 효율화 상세 안내';
content.innerHTML = `
<div class="space-y-6">
<section>
<h4 class="font-bold text-slate-900 mb-2 flex items-center gap-2">
<i data-lucide="sparkles" class="w-4 h-4 text-indigo-600"></i>
지능형 업무 자동화 (AI)
</h4>
<p class="text-sm text-slate-600 leading-relaxed">챗봇 인터페이스와 음성 녹음 입력을 활용하여 <strong>업무 데이터 입력을 간소화하고 자동 업무일지를 생성</strong>합니다.</p>
</section>
<ul class="grid grid-cols-1 gap-2 text-xs text-slate-500">
<li class="flex gap-2 bg-slate-50 p-2 rounded-lg"><span>•</span> <span>대화형 데이터를 통한 실시간 재고/실적 조회</span></li>
<li class="flex gap-2 bg-slate-50 p-2 rounded-lg"><span>•</span> <span>현장 음성 기록을 텍스트로 자동 변환 및 요약</span></li>
<li class="flex gap-2 bg-slate-50 p-2 rounded-lg"><span>•</span> <span>반복되는 일상 업무의 AI 자동 일지 작성 지원</span></li>
</ul>
</div>
`;
} else if (type === 'lab') {
title.innerText = '연구소 연구노트 상세 안내';
content.innerHTML = `
<div class="space-y-6">
<section>
<h4 class="font-bold text-slate-900 mb-2 flex items-center gap-2">
<i data-lucide="microscope" class="w-4 h-4 text-indigo-600"></i>
신뢰성 있는 기술 개발 기록
</h4>
<p class="text-sm text-slate-600 leading-relaxed">한국산업기술진흥협회(산기협)의 연구노트 기준을 준수하여 <strong>연구 부서에서 필수적으로 관리해야 하는 기술 기록 솔루션</strong>을 제공합니다.</p>
</section>
<div class="p-4 bg-slate-900 text-white rounded-2xl">
<h5 class="text-xs font-bold text-brand-400 mb-2">핵심 보안 및 규정</h5>
<p class="text-[10px] text-slate-400 leading-relaxed">수정 불가한 타임스탬프 기록, 전자서명 연동 대응 등 연구소 인정 유지 및 기술 유출 방지를 위한 전문 프로세스가 탑재됩니다.</p>
</div>
</div>
`;
} else if (type === 'equip') {
title.innerText = '장비/사무소 관리 상세 안내';
content.innerHTML = `
<div class="space-y-6">
<section>
<h4 class="font-bold text-slate-900 mb-2 flex items-center gap-2">
<i data-lucide="wrench" class="w-4 h-4 text-indigo-600"></i>
심사 대응용 환경 정보 관리
</h4>
<p class="text-sm text-slate-600 leading-relaxed">ISO 심사나 품질 인정 검사 시 가장 중요하게 평가되는 <strong>장비의 정기 점검 기록 및 사무소 정비(청소/정돈) 상태를 체계적으로 관리</strong>합니다.</p>
</section>
<div class="bg-amber-50 border border-amber-100 p-4 rounded-xl">
<p class="text-xs text-amber-800 leading-relaxed font-medium">관리 부주의로 인한 심사 탈락 리스크를 해소하고, 공장 및 사무실 전체의 쾌적한 제조 환경을 데이터로 증빙할 수 있게 돕습니다.</p>
</div>
</div>
`;
}
modal.classList.remove('hidden');
document.body.style.overflow = 'hidden';
lucide.createIcons();
}
function closeInfoModal() {
document.getElementById('info-modal').classList.add('hidden');
document.body.style.overflow = 'auto';
}
function formatKRW(num) { function formatKRW(num) {
if (num === 0) return "0원"; if (num === 0) return "0원";
const man = num / 10000; const man = num / 10000;
@@ -335,5 +657,114 @@ if (file_exists('../session.php')) {
return man.toLocaleString() + "만원"; return man.toLocaleString() + "만원";
} }
</script> </script>
<!-- AI Token Policy Modal -->
<div id="token-modal" class="hidden fixed inset-0 z-[100] flex items-center justify-center p-4">
<div class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm" onclick="closeTokenModal()"></div>
<div class="relative bg-white w-full max-w-2xl rounded-3xl shadow-2xl overflow-hidden animate-fade-in-up">
<div class="flex items-center justify-between p-6 border-b border-slate-100 bg-slate-50/50">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-indigo-50 flex items-center justify-center text-indigo-600">
<i data-lucide="shield-check" class="w-6 h-6"></i>
</div>
<div>
<h3 class="text-lg font-bold text-slate-900">API 토큰 사용 정책 가이드</h3>
<p class="text-xs text-slate-500">안전하고 투명한 AI 서비스 이용을 위한 안내</p>
</div>
</div>
<button onclick="closeTokenModal()" class="p-2 hover:bg-white rounded-xl transition-colors">
<i data-lucide="x" class="w-6 h-6 text-slate-400"></i>
</button>
</div>
<div class="p-8 max-h-[70vh] overflow-y-auto">
<div class="space-y-8">
<section>
<h4 class="text-sm font-bold text-slate-900 mb-4 flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-indigo-600"></span>
기본 제공 요금제
</h4>
<div class="grid grid-cols-2 gap-4">
<div class="p-4 rounded-2xl bg-slate-50 border border-slate-100">
<span class="block text-xs text-slate-400 mb-1">매월 기본 제공량</span>
<span class="text-lg font-bold text-slate-800">1,000,000 Tokens</span>
</div>
<div class="p-4 rounded-2xl bg-indigo-50/50 border border-indigo-100">
<span class="block text-xs text-indigo-400 mb-1">초과 시 과금</span>
<span class="text-lg font-bold text-indigo-600">1,000 토큰 단위 실비</span>
</div>
</div>
</section>
<section>
<h4 class="text-sm font-bold text-slate-900 mb-4 flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-indigo-600"></span>
토큰 사용량 가이드 (100만 토큰 기준)
</h4>
<div class="overflow-hidden rounded-2xl border border-slate-100">
<table class="w-full text-sm text-left">
<thead class="bg-slate-50 text-slate-600">
<tr>
<th class="py-3 px-4 font-bold">서비스 항목</th>
<th class="py-3 px-4 font-bold">가능 작업량</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100 text-slate-500">
<tr>
<td class="py-3 px-4 font-medium text-slate-700">음성 회의 요약</td>
<td class="py-3 px-4">약 520분 (8.6시간)</td>
</tr>
<tr>
<td class="py-3 px-4 font-medium text-slate-700">문서 자료 정리</td>
<td class="py-3 px-4">A4 기준 약 300~400매</td>
</tr>
<tr>
<td class="py-3 px-4 font-medium text-slate-700">이메일/노트 정리</td>
<td class="py-3 px-4">약 1,500 ~ 2,000건</td>
</tr>
</tbody>
</table>
</div>
</section>
<div class="p-4 rounded-2xl bg-amber-50 border border-amber-100 text-[11px] text-amber-700 leading-relaxed">
<i data-lucide="alert-triangle" class="w-4 h-4 inline-block mr-1 -mt-1"></i>
미사용 잔여 토큰은 다음 달로 이월되지 않으며, 매월 1일 기본 제공량이 갱신됩니다. 음성 파일의 경우 처리 시간을 기준으로 토큰이 산정되어 투명한 비용 예측이 가능합니다.
</div>
</div>
</div>
<div class="p-6 bg-slate-50 border-t border-slate-100 flex justify-end">
<button onclick="closeTokenModal()" class="px-8 py-3 bg-slate-900 text-white rounded-xl font-bold hover:bg-slate-800 transition-colors">확인</button>
</div>
</div>
</div>
<!-- Package Info Modal -->
<div id="info-modal" class="hidden fixed inset-0 z-[101] flex items-center justify-center p-4">
<div class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm" onclick="closeInfoModal()"></div>
<div class="relative bg-white w-full max-w-xl rounded-3xl shadow-2xl overflow-hidden animate-fade-in-up">
<div class="flex items-center justify-between p-6 border-b border-slate-100 bg-slate-50/50">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-brand-50 flex items-center justify-center text-brand-600">
<i data-lucide="info" class="w-6 h-6"></i>
</div>
<div>
<h3 id="info-modal-title" class="text-lg font-bold text-slate-900">상세 안내</h3>
<p class="text-xs text-slate-500">패키지 구성 및 주요 기능을 확인하세요.</p>
</div>
</div>
<button onclick="closeInfoModal()" class="p-2 hover:bg-white rounded-xl transition-colors">
<i data-lucide="x" class="w-6 h-6 text-slate-400"></i>
</button>
</div>
<div id="info-modal-content" class="p-8 max-h-[70vh] overflow-y-auto">
<!-- Content will be injected by JS -->
</div>
<div class="p-6 bg-slate-50 border-t border-slate-100 flex justify-end">
<button onclick="closeInfoModal()" class="px-8 py-3 bg-slate-900 text-white rounded-xl font-bold hover:bg-slate-800 transition-colors">확인</button>
</div>
</div>
</div>
</body> </body>
</html> </html>

72
price/ref/토큰정책.md Normal file
View File

@@ -0,0 +1,72 @@
고객사(테넌트)에게 제공할 **'월 100만 토큰 기본 제공 + 초과 사용량 과금'** 정책은 B2B SaaS 시장에서 매우 합리적이고 투명한 모델입니다. 특히 제미나이(Gemini) API의 강력한 멀티모달 기능(음성, 문서)을 고려할 때, 고객이 직관적으로 자신의 사용량을 가늠할 수 있도록 돕는 것이 중요합니다.
고객사 안내문에 바로 활용하실 수 있는 가이드를 작성해 드립니다.
---
## [안내] API 토큰 사용 정책 및 과금 가이드
본 문서는 **[서비스명]**에서 제공하는 AI 요약 및 자료 정리 기능을 이용함에 있어 적용되는 API 토큰 사용 정책과 과금 체계를 설명합니다.
### 1. 토큰(Token)의 이해
토큰은 AI가 언어를 이해하고 생성하는 최소 단위입니다. 한글 기준 약 1~1.5자, 영어 기준 약 4자가 1토큰에 해당합니다. **[서비스명]**은 텍스트 문서뿐만 아니라 음성 데이터까지 토큰으로 환산하여 처리합니다.
### 2. 기본 요금 및 제공량
고객사의 안정적인 서비스 도입을 위해 매월 기본 토큰을 제공합니다.
* **기본 제공량:** 월 **1,000,000 Tokens (100만 토큰)**
* **갱신 주기:** 매월 1일 (미사용 잔여 토큰은 이월되지 않습니다.)
* **제공 모델:** 최신 Gemini Flash 계열 (성능 향상을 위해 모델은 예고 없이 상위 버전으로 업데이트될 수 있습니다.)
### 3. 초과 사용 및 추가 과금 (Pay-as-you-go)
기본 제공량인 100만 토큰을 모두 소진한 경우, 이후 발생하는 사용량에 대해서는 실제 사용한 만큼만 비용이 청구됩니다.
* **추가 과금 기준:** 1,000 토큰 단위로 과금
* **청구 방식:** 익월 기본료와 합산 청구 또는 선결제 크레딧 차감 (선택 사항에 따라 다름)
---
### 4. 사용량 체감 가이드 (100만 토큰으로 무엇을 할 수 있나요?)
고객사의 주요 활용 시나리오별 예상 처리량은 다음과 같습니다.
| 서비스 항목 | 소모 방식 | 100만 토큰으로 가능한 작업량 |
| --- | --- | --- |
| **음성 회의 요약** | 초당 약 32 tokens 소모 | **약 520분 (약 8.6시간)** 분량의 회의 요약 |
| **문서 자료 정리** | A4 1장(약 2천자) 기준 | **약 300 ~ 400매** 분량의 문서 분석 및 요약 |
| **이메일/노트 정리** | 단문 메시지 기준 | **약 1,500건 ~ 2,000건**의 자동 분류 및 정리 |
> **알아두세요!**
> * **입력과 출력 합산:** 요약을 위해 입력한 데이터(음성/문서)와 AI가 답변한 요약 결과물이 모두 토큰 사용량에 포함됩니다.
> * **멀티모달 처리:** 음성 파일의 경우 음질이나 언어와 관계없이 처리 시간(초)을 기준으로 토큰이 산정되어 비용 예측이 용이합니다.
>
>
---
### 5. 실시간 모니터링 및 알림
고객사 관리자 페이지(대시보드)를 통해 토큰 사용 현황을 실시간으로 확인하실 수 있습니다.
1. **사용량 추적:** 현재까지 소진된 토큰 양과 남은 기본 제공량을 그래프로 제공합니다.
2. **임계치 알림:** 기본 제공량의 80%, 100% 소진 시 담당자에게 자동 이메일/앱 알림을 발송합니다.
3. **한도 설정:** 예산 초과 방지를 위해 월 최대 사용 한도를 직접 설정할 수 있습니다.
### 6. 모델 업데이트 정책
저희는 항상 최상의 경험을 제공하기 위해 Google의 최신 Gemini 모델을 반영합니다. 모델이 업그레이드되더라도 고객사의 기존 워크플로우와 토큰 산정 방식은 최대한 일관되게 유지됩니다. (단, 대규모 정책 변경 시 최소 30일 전 사전 고지함)
---
**[서비스명]**은 고객사의 데이터 효율성을 극대화하기 위해 최적화된 프롬프트 엔지니어링을 적용하고 있습니다. 추가적인 문의 사항은 고객 지원 센터로 연락해 주시기 바랍니다.
---
### 💡 팁: 실제 운영 시 고려하실 점
100만 토큰은 중소규모 팀이 한 달 동안 주요 회의를 요약하기에 **'충분하지만 넉넉하지는 않은'** 적절한 유인책입니다. 만약 고객사가 음성 요약을 주력으로 쓴다면 8시간 분량은 금방 소진될 수 있으므로, **"추가 결제 시 10% 보너스 토큰 증정"** 같은 프로모션을 결합하면 초기 추가 결제에 대한 거부감을 줄일 수 있습니다.
**이 안내 문서를 바탕으로 대시보드에 들어갈 '실시간 토큰 사용량 차트' 기획안이나 상세 단가표 작성이 필요하신가요?**

View File

@@ -42,10 +42,33 @@
| **품질관리(인정검사)** | 2,000만원 | 50만원 | 400만원 | | **품질관리(인정검사)** | 2,000만원 | 50만원 | 400만원 |
| **사진 등록** | - | 10만원 | - | | **사진 등록** | - | 10만원 | - |
| **챗봇/녹음/업무일지** | - | 각 20만원 | - | | **챗봇/녹음/업무일지** | - | 각 20만원 | - |
| **연구소 연구노트** | - | 5만원 | - |
| **장비점검, 사무소 정비** | - | 5만원 | - |
> [!IMPORTANT]
> **품질관리(인정검사) 상세 정보**
> - **법적 근거**: 국토교통부고시 제2021-1009호(방화문 및 자동방화셔터의 인정 및 관리기준) 준수
> - **주요 성능**: 비차열 1시간 이상의 내화성능, 연기 누설 차단(차연성능), 비상시 수동 개폐 신뢰성 확보
> - **인정 기관**: 한국건설기술연구원(KICT)
> - **포함 내역**: '장비점검, 사무소 정비' 기능이 기본 포함되어 있습니다.
--- ---
## 4. 가격 책정의 철학 (내부 공유용) ## 4. 사용량 기반 추가 과금 정책 (Usage-based Pricing)
시스템 기본 제공 한도를 초과하여 사용하는 경우 발생하는 실비 보전형 과금 체계입니다. (수당 제외 항목)
### 4.1 파일 저장 공간
- **기본 제공**: 100GB (가입 시 기본 포함)
- **추가 과금**: 100GB 단위당 **월 10만원** 추가
### 4.2 실험실 AI 토큰 (Gemini API 기반)
- **기본 제공**: 월 1,000,000 Tokens (100만 토큰)
- **추가 과금**: 기본 제공량 소진 시 1,000 토큰 단위로 실비 과금 (상세 정책은 서비스 내 토큰 정책 페이지 참조)
- **주요 활용**: 음성 회의 요약(약 520분 분량), 문서 자료 정리, 업무 자동 분류 등
---
## 5. 가격 책정의 철학 (내부 공유용)
현행 가격 정책은 중소기업의 디지털 전환을 돕기 위해 초기 투자 비용을 분산하는 구조를 가지고 있습니다. 현행 가격 정책은 중소기업의 디지털 전환을 돕기 위해 초기 투자 비용을 분산하는 구조를 가지고 있습니다.