Start

시작하기

설치부터 첫 차트, App Router client boundary, opt-ui compatibility 경로 정리까지 실제 프로젝트 도입 순서로 정리합니다.

reopt designUpdated Aug 2, 2026

1. 설치

선택 설정: 공통 기반 스킬

opt-charts 전용 설치 스킬은 아직 없습니다. opt-ui-install은 공통 Tailwind·theme 기반만 준비하며, opt-charts 패키지는 아래 수동 명령으로 별도 설치해야 합니다.

소비자 프로젝트 루트에서 스킬을 에이전트 런타임에 설치합니다. 이미 설치했다면 이 명령은 생략할 수 있습니다.

bash

npx skills add reopt-ai/reopt-skills/opt-ui-install

설치 후 에이전트에게 아래처럼 요청하세요. 스킬은 현재 설치 상태를 확인해 신규 설치와 업그레이드를 구분합니다.

text

opt-ui-install 스킬로 opt-charts가 사용할 opt-ui theme 기반을 설정하고 검증해줘. opt-charts 패키지는 설치하지 마.

스킬은 소비자 프로젝트의 AGENTS.md(없으면 CLAUDE.md)에 reopt marker 블록을 멱등하게 갱신하고, 설치된 패키지 버전의 문서를 읽은 뒤 typecheck·doctor 등 해당 모듈의 검증을 실행합니다.

아래 패키지 설치 명령은 스킬을 사용할 수 없거나 설정 과정을 직접 통제해야 할 때의 수동 대안입니다. 스킬 소스와 최신 지원 범위 확인.

@reopt-ai/opt-charts는 npmjs.org에 공개 배포됩니다. 패키지는 Recharts 기반 visuals, SVG 기반 분석 시각화, chart-specific shells를 함께 제공합니다. 아래는 수동 설치 경로이며 별도 registry나 인증 토큰 설정은 필요하지 않습니다.

bash

npm install @reopt-ai/opt-charts
# or
bun add @reopt-ai/opt-charts

패키지	공개 npm registry에서 토큰 없이 설치합니다. peerDependencies는 react와 react-dom ^19입니다.
스타일	별도 CSS import는 없습니다. opt-ui token 이름을 쓰므로 소비자 앱의 theme 변수와 함께 렌더링합니다.
Next.js 경계	차트 leaf wrapper를 client component로 두면 Recharts 측정, tooltip, legend 상호작용이 안정적입니다.
접근성	차트마다 aria-label을 넣고, 복잡한 대시보드는 aria-describedby로 텍스트 요약을 연결합니다.

2. 첫 번째 차트

LineChart, BarChart, AreaChart, ComparisonChart는 공통 모델을 사용합니다. 행 데이터는 ChartDataPoint[], 시리즈 정의는 ChartSeriesDef[]로 둡니다. 기본 x축 키는 name입니다.

tsx

"use client";

import {
  LineChart,
  type ChartDataPoint,
  type ChartSeriesDef,
} from "@reopt-ai/opt-charts";

const data: ChartDataPoint[] = [
  { name: "1월", revenue: 124, cost: 72 },
  { name: "2월", revenue: 156, cost: 81 },
  { name: "3월", revenue: 188, cost: 94 },
  { name: "4월", revenue: 214, cost: 108 },
];

const series: ChartSeriesDef[] = [
  { dataKey: "revenue", name: "매출", color: "hsl(221, 83%, 53%)" },
  { dataKey: "cost", name: "비용", color: "hsl(349, 89%, 60%)" },
];

export function RevenueTrend() {
  return (
    <LineChart
      data={data}
      series={series}
      height={280}
      showLegend
      aria-label="월별 매출과 비용 추세"
      tooltipOptions={{
        valueFormatter: (value) =>
          Number(value).toLocaleString("ko-KR", {
            maximumFractionDigits: 0,
          }),
      }}
    />
  );
}

3. Import boundary

신규 코드는 opt-charts에서 직접 import합니다. opt-ui visuals chart export는 기존 소비자를 깨지 않기 위한 compatibility 경로이며, 신규 문서와 예제의 source of truth는 opt-charts입니다.

tsx

// 신규 코드의 기본 경로
import { BarChart, PieChart, TrendChart } from "@reopt-ai/opt-charts";

// 번들 경계를 명확히 나누고 싶을 때
import { LineChart } from "@reopt-ai/opt-charts/visuals";
import { ReportWidget } from "@reopt-ai/opt-charts/shells";

// 기존 opt-ui chart re-export는 compatibility 경로로만 유지
// import { LineChart } from "@reopt-ai/opt-ui/visuals";

