피드로 돌아가기
Dev.toFrontend
원문 읽기
Vega-Lite 기반 1.6MB ESM 번들링을 통한 Zero-Dependency SVG 차트 렌더링 구현
Rendering Charts Beyond Mermaid's Reach with Vega-Lite and Embedding Them in Markdown (via LLM Skills)
AI 요약
Context
Mermaid의 구조적 다이어그램 중심 설계로 인한 통계적 데이터 시각화의 한계 노출. Scatter plot, Heatmap 등 고차원 데이터 표현을 위한 AI Agent용 전문 렌더링 엔진 필요성 대두.
Technical Solution
- Vite를 활용한 Vega-Lite 및 Vega 라이브러리의 단일 ESM 파일(~1.6 MB) 번들링으로 Node.js 단독 실행 환경 구축
- Vega-Lite JSON Spec에서 Vega Spec을 거쳐 SVG String으로 변환하는 선언적 컴파일 파이프라인 설계
- Puppeteer나 Canvas 같은 Native Dependency를 배제하여 설치 마찰을 제거한 Zero-setup 아키텍처 채택
- AI Agent가 '데이터 분석 → Spec 생성 → SVG 렌더링 → Markdown 임베딩'으로 이어지는 End-to-End 워크플로우 자동 수행
- 시스템 폰트 의존 및 정적 SVG 출력 방식을 통한 런타임 오버헤드 최소화 및 배포 단순화
실천 포인트
- 외부 의존성 제거가 최우선인 환경에서 라이브러리를 ESM으로 번들링하여 배포하는 전략 검토 - 상호작용(Interaction)보다 이식성(Portability)이 중요한 문서화 도구 설계 시 정적 SVG 포맷 우선 고려 - AI Agent의 도구 활용 능력을 극대화하기 위해 JSON 기반의 선언적 인터페이스(Declarative Interface) 제공