` 분리) --- ### 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 호환) --- ### 3.6 v6 — Corporate Blue & White **컨셉**: 대기업/공공기관 프레젠테이션 스타일. 정돈된 블루 헤더 바 + 순백색 본문 | 항목 | 값 | |------|------| | 배경 | `#FFFFFF` (순백) | | 헤더 바 | `#1E40AF` (로열 블루) | | 주 액센트 | `#2563EB` (블루) | | 보조 배경 | `#EFF6FF` (블루-50), `#DBEAFE` (블루-100) | | 카드 스타일 | 화이트 + `#DBEAFE` 보더 | | BI 로고 | `sam_bi_white.png` (헤더), `sam_bi_black.png` (본문) | **특징**: - 풀 폭 블루 헤더 바에 흰색 BI 로고 + 뱃지 배치 - 섹션 라벨은 블루-50 배경 + 로열블루 텍스트 뱃지 - 대시보드 Mock UI: `#DBEAFE` 보더 카드 - CTA: 블루 배경 풀 폭 바 --- ### 3.7 v7 — Warm Gray + Teal **컨셉**: IT/SaaS 기업 스타일. 따뜻한 그레이 배경 + 틸(Teal) 액센트 | 항목 | 값 | |------|------| | 배경 | `#FAFAF9` (웜 그레이) | | 주 액센트 | `#0D9488` (틸) | | 보조 액센트 | `#10B981`, `#8B5CF6`, `#EF4444`, `#F59E0B`, `#EC4899` | | 카드 스타일 | 화이트 + `#E7E5E4` 보더 + 미세 그림자 | | 구분선 | `#D6D3D1` | | BI 로고 | `sam_bi_black.png` | **특징**: - 부드러운 웜 톤 배경으로 눈의 피로 감소 - 틸 계열 SVG 아이콘 전면 적용 - 가벼운 카드 스타일로 정보 구분 - 타임라인 인포그래픽: 시간대별 고민 (9AM/2PM/5PM) --- ### 3.8 v8 — Two-Tone Navy/White Split **컨셉**: 금융/컨설팅 프레젠테이션 스타일. 다크 상단 + 화이트 하단 투톤 분할 | 항목 | 값 | |------|------| | 상단 배경 | `#1E293B` (슬레이트-800) | | 하단 배경 | `#FFFFFF` (순백) | | 주 액센트 | `#F97316` (오렌지) | | 보조 액센트 | `#FB923C` (오렌지-400) | | 카드 (다크) | `rgba(255,255,255,0.08)` + `rgba(255,255,255,0.12)` 보더 | | 카드 (라이트) | 화이트 + `#E2E8F0` 보더 + 컬러 좌측 보더 | | BI 로고 | `sam_bi_white.png` (다크), `sam_bi_black.png` (라이트) | **특징**: - 앞면 상단: 다크 존에 KPI 카드 + 히어로 메시지 - 앞면 하단: 화이트 존에 가치 카드 + 기능 그리드 - 기능 카드에 컬러 좌측 보더 포인트 (오렌지/그린/퍼플/레드) - 다크 CTA 박스: 하단 풀 폭 다크 배경 + 오렌지 액센트 --- ### 3.9 v9 — Minimal White + Indigo **컨셉**: Apple/디자인 에이전시 스타일. 극도의 미니멀리즘 + 인디고 수직 액센트 라인 | 항목 | 값 | |------|------| | 배경 | `#FFFFFF` (순백) | | 주 액센트 | `#6366F1` (인디고) | | 카드 배경 | `#F8FAFC` (거의 투명한 그레이) | | 카드 보더 | `#F1F5F9` | | 본문 텍스트 | `#334155` (슬레이트-700) | | 보조 텍스트 | `#94A3B8` | | BI 로고 | `sam_bi_black.png` | **특징**: - 좌측 3pt 인디고 수직 액센트 라인 (풀 하이트) - 타이포그래피 중심 레이아웃 (아이콘 최소화) - 거의 보이지 않는 카드 구분 (barely-there cards) - 기능은 텍스트 로우 형태 (인디고 불릿 도트만) - 가격/프로세스도 텍스트 기반 미니멀 표현 --- ## 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 ├── v6/ ← Corporate Blue & White │ ├── slides/ (front, back, 1page) │ ├── convert-1page.cjs │ ├── convert-2page.cjs │ ├── sam-brochure-v6-dashboard-1page.pptx │ └── sam-brochure-v6-dashboard-2page.pptx ├── v7/ ← Warm Gray + Teal │ ├── slides/ (front, back, 1page) │ ├── convert-1page.cjs │ ├── convert-2page.cjs │ ├── sam-brochure-v7-dashboard-1page.pptx │ └── sam-brochure-v7-dashboard-2page.pptx ├── v8/ ← Two-Tone Navy/White Split │ ├── slides/ (front, back, 1page) │ ├── convert-1page.cjs │ ├── convert-2page.cjs │ ├── sam-brochure-v8-dashboard-1page.pptx │ └── sam-brochure-v8-dashboard-2page.pptx └── v9/ ← Minimal White + Indigo ├── slides/ (front, back, 1page) ├── convert-1page.cjs ├── convert-2page.cjs ├── sam-brochure-v9-dashboard-1page.pptx └── sam-brochure-v9-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 (v6~v9 추가)