데이터 시각화 라이브러리, 뭘 써야 할까? (2026 ver)

대시보드 프로젝트 할 때마다 고민되시죠? "이번엔 뭐 쓰지?" 저도 맨날 갈아타는 유목민이었는데, 이제 좀 정리가 되는 것 같습니다. 용도별로 딱 정해드립니다.

사실 차트 라이브러리 선택은 "가장 좋은 것"이 아니라 "우리 상황에 가장 맞는 것"을 고르는 게 핵심입니다. 프로젝트 요구사항, 데이터 규모, 팀 역량에 따라 답이 완전히 달라집니다.

1. "난 그냥 빨리 예쁜 차트 만들고 싶어" -> Recharts

React 개발자라면 Recharts가 국룰입니다. 컴포넌트 기반이라 직관적이고, 커스터마이징도 꽤 자유롭습니다. SVG 기반이라 확대해도 안 깨지고 깔끔합니다. 문서화도 잘 되어 있어서 복붙만 잘하면 10분 컷 가능.

Recharts의 강점

React 네이티브: JSX로 차트를 선언하기 때문에 React 개발자에게 학습 비용이 거의 없습니다. 컴포넌트 조합으로 차트를 구성합니다.
반응형 기본 지원: ResponsiveContainer로 감싸면 부모 컨테이너 크기에 맞게 자동으로 리사이즈됩니다.
풍부한 툴팁: 커스텀 툴팁을 React 컴포넌트로 만들 수 있습니다. 차트 위에 마우스를 올렸을 때 보이는 정보를 자유롭게 디자인할 수 있죠.
애니메이션 내장: 차트가 처음 렌더링될 때 부드러운 애니메이션이 기본 적용됩니다.

Recharts의 한계

하지만 데이터 포인트가 1,000개를 넘어가면 체감상 느려지기 시작합니다. SVG DOM 노드가 많아지면 브라우저가 버거워하거든요. 또한 3D 차트, 트리맵, 선버스트 같은 특수 차트 유형은 지원하지 않습니다.

적합한 상황: 일반 관리자 대시보드, SaaS 분석 페이지, 간단한 보고서. 데이터 포인트 1,000개 이하.

2. "엄청난 대용량 데이터를 보여줘야 해" -> ECharts

데이터 포인트가 몇만 개 넘어간다? Recharts는 버벅대기 시작합니다. 이때는 캔버스(Canvas) 기반인 Apache ECharts가 답입니다. 중국 바이두에서 만든 거라 좀 꺼려질(?) 수도 있는데, 성능 하나는 괴물입니다. 줌인, 줌아웃 부드럽게 되고 인터랙션 기능이 엄청 많습니다.

ECharts가 빛나는 순간

대용량 데이터: 10만 개 이상의 데이터 포인트도 거뜬히 소화합니다. Canvas 렌더링이라 DOM 노드 부담이 없거든요.
지도 시각화: 세계 지도, 한국 지도 등 지리적 데이터 시각화가 내장되어 있습니다. 별도 라이브러리 없이 지도 차트를 만들 수 있습니다.
복합 차트: 한 차트 안에서 바, 라인, 산점도를 자유롭게 조합할 수 있습니다.
테마 시스템: 다크 테마, 커스텀 테마를 JSON 한 줄로 적용할 수 있습니다.

React에서 ECharts 쓰기

ECharts 자체는 프레임워크 독립적이지만, React에서 쓸 때는 echarts-for-react 래퍼를 추천합니다. 옵션 객체만 전달하면 React 컴포넌트로 동작합니다.

주의할 점은 ECharts의 옵션 구조가 상당히 복잡하다는 겁니다. "선언적"이긴 하지만, 세부 설정이 많아서 처음에는 공식 예제를 많이 참고해야 합니다. echarts.apache.org의 예제 갤러리가 정말 잘 되어 있으니 적극 활용하세요.

적합한 상황: 실시간 모니터링 대시보드, IoT 데이터, 금융 데이터, 지리 데이터.

3. "세상에 없는 나만의 예술적인 차트를 만들 거야" -> D3.js

이건 라이브러리가 아니라 그냥 도구 상자입니다. 초보자에겐 비추. 러닝 커브가 에베레스트산입니다. 하지만 자유도는 무한대죠. 뉴욕타임스 인터랙티브 기사 같은 거 만들고 싶으면 배워야 합니다. 근데 일반 웹서비스 개발하다가 이거 쓰면 일정 못 맞춥니다. (경험담)

D3를 써야 하는 경우

D3는 "차트 라이브러리"가 아니라 "데이터 기반 DOM 조작 프레임워크"입니다. 이 차이를 이해해야 합니다.

완전히 커스텀한 시각화: 기존 라이브러리의 차트 유형에 없는, 완전히 새로운 형태의 시각화를 만들어야 할 때.
인터랙티브 데이터 스토리텔링: 스크롤에 따라 차트가 변형되고, 데이터가 흘러가는 인터랙티브 콘텐츠.
**데이터 아트<strong>: 데이터를 예술적으로 표현해야 하는 경우. 전시, 미디어 아트 등.

D3 + React: 공존의 기술

D3와 React를 함께 쓸 때 가장 큰 문제는 "DOM 관리 주도권 다툼"입니다. 둘 다 DOM을 직접 조작하려고 하거든요.

데이터 시각화: 차트 라이브러리 유목민 생활 청산