SamProject/sam-docs
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: [과금정책] 고객용 요금 안내 프레젠테이션 슬라이드 7장 전면 재작성

Browse Source 
- html2pptx 호환성 규칙 준수 (table 태그 제거, div+flexbox 대체)
- 표지에 키 벨류 카드 3개 추가 (업무 자동화, 인건비 절감, 실시간 현황)
- 기본 서비스 요금에 BEST SELLER 배지 및 감성 문구 추가
- 추가 옵션을 6개 카드 그리드로 시각적 재구성
- AI 토큰 활용 예시 설득 문구 강화
- 바로빌 부가서비스 테이블을 div+flexbox 행으로 변환
- 마무리 슬라이드에 핵심 가치 태그 3개 추가
This commit is contained in:
김보곤
2026-02-21 20:28:05 +09:00
parent c14c19f908
commit 725f3209cb
7 changed files with 759 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
rules/slides/customer-pricing/slide-01.html Normal file
View File

@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 720pt;
height: 405pt;
font-family: 'Pretendard', sans-serif;
background: #1B3A5C;
padding: 36pt 48pt 28pt 48pt;
display: flex;
flex-direction: column;
justify-content: space-between;
}
</style>
</head>
<body>
<!-- 상단: 로고 + 뱃지 -->
<div style="display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 10pt;">
<div style="width: 24pt; height: 24pt; background: #2E86AB; border-radius: 5pt; display: flex; align-items: center; justify-content: center;">
<p style="color: #fff; font-size: 14pt; font-weight: 700;">S</p>
</div>
<p style="font-size: 13pt; font-weight: 600; color: #ffffff;">SAM</p>
</div>
<div style="display: inline-block; padding: 5pt 14pt; border: 1px solid rgba(255,255,255,0.3); border-radius: 16pt;">
<p style="font-size: 9pt; font-weight: 500; color: rgba(255,255,255,0.7); letter-spacing: 0.05em;">SERVICE PRICING 2026</p>
</div>
</div>
<!-- 메인 타이틀 -->
<div>
<p style="font-size: 11pt; font-weight: 600; color: #2E86AB; letter-spacing: 0.06em; margin-bottom: 10pt;">SMART AUTOMATION MANAGEMENT</p>
<h1 style="font-size: 48pt; font-weight: 800; color: #ffffff; letter-spacing: -0.02em; line-height: 1.15;">SAM 서비스 요금 안내</h1>
<p style="font-size: 14pt; color: rgba(255,255,255,0.55); margin-top: 12pt; line-height: 1.5;">제조 현장의 디지털 전환, SAM 하나로 완성합니다</p>
</div>
<!-- 키 벨류 3카드 -->
<div style="display: flex; gap: 14pt;">
<div style="flex: 1; background: rgba(46,134,171,0.18); border: 1pt solid rgba(46,134,171,0.35); border-radius: 10pt; padding: 14pt 16pt; text-align: center;">
<p style="font-size: 24pt; font-weight: 800; color: #ffffff; margin-bottom: 2pt;">80%<span style="font-size: 13pt; color: #2E86AB;"> UP</span></p>
<p style="font-size: 9pt; color: rgba(255,255,255,0.6);">업무 자동화율 향상</p>
</div>
<div style="flex: 1; background: rgba(232,111,44,0.15); border: 1pt solid rgba(232,111,44,0.35); border-radius: 10pt; padding: 14pt 16pt; text-align: center;">
<p style="font-size: 24pt; font-weight: 800; color: #ffffff; margin-bottom: 2pt;">30%<span style="font-size: 13pt; color: #E86F2C;"> DOWN</span></p>
<p style="font-size: 9pt; color: rgba(255,255,255,0.6);">인건비 절감 효과</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.08); border: 1pt solid rgba(255,255,255,0.2); border-radius: 10pt; padding: 14pt 16pt; text-align: center;">
<p style="font-size: 24pt; font-weight: 800; color: #ffffff; margin-bottom: 2pt;">100%</p>
<p style="font-size: 9pt; color: rgba(255,255,255,0.6);">실시간 현황 파악</p>
</div>
</div>
<!-- 하단 정보 -->
<div style="display: flex; gap: 48pt; align-items: flex-end;">
<div>
<p style="font-size: 8pt; color: rgba(255,255,255,0.3); margin-bottom: 3pt; letter-spacing: 0.04em;">COMPANY</p>
<p style="font-size: 11pt; font-weight: 500; color: rgba(255,255,255,0.8);">주일 / 경동</p>
</div>
<div>
<p style="font-size: 8pt; color: rgba(255,255,255,0.3); margin-bottom: 3pt; letter-spacing: 0.04em;">DATE</p>
<p style="font-size: 11pt; font-weight: 500; color: rgba(255,255,255,0.8);">2026. 02</p>
</div>
<div>
<p style="font-size: 8pt; color: rgba(255,255,255,0.3); margin-bottom: 3pt; letter-spacing: 0.04em;">NOTE</p>
<p style="font-size: 11pt; font-weight: 600; color: #E86F2C;">VAT 별도</p>
</div>
<div style="margin-left: auto;">
<p style="font-size: 8pt; color: rgba(255,255,255,0.3);">01 / 07</p>
</div>
</div>
</body>
</html>

82
rules/slides/customer-pricing/slide-02.html Normal file
View File

