` 분리) + +--- + +### 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 변환 방법 + +```bash +# 각 버전 폴더에서 실행 +cd docs/brochure/v5 +node convert-1page.cjs # 1페이지 통합본 +node convert-2page.cjs # 앞면+뒷면 2페이지 +``` + +--- + +## 6. PPTX 변환 시 주의사항 + +### 6.1 텍스트 줄바꿈 방지 + +- 단일행 `
` 태그에 `white-space: nowrap` 필수
+- `
` 멀티라인 `
`는 개별 `
` 태그로 분리
+- `` 포함 텍스트도 개별 ` ` 처리 (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