AI 요약
MDV(Markdown Data & Visualization)는 데이터 문서, 대시보드, 슬라이드를 마크다운 환경에서 효율적으로 작성하기 위해 설계된 새로운 오픈소스 포맷입니다. 엄격한 CommonMark 사양을 기반으로 하며, YAML 프론트매터와 펜스 블록(Fenced blocks) 등을 추가하여 데이터 시각화 기능을 강화했습니다. 사용자는 별도의 프로그래밍 지식 없이도 chart나 stat 블록을 활용해 매출 현황이나 고객 수 증감 같은 KPI 카드를 즉시 생성할 수 있습니다. 특히 렌더링된 HTML 결과물은 인라인 SVG를 사용하여 별도의 자바스크립트 엔진 없이도 모든 브라우저에서 완벽하게 작동합니다. 현재 v1 프리릴리즈 단계로, VS Code 확장 프로그램과 CLI 도구를 통해 실시간 미리보기 및 PDF 내보내기 기능을 지원하여 문서화 작업의 생산성을 극대화합니다.
핵심 인사이트
- 확장된 문법 체계: CommonMark를 기반으로 YAML 프론트매터, 데이터/시각화용 펜스 블록, 레이아웃용 컨테이너(:::), 자동 목차(TOC) 생성 등 4가지 핵심 요소를 추가했습니다.
- 런타임 독립성: 생성된 HTML은 차트를 인라인 SVG로 포함하고 있어 별도의 JS 런타임이 필요 없으며, 이는 보안성과 로딩 속도 측면에서 큰 장점을 가집니다.
- 데이터 연결성: 인라인 CSV 및 JSON 데이터뿐만 아니라
./data/sales.csv와 같은 외부 데이터셋 참조 기능을 지원하여 동적인 보고서 작성이 가능합니다. - 기술 요구 사양: 최신 환경인 Node.js 버전 20 이상에서 작동하며, 10개의 예제 파일을 통해 바 차트, 라인 차트 등 모든 기능을 즉시 테스트할 수 있습니다.
주요 디테일
- 시각화 문법:
chart type=line data=sales x=month y=revenue와 같이 직관적인 인자 전달 방식을 사용하여 전문적인 그래프를 구현합니다. - KPI 카드 기능:
stat블록을 통해 'Total revenue ($2.06M, +14%)'와 같은 핵심 지표와 변동 수치(delta)를 세련된 디자인으로 출력합니다. - 레이아웃 제어:
::: columns및::: callout컨테이너를 사용해 복잡한 선택자(selectors)나 클래스(classes) 없이도 다단 구성 및 강조 영역을 설정할 수 있습니다. - 도구 지원: CLI를 통한
render및preview명령어와 VS Code용 'Side-by-side' 라이브 미리보기 기능을 제공하여 편집 경험을 최적화했습니다. - 테마 시스템: 기본 제공 테마와 사용자 정의 'Named Styles'를 통해 전체 문서의 일관된 룩앤필(Look and Feel)을 유지할 수 있습니다.
향후 전망
- 로드맵 수립: 2026년 4월 18일자 설계 명세서(specs)에 따라 향후 로드맵과 비목표(non-goals)가 명확히 정의되어 있어, 기능적 일관성을 유지하며 확장될 것으로 보입니다.
- 문서화 도구의 세대교체: 정적 사이트 생성기(SSG)와 데이터 시각화 도구 사이의 간극을 메우며, 데이터 과학자 및 엔지니어들을 위한 경량 대시보드 솔루션으로 자리 잡을 가능성이 높습니다.
출처:hackernews