@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 720pt;
height: 405pt;
font-family: 'Pretendard', sans-serif;
background: #f7f9fc;
padding: 36pt 48pt 24pt 48pt;
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<!-- 상단 2단: 좌측 타이틀, 우측 목차 -->
<div style="flex: 1; display: flex; gap: 36pt;">
<!-- 좌측: Contents 타이틀 -->
<div style="width: 180pt; display: flex; flex-direction: column; justify-content: center;">
<div style="display: inline-block; padding: 4pt 10pt; background: #1B3A5C; border-radius: 4pt; margin-bottom: 16pt; width: fit-content;">
<p style="color: #fff; font-size: 8pt; font-weight: 600; letter-spacing: 0.06em;">CONTENTS</p>
</div>
<h1 style="font-size: 38pt; font-weight: 800; color: #1B3A5C; letter-spacing: -0.02em; line-height: 1.15;">목차</h1>
<p style="font-size: 10pt; color: #5a6b7d; margin-top: 10pt; line-height: 1.5;">SAM 서비스의 투명한 요금 체계를 한눈에 확인하세요</p>
</div>
<!-- 우측: 목차 리스트 -->
<div style="flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10pt;">
<!-- 01 -->
<div style="display: flex; align-items: center; gap: 14pt; padding: 16pt 18pt; background: #ffffff; border-radius: 8pt; border-left: 3pt solid #E86F2C;">
<div style="display: inline-block; padding: 5pt 10pt; background: #1B3A5C; border-radius: 5pt;">
<p style="color: #fff; font-size: 9pt; font-weight: 700;">01</p>
</div>
<div style="flex: 1;">
<p style="font-size: 13pt; font-weight: 700; color: #1B3A5C;">기본 서비스 요금</p>
<p style="font-size: 9pt; color: #5a6b7d; margin-top: 2pt;">제조업 패키지, 개별 모듈, 통합 패키지</p>
</div>
</div>
<!-- 02 -->
<div style="display: flex; align-items: center; gap: 14pt; padding: 16pt 18pt; background: #ffffff; border-radius: 8pt; border-left: 3pt solid #2E86AB;">
<div style="display: inline-block; padding: 5pt 10pt; background: #1B3A5C; border-radius: 5pt;">
<p style="color: #fff; font-size: 9pt; font-weight: 700;">02</p>
</div>
<div style="flex: 1;">
<p style="font-size: 13pt; font-weight: 700; color: #1B3A5C;">추가 옵션 요금</p>
<p style="font-size: 9pt; color: #5a6b7d; margin-top: 2pt;">생산공정 추가, 품질관리, 챗봇, 연구노트</p>
</div>
</div>
<!-- 03 -->
<div style="display: flex; align-items: center; gap: 14pt; padding: 16pt 18pt; background: #ffffff; border-radius: 8pt; border-left: 3pt solid #2E86AB;">
<div style="display: inline-block; padding: 5pt 10pt; background: #1B3A5C; border-radius: 5pt;">
<p style="color: #fff; font-size: 9pt; font-weight: 700;">03</p>
</div>
<div style="flex: 1;">
<p style="font-size: 13pt; font-weight: 700; color: #1B3A5C;">사용량 기반 과금</p>
<p style="font-size: 9pt; color: #5a6b7d; margin-top: 2pt;">파일 저장 공간, AI 토큰 사용량</p>
</div>
</div>
<!-- 04 -->
<div style="display: flex; align-items: center; gap: 14pt; padding: 16pt 18pt; background: #ffffff; border-radius: 8pt; border-left: 3pt solid #2E86AB;">
<div style="display: inline-block; padding: 5pt 10pt; background: #1B3A5C; border-radius: 5pt;">
<p style="color: #fff; font-size: 9pt; font-weight: 700;">04</p>
</div>
<div style="flex: 1;">
<p style="font-size: 13pt; font-weight: 700; color: #1B3A5C;">바로빌 부가서비스</p>
<p style="font-size: 9pt; color: #5a6b7d; margin-top: 2pt;">계좌조회, 카드내역, 세금계산서 발행</p>
</div>
</div>
</div>
</div>
<!-- 푸터 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding-top: 10pt; border-top: 1pt solid #e2e8f0; margin-top: 10pt;">
<p style="font-size: 8pt; color: #999;">SAM 서비스 요금 안내 | 주일/경동</p>
<p style="font-size: 8pt; color: #999;">02 / 07</p>
<p style="font-size: 8pt; color: #E86F2C; font-weight: 500;">모든 금액 VAT 별도</p>
</div>
</body>
</html>

131
rules/slides/customer-pricing/slide-03.html Normal file
View File

