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