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

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>