voidlight00/dptd-harness/dptd-motion-web

DPTD Motion Web Layer

레퍼런스(Anthropic "When AI builds itself")의 핵심은 색이 아니라 개념의 변화를 시간축 위 단일 시각 변수의 변화로 매핑한 설계다. 이 스킬은 그 원리만 흡수해 DPTD에 모션 웹을 추가한다. 브랜드 색(잉크블루)과 Kami 정체성은 유지한다.

기획 정본: ~/dptd-automation/docs/2026-06-13-motion-web-upgrade-plan.md

위치

• 토큰: ~/dptd-automation/templates/kami-default/motion-tokens.json
• 자산: ~/dptd-automation/templates/kami-default/web/web-base.css, web/web-motion.js
• 빌드: ~/dptd-automation/templates/kami-default/build_web.sh <project_root>
• 게이트: ~/dptd-automation/templates/kami-default/verify_web.sh <project_root>

원칙 (HARD)

1. PDF를 대체하지 않는다. 모션 웹은 병렬 산출물(publish/index.html)이다. PDF·Obsidian은 그대로.
2. 소스 재사용. pdf-source.html(SVG 인라인·용어사전·목차 보장)을 입력으로 변환한다. 콘텐츠를 새로 만들지 않는다.
3. 점진적 향상. JS 없으면 .reveal 기본 가시 — 콘텐츠 손실 0. head inline script는 IntersectionObserver 지원 + not reduced-motion 일 때만 html.js를 부여한다.
4. reduced-motion 존중. prefers-reduced-motion: reduce → 모든 모션 즉시 최종 상태.
5. 자체완결. 외부 http(s) script/img/link 0. CSS/JS 인라인. 로고만 상대참조(./brand-logo.png).
6. 의미 있는 모션만. 부유·무한 반짝임·의미 없는 패럴랙스 금지(motion-tokens.json forbidden).
7. fail-closed. verify_web.sh exit 0 전에는 웹 산출을 완료로 보고하지 않는다.

모션 기법 (재현 카탈로그)

신규 모션 아키타입 3종

기존 Kami 14종(정적)에 더하는 시간축 아키타입. 정적 SVG로도 완결(PDF fallback), 웹에서만 모션이 얹힌다.

• amplification-ladder — 단계적 능력/복잡도 증가. 동일 레인 N행, 한 변수만 점증. 웹: 행 stagger.
• particle-density-field — 규모/강도/집약. 셀 격자 채움. 웹: 셀 순차 등장.
• flow-connector-pipeline — 인과·파이프라인. 노드 + 커넥터. 웹: 커넥터 draw-on.

레퍼런스의 "성장하는 별" = particle-density-field, "5단계 플로우" = amplification-ladder + flow-connector-pipeline 합성으로 일반화한다. 주제(알고리즘 수렴·시스템 확장·학습 곡선 등) 무관하게 매핑한다.

실행

# 전제: build_pdf.sh 로 pdf-source.html 이 이미 생성됨
bash ~/dptd-automation/templates/kami-default/build_web.sh   <project_root>
bash ~/dptd-automation/templates/kami-default/verify_web.sh  <project_root>   # exit 0 필수

산출: publish/index.html. Vercel은 publish/를 정적 서빙하면 된다.

motion-harness 결합 (2026-06-13 — 고퀄 모션 spec)

DPTD의 히어로/핵심 시각자료 모션은 motion-harness(~/motion-harness/, iOS Lottie SSoT MR1~MR11)의 설계 규율로 만든다. 매체 경계: 하네스의 iOS Swift 산출물은 DPTD에서 쓰지 않는다(웹/PDF 아님). 가져오는 것은 모션 spec + 안티슬롭 게이트다.

흐름:

/motion new "<시각자료 모션 설명>"           # 하네스: brief→storyboard→plan→token-map, verify_motion exit 0
  → motion-bridge.py <run_dir> <dptd_project>  # → <project>/visuals/motion-config.json
  → build_web.sh <dptd_project>                # motion-config 읽어 hero-canvas.js 구동(accent/build_ms/loop)
  → verify_web.sh <dptd_project>               # exit 0

• 브리지: ~/dptd-automation/templates/kami-default/motion-bridge.py — 하네스 brief.recommended_pacing_ms.enter→build_ms, token-map accent/structure→색, storyboard loop scene→loop, plan.marker_plan→markers 로 변환.
• 렌더러: web/hero-canvas.js(spark-cellular canvas), data-color/data-build-ms/data-cell 로 spec 주입.
• PDF는 모션 미지원 → 최종 프레임 정적 SVG fallback.
• 하네스 게이트(verify_motion)가 spec의 안티패턴(bounce/glow/sparkle 등)을 차단하므로, DPTD 모션도 AI-slop·과장 모션이 게이트로 걸러진다.

인터랙티브 explorable (최상위 등급 — 2026-06-13)

교육 시각화 등급: 정적 다이어그램 < 수동 모션 < 인터랙티브 explorable(학습자가 조작 → 개념이 반응 = 최고 이해. Distill/Ciechanowski 급). DPTD 문서의 가장 어려운 1~2개 핵심 개념에만 bespoke explorable을 넣는다(전부 아님 — "작게").

• 라이브러리: ~/dptd-automation/templates/kami-default/web/explorables/<type>.js — 자체완결 mount 모듈, Kami 팔레트(양피지+잉크블루 단일강조+검증오차만 error red), 외부폰트/외부참조 0. window.DPTDExplorables['<type>'].mount(el, {data}).
• overfit — 슬라이더로 모델 복잡도 → 학습오차↓ 검증오차↑ 곡선이 노이즈 암기(과최적화). 실제 최소제곱 다항회귀.
• 선언형 배선: 프로젝트 visuals/explorables.json = [{type, anchor, title, caption, data}]. anchor는 본문 heading id. build_web.sh가 해당 heading 뒤에 위젯 + 인라인 JS + mount를 주입한다. JS 없으면 <noscript> 안내(콘텐츠 손실 없음).
• PDF fallback: explorable은 웹 전용 → PDF엔 ?freeze/{freeze:N} 고정 프레임을 headless 캡처한 PNG를 figure로 넣는다(웹은 라이브, 인쇄는 정지컷).
• 검증: verify_web.sh 그대로(외부참조 0 강제). explorable은 결정론 render(deg)라 freeze로 헤드리스 캡처 가능.
• 원칙: explorable도 "조작 변수 = 개념 변수" 1:1. 장식 슬라이더 금지.

QA 기준

• 모션이 "개념의 변화 = 단일 시각 변수의 변화"에 대응하는가? 장식이면 제거.
• JS를 끄거나 reduced-motion에서도 전체 내용이 보이는가? (게이트 코드 4·5로 강제)
• 외부 참조 0, SVG 개수 보존? (게이트 코드 3·6)
• 색은 Kami 토큰만 유지했는가? 테라코타 등 레퍼런스 색을 베끼지 않았는가?