@@ -0,0 +1,131 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 720pt;
height: 405pt;
font-family: 'Pretendard', sans-serif;
background: #ffffff;
padding: 28pt 36pt 20pt 36pt;
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 14pt;">
<div style="display: flex; align-items: center; gap: 10pt;">
<div style="display: inline-block; padding: 3pt 9pt; background: #2E86AB; border-radius: 4pt;">
<p style="color: #fff; font-size: 7pt; font-weight: 600;">SECTION 01</p>
</div>
<h2 style="font-size: 20pt; font-weight: 700; color: #1B3A5C;">기본 서비스 요금</h2>
</div>
<p style="font-size: 9pt; color: #999;">03 / 07</p>
</div>
<!-- 콘텐츠: 2단 -->
<div style="flex: 1; display: flex; gap: 16pt;">
<!-- 좌측: 제조업 기본 패키지 카드 -->
<div style="width: 240pt; background: #f7f9fc; border-radius: 10pt; padding: 16pt; display: flex; flex-direction: column; justify-content: space-between; border: 1pt solid #e2e8f0;">
<div>
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 10pt;">
<div style="display: inline-block; padding: 3pt 8pt; background: #E86F2C; border-radius: 3pt;">
<p style="color: #fff; font-size: 7pt; font-weight: 700;">BEST SELLER</p>
</div>
<div style="display: inline-block; padding: 3pt 8pt; background: #1B3A5C; border-radius: 3pt;">
<p style="color: #fff; font-size: 7pt; font-weight: 600;">BASIC</p>
</div>
</div>
<h3 style="font-size: 16pt; font-weight: 700; color: #1B3A5C; margin-bottom: 8pt;">제조업 기본 패키지</h3>
<p style="font-size: 9pt; color: #5a6b7d; line-height: 1.6;">품목관리 → 견적 → 수주 → 생산 → 출하</p>
<div style="margin-top: 8pt; padding: 6pt 10pt; background: rgba(46,134,171,0.1); border-radius: 5pt;">
<p style="font-size: 9pt; font-weight: 600; color: #2E86AB;">ERP 인사/회계 무료 포함</p>
</div>
</div>
<div>
<div style="display: flex; gap: 10pt; margin-top: 12pt;">
<div style="flex: 1; background: #1B3A5C; border-radius: 8pt; padding: 12pt; text-align: center;">
<p style="font-size: 7pt; color: rgba(255,255,255,0.6); margin-bottom: 3pt;">개발비 (1회)</p>
<p style="font-size: 18pt; font-weight: 700; color: #ffffff;">2,000<span style="font-size: 10pt; font-weight: 400;">만원</span></p>
</div>
<div style="flex: 1; background: #ffffff; border-radius: 8pt; padding: 12pt; text-align: center; border: 1pt solid #e2e8f0;">
<p style="font-size: 7pt; color: #999; margin-bottom: 3pt;">구독료 (월)</p>
<p style="font-size: 18pt; font-weight: 700; color: #E86F2C;">50<span style="font-size: 10pt; font-weight: 400;">만원</span></p>
</div>
</div>
<div style="margin-top: 8pt; text-align: center;">
<p style="font-size: 8pt; color: #2E86AB; font-weight: 500;">하루 약 1.6만원으로 제조 ERP 완성</p>
</div>
</div>
</div>
<!-- 우측: 개별 모듈 + 통합 패키지 -->
<div style="flex: 1; display: flex; flex-direction: column; gap: 10pt;">
<!-- 개별 모듈 타이틀 -->
<p style="font-size: 9pt; font-weight: 600; color: #5a6b7d; letter-spacing: 0.03em;">개별 모듈</p>
<!-- 헤더 행 -->
<div style="display: flex; background: #1B3A5C; border-radius: 5pt 5pt 0 0; padding: 5pt 10pt;">
<div style="flex: 1.2;"><p style="font-size: 8pt; font-weight: 600; color: #fff;">모듈명</p></div>
<div style="flex: 1; text-align: right;"><p style="font-size: 8pt; font-weight: 600; color: #fff;">개발비</p></div>
<div style="flex: 0.7; text-align: right;"><p style="font-size: 8pt; font-weight: 600; color: #fff;">구독/월</p></div>
</div>
<!-- 행1 -->
<div style="display: flex; background: #f7f9fc; padding: 5pt 10pt; margin-top: -10pt;">
<div style="flex: 1.2;"><p style="font-size: 8pt; color: #1e2a3a;">QR코드 관리</p></div>
<div style="flex: 1; text-align: right;"><p style="font-size: 8pt; font-weight: 600; color: #1e2a3a;">1,020만원</p></div>
<div style="flex: 0.7; text-align: right;"><p style="font-size: 8pt; color: #5a6b7d;">5만원</p></div>
</div>
<!-- 행2 -->
<div style="display: flex; background: #ffffff; padding: 5pt 10pt; margin-top: -10pt;">
<div style="flex: 1.2;"><p style="font-size: 8pt; color: #1e2a3a;">사진/출하 관리</p></div>
<div style="flex: 1; text-align: right;"><p style="font-size: 8pt; font-weight: 600; color: #1e2a3a;">1,920만원</p></div>
<div style="flex: 0.7; text-align: right;"><p style="font-size: 8pt; color: #5a6b7d;">10만원</p></div>
</div>
<!-- 행3 -->
<div style="display: flex; background: #f7f9fc; padding: 5pt 10pt; margin-top: -10pt;">
<div style="flex: 1.2;"><p style="font-size: 8pt; color: #1e2a3a;">검사/토큰 적용</p></div>
<div style="flex: 1; text-align: right;"><p style="font-size: 8pt; font-weight: 600; color: #1e2a3a;">1,020만원</p></div>
<div style="flex: 0.7; text-align: right;"><p style="font-size: 8pt; color: #5a6b7d;">5만원</p></div>
</div>
<!-- 행4 -->
<div style="display: flex; background: #ffffff; padding: 5pt 10pt; margin-top: -10pt; border-radius: 0 0 5pt 5pt;">
<div style="flex: 1.2;"><p style="font-size: 8pt; color: #1e2a3a;">이카운트 연동</p></div>
<div style="flex: 1; text-align: right;"><p style="font-size: 8pt; font-weight: 600; color: #1e2a3a;">1,920만원</p></div>
<div style="flex: 0.7; text-align: right;"><p style="font-size: 8pt; color: #5a6b7d;">10만원</p></div>
</div>
<!-- 통합 패키지 타이틀 -->
<p style="font-size: 9pt; font-weight: 600; color: #5a6b7d; letter-spacing: 0.03em; margin-top: 4pt;">통합 패키지</p>
<!-- 헤더 행 -->
<div style="display: flex; background: #2E86AB; border-radius: 5pt 5pt 0 0; padding: 5pt 10pt;">
<div style="flex: 1.2;"><p style="font-size: 8pt; font-weight: 600; color: #fff;">패키지명</p></div>
<div style="flex: 1; text-align: right;"><p style="font-size: 8pt; font-weight: 600; color: #fff;">개발비</p></div>
<div style="flex: 0.7; text-align: right;"><p style="font-size: 8pt; font-weight: 600; color: #fff;">구독/월</p></div>
</div>
<!-- 행1 -->
<div style="display: flex; background: #f0f7fa; padding: 5pt 10pt; margin-top: -10pt;">
<div style="flex: 1.2;"><p style="font-size: 8pt; font-weight: 500; color: #1e2a3a;">공사관리 패키지</p></div>
<div style="flex: 1; text-align: right;"><p style="font-size: 8pt; font-weight: 700; color: #1B3A5C;">4,000만원</p></div>
<div style="flex: 0.7; text-align: right;"><p style="font-size: 8pt; color: #5a6b7d;">20만원</p></div>
</div>
<!-- 행2 -->
<div style="display: flex; background: #ffffff; padding: 5pt 10pt; margin-top: -10pt; border-radius: 0 0 5pt 5pt;">
<div style="flex: 1.2;"><p style="font-size: 8pt; font-weight: 500; color: #1e2a3a;">공정/정부지원사업</p></div>
<div style="flex: 1; text-align: right;"><p style="font-size: 8pt; font-weight: 700; color: #1B3A5C;">8,000만원</p></div>
<div style="flex: 0.7; text-align: right;"><p style="font-size: 8pt; color: #5a6b7d;">40만원</p></div>
</div>
</div>
</div>
<!-- 푸터 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding-top: 8pt; border-top: 1pt solid #e2e8f0; margin-top: 8pt;">
<p style="font-size: 8pt; color: #999;">SAM 서비스 요금 안내 | 주일/경동</p>
<p style="font-size: 8pt; color: #E86F2C; font-weight: 500;">모든 금액 VAT 별도</p>
</div>
</body>
</html>

