Claude Code로 D3.js 데이터 시각화 구현하기

실제 화면에서 시작하기

목표는 멋진 데모 코드가 아니라 모바일, 키보드, 긴 텍스트, 빈 데이터, 비즈니스 CTA가 있는 실제 화면에서 안정적인 구현입니다. Claude Code는 프롬프트에 경계가 담겨 있을 때 가장 유용합니다. 어떤 파일을 바꿔도 되는지, 무엇이 계속 보여야 하는지, 무엇에 키보드 지원이 필요한지, 결과를 어떻게 검증할지를 함께 전달하세요.

D3.js로 차트를 만들 때 처음 막히는 곳은 막대그래프를 그리는 방법 자체가 아닙니다. scaleBand, axisLeft, selection.join, transition 같은 부품이 어디서 연결되는지 이해하기 전에 샘플 코드를 잘라 붙이다가 깨뜨리는 것입니다. Claude Code는 여기서 도움이 됩니다. 기존 HTML, CSS, TypeScript, 데이터 형식을 읽힌 뒤 “이 데이터를 어느 축에 둘지”, “반응형으로 만들지”, “접근성을 어떻게 보장할지”까지 함께 설계할 수 있습니다.

함께 볼 글은 claude code chart library, claude code data visualization, claude code dashboard development 입니다. 공식 자료는 D3 getting started, D3 scales, D3 axes 를 참고하세요.

초보자를 위해 전체 그림 분해하기

D3.js의 기본은 “데이터를 픽셀로 변환해 SVG 요소로 그리는” 것입니다. 어려운 용어를 먼저 정리해 두면 Claude Code에 주는 지시도 구체적이 됩니다.

부품	쉬운 설명	이번 코드에서의 역할
selection	DOM 요소를 선택하는 조작	`#revenue-chart`에 도형을 추가
scale	수치나 카테고리를 화면 위 위치로 변환	월 이름을 가로, 매출을 세로 위치로 변환
axis	눈금과 라벨	가로축에 월, 세로축에 매출 표시
mark	실제로 보이는 도형	`rect`로 막대를 그림
join	데이터와 DOM 요소를 대응	데이터 수가 바뀌어도 막대를 갱신
transition	변화를 부드럽게 보이는 처리	막대가 아래에서 자라는 애니메이션

Claude Code 프롬프트

가장 작은 안전한 변경으로 구현해 주세요. 기존 라우트, 스타일 규칙, 주요 CTA를 유지하고 실행 가능한 코드, use case, pitfall, 모바일 확인, rollback 방법을 주세요.

Use case checklist

콘텐츠 사이트의 검색, 차트, 관련 글, CTA 개선.
SaaS 관리 화면의 리스트, 보드, 대시보드, 폼.
상품 페이지와 상담 페이지의 매출 동선 보호.
팀 리뷰 워크플로: Claude Code가 구현, 위험, 수동 확인 항목을 함께 반환하도록 합니다.

구현 예시

<figure>
  <svg id="revenue-chart" width="640" height="360" role="img" aria-labelledby="chart-title"></svg>
  <figcaption id="chart-title">Monthly revenue trend</figcaption>
</figure>

import * as d3 from "d3";

const data = [
  { month: "Jan", revenue: 12000 },
  { month: "Feb", revenue: 16400 },
  { month: "Mar", revenue: 15100 },
  { month: "Apr", revenue: 20100 },
];

const svg = d3.select("#revenue-chart");
const width = 640;
const height = 360;
const margin = { top: 24, right: 24, bottom: 44, left: 72 };

const x = d3
  .scaleBand()
  .domain(data.map((d) => d.month))
  .range([margin.left, width - margin.right])
  .padding(0.2);

const y = d3
  .scaleLinear()
  .domain([0, d3.max(data, (d) => d.revenue) ?? 0])
  .nice()
  .range([height - margin.bottom, margin.top]);

svg.append("g").attr("transform", `translate(0,${height - margin.bottom})`).call(d3.axisBottom(x));
svg.append("g").attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y));

