SAM 브로셔 버전 관리
작성일: 2026-03-01 상태: 운영 중
1. 개요
SAM CEO Dashboard 및 ERP/MES 영업 브로셔의 버전별 디자인 변천을 기록한다.
모든 브로셔는 세로형(9:16) HTML로 작성하며, pptx-skill(html2pptx.js)로 PPTX 변환한다.
2. 버전 요약
| 버전 | 대상 | 테마 | 배경색 | 주 액센트 | 비고 |
|---|---|---|---|---|---|
| v1 | 전체 고객 | 다크 | #0F2439 |
#10B981 (에메랄드) |
SAM ERP/MES 범용 |
| v2 | 경영진 | 다크 | #0B1929 |
#0EA5E9 (스카이블루) |
CEO Dashboard 초판 |
| v3 | 경영진 | 다크 | #0B1929 |
#0EA5E9 (스카이블루) |
v2 개선, Before/After 추가 |
| v4 | 경영진 | 라이트 | #F8FAFC |
#0EA5E9 (스카이블루) |
v3의 밝은 배경 변환 |
| v5 | 경영진 | 프리미엄 그래디언트 | #0F172A→#312E81 |
#FBBF24 (골드) |
글래스모피즘 + 골드 |
3. 버전별 상세
3.1 v1 — SAM ERP/MES 범용 브로셔
컨셉: 중소 제조업 대상 SAM 플랫폼 전체 기능 소개
| 항목 | 값 |
|---|---|
| 배경 | #0F2439 (네이비) |
| 주 액센트 | #10B981 (에메랄드 그린) |
| 보조 액센트 | #2E86AB, #8B5CF6, #E86F2C |
| 카드 스타일 | 반투명 배경 + 컬러 보더 |
| BI 로고 | sam_bi_white.png |
앞면 구성:
- 히어로: "중소 제조업을 위한 ERP/MES 통합 플랫폼"
- 고민 포인트: Excel 과의존, 실시간 가시성, 품질관리, 높은 ERP 비용
- 효과 지표: 시간 절감 80%, 납기 준수 95%, 추적성 100%, 인사/회계 무료
- 기술 태그: 클라우드, 모바일 대응, 멀티테넌트
뒷면 구성:
- 8대 핵심 모듈 (01~08 번호 뱃지): 품목/BOM, 견적/수주, 생산/MES, 출하, 품질, 자재, 인사/회계, 대시보드
- 확장 기능: 전자서명, 알림톡, AI Lab, QR
- 가격표: 기본 2,000만원 + 월 50만원
- 도입 프로세스: 인터뷰 → 개발 → 이관 → 교육
3.2 v2 — CEO Dashboard 초판
컨셉: 경영진 타겟, 대시보드 중심 소개. 문제→해결 스토리텔링
| 항목 | 값 |
|---|---|
| 배경 | #0B1929 (짙은 네이비) |
| 주 액센트 | #0EA5E9 (스카이블루) |
| 보조 액센트 | #10B981, #8B5CF6, #F59E0B, #EF4444, #EC4899 |
| 카드 스타일 | 반투명 다크 카드 |
| BI 로고 | sam_bi_white.png |
앞면 구성:
- 히어로: "대표님, 지금 우리 회사 어떻게 돌아가고 있나요?"
- 시간대별 고민: 오전 9시(매출 보고 대기), 오후 2시(수주 취합), 오후 5시(결재 서류)
- 대시보드 Mock UI: KPI 카드 4개 + 매출 추이 차트 + 조직 성과 바 차트
- 약속 박스: "실시간 KPI 파악"
뒷면 구성:
- 대시보드 7대 기능 (01~07 뱃지)
- 역할별 맞춤 화면: CEO, 관리자, 운영자, 영업자
- SAM 플랫폼 연동: 견적/수주, 생산, 품질, 재고, 인사/회계
- 가격표 + 도입 프로세스
v1 대비 차이:
- 타겟이 전체→경영진으로 좁혀짐
- 타임라인 기반 문제 제시 (시간대별 고민)
- 대시보드 UI Mock 삽입
- 역할별 화면 분리 소개
3.3 v3 — CEO Dashboard 개선판 (다크)
컨셉: v2 기반 개선. Before/After 인포그래픽 추가, SVG 아이콘 강화
| 항목 | 값 |
|---|---|
| 배경 | #0B1929 (짙은 네이비) |
| 주 액센트 | #0EA5E9 (스카이블루) |
| 카드 스타일 | 반투명 다크 + 컬러 보더 |
| BI 로고 | sam_bi_white.png |
v2 대비 개선사항:
- 1page 통합본 추가
- Before/After 비교 인포그래픽 도입
- 핵심 가치 3카드: 즉시 현황 파악, 데이터로 판단, 모바일 승인
- SVG 인라인 아이콘 전면 적용 (외부 이미지 의존 제거)
- PPTX 텍스트 줄바꿈 방지 패턴 적용 (
white-space: nowrap, 개별<p>분리)
3.4 v4 — CEO Dashboard 라이트 버전
컨셉: v3와 동일 콘텐츠, 밝은 배경으로 색상 전환
| 항목 | 값 |
|---|---|
| 배경 | #F8FAFC (밝은 슬레이트) |
| 주 액센트 | #0EA5E9 (스카이블루) |
| 제목 텍스트 | #0F172A |
| 본문 텍스트 | #475569 |
| 보조 텍스트 | #94A3B8 |
| 카드 스타일 | 화이트 + box-shadow + #E2E8F0 보더 |
| BI 로고 | sam_bi_black.png |
v3 → v4 색상 변환 규칙:
| 요소 | v3 (다크) | v4 (라이트) |
|---|---|---|
| 배경 | #0B1929 |
#F8FAFC |
| 카드 | #111D2E 반투명 |
#FFFFFF + shadow |
| 제목 | #FFFFFF |
#0F172A |
| 본문 | rgba(255,255,255,0.55) |
#475569 |
| 보조 | rgba(255,255,255,0.3) |
#94A3B8 |
| 구분선 | rgba(14,165,233,0.15) |
#E2E8F0 |
| 기술 태그 | rgba(255,255,255,0.03) |
#F1F5F9 |
| 액센트 | 동일 유지 | 동일 유지 |
3.5 v5 — Premium Executive Gradient
컨셉: 고급 프리미엄 감성. 네이비→인디고 그래디언트 + 골드 액센트 + 글래스모피즘
| 항목 | 값 |
|---|---|
| 배경 | #0F172A → #1E1B4B → #312E81 (175deg 그래디언트) |
| 주 액센트 | #FBBF24 (골드/앰버) |
| 보조 액센트 | #10B981, #8B5CF6, #EF4444, #F59E0B, #EC4899 |
| 카드 스타일 | 글래스모피즘 (rgba(255,255,255,0.05) + rgba(255,255,255,0.1) border) |
| BI 로고 | sam_bi_white.png |
| 뱃지 | "EXECUTIVE EDITION" 골드 뱃지 |
앞면 구성:
- 히어로: "대표님의 시간은 보고를 기다리는 데 쓰여선 안 됩니다."
- 잃어버린 시간 카드: 1~2일(매출), 반나절(수주), 30분(결재) — 빨간 톤
- 골드 전환 구분선: "SAM 도입 후"
- 대시보드 Mock: 골드 차트 라인, 글래스모피즘 카드
- 약속 박스: 골드 테두리
뒷면 구성:
- 7대 기능 리스트 (글래스모피즘 카드)
- 역할별 맞춤 화면: CEO(골드), 관리자(그린), 운영자(앰버), 영업자(퍼플)
- 가격표: 골드 강조
- 도입 프로세스: 골드 화살표 연결
기술 특이사항:
- body CSS gradient → PPTX 미지원 → Sharp로 PNG 사전 렌더링
- HTML body는
#1A1640(단색 fallback), convert 스크립트에서slide.background로 그래디언트 PNG 덮어쓰기 - 구분선 gradient도 solid rgba로 변환 (PPTX 호환)
4. 폴더 구조
docs/brochure/
├── README.md ← 이 파일
├── v1/
│ ├── slides/
│ │ ├── brochure-2page-front.html
│ │ ├── brochure-2page-back.html
│ │ └── brochure-1page.html
│ ├── convert-1page.cjs
│ ├── convert-2page.cjs
│ ├── sam-brochure-1page.pptx
│ └── sam-brochure-2page.pptx
├── v2/
│ ├── slides/
│ │ ├── brochure-dashboard-front.html
│ │ ├── brochure-dashboard-back.html
│ │ └── brochure-dashboard-1page.html
│ ├── convert-1page.cjs
│ ├── convert-2page.cjs
│ ├── sam-brochure-v2-dashboard-1page.pptx
│ └── sam-brochure-v2-dashboard-2page.pptx
├── v3/
│ ├── slides/
│ │ ├── brochure-dashboard-front.html
│ │ ├── brochure-dashboard-back.html
│ │ └── brochure-dashboard-1page.html
│ ├── convert-1page.cjs
│ ├── convert-2page.cjs
│ ├── sam-brochure-v3-dashboard-1page.pptx
│ └── sam-brochure-v3-dashboard-2page.pptx
├── v4/
│ ├── slides/
│ │ ├── brochure-dashboard-front.html
│ │ ├── brochure-dashboard-back.html
│ │ └── brochure-dashboard-1page.html
│ ├── convert-1page.cjs
│ ├── convert-2page.cjs
│ ├── sam-brochure-v4-dashboard-1page.pptx
│ └── sam-brochure-v4-dashboard-2page.pptx
└── v5/
├── slides/
│ ├── brochure-dashboard-front.html
│ ├── brochure-dashboard-back.html
│ └── brochure-dashboard-1page.html
├── convert-1page.cjs ← Sharp 그래디언트 배경 생성 포함
├── convert-2page.cjs ← Sharp 그래디언트 배경 생성 포함
├── sam-brochure-v5-dashboard-1page.pptx
└── sam-brochure-v5-dashboard-2page.pptx
5. PPTX 변환 방법
# 각 버전 폴더에서 실행
cd docs/brochure/v5
node convert-1page.cjs # 1페이지 통합본
node convert-2page.cjs # 앞면+뒷면 2페이지
6. PPTX 변환 시 주의사항
6.1 텍스트 줄바꿈 방지
- 단일행
<p>태그에white-space: nowrap필수 <br>멀티라인<p>는 개별<p nowrap>태그로 분리<span>포함 텍스트도 개별<p>처리 (PPTX 폰트 폭 차이 보정)
6.2 CSS gradient 미지원
- html2pptx.js는 CSS
linear-gradient를 지원하지 않음 - body gradient → Sharp로 PNG 사전 렌더링 후
slide.background에 설정 - 구분선 gradient → solid
rgba()색상으로 변환
6.3 SVG 처리
- 인라인 SVG는 html2pptx가 자동으로 PNG 래스터화
- SVG 내부 fill 색상은 배경에 맞게 조정 필요
최종 업데이트: 2026-03-01