163
rules/slides/customer-pricing/slide-04.html Normal file
View File

@@ -0,0 +1,163 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 720pt;
height: 405pt;
font-family: 'Pretendard', sans-serif;
background: #ffffff;
padding: 28pt 36pt 20pt 36pt;
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 14pt;">
<div style="display: flex; align-items: center; gap: 10pt;">
<div style="display: inline-block; padding: 3pt 9pt; background: #2E86AB; border-radius: 4pt;">
<p style="color: #fff; font-size: 7pt; font-weight: 600;">SECTION 02</p>
</div>
<h2 style="font-size: 20pt; font-weight: 700; color: #1B3A5C;">추가 옵션 요금</h2>
</div>
<p style="font-size: 9pt; color: #999;">04 / 07</p>
</div>
<!-- 옵션 카드 그리드: 3열 2행 -->
<div style="flex: 1; display: flex; flex-direction: column; gap: 10pt;">
<!-- 1행 -->
<div style="display: flex; gap: 10pt; flex: 1;">
<!-- 카드1: 생산공정 -->
<div style="flex: 1; background: #f7f9fc; border-radius: 8pt; padding: 14pt; border: 1pt solid #e2e8f0; display: flex; flex-direction: column; justify-content: space-between;">
<div>
<p style="font-size: 11pt; font-weight: 700; color: #1B3A5C; margin-bottom: 4pt;">생산공정 1개 추가</p>
<p style="font-size: 8pt; color: #5a6b7d; line-height: 1.4;">생산 라인별 개별 공정 확장</p>
</div>
<div>
<div style="display: flex; justify-content: space-between; margin-top: 8pt;">
<p style="font-size: 8pt; color: #999;">개발비</p>
<p style="font-size: 10pt; font-weight: 700; color: #1B3A5C;">500만원</p>
</div>
<div style="display: flex; justify-content: space-between; margin-top: 3pt;">
<p style="font-size: 8pt; color: #999;">구독/월</p>
<p style="font-size: 10pt; font-weight: 600; color: #E86F2C;">10만원</p>
</div>
</div>
</div>
<!-- 카드2: 품질관리 -->
<div style="flex: 1; background: #1B3A5C; border-radius: 8pt; padding: 14pt; display: flex; flex-direction: column; justify-content: space-between;">
<div>
<div style="display: flex; align-items: center; gap: 6pt; margin-bottom: 4pt;">
<p style="font-size: 11pt; font-weight: 700; color: #ffffff;">품질관리 (인정검사)</p>
</div>
<div style="display: inline-block; padding: 2pt 7pt; background: #E86F2C; border-radius: 3pt; margin-bottom: 2pt;">
<p style="font-size: 7pt; font-weight: 600; color: #fff;">품질 인증 필수!</p>
</div>
<p style="font-size: 8pt; color: rgba(255,255,255,0.6); line-height: 1.4;">ISO 인증 대응 필수 모듈</p>
</div>
<div>
<div style="display: flex; justify-content: space-between; margin-top: 8pt;">
<p style="font-size: 8pt; color: rgba(255,255,255,0.5);">개발비</p>
<p style="font-size: 10pt; font-weight: 700; color: #ffffff;">2,000만원</p>
</div>
<div style="display: flex; justify-content: space-between; margin-top: 3pt;">
<p style="font-size: 8pt; color: rgba(255,255,255,0.5);">구독/월</p>
<p style="font-size: 10pt; font-weight: 600; color: #E86F2C;">50만원</p>
</div>
</div>
</div>
<!-- 카드3: 사진 등록 -->
<div style="flex: 1; background: #f7f9fc; border-radius: 8pt; padding: 14pt; border: 1pt solid #e2e8f0; display: flex; flex-direction: column; justify-content: space-between;">
<div>
<p style="font-size: 11pt; font-weight: 700; color: #1B3A5C; margin-bottom: 4pt;">사진 등록</p>
<p style="font-size: 8pt; color: #5a6b7d; line-height: 1.4;">제품/공정 사진 관리 기능</p>
</div>
<div>
<div style="display: flex; justify-content: space-between; margin-top: 8pt;">
<p style="font-size: 8pt; color: #999;">개발비</p>
<p style="font-size: 10pt; font-weight: 700; color: #bbb;">-</p>
</div>
<div style="display: flex; justify-content: space-between; margin-top: 3pt;">
<p style="font-size: 8pt; color: #999;">구독/월</p>
<p style="font-size: 10pt; font-weight: 600; color: #E86F2C;">10만원</p>
</div>
</div>
</div>
</div>
<!-- 2행 -->
<div style="display: flex; gap: 10pt; flex: 1;">
<!-- 카드4: 챗봇/녹음/업무일지 -->
<div style="flex: 1; background: #f7f9fc; border-radius: 8pt; padding: 14pt; border: 1pt solid #e2e8f0; display: flex; flex-direction: column; justify-content: space-between;">
<div>
<p style="font-size: 11pt; font-weight: 700; color: #1B3A5C; margin-bottom: 4pt;">챗봇 / 녹음 / 업무일지</p>
<p style="font-size: 8pt; color: #5a6b7d; line-height: 1.4;">AI 기반 업무 보조 도구 3종</p>
</div>
<div>
<div style="display: flex; justify-content: space-between; margin-top: 8pt;">
<p style="font-size: 8pt; color: #999;">개발비</p>
<p style="font-size: 10pt; font-weight: 700; color: #bbb;">-</p>
</div>
<div style="display: flex; justify-content: space-between; margin-top: 3pt;">
<p style="font-size: 8pt; color: #999;">구독/월</p>
<p style="font-size: 10pt; font-weight: 600; color: #E86F2C;">각 20만원</p>
</div>
</div>
</div>
<!-- 카드5: 연구소 연구노트 -->
<div style="flex: 1; background: #f7f9fc; border-radius: 8pt; padding: 14pt; border: 1pt solid #e2e8f0; display: flex; flex-direction: column; justify-content: space-between;">
<div>
<p style="font-size: 11pt; font-weight: 700; color: #1B3A5C; margin-bottom: 4pt;">연구소 연구노트</p>
<p style="font-size: 8pt; color: #5a6b7d; line-height: 1.4;">R&D 기록 및 지식재산 관리</p>
</div>
<div>
<div style="display: flex; justify-content: space-between; margin-top: 8pt;">
<p style="font-size: 8pt; color: #999;">개발비</p>
<p style="font-size: 10pt; font-weight: 700; color: #bbb;">-</p>
</div>
<div style="display: flex; justify-content: space-between; margin-top: 3pt;">
<p style="font-size: 8pt; color: #999;">구독/월</p>
<p style="font-size: 10pt; font-weight: 600; color: #E86F2C;">5만원</p>
</div>
</div>
</div>
<!-- 카드6: 장비점검/사무소정비 -->
<div style="flex: 1; background: #f7f9fc; border-radius: 8pt; padding: 14pt; border: 1pt solid #e2e8f0; display: flex; flex-direction: column; justify-content: space-between;">
<div>
<p style="font-size: 11pt; font-weight: 700; color: #1B3A5C; margin-bottom: 4pt;">장비점검 / 사무소 정비</p>
<p style="font-size: 8pt; color: #5a6b7d; line-height: 1.4;">설비 유지보수 이력 관리</p>
</div>
<div>
<div style="display: flex; justify-content: space-between; margin-top: 8pt;">
<p style="font-size: 8pt; color: #999;">개발비</p>
<p style="font-size: 10pt; font-weight: 700; color: #bbb;">-</p>
</div>
<div style="display: flex; justify-content: space-between; margin-top: 3pt;">
<p style="font-size: 8pt; color: #999;">구독/월</p>
<p style="font-size: 10pt; font-weight: 600; color: #E86F2C;">5만원</p>
</div>
</div>
</div>
</div>
</div>
<!-- 참고 박스 -->
<div style="margin-top: 10pt; padding: 8pt 14pt; background: #fff8f3; border-left: 3pt solid #E86F2C; border-radius: 0 5pt 5pt 0;">
<p style="font-size: 9pt; color: #5a6b7d;"><span style="font-weight: 700; color: #E86F2C;">참고</span> 품질관리(인정검사)에는 장비점검/사무소 정비 기능이 기본 포함됩니다.</p>
</div>
<!-- 푸터 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding-top: 8pt; border-top: 1pt solid #e2e8f0; margin-top: 8pt;">
<p style="font-size: 8pt; color: #999;">SAM 서비스 요금 안내 | 주일/경동</p>
<p style="font-size: 8pt; color: #E86F2C; font-weight: 500;">모든 금액 VAT 별도</p>
</div>
</body>
</html>

