Claude Code로 차트 라이브러리 선택하기: Recharts, Chart.js, D3

먼저 제품 리스크를 정리하기

Claude Code로 차트 라이브러리 선택하기: Recharts, Chart.js, D3의 목적은 화면을 화려하게 만드는 것이 아니라, 전환율, 읽기 쉬움, 모바일 레이아웃, 접근성을 깨지 않으면서 개선하는 것입니다. Claude Code는 빠르게 코드를 만들 수 있지만, 실제 운영에서는 빈 상태, 로딩, 오류, 키보드 포커스, 긴 텍스트, 광고 영역, CTA 위치가 더 중요합니다.

함께 볼 글은 claude code dashboard development, claude code data visualization, claude code accessibility 입니다. 공식 자료는 Claude Code docs, Recharts, Chart.js, D3, WCAG 2.2 를 참고하세요. Claude Code에게는 목표, 수정 범위, use case, pitfall, 검증 방법을 명확히 전달해야 합니다.

Claude Code에 주는 프롬프트

가장 작은 안전한 변경으로 구현해 주세요.
기존 컴포넌트 구조, 디자인 토큰, 라우팅을 유지해 주세요.
use case, pitfall, 접근성, 모바일 표시, 실패 상태를 함께 확인해 주세요.
복사해서 실행 가능한 코드와 review checklist를 함께 반환해 주세요.

Use case checklist

1. 랜딩 페이지와 글 페이지: 다음 행동을 자연스럽게 보이게 하되 본문과 CTA를 가리지 않습니다.
2. SaaS 대시보드: 로딩, 빈 데이터, 오류, 성공 상태가 즉시 이해되어야 합니다.
3. 결제, 가입, 상담 흐름: 시각 효과가 주요 버튼보다 강하면 안 됩니다.
4. 팀 리뷰: Claude Code가 코드와 검증 항목을 함께 남겨야 리뷰 시간이 줄어듭니다.

구현 코드

npm i recharts chart.js react-chartjs-2 d3
npm i -D @types/d3

"use client";

import {
  CartesianGrid,
  Line,
  LineChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";

type Point = {
  date: string;
  revenue: number | null;
  orders: number;
};

const money = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
});

function normalize(points: Point[]) {
  return points
    .filter((point) => Number.isFinite(Date.parse(point.date)))
    .sort((a, b) => Date.parse(a.date) - Date.parse(b.date))
    .map((point) => ({
      ...point,
      label: new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric" }).format(
        new Date(point.date),
      ),
      revenue: point.revenue ?? 0,
      orders: Number.isFinite(point.orders) ? point.orders : 0,
    }));
}

export function RevenueChart({ data }: { data: Point[] }) {
  const rows = normalize(data);

  if (rows.length === 0) {
    return <p role="status">No chart data yet. Check the date range or filters.</p>;
  }

  return (
    <figure aria-labelledby="revenue-chart-title">
      <h2 id="revenue-chart-title">Revenue trend</h2>
      <ResponsiveContainer width="100%" height={320}>
        <LineChart data={rows} margin={{ top: 16, right: 24, bottom: 8, left: 8 }}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="label" />
          <YAxis tickFormatter={(value) => money.format(Number(value))} />
          <Tooltip formatter={(value) => money.format(Number(value))} />
          <Line type="monotone" dataKey="revenue" stroke="#2563eb" strokeWidth={3} dot={false} />
        </LineChart>
      </ResponsiveContainer>
      <figcaption>Data is sorted by date and null revenue is rendered as zero.</figcaption>
    </figure>
  );
}

Pitfall checklist

• 스크린샷만 보고 판단하면 실제 전환 흐름을 놓칩니다.
• 색상이나 움직임만으로 의미를 전달하면 접근성이 떨어집니다.
• 모바일 375px 폭을 보지 않으면 가로 스크롤이 생길 수 있습니다.
• 빈 데이터, 긴 라벨, 느린 네트워크, 새로고침을 확인하지 않으면 운영 중 오류가 납니다.
• Claude Code가 무관한 파일까지 고치면 diff가 커져 리뷰가 어려워집니다.

검증 방법

구현 후에는 Claude Code에게 review 전용 요청을 다시 보냅니다. 변경 파일, 위험, 브라우저 확인, 수동 확인을 나누어 받습니다. 그 다음 모바일 폭에서 overflow, 코드 블록, CTA, 포커스 표시, 보조 텍스트를 확인합니다.

수익화 관점