4. Next.js App Router

서버 페이지에서 데이터를 가져오고, 차트만 leaf client component로 분리합니다. Recharts tooltip, legend, ResponsiveContainer 측정이 브라우저 동작에 의존하기 때문입니다.

tsx

// app/dashboard/revenue-chart.tsx
"use client";

import { AreaChart } from "@reopt-ai/opt-charts";

export function RevenueChart({ data, series }: RevenueChartProps) {
  return (
    <AreaChart
      data={data}
      series={series}
      height={320}
      gradient
      showLegend={series.length > 1}
      aria-label="매출 추세"
    />
  );
}

선택 설정: 공통 기반 스킬

소비자 프로젝트 루트에서 스킬을 에이전트 런타임에 설치합니다. 이미 설치했다면 이 명령은 생략할 수 있습니다.

bash

npx skills add reopt-ai/reopt-skills/opt-ui-install

설치 후 에이전트에게 아래처럼 요청하세요. 스킬은 현재 설치 상태를 확인해 신규 설치와 업그레이드를 구분합니다.

text

opt-ui-install 스킬로 opt-charts가 사용할 opt-ui theme 기반을 설정하고 검증해줘. opt-charts 패키지는 설치하지 마.

아래 패키지 설치 명령은 스킬을 사용할 수 없거나 설정 과정을 직접 통제해야 할 때의 수동 대안입니다. 스킬 소스와 최신 지원 범위 확인.

bash

npm install @reopt-ai/opt-charts
# or
bun add @reopt-ai/opt-charts

패키지	공개 npm registry에서 토큰 없이 설치합니다. peerDependencies는 react와 react-dom ^19입니다.
스타일	별도 CSS import는 없습니다. opt-ui token 이름을 쓰므로 소비자 앱의 theme 변수와 함께 렌더링합니다.
Next.js 경계	차트 leaf wrapper를 client component로 두면 Recharts 측정, tooltip, legend 상호작용이 안정적입니다.
접근성	차트마다 aria-label을 넣고, 복잡한 대시보드는 aria-describedby로 텍스트 요약을 연결합니다.

2. 첫 번째 차트

tsx

"use client";

import {
  LineChart,
  type ChartDataPoint,
  type ChartSeriesDef,
} from "@reopt-ai/opt-charts";

const data: ChartDataPoint[] = [
  { name: "1월", revenue: 124, cost: 72 },
  { name: "2월", revenue: 156, cost: 81 },
  { name: "3월", revenue: 188, cost: 94 },
  { name: "4월", revenue: 214, cost: 108 },
];

const series: ChartSeriesDef[] = [
  { dataKey: "revenue", name: "매출", color: "hsl(221, 83%, 53%)" },
  { dataKey: "cost", name: "비용", color: "hsl(349, 89%, 60%)" },
];

export function RevenueTrend() {
  return (
    <LineChart
      data={data}
      series={series}
      height={280}
      showLegend
      aria-label="월별 매출과 비용 추세"
      tooltipOptions={{
        valueFormatter: (value) =>
          Number(value).toLocaleString("ko-KR", {
            maximumFractionDigits: 0,
          }),
      }}
    />
  );
}

3. Import boundary

tsx

// 신규 코드의 기본 경로
import { BarChart, PieChart, TrendChart } from "@reopt-ai/opt-charts";

// 번들 경계를 명확히 나누고 싶을 때
import { LineChart } from "@reopt-ai/opt-charts/visuals";
import { ReportWidget } from "@reopt-ai/opt-charts/shells";

// 기존 opt-ui chart re-export는 compatibility 경로로만 유지
// import { LineChart } from "@reopt-ai/opt-ui/visuals";

4. Next.js App Router

tsx

// app/dashboard/revenue-chart.tsx
"use client";

import { AreaChart } from "@reopt-ai/opt-charts";

export function RevenueChart({ data, series }: RevenueChartProps) {
  return (
    <AreaChart
      data={data}
      series={series}
      height={320}
      gradient
      showLegend={series.length > 1}
      aria-label="매출 추세"
    />
  );
}

시작하기

1. 설치

선택 설정: 공통 기반 스킬

2. 첫 번째 차트

3. Import boundary

4. Next.js App Router

5. 다음 문서

핵심 개념

데이터 모델

Production readiness

시작하기

1. 설치

선택 설정: 공통 기반 스킬

2. 첫 번째 차트

3. Import boundary

4. Next.js App Router

5. 다음 문서

핵심 개념

데이터 모델

Production readiness