init: technical-visualization-haness 하네스 설계

2026-07-24 14:02:50 +09:00
parent 09d7c594da
commit f43e909162
117 changed files with 10150 additions and 1 deletions
@@ -0,0 +1,21 @@
+# Design direction
+
+## 문제 진단
+
+0.2.0 예제는 SVG 기능을 적극 사용했지만, 문서 다이어그램보다 편집형 인포그래픽에 가까웠습니다. 큰 제목, 부제, focal glow, metric card, 하단 결론 띠가 그림의 논리보다 먼저 보였습니다. 이는 SVG의 한계가 아니라 composition 정책의 문제입니다.
+
+## 목표
+
+- 기술 블로그 본문 사이에 자연스럽게 들어가는 그림
+- 별도의 설명 없이도 화살표와 경계의 논리가 읽히는 그림
+- 다이어그램 밖의 본문과 역할이 겹치지 않는 그림
+- 작성 도구가 draw.io, Excalidraw, Figma, PowerPoint 중 무엇이든 동일하게 적용할 수 있는 문법
+
+## 적용한 방향
+
+1. SVG 캔버스를 내용 경계에 가깝게 자르고 빈 장식 영역을 없앴습니다.
+2. 제목·부제·footer·takeaway를 제거했습니다.
+3. grayscale을 기본으로 두고 강조색을 제한했습니다.
+4. 시스템 구조에는 box·document·server·database 같은 익숙한 도형을 사용했습니다.
+5. 시간 정보는 timeline, 호출 순서는 sequence, 선언 상태는 reconciliation loop처럼 관습적인 문법으로 분리했습니다.
+6. `composition.json`에 `forbidden_visible_elements`를 추가해 모델이 포스터형 장식을 생성하지 못하도록 했습니다.