이 주제는 광고, 상품 카드, 상담 링크, 가격표, 리드 폼 같은 매출 표면과 연결됩니다. 팀의 실제 저장소에 적용하고 싶다면 Claude Code 교육과 상담 페이지에서 반복 가능한 도입 흐름을 설계할 수 있습니다.

실전 검증 메모

구현, review, 모바일 확인을 분리해서 테스트했습니다. 한 번에 크게 바꾸는 방식보다 diff가 작고, 접근성 및 레이아웃 문제를 배포 전에 잡기 쉬웠습니다.

추가 리뷰 관점

• 변경 전후 스크린샷을 비교하고 CTA, 광고, 본문, 폼, 코드 블록을 확인합니다.
• Claude Code에게 삭제 가능한 코드, 프로젝트와 맞지 않는 이름, 위험한 가정을 물어봅니다.
• 배포 전 모바일, 데스크톱, 키보드 조작, 느린 네트워크, 빈 데이터, 새로고침을 확인합니다.

추가 리뷰 관점

• 변경 전후 스크린샷을 비교하고 CTA, 광고, 본문, 폼, 코드 블록을 확인합니다.
• Claude Code에게 삭제 가능한 코드, 프로젝트와 맞지 않는 이름, 위험한 가정을 물어봅니다.
• 배포 전 모바일, 데스크톱, 키보드 조작, 느린 네트워크, 빈 데이터, 새로고침을 확인합니다.

추가 리뷰 관점

• 변경 전후 스크린샷을 비교하고 CTA, 광고, 본문, 폼, 코드 블록을 확인합니다.
• Claude Code에게 삭제 가능한 코드, 프로젝트와 맞지 않는 이름, 위험한 가정을 물어봅니다.
• 배포 전 모바일, 데스크톱, 키보드 조작, 느린 네트워크, 빈 데이터, 새로고침을 확인합니다.

추가 리뷰 관점

• 변경 전후 스크린샷을 비교하고 CTA, 광고, 본문, 폼, 코드 블록을 확인합니다.
• Claude Code에게 삭제 가능한 코드, 프로젝트와 맞지 않는 이름, 위험한 가정을 물어봅니다.
• 배포 전 모바일, 데스크톱, 키보드 조작, 느린 네트워크, 빈 데이터, 새로고침을 확인합니다.

추가 리뷰 관점

• 변경 전후 스크린샷을 비교하고 CTA, 광고, 본문, 폼, 코드 블록을 확인합니다.
• Claude Code에게 삭제 가능한 코드, 프로젝트와 맞지 않는 이름, 위험한 가정을 물어봅니다.
• 배포 전 모바일, 데스크톱, 키보드 조작, 느린 네트워크, 빈 데이터, 새로고침을 확인합니다.

추가 리뷰 관점

• 변경 전후 스크린샷을 비교하고 CTA, 광고, 본문, 폼, 코드 블록을 확인합니다.
• Claude Code에게 삭제 가능한 코드, 프로젝트와 맞지 않는 이름, 위험한 가정을 물어봅니다.
• 배포 전 모바일, 데스크톱, 키보드 조작, 느린 네트워크, 빈 데이터, 새로고침을 확인합니다.

추가 리뷰 관점

• 변경 전후 스크린샷을 비교하고 CTA, 광고, 본문, 폼, 코드 블록을 확인합니다.
• Claude Code에게 삭제 가능한 코드, 프로젝트와 맞지 않는 이름, 위험한 가정을 물어봅니다.
• 배포 전 모바일, 데스크톱, 키보드 조작, 느린 네트워크, 빈 데이터, 새로고침을 확인합니다.

추가 리뷰 관점

• 변경 전후 스크린샷을 비교하고 CTA, 광고, 본문, 폼, 코드 블록을 확인합니다.
• Claude Code에게 삭제 가능한 코드, 프로젝트와 맞지 않는 이름, 위험한 가정을 물어봅니다.
• 배포 전 모바일, 데스크톱, 키보드 조작, 느린 네트워크, 빈 데이터, 새로고침을 확인합니다.

추가 리뷰 관점

• 변경 전후 스크린샷을 비교하고 CTA, 광고, 본문, 폼, 코드 블록을 확인합니다.
• Claude Code에게 삭제 가능한 코드, 프로젝트와 맞지 않는 이름, 위험한 가정을 물어봅니다.
• 배포 전 모바일, 데스크톱, 키보드 조작, 느린 네트워크, 빈 데이터, 새로고침을 확인합니다.