124
rules/slides/customer-pricing/slide-05.html Normal file
View File

@@ -0,0 +1,124 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 720pt;
height: 405pt;
font-family: 'Pretendard', sans-serif;
background: #f7f9fc;
padding: 28pt 36pt 20pt 36pt;
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 14pt;">
<div style="display: flex; align-items: center; gap: 10pt;">
<div style="display: inline-block; padding: 3pt 9pt; background: #2E86AB; border-radius: 4pt;">
<p style="color: #fff; font-size: 7pt; font-weight: 600;">SECTION 03</p>
</div>
<h2 style="font-size: 20pt; font-weight: 700; color: #1B3A5C;">사용량 기반 추가 과금</h2>
</div>
<p style="font-size: 9pt; color: #999;">05 / 07</p>
</div>
<!-- 콘텐츠 2단 -->
<div style="flex: 1; display: flex; gap: 16pt;">
<!-- 좌측: 기본 제공량 카드 -->
<div style="width: 260pt; display: flex; flex-direction: column; gap: 12pt;">
<!-- 파일 저장 공간 -->
<div style="background: #ffffff; border-radius: 10pt; padding: 16pt; border: 1pt solid #e2e8f0; flex: 1;">
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 10pt;">
<div style="width: 26pt; height: 26pt; background: #2E86AB; border-radius: 6pt; display: flex; align-items: center; justify-content: center;">
<p style="color: #fff; font-size: 13pt; font-weight: 700;">F</p>
</div>
<h3 style="font-size: 14pt; font-weight: 700; color: #1B3A5C;">파일 저장 공간</h3>
</div>
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6pt;">
<p style="font-size: 9pt; color: #5a6b7d;">기본 제공</p>
<p style="font-size: 16pt; font-weight: 800; color: #1B3A5C;">100<span style="font-size: 10pt; font-weight: 500;">GB</span></p>
</div>
<div style="width: 100%; height: 1pt; background: #e2e8f0; margin-bottom: 6pt;"></div>
<div style="display: flex; justify-content: space-between; align-items: center;">
<p style="font-size: 9pt; color: #5a6b7d;">초과 시</p>
<p style="font-size: 11pt; font-weight: 700; color: #E86F2C;">100GB당 10만원/월</p>
</div>
</div>
<!-- AI 토큰 -->
<div style="background: #ffffff; border-radius: 10pt; padding: 16pt; border: 1pt solid #e2e8f0; flex: 1;">
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 10pt;">
<div style="width: 26pt; height: 26pt; background: #1B3A5C; border-radius: 6pt; display: flex; align-items: center; justify-content: center;">
<p style="color: #fff; font-size: 13pt; font-weight: 700;">AI</p>
</div>
<h3 style="font-size: 14pt; font-weight: 700; color: #1B3A5C;">AI 토큰</h3>
</div>
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6pt;">
<p style="font-size: 9pt; color: #5a6b7d;">기본 제공</p>
<p style="font-size: 16pt; font-weight: 800; color: #1B3A5C;">100<span style="font-size: 10pt; font-weight: 500;">만 토큰/월</span></p>
</div>
<div style="width: 100%; height: 1pt; background: #e2e8f0; margin-bottom: 6pt;"></div>
<div style="display: flex; justify-content: space-between; align-items: center;">
<p style="font-size: 9pt; color: #5a6b7d;">초과 시</p>
<p style="font-size: 11pt; font-weight: 700; color: #E86F2C;">실비 정산</p>
</div>
</div>
</div>
<!-- 우측: AI 100만 토큰 활용 예시 -->
<div style="flex: 1; background: #1B3A5C; border-radius: 10pt; padding: 18pt; display: flex; flex-direction: column;">
<p style="font-size: 10pt; font-weight: 700; color: #2E86AB; letter-spacing: 0.04em; margin-bottom: 4pt;">AI 100만 토큰, 이만큼 쓸 수 있습니다</p>
<p style="font-size: 8pt; color: rgba(255,255,255,0.4); margin-bottom: 12pt;">대부분의 중소 제조업에서 충분한 사용량</p>
<!-- 음성 회의 요약 -->
<div style="background: rgba(255,255,255,0.08); border-radius: 8pt; padding: 12pt 14pt; margin-bottom: 8pt;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div>
<p style="font-size: 10pt; font-weight: 600; color: #ffffff;">음성 회의 요약</p>
<p style="font-size: 8pt; color: rgba(255,255,255,0.5); margin-top: 2pt;">하루 30분씩 매일 회의해도 한 달 충분</p>
</div>
<p style="font-size: 18pt; font-weight: 800; color: #ffffff;">520<span style="font-size: 9pt; font-weight: 400; color: rgba(255,255,255,0.5);">분</span></p>
</div>
</div>
<!-- 문서 자동 정리 -->
<div style="background: rgba(255,255,255,0.08); border-radius: 8pt; padding: 12pt 14pt; margin-bottom: 8pt;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div>
<p style="font-size: 10pt; font-weight: 600; color: #ffffff;">문서 자동 정리</p>
<p style="font-size: 8pt; color: rgba(255,255,255,0.5); margin-top: 2pt;">매일 15장씩 처리해도 여유</p>
</div>
<p style="font-size: 18pt; font-weight: 800; color: #ffffff;">300~400<span style="font-size: 9pt; font-weight: 400; color: rgba(255,255,255,0.5);">매(A4)</span></p>
</div>
</div>
<!-- 이메일/노트 분류 -->
<div style="background: rgba(255,255,255,0.08); border-radius: 8pt; padding: 12pt 14pt;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div>
<p style="font-size: 10pt; font-weight: 600; color: #ffffff;">이메일/노트 자동 분류</p>
<p style="font-size: 8pt; color: rgba(255,255,255,0.5); margin-top: 2pt;">하루 75건 자동 분류 가능</p>
</div>
<p style="font-size: 18pt; font-weight: 800; color: #ffffff;">2,000<span style="font-size: 9pt; font-weight: 400; color: rgba(255,255,255,0.5);">건</span></p>
</div>
</div>
<div style="margin-top: auto; padding-top: 8pt;">
<p style="font-size: 8pt; color: rgba(255,255,255,0.35);">미사용 토큰 이월 불가 | 80% / 100% 소진 시 자동 알림</p>
</div>
</div>
</div>
<!-- 푸터 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding-top: 8pt; border-top: 1pt solid #e2e8f0; margin-top: 8pt;">
<p style="font-size: 8pt; color: #999;">SAM 서비스 요금 안내 | 주일/경동</p>
<p style="font-size: 8pt; color: #E86F2C; font-weight: 500;">모든 금액 VAT 별도</p>
</div>
</body>
</html>

