동일한 시나리오 데이터를 두 가지 방식으로 렌더링. 같은 burgundy 디자인 토큰, 같은 폰트 적용.
최선기본선악화최악
Option 1 · Canvas 2D 디테일 강화
시나리오 확률 분포
2026.04.30 기준 · 4 분기 시나리오
방식 Canvas 2D 직접 그리기 (~150 lines)의존성 0크기 +5 KB인터랙션 없음 (정적)
Option 3 · d3 SVG (자체 디자인 시스템)
시나리오 확률 분포
2026.04.30 기준 · 4 분기 시나리오 · hover 가능
방식 d3 v7 SVG 기반 (~200 lines)의존성 d3.js 인라인 (~80 KB gz)크기 +25 KB인터랙션 hover 강조 + 애니메이션
디자인 디테일 차이
요소Canvas 2Dd3 SVG
막대 그라디언트✅ 가능✅ 가능
미세 그리드✅ 직접 그림✅ d3.axis
한국어 폰트 통일✅✅
호버 툴팁❌ 직접 구현 부담✅ 단순
진입 애니메이션가능 (코드 추가)✅ d3.transition
라벨 충돌 회피❌ 직접 계산가능 (별도 라이브러리)
SVG 무손실 확대❌ 래스터✅
PDF/인쇄 품질중 (해상도 의존)✅ 무손실
차트 종류 확장코드량 폭증유연 (sankey/시계열/줌)
유지보수단순중 (d3 학습 필요)
비교 포인트.
위 두 차트 모두 같은 디자인 토큰 (burgundy 테마, Noto Serif/Sans KR) 을 적용했음. 정적인 모습은 거의 같지만, d3 쪽은 마우스를 막대에 올리면 강조 + 옆에 정보가 나타남. Canvas 2D 도 호버 인터랙션을 *직접* 구현할 수는 있지만 좌표 hit-test 코드가 따로 필요해 코드량이 늘어남.
핵심. 정적 결과물의 "전문성" 측면에선 두 방식 차이가 크지 않음. 차이가 두드러지는 건 ① 인터랙션 ② 차트 종류 다양성 ③ 무손실 확대 (PDF). 보고서가 주로 텔레그램·웹 정적 표시 용도라면 Canvas 2D 로 충분, 인터랙티브 대시보드 / PDF 인쇄 / 시계열 줌이 필요해지면 d3 가 적합.