모든 옵션이 클릭 한 번으로 상세한 비즈니스 가치를 전달할 수 있는 전문적인 영업 도구로 진화했
🤖 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
465
price/index.php
465
price/index.php
@@ -120,7 +120,12 @@ if (file_exists('../session.php')) {
|
||||
</div>
|
||||
<div class="ml-4 flex-1">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<p class="text-sm text-slate-500 mt-1">품목관리, 견적, 수주, 생산, 출하 (**ERP(인사/회계) 무료 포함**)</p>
|
||||
@@ -135,11 +140,38 @@ if (file_exists('../session.php')) {
|
||||
</div>
|
||||
<div class="ml-4 flex-1">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<p class="text-sm text-slate-500 mt-1">강화된 공정 검사 및 품질 데이터 분석 도구</p>
|
||||
<div class="mt-2 text-[11px] font-semibold text-slate-400 uppercase tracking-widest">월 구독료: 50만원</div>
|
||||
<p class="text-sm text-slate-500 mt-1">국토교통부 고시 기준 성능 인정 (내화 1시간, 차연, 개폐)</p>
|
||||
|
||||
<!-- 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>
|
||||
</label>
|
||||
</div>
|
||||
@@ -158,7 +190,12 @@ if (file_exists('../session.php')) {
|
||||
<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()">
|
||||
<div class="ml-3 flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<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>
|
||||
</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">
|
||||
<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="flex items-center gap-2">
|
||||
<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>
|
||||
</div>
|
||||
</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">
|
||||
<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="flex items-center gap-2">
|
||||
<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>
|
||||
</div>
|
||||
drum
|
||||
</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>
|
||||
</section>
|
||||
</div>
|
||||
@@ -274,11 +407,26 @@ if (file_exists('../session.php')) {
|
||||
let totalMonthly = 500000; // 제조업 기본 패키지 500k
|
||||
|
||||
// 품질관리(인정검사) 체크 확인
|
||||
if (document.getElementById('item-quality').checked) {
|
||||
const isQualityChecked = document.getElementById('item-quality').checked;
|
||||
if (isQualityChecked) {
|
||||
totalJoin += 20000000;
|
||||
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');
|
||||
if (itemLine.checked) {
|
||||
@@ -287,33 +435,25 @@ if (file_exists('../session.php')) {
|
||||
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 => {
|
||||
const el = document.getElementById(id);
|
||||
if (el.checked) {
|
||||
if (el && el.checked) {
|
||||
totalJoin += parseInt(el.dataset.join || 0);
|
||||
totalMonthly += parseInt(el.dataset.monthly || 0);
|
||||
}
|
||||
});
|
||||
|
||||
// 수당 계산
|
||||
const sellerCommission = totalJoin * 0.20;
|
||||
const managerCommission = totalJoin * 0.05;
|
||||
// 저장공간 추가 과금 (100GB당 10만원)
|
||||
const storageQty = parseInt(document.getElementById('storage-qty').value || 0);
|
||||
totalMonthly += (storageQty / 100) * 100000;
|
||||
|
||||
// 표시 업데이트
|
||||
document.getElementById('display-total-join').innerText = formatKRW(totalJoin);
|
||||
document.getElementById('display-total-monthly').innerText = formatKRW(totalMonthly);
|
||||
document.getElementById('display-seller-commission').innerText = formatKRW(sellerCommission);
|
||||
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) {
|
||||
@@ -324,6 +464,188 @@ if (file_exists('../session.php')) {
|
||||
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) {
|
||||
if (num === 0) return "0원";
|
||||
const man = num / 10000;
|
||||
@@ -335,5 +657,114 @@ if (file_exists('../session.php')) {
|
||||
return man.toLocaleString() + "만원";
|
||||
}
|
||||
</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>
|
||||
</html>
|
||||
|
||||
72
price/ref/토큰정책.md
Normal file
72
price/ref/토큰정책.md
Normal 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% 보너스 토큰 증정"** 같은 프로모션을 결합하면 초기 추가 결제에 대한 거부감을 줄일 수 있습니다.
|
||||
|
||||
**이 안내 문서를 바탕으로 대시보드에 들어갈 '실시간 토큰 사용량 차트' 기획안이나 상세 단가표 작성이 필요하신가요?**
|
||||
@@ -42,10 +42,33 @@
|
||||
| **품질관리(인정검사)** | 2,000만원 | 50만원 | 400만원 |
|
||||
| **사진 등록** | - | 10만원 | - |
|
||||
| **챗봇/녹음/업무일지** | - | 각 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. 가격 책정의 철학 (내부 공유용)
|
||||
|
||||
현행 가격 정책은 중소기업의 디지털 전환을 돕기 위해 초기 투자 비용을 분산하는 구조를 가지고 있습니다.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user