Vizard - 마크다운 기반 데이터 시각화 도구
마크다운 문서에 CSV 데이터를 작성하면 자동으로 차트와 테이블로 렌더링되는 웹 서비스
“문서 작성 중 데이터를 시각화하기 어려운 문제를 해결하는 오픈소스 도구 / Frontend 개발 담당”
1. 🧾 페이지 기본 정보
- 기간: 2025.07 ~ 2025.08 (2개월)
- 역할: Frontend Developer (TypeScript + D3.js + Vite)
- 링크
2. 📌 프로젝트 개요
배경
- 마크다운으로 문서를 작성할 때 데이터를 시각화하려면 별도의 도구를 사용하고 이미지로 삽입해야 하는 번거로움
- 기존 방식은 데이터가 변경될 때마다 차트를 다시 생성하고 이미지를 교체해야 하는 비효율성
- GitHub README, 기술 문서, 블로그 포스트 등에서 간단한 데이터 시각화가 필요한 경우가 많지만 적합한 경량 도구 부재
목표
- 사용자 가치: 마크다운 작성 워크플로우를 중단하지 않고 즉시 데이터를 시각화
- 기술적 목표:
- 경량화된 라이브러리 구조 설계 (핵심 코드 378줄)
- Monorepo 기반의 확장 가능한 아키텍처 구축
- D3.js 기반의 커스터마이징 가능한 차트 렌더링 시스템
한 문단 요약
Vizard는 마크다운 코드 블록에 CSV 형식의 데이터를 입력하면 자동으로 막대 차트, 선 차트, 테이블로 렌더링해주는 오픈소스 웹 도구입니다. markdown-it 파서를 커스터마이징하여 CSV 코드 블록을 감지하고, D3.js로 동적 차트를 생성하며, 실시간 에디터와 프리뷰 기능을 제공합니다. MIT 라이선스로 공개되어 누구나 사용 및 기여할 수 있습니다.
3. 👥 팀 구성 및 담당 역할