117
rules/slides/customer-pricing/slide-06.html Normal file
View File

@@ -0,0 +1,117 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 720pt;
height: 405pt;
font-family: 'Pretendard', sans-serif;
background: #ffffff;
padding: 28pt 36pt 20pt 36pt;
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12pt;">
<div style="display: flex; align-items: center; gap: 10pt;">
<div style="display: inline-block; padding: 3pt 9pt; background: #2E86AB; border-radius: 4pt;">
<p style="color: #fff; font-size: 7pt; font-weight: 600;">SECTION 04</p>
</div>
<h2 style="font-size: 20pt; font-weight: 700; color: #1B3A5C;">바로빌 부가서비스</h2>
</div>
<p style="font-size: 9pt; color: #999;">06 / 07</p>
</div>
<!-- 데이터 행 (div+flexbox 테이블 대체) -->
<div style="flex: 1; display: flex; flex-direction: column; gap: 0;">
<!-- 헤더 행 -->
<div style="display: flex; background: #1B3A5C; border-radius: 6pt 6pt 0 0; padding: 7pt 12pt;">
<div style="flex: 1;"><p style="font-size: 8pt; font-weight: 600; color: #fff;">서비스</p></div>
<div style="flex: 1;"><p style="font-size: 8pt; font-weight: 600; color: #fff;">과금 방식</p></div>
<div style="flex: 0.7;"><p style="font-size: 8pt; font-weight: 600; color: #fff;">기본 제공</p></div>
<div style="flex: 1.2;"><p style="font-size: 8pt; font-weight: 600; color: #fff;">추가 과금</p></div>
<div style="flex: 0.4; text-align: center;"><p style="font-size: 8pt; font-weight: 600; color: #fff;">부담</p></div>
</div>
<!-- 행1: 계좌조회 -->
<div style="display: flex; background: #f7f9fc; padding: 8pt 12pt; align-items: center;">
<div style="flex: 1;"><p style="font-size: 9pt; font-weight: 600; color: #1e2a3a;">계좌조회</p></div>
<div style="flex: 1;"><p style="font-size: 8pt; color: #5a6b7d;">월정액 10,000원</p></div>
<div style="flex: 0.7;"><p style="font-size: 8pt; color: #5a6b7d;">1계좌</p></div>
<div style="flex: 1.2;"><p style="font-size: 8pt; color: #5a6b7d;">추가 1계좌당 10,000원</p></div>
<div style="flex: 0.4; text-align: center;">
<div style="display: inline-block; padding: 2pt 7pt; background: #e2e8f0; border-radius: 3pt;">
<p style="font-size: 7pt; font-weight: 600; color: #1B3A5C;">고객</p>
</div>
</div>
</div>
<!-- 행2: 카드내역 -->
<div style="display: flex; background: #ffffff; padding: 8pt 12pt; align-items: center;">
<div style="flex: 1;"><p style="font-size: 9pt; font-weight: 600; color: #1e2a3a;">카드내역</p></div>
<div style="flex: 1;"><p style="font-size: 8pt; color: #5a6b7d;">월정액 10,000원</p></div>
<div style="flex: 0.7;"><p style="font-size: 8pt; color: #5a6b7d;">5장</p></div>
<div style="flex: 1.2;"><p style="font-size: 8pt; color: #5a6b7d;">추가 1장당 5,000원</p></div>
<div style="flex: 0.4; text-align: center;">
<div style="display: inline-block; padding: 2pt 7pt; background: #e2e8f0; border-radius: 3pt;">
<p style="font-size: 7pt; font-weight: 600; color: #1B3A5C;">고객</p>
</div>
</div>
</div>
<!-- 행3: 홈택스 매입/매출 -->
<div style="display: flex; background: #f7f9fc; padding: 8pt 12pt; align-items: center;">
<div style="flex: 1;"><p style="font-size: 9pt; font-weight: 600; color: #1e2a3a;">홈택스 매입/매출</p></div>
<div style="flex: 1;"><p style="font-size: 8pt; color: #5a6b7d;">월 33,000원 x 2</p></div>
<div style="flex: 0.7;"><p style="font-size: 8pt; color: #5a6b7d;">-</p></div>
<div style="flex: 1.2;"><p style="font-size: 8pt; color: #5a6b7d;">-</p></div>
<div style="flex: 0.4; text-align: center;">
<div style="display: inline-block; padding: 2pt 7pt; background: #2E86AB; border-radius: 3pt;">
<p style="font-size: 7pt; font-weight: 700; color: #fff;">SAM 무료!</p>
</div>
</div>
</div>
<!-- 행4: 세금계산서 발행 -->
<div style="display: flex; background: #ffffff; padding: 8pt 12pt; align-items: center; border-radius: 0 0 6pt 6pt;">
<div style="flex: 1;"><p style="font-size: 9pt; font-weight: 600; color: #1e2a3a;">세금계산서 발행</p></div>
<div style="flex: 1;"><p style="font-size: 8pt; color: #5a6b7d;">건별</p></div>
<div style="flex: 0.7;"><p style="font-size: 8pt; color: #5a6b7d;">100건</p></div>
<div style="flex: 1.2;"><p style="font-size: 8pt; color: #5a6b7d;">추가 50건당 5,000원</p></div>
<div style="flex: 0.4; text-align: center;">
<div style="display: inline-block; padding: 2pt 7pt; background: #e2e8f0; border-radius: 3pt;">
<p style="font-size: 7pt; font-weight: 600; color: #1B3A5C;">고객</p>
</div>
</div>
</div>
</div>
<!-- 과금 계산 예시 -->
<div style="margin-top: 12pt; background: #f7f9fc; border-radius: 8pt; padding: 14pt 16pt; border: 1pt solid #e2e8f0;">
<p style="font-size: 10pt; font-weight: 700; color: #1B3A5C; margin-bottom: 10pt;">과금 계산 예시</p>
<div style="display: flex; gap: 12pt;">
<!-- 예시1 -->
<div style="flex: 1; background: #ffffff; border-radius: 6pt; padding: 10pt 14pt; border-left: 3pt solid #2E86AB;">
<p style="font-size: 8pt; color: #5a6b7d; margin-bottom: 4pt;">법인카드 8장 등록 시</p>
<p style="font-size: 10pt; font-weight: 600; color: #1B3A5C;">(8 - 5) x 5,000 = <span style="color: #E86F2C; font-weight: 700;">15,000원</span> 추가</p>
</div>
<!-- 예시2 -->
<div style="flex: 1; background: #ffffff; border-radius: 6pt; padding: 10pt 14pt; border-left: 3pt solid #2E86AB;">
<p style="font-size: 8pt; color: #5a6b7d; margin-bottom: 4pt;">세금계산서 151건 발행 시</p>
<p style="font-size: 10pt; font-weight: 600; color: #1B3A5C;">ceil((151-100)/50) x 5,000 = <span style="color: #E86F2C; font-weight: 700;">10,000원</span> 추가</p>
</div>
</div>
</div>
<!-- 푸터 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding-top: 8pt; border-top: 1pt solid #e2e8f0; margin-top: 8pt;">
<p style="font-size: 8pt; color: #999;">SAM 서비스 요금 안내 | 주일/경동</p>
<p style="font-size: 8pt; color: #E86F2C; font-weight: 500;">모든 금액 VAT 별도</p>
</div>
</body>
</html>

