116 lines
7.2 KiB
HTML
116 lines
7.2 KiB
HTML
|
|
<!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: #f5f5f0;
|
||
|
|
padding: 22pt 40pt 14pt;
|
||
|
|
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: 12pt;">
|
||
|
|
<div style="display: inline-block; padding: 4pt 10pt; background: #1a0a0a; border-radius: 4pt;">
|
||
|
|
<p style="color: #E74C3C; font-size: 8pt; font-weight: 600;">MARGIN</p>
|
||
|
|
</div>
|
||
|
|
<h2 style="font-size: 20pt; font-weight: 700; color: #1a1a1a;">마진 구조 + 가격 책정 배경</h2>
|
||
|
|
</div>
|
||
|
|
<p style="font-size: 10pt; color: #999;">05</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 2컬럼 카드 -->
|
||
|
|
<div style="flex: 1; display: flex; gap: 16pt;">
|
||
|
|
<!-- 좌측: 마진 구조 (다크) -->
|
||
|
|
<div style="flex: 1; background: #1a0a0a; border-radius: 10pt; padding: 14pt; display: flex; flex-direction: column; justify-content: space-between;">
|
||
|
|
<div>
|
||
|
|
<p style="font-size: 8pt; color: #E74C3C; font-weight: 600; letter-spacing: 0.06em; margin-bottom: 6pt;">MARGIN STRUCTURE</p>
|
||
|
|
<p style="font-size: 11pt; font-weight: 500; color: rgba(255,255,255,0.5); margin-bottom: 2pt;">회사 영업이익률</p>
|
||
|
|
<p style="font-size: 38pt; font-weight: 800; color: #ffffff; letter-spacing: -0.02em;">67~75%</p>
|
||
|
|
</div>
|
||
|
|
<div style="display: flex; flex-direction: column; gap: 6pt; margin-top: 12pt;">
|
||
|
|
<div style="display: flex; justify-content: space-between; align-items: center; padding: 8pt 10pt; background: rgba(255,255,255,0.06); border-radius: 4pt;">
|
||
|
|
<p style="font-size: 9pt; color: rgba(255,255,255,0.5);">개인 가입</p>
|
||
|
|
<p style="font-size: 9pt; font-weight: 600; color: #ffffff;">72~75%<span style="font-size: 8pt; font-weight: 400; color: rgba(255,255,255,0.35);"> (수당 25~28%)</span></p>
|
||
|
|
</div>
|
||
|
|
<div style="display: flex; justify-content: space-between; align-items: center; padding: 8pt 10pt; background: rgba(255,255,255,0.06); border-radius: 4pt;">
|
||
|
|
<p style="font-size: 9pt; color: rgba(255,255,255,0.5);">단체 가입</p>
|
||
|
|
<p style="font-size: 9pt; font-weight: 600; color: #ffffff;">~67%<span style="font-size: 8pt; font-weight: 400; color: rgba(255,255,255,0.35);"> (수당 33%)</span></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="padding: 6pt 10pt; background: rgba(39,174,96,0.12); border-radius: 4pt; margin-top: 10pt;">
|
||
|
|
<p style="font-size: 8pt; color: #27AE60; font-weight: 600;">SaaS 업계 평균 마진 60% 대비 높은 수익성</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 우측: 가격 책정 배경 -->
|
||
|
|
<div style="flex: 1; background: #ffffff; border-radius: 10pt; padding: 14pt; border: 1pt solid #e5e5e0; display: flex; flex-direction: column; justify-content: space-between;">
|
||
|
|
<div>
|
||
|
|
<p style="font-size: 8pt; color: #666; font-weight: 600; letter-spacing: 0.06em; margin-bottom: 6pt;">PRICE BACKGROUND</p>
|
||
|
|
<p style="font-size: 11pt; font-weight: 500; color: #666; margin-bottom: 2pt;">내부 총 개발비 산정</p>
|
||
|
|
<p style="font-size: 38pt; font-weight: 800; color: #1a1a1a; letter-spacing: -0.02em;">7,600<span style="font-size: 18pt; font-weight: 500;">만원</span></p>
|
||
|
|
</div>
|
||
|
|
<div style="display: flex; flex-direction: column; gap: 5pt; margin-top: 12pt;">
|
||
|
|
<div style="display: flex; align-items: center; gap: 6pt; padding: 6pt 10pt; background: #fafafa; border-radius: 4pt;">
|
||
|
|
<div style="width: 3pt; height: 3pt; background: #1a1a1a; border-radius: 50%; flex-shrink: 0;"></div>
|
||
|
|
<p style="font-size: 8.5pt; color: #666;">개발비 2,000만원 + 장기 구독 약 7년</p>
|
||
|
|
</div>
|
||
|
|
<div style="display: flex; align-items: center; gap: 6pt; padding: 6pt 10pt; background: #fafafa; border-radius: 4pt;">
|
||
|
|
<div style="width: 3pt; height: 3pt; background: #1a1a1a; border-radius: 50%; flex-shrink: 0;"></div>
|
||
|
|
<p style="font-size: 8.5pt; color: #666;">금융 비용 4.6% 포함</p>
|
||
|
|
</div>
|
||
|
|
<div style="display: flex; align-items: center; gap: 6pt; padding: 6pt 10pt; background: #fafafa; border-radius: 4pt;">
|
||
|
|
<div style="width: 3pt; height: 3pt; background: #1a1a1a; border-radius: 50%; flex-shrink: 0;"></div>
|
||
|
|
<p style="font-size: 8.5pt; color: #666;">중소기업 초기 투자 부담 분산 구조</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 월간 예상 바 -->
|
||
|
|
<div style="margin-top: 8pt; background: #ffffff; border-radius: 6pt; padding: 8pt 16pt; border: 1pt solid #e5e5e0;">
|
||
|
|
<p style="font-size: 8pt; font-weight: 700; color: #666; margin-bottom: 4pt;">본사 지출 월간 예상 (테넌트 1개)</p>
|
||
|
|
<div style="display: flex; gap: 12pt; align-items: center;">
|
||
|
|
<div style="flex: 1; padding: 6pt 8pt; background: #f0faf4; border-radius: 4pt; text-align: center;">
|
||
|
|
<p style="font-size: 7pt; color: #999; margin-bottom: 2pt;">바로빌 홈택스</p>
|
||
|
|
<p style="font-size: 10pt; font-weight: 700; color: #27AE60;">0원</p>
|
||
|
|
</div>
|
||
|
|
<div style="flex: 1; padding: 6pt 8pt; background: #fafafa; border-radius: 4pt; text-align: center;">
|
||
|
|
<p style="font-size: 7pt; color: #999; margin-bottom: 2pt;">세금계산서</p>
|
||
|
|
<p style="font-size: 10pt; font-weight: 700; color: #1a1a1a;">5,000~10,000원</p>
|
||
|
|
</div>
|
||
|
|
<div style="flex: 1; padding: 6pt 8pt; background: #fafafa; border-radius: 4pt; text-align: center;">
|
||
|
|
<p style="font-size: 7pt; color: #999; margin-bottom: 2pt;">AI 토큰</p>
|
||
|
|
<p style="font-size: 10pt; font-weight: 700; color: #1a1a1a;">100~5,000원</p>
|
||
|
|
</div>
|
||
|
|
<div style="flex: 1; padding: 6pt 8pt; background: #fafafa; border-radius: 4pt; text-align: center;">
|
||
|
|
<p style="font-size: 7pt; color: #999; margin-bottom: 2pt;">GCS/STT</p>
|
||
|
|
<p style="font-size: 10pt; font-weight: 700; color: #1a1a1a;">50~2,000원</p>
|
||
|
|
</div>
|
||
|
|
<div style="width: 1pt; height: 28pt; background: #e5e5e0;"></div>
|
||
|
|
<div style="padding: 6pt 10pt; background: #1a0a0a; border-radius: 4pt; text-align: center;">
|
||
|
|
<p style="font-size: 7pt; color: rgba(255,255,255,0.5); margin-bottom: 2pt;">합계 최대</p>
|
||
|
|
<p style="font-size: 10pt; font-weight: 700; color: #E74C3C;">~17,000원<span style="font-size: 7pt; font-weight: 400; color: rgba(255,255,255,0.4);">/월</span></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="margin-top: 6pt; padding: 4pt 8pt; background: #fdedef; border-radius: 3pt; text-align: center;">
|
||
|
|
<p style="font-size: 8pt; color: #C0392B; font-weight: 600;">구독료 50만원 대비 원가율 3.4% — 스케일 시 한계비용 0에 수렴</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 푸터 -->
|
||
|
|
<div style="display: flex; justify-content: space-between; align-items: center; padding-top: 5pt; margin-top: 4pt;">
|
||
|
|
<p style="font-size: 8pt; color: #999;">SAM 내부 과금정책 | CONFIDENTIAL</p>
|
||
|
|
<p style="font-size: 8pt; color: #999;">05</p>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|