voidlight00/dptd-harness/dptd-infographic-system

DPTD Infographic System

DPTD의 인포그래픽은 장식이 아니라 이해를 빠르게 만드는 도구다. /gi를 사용할 때도 먼저 시각화 목적과 정보 구조를 고정한다.

시각화 유형

일관 스타일 (Kami Default, 2026-05-23 도입)

기본값: 양피지(#f5f4ed) 배경 + 잉크블루(#1B365D) 단일 강조 + warm gray 위계 + 인라인 SVG. 색 팔레트는 ~/dptd-automation/templates/kami-default/svg-palette.json 의 allowlist만 사용.

• 색 사용:
• 배경: #f5f4ed (양피지) 또는 #faf9f5 (ivory 카드)
• 강조 단일: #1B365D (잉크블루, surface 5% 이하)
• tint: #EEF2F7, #E4ECF5, #D0DCE9, #D6E1EE
• 텍스트 위계: #141413 → #3d3d3a → #504e49 → #6b6a64
• border: #e8e6dc, #e5e3d8 (warm beige)
• error 전용: #B53333
• 금지: 그라데이션(linear/radial), rgba(), hard drop shadow, italic, font-weight: bold(500 고정·라벨 600), cool gray(b - r >= 8), 다른 chromatic.
• 폰트: 인라인 SVG의 <text>는 font-family="Apple SD Gothic Neo, AppleMyungjo, Charter, Georgia, serif", font-weight="500" 기본, 라벨만 600.
• 출력: 외부 <img> 참조 없이 인라인 SVG 직접 삽입.
• 브랜드 로고는 후처리 단계에서만 합성(PDF 표지 + footer). SVG 안에 가짜 로고·임의 워터마크 생성 금지.
• 캡션은 짧고 정확하게. 본문 단락이 못 전달하는 정확한 라벨·수치만 SVG에 둔다.

인라인 SVG 매핑 워크플로우

1. visuals/svg/<NN>_<slug>.svg 로 작성 (Kami 팔레트 준수)
2. visuals/infographic_manifest.json 에 {id, svg, anchor_id, caption, diagram_type} 등록
3. dptd-publisher가 build_pdf.sh 실행 시 자동 인라인 삽입

스키마: ~/dptd-automation/templates/kami-default/infographic_manifest.schema.json

블랙앤화이트 학습 이미지 템플릿

모든 DPTD 시각자료는 먼저 아래 6개 템플릿 중 하나로 매핑한다. 템플릿 밖의 자유형 이미지는 사용자가 명시적으로 요청한 경우에만 허용한다.

공통 규격:

• 배경은 흰색 또는 아주 옅은 회색이다.
• 선은 검정 1.5~3px 범위로 통일한다.
• 그림 내부 한글은 3~7단어짜리 짧은 라벨만 허용한다.
• 그림 내부 문장이 길어지면 실패로 보고 caption으로 옮긴다.
• 그림마다 하단 또는 우측에 캡션을 붙일 여백을 둔다.
• 최종본 우하단에는 후처리된 브랜드 로고 워터마크가 들어간다.

/gi 프롬프트 생성 규칙

1. 먼저 visuals/visual_strategy.md에 전체 스타일 시스템을 쓴다.
2. 이미지마다 purpose, sourceSection, caption, prompt, ratio, outputPath, rawPath, watermarkedPath, watermark를 manifest에 기록한다.
3. prompt-enhancer와 photo-prompts-master 7축 규칙을 적용한다.
4. GPT Image의 텍스트 오류를 감안해, 이미지 내부 텍스트를 최소화한다.
5. 생성 후에는 실제 파일 경로, revised prompt, 사용 위치를 기록한다.
6. 원본 PNG는 visuals/generated/raw/에 보존하고, 본문/PDF/웹/옵시디언에는 우하단 브랜드 워터마크가 합성된 visuals/generated/watermarked/ 파일만 사용한다.
7. DPTD_LOGO가 설정된 경우에만 워터마크를 합성한다. 설정됐는데 파일이 없으면 생성 phase를 실패로 처리하고, 미설정이면 워터마크 없이 통과시킨다.

/gi 기본 프롬프트 골격

Template: <concept-map | process-lane | compare-split | layer-stack | check-card | analogy-scene>
Subject: <전문 개념을 시각화한 학습 도해>
Context: Korean technical guide figure, Feynman-style, ADHD-friendly hierarchy, minimal black-and-white learning diagram
Composition: clean editorial grid, clear focal flow, large negative space, minimal labels, caption-ready, textbook figure clarity
Rendering: crisp vector-like black ink line illustration, flat white background, soft gray support blocks, no gradients
Typography: sparse Korean labels only, 3-7 words per label, no long sentences inside image
Style reference: Swiss editorial diagram, Apple technical note clarity, monochrome textbook figure
Negative: no garbled text, no unreadable letters, no generated watermark, no generated logo, no clutter, no fake UI, no neon, no glossy 3D
Post-process: add only the the configured brand logo watermark at the bottom-right after generation

모션 웹 레이어 (2026-06-13)

정적 인라인 SVG(위 14종/6템플릿)는 PDF·Obsidian의 기본이자 fallback이다. 그 위에 웹 전용 모션 레이어를 병렬 산출한다. 정본: dptd-motion-web 스킬 + ~/dptd-automation/docs/2026-06-13-motion-web-upgrade-plan.md.

원리: 개념의 변화를 시간축 위 단일 시각 변수의 변화로 매핑한다(Anthropic RSI 페이지 기법 흡수, 색은 미흡수). 의미 없는 모션 금지.

시간축 아키타입 3종(정적 SVG로 완결, 웹에서만 모션):

SVG 작성 시 모션 친화 규칙: 커넥터는 <line>/<path>(draw-on 대상), 카드/노드는 그룹 가능한 <rect>/<text>로. 첫 <rect>는 전체 캔버스 배경(모션 제외). 색·폰트는 기존 Kami 룰 그대로.

빌드: build_web.sh → publish/index.html, 게이트: verify_web.sh exit 0.

QA 기준

• 그림만 보고도 개념의 방향성이 보이는가?
• 본문과 다르게 과장한 요소가 없는가?
• 같은 프로젝트 내 스타일이 일관적인가?
• 블랙앤화이트 미니멀 기본값에서 벗어났다면 사용자가 승인한 이유가 manifest에 남아 있는가?
• 우하단 브랜드 워터마크가 모든 최종 이미지에 있으며, raw 원본과 watermarked 최종본 경로가 모두 manifest에 기록됐는가?
• PDF/웹/옵시디언에서 캡션과 연결되는가?