src/data/
├── slide-1.xlsx ← 권장됨 — 여러 시트가 여러 JSON 키로 자동 변환됩니다
├── slide-2.csv ← 단일 테이블 데이터
...

window.__DATA_3__ = {
kpis: [{label: 'DAU', value: 12.4, unit: '万'}, {label: 'ARR', value: 48, unit: 'M USD'}],
trend: [{week: 'W1', na: 12.1, eu: 8.4}, {week: 'W2', na: 12.4, eu: 8.6}]
...```

**xlsx 의존성**: `pip install openpyxl`
(csv / json은 표준 라이브러리를 사용하므로 의존성이 없습니다). 자세한 내용은 `references/architecture.md`를 참조하세요.

데이터 디렉토리

`src/data/`는 `quickstart.sh`가 초기화 시 프로젝트별로 생성합니다. 샘플 데이터는 미리 설정되어 있지 않습니다.

- 렌더링 코드에 데이터를 하드코딩하지 마세요 → `data/slide-N.json`에 넣으세요
- 단일 슬라이드의 HTML이 200줄을 초과하지 않도록 하세요
- 8가지 글꼴 크기 레벨(`var(--fs-*)`)만 사용하세요
; 임의로 새 크기를 추가하지 마세요 - 항목이 5개 이상인 파이 차트는 불가합니다 (100% 누적 막대 그래프를 사용하세요)
- 색상을 하드코딩하지 마세요 → `var(--accent*)` 테마 변수를 사용하세요
- 모든 슬라이드는 레이블/제목/부제목의 삼요소를 갖춰야 하며, 부제목에는 핵심 숫자가 포함되어야 합니다
- 디자인 캔버스는 1600×900으로 고정되어 있으니 vw/vh를 사용하지 마세요
- 항상 `src/`만 편집하고 빌드 출력물은 절대 건드리지 마세요 - 각 슬라이드는 하나의 질문에 답하며 하나의 시각적 기준점(visual anchor)을 가집니다
- 전체 덱은 리듬감(높음/낮음 밀도의 교차)이 필요합니다
**카드 경계는 엄격하게 정렬되어야 합니다**: grid`1fr 1fr`
+ `flex:1 1 0; min-height:0`
+ 유연한 간격 채우기(flexible spacer)를 사용하여 차이를 흡수하세요. 절대 높이를 하드코딩하지 마세요

자세한 내용은 `references/`를 참조하세요.

- ✅ 월별 / 분기별 비즈니스 보고서
- ✅ 데이터 팀을 위한 내부 / 외부 덱
- ✅ 프로젝트 제안서, 프로젝트 회고록
- ✅

페이지별 파일 분리 · 데이터 물리적 분리 · ECharts · 5가지 테마 세트 · 원클릭 PDF 내보내기

**추천 시스템 계층 구조 (Recommended System Layered Architecture)** (`landscape-map`

템플릿, 순수 CSS 구조도. ECharts에 의존하지 않음):

**산업 지도 전경 (Industry Map Panorama)** (3단계 중첩 + 로고 벽; 민감 데이터 대신 공개 엔티티 사용):

**인체 실루엣 포트레이트 (Human Silhouette Portrait)** (`human-portrait`

템플릿 — 데이터 기반으로 한 번에 생성: 컨설팅 보고서 스타일의 정장 재킷 실루엣 + 선 자동 연결을 통해 주변 태그를 고정 배치; 'OpenAI IPO' 덱, OpenClipart CC0에서 출처):

중앙 실루엣은 깔끔하게 유지 — 실루엣 몸통에 가시적인 색점(실제 SVG 요소)으로 부위를 표시하고, 점선 연결선이 이 색점에서 슬라이드 가장자리의 태그 카드까지 자동으로 연결됩니다.

labels 데이터만 작성하면 됩니다 (각 태그는 신체 부위 이름, 예: head / heart / legs / shoulder / rightHand에 바인딩). 실루엣, 좌표, 색점, 연결선이 모두 자동 계산되므로 — 실루엣을 직접 그리거나, 좌표를 보정하거나, 연결선을 수동으로 배치할 필요가 없습니다. 배경 강조 원도 불필요합니다. 사용자 프로필, 의인화된 역량 지도, 직업 위험 히트맵, 팀 픽토그램 등에 적합합니다.

**가치 흐름 가로축 (Value Flow Horizontal Axis)** (`value-chain`

템플릿 — 엔티티 산업 프레임워크 다이어그램: 가로형 가치 사슬 + 자체 보유/외부 조달 배지 + 사슬을 따라 그라데이션 색상, 순수 CSS 전 정적):

**세로형 · 모바일 / 샤오홍슈 / 위챗 공공 계정** (`portrait`

포맷 — 시나리오 기반, 낮은 콘텐츠 밀도; **하나의 내용으로 여러 플랫폼 규격에 맞춰 정확하게 내보내기**: 샤오홍슈 3:4 / 공공 계정 긴 이미지 / 위챗 친구 전용 4:5 / 모바일 전체 화면 9:16 등):

'데이터 보고 → 웹 PPT' 과정을 자동화한 템플릿. **두 가지 사용법**:

**Claude Code Skill로 사용하기** — 이 저장소를 `~/.claude/skills/ppt-report-generator/`에 배치하여, Claude가 이 규격에 맞춰 자동으로 보고서를 작성하게 합니다.
**독립적인 엔지니어링 템플릿으로 사용하기** — `assets/`를 `src/`로 복사한 후, `python3 build.py`를 실행하여 단일 HTML을 합성합니다.

PPT 도구(Keynote / Feishu 문서 / Google Slides)로 데이터 보고서를 만들 때 어려운 점들이 있습니다:

- ❌ 숫자 하나 수정 → 전체 그림 재작업 → 반나절 소요
- ❌ 상하 페이지 글자 크기 불일치, 카드 정렬 오류, 색상 조합 난잡
- ❌ 스타일을 바꾸고 싶다면? 매 페이지 수동으로 다시 작업해야 함
- ❌ Claude / GPT가 특정 페이지를 수정해 주길 원한다면? 전체 문서를 통째로 보내야 하므로 토큰 폭발

`ppt-report-generator`는 엔지니어링 방식으로 해결합니다:

- ✅ **페이지당 = 3개의 작은 파일** (HTML + CSS + JS). 한 페이지를 수정해도 200줄 이하의 작은 파일 3개만 건드리면 됩니다. - ✅
- **데이터는 Excel / CSV 사용 가능** (JSON도 지원). build가 자동으로 JSON으로 변환하여 주입합니다. 다음 업데이트 시에는 Excel만 수정하면 되고, 렌더링 코드는 전혀 건드릴 필요가 없습니다. - ✅
- **5가지 사전 설정 테마**, 오른쪽 상단에서 원클릭 전환 — 비즈니스 다크 블루 / 테크 다크 모드 / 따뜻한 색상 비즈니스 / 밝은 미니멀리즘 / 초간단 단색 - ✅
- **ECharts 차트 + 데이터 형태 결정표**. 어떤 데이터를 어떤 차트로 사용해야 하는지 알려줍니다 (파이 차트는 5개 이상 금지) - ✅
- **8단계 글자 크기 / 4단계 글자 굵기 / '황금 11가지' 핵심 개념** — 카드 경계가 엄격하게 정렬되어, 더 이상 '보기만 해도 지저분하지 않습니다.' - ✅
- **템플릿 단일 파일 즉시 사용 가능**. build.py가 인라인 `<style>`/`<script>`를 자동으로 추출합니다. 템플릿을 복사해 붙여넣기만 하면 바로 사용할 수 있습니다 (스타일 블록을 별도의 CSS 파일로 수동 분리할 필요 없음) - ✅
- **원클릭 PDF 내보내기** (playwright + img2pdf, 13.33×7.5 inch 16:9 표준)

**9가지 페이지 템플릿** (`assets/slides-templates/`):
`:kpi-overview` — 다중 섹션 × 다수 카드 총괄 개요
`:two-country` — 두 객체 좌우 비교 (KPI + 지표 테이블)
`:three-phase` — 3단계 타임라인 + 다수 차트
`:multi-trend` — 다수 객체 추이 비교
`:supply-bars` — 분류 막대 + 추이 선 그래프
`:landscape-map` — 산업 지도 / 경쟁사 전경 (12 그리드, 3단계 중첩 + 로고 벽; 순수 CSS 전 정적, JS는 로고 주입만)
`:matrix-2x2` — 맥킨지 / BCG 풍 2×2 전략 매트릭스 (4 사분면 + 버블 위치 + 3가지 전략 통찰; 순수 CSS, ECharts 스캐터 사용 안 함)
`:human-portrait`

—**컨설팅 보고서 수준의 인체 실루엣 이미지 및 데이터 기반 표현** (정장 차림 남성 + 긴 머리의 어깨를 드러낸 전문직 여성, OpenClipart CC0; 중앙 실루엣 + 신체 부위별 색점(실제 SVG 요소) + 색점에서 주변 라벨 카드까지 자동으로 연결되는 선). **라벨 데이터만 작성**하면 됩니다 (각 라벨은 head / heart / legs / shoulder / rightHand와 같은 신체 부위에 바인딩됨). 실루엣, 좌표, 색점, 연결선이 모두 자동 계산되므로 수동으로 실루엣을 그리거나 좌표를 보정하거나 선을 배치할 필요가 없습니다; **배경 없는 하이라이트 원**은 실루엣을 깔끔하게 유지합니다. 사용자 프로필 / 인격화 역량 지도 / 직업 위험도 분석 / 팀 피그마(pictogram) 등에 적용 가능합니다. 실루엣 경로(path) / 부위 좌표 / 렌더링 로직은 `scripts/silhouette.js`에 미리 설정되어 있습니다.

(`window.SILHOUETTE`
+`injectSilhouette()`
+`renderHumanPortrait()`
), `renderHumanPortrait()`를 통해 한 번 렌더링하면 모든 슬라이드에서 해당 값을 호출하여 사용할 수 있습니다 (`value-chain`).

—**새로운 ⭐ 가치 흐름(Value Flow) 가로축 템플릿 (landscape-skeleton의 B 골격)**— 실물 산업 / 중공업 분야(우주 항공, 에너지, 제조, 소비재 등)에서 '가치가 어떻게 사슬을 따라 흐르는지'를 표현할 수 있습니다. 5~6개 단계 카드가 가로로 연결되며 ▶ 각 섹션은 핵심 숫자 + 주요 활동 + 자체 보유/외부 구매 배지를 포함하고, 색상은 사슬을 따라 점진적으로 진해집니다. 순수 CSS 전용 정적 구조이며 JavaScript가 필요 없습니다.

**5가지 사전 설정 테마**: modern-light / dark-tech / warm-business / brand-blue / minimal-mono (우측 상단에서 원클릭 전환, localStorage에 저장)
**11개 참고 문서** (`references/`)