67
rules/slides/customer-pricing/slide-07.html Normal file
View File

@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 720pt;
height: 405pt;
font-family: 'Pretendard', sans-serif;
background: #1B3A5C;
padding: 40pt 48pt 28pt 48pt;
display: flex;
flex-direction: column;
justify-content: space-between;
}
</style>
</head>
<body>
<!-- 로고 -->
<div style="display: flex; align-items: center; gap: 10pt;">
<div style="width: 24pt; height: 24pt; background: #2E86AB; border-radius: 5pt; display: flex; align-items: center; justify-content: center;">
<p style="color: #fff; font-size: 14pt; font-weight: 700;">S</p>
</div>
<p style="font-size: 13pt; font-weight: 600; color: #ffffff;">SAM</p>
</div>
<!-- 메인 메시지 -->
<div>
<h1 style="font-size: 40pt; font-weight: 800; color: #ffffff; letter-spacing: -0.02em; line-height: 1.25;">지금 SAM과 함께 시작하세요</h1>
<p style="font-size: 15pt; color: rgba(255,255,255,0.5); margin-top: 14pt; line-height: 1.6;">제조 현장의 모든 흐름을 하나의 플랫폼에서 관리합니다</p>
<div style="display: flex; gap: 20pt; margin-top: 20pt;">
<div style="padding: 10pt 18pt; background: rgba(46,134,171,0.2); border: 1pt solid rgba(46,134,171,0.4); border-radius: 8pt;">
<p style="font-size: 10pt; color: #2E86AB; font-weight: 600;">ERP + MES 통합</p>
</div>
<div style="padding: 10pt 18pt; background: rgba(232,111,44,0.15); border: 1pt solid rgba(232,111,44,0.35); border-radius: 8pt;">
<p style="font-size: 10pt; color: #E86F2C; font-weight: 600;">AI 기반 업무 자동화</p>
</div>
<div style="padding: 10pt 18pt; background: rgba(255,255,255,0.08); border: 1pt solid rgba(255,255,255,0.2); border-radius: 8pt;">
<p style="font-size: 10pt; color: rgba(255,255,255,0.7); font-weight: 600;">실시간 현황 대시보드</p>
</div>
</div>
</div>
<!-- 하단 정보 -->
<div style="display: flex; gap: 48pt; align-items: flex-end;">
<div>
<p style="font-size: 8pt; color: rgba(255,255,255,0.3); margin-bottom: 3pt; letter-spacing: 0.04em;">COMPANY</p>
<p style="font-size: 11pt; font-weight: 500; color: rgba(255,255,255,0.8);">주일 / 경동</p>
</div>
<div>
<p style="font-size: 8pt; color: rgba(255,255,255,0.3); margin-bottom: 3pt; letter-spacing: 0.04em;">SYSTEM</p>
<p style="font-size: 11pt; font-weight: 500; color: rgba(255,255,255,0.8);">Smart Automation Management</p>
</div>
<div>
<p style="font-size: 8pt; color: rgba(255,255,255,0.3); margin-bottom: 3pt; letter-spacing: 0.04em;">CONTACT</p>
<p style="font-size: 11pt; font-weight: 500; color: rgba(255,255,255,0.8);">담당 영업파트너 또는 본사</p>
</div>
<div style="margin-left: auto;">
<div style="display: inline-block; padding: 4pt 12pt; border: 1pt solid #E86F2C; border-radius: 4pt;">
<p style="font-size: 9pt; font-weight: 600; color: #E86F2C;">모든 금액 VAT 별도</p>
</div>
<p style="font-size: 8pt; color: rgba(255,255,255,0.3); margin-top: 6pt; text-align: right;">07 / 07</p>
</div>
</div>
</body>
</html>