svg
  .append("g")
  .selectAll("rect")
  .data(data)
  .join("rect")
  .attr("x", (d) => x(d.month) ?? 0)
  .attr("y", (d) => y(d.revenue))
  .attr("width", x.bandwidth())
  .attr("height", (d) => y(0) - y(d.revenue))
  .attr("fill", "#2563eb");

이 예시의 핵심은 scaleBand로 월 이름을 가로 위치에, scaleLinear로 매출을 세로 위치에 변환하고, selection.join으로 데이터와 rect를 대응시키는 것입니다. 데이터가 비었을 때 d3.max가 undefined를 돌려주면 ?? 0으로 안전하게 처리합니다. 실제 운영에서는 빈 배열일 때 “데이터가 아직 없습니다” 같은 대체 표시를 함께 준비하세요.

D3 흔한 실패와 함정

함정	일어나는 문제	대책
기존 SVG를 지우지 않고 다시 그림	화면 전환이나 재렌더마다 막대와 축이 늘어남	`container.replaceChildren()`이나 정리 함수를 먼저 넣음
`scale`의 책임을 모호하게 둠	수치를 직접 픽셀로 만들어 반응형이 깨짐	데이터 값은 반드시 `scaleLinear`나 `scaleBand`를 거침
`join` 없이 enter만으로 그림	데이터 갱신 시 옛 요소가 남음	`selection.data(...).join(...)`을 표준 패턴으로
Tooltip을 마우스 전용으로 만듦	키보드·스크린 리더 사용자에게 정보가 닿지 않음	`tabindex`, `aria-label`, `focus` 이벤트를 넣음
React·Astro 재렌더와 충돌	D3가 만진 DOM을 프레임워크가 덮어씀	D3가 만지는 영역을 하나의 컨테이너에 가둠
색만으로 의미를 전달	색각 특성이나 인쇄 시 차이를 알 수 없음	라벨, 선 종류, 수치, 범례를 함께 씀

Claude Code에 리뷰를 시킬 때는 “버그를 찾아 줘”는 약합니다. “재렌더 시 중복, 빈 배열, 0으로 나누기, 키보드 조작, 스크린 리더, 모바일 폭, 데이터 1000건일 때의 부하를 리뷰해 줘”처럼 관점을 나열하면 지적의 질이 올라갑니다.

Pitfall checklist

데스크톱 스크린샷만 보고 최적화하지 않습니다.
긴 텍스트, 표, SVG, 코드 블록이 가로 스크롤을 만들지 않게 합니다.
장식적인 상호작용 뒤에 CTA, 가격, 폼, 광고 영역을 숨기지 않습니다.
색이나 포인터 드래그에만 의존하지 말고 키보드와 텍스트 대안을 둡니다.
Claude Code가 무관한 파일을 다시 쓰지 않게 합니다. 리뷰 비용이 빠르게 올라갑니다.

검증 방법

build 후 375px 모바일 폭에서 overflow가 없는지 확인합니다. 코드 블록, CTA, 키보드 focus, 오류 상태를 함께 봅니다. Claude Code에게 두 번째 review pass를 요청해 변경 파일, 위험한 가정, 삭제 가능한 복잡도, rollback 단계를 받습니다.

수익화 관점

이런 개선을 팀 프로세스로 만들고 싶다면 Claude Code 교육과 상담을 참고하세요. 핵심은 더 나은 UI만이 아닙니다. 광고, 상품 카드, 상담 링크, 가격표, 폼을 지키면서 유지보수성을 높이는 것이 목적입니다.

추가 리뷰

공개 전에 변경 전후 페이지를 비교합니다. 비즈니스 행동이 여전히 분명한지, 레이아웃이 흔들리지 않는지, 다른 팀원이 리뷰할 수 있을 만큼 구현이 작은지 확인합니다. 개선을 한 문단으로 설명할 수 없다면 더 작은 패치로 나눕니다.

실전 검증 메모

모바일 폭, 코드 블록, CTA, 키보드 조작을 실제로 확인했습니다. D3 부품을 selection, scale, axis, join으로 나누어 이해하고 나니 Claude Code에 주는 지시도 구체적이 되었습니다. 구현과 리뷰를 나누는 방식이 한 번에 크게 바꾸는 것보다 더 안정적이었습니다.