> ## Documentation Index
> Fetch the complete documentation index at: https://docs.coreweave.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 맞춤형 차트 개요

> Vega 시각화로 W&B 프로젝트에서 맞춤형 차트 만들기

export const AriaChatBubbles = ({prompt, response}) => {
  const [isDark, setIsDark] = useState(false);
  const [promptCopied, setPromptCopied] = useState(false);
  useEffect(() => {
    const root = document.documentElement;
    const sync = () => setIsDark(root.classList.contains('dark'));
    sync();
    const obs = new MutationObserver(sync);
    obs.observe(root, {
      attributes: true,
      attributeFilter: ['class']
    });
    return () => obs.disconnect();
  }, []);
  useEffect(() => {
    if (!promptCopied) {
      return undefined;
    }
    const timeout = setTimeout(() => setPromptCopied(false), 2000);
    return () => clearTimeout(timeout);
  }, [promptCopied]);
  const copyText = text => {
    navigator.clipboard.writeText(text).then(() => setPromptCopied(true)).catch(console.error);
  };
  const userBg = isDark ? '#363C44' : '#F8F8F8';
  const userBorder = isDark ? '#4B535C' : '#DFE0E2';
  const textColor = isDark ? '#E8E8E9' : '#2B3038';
  const iconColor = isDark ? '#8F949E' : '#79808A';
  const iconHoverBg = isDark ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.05)';
  const bubbleText = {
    fontSize: '15px',
    color: textColor,
    overflowWrap: 'anywhere'
  };
  const bubbleBase = {
    maxWidth: '85%'
  };
  const copyIcon = promptCopied ? <svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{
    color: '#FCBC32'
  }}>
      <path d="M20 6 9 17l-5-5" />
    </svg> : <svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
    </svg>;
  return <div aria-label="ARIA chat example" className="not-prose flex flex-col gap-3" role="group">
      {}
      <div className="flex w-full justify-end">
        <div className="flex w-fit items-start gap-1 rounded-2xl py-2 pl-3 pr-1.5" style={{
    ...bubbleBase,
    backgroundColor: userBg,
    border: `1px solid ${userBorder}`
  }}>
          <div className="min-w-0 flex-1 hyphens-auto whitespace-pre-wrap" style={bubbleText}>
            {prompt}
          </div>
          <button type="button" className="mt-0.5 shrink-0 rounded-lg p-1.5 cursor-pointer" style={{
    color: iconColor,
    background: 'transparent'
  }} onMouseEnter={e => {
    e.currentTarget.style.backgroundColor = iconHoverBg;
  }} onMouseLeave={e => {
    e.currentTarget.style.backgroundColor = 'transparent';
  }} onClick={() => copyText(prompt)} aria-label="Copy user prompt">
            {copyIcon}
          </button>
        </div>
      </div>
      {}
      <div className="flex w-full justify-start">
        <div className="w-fit rounded-2xl py-2 px-3" style={{
    ...bubbleBase,
    border: '1px solid #CDF4F7'
  }}>
          <div className="hyphens-auto whitespace-pre-wrap" style={bubbleText}>
            {response}
          </div>
        </div>
      </div>
    </div>;
};

맞춤형 차트를 사용하면 W\&B가 제공하는 기본 시각화를 넘어 로깅된 데이터를 원하는 방식으로 정확하게 시각화할 수 있습니다. 정밀도-재현율 곡선, 맞춤형 히스토그램, 여러 실험의 오버레이처럼 기본 제공 패널에서 다루지 않는 관계, 분포 또는 모델 평가 메트릭을 그려야 할 때 사용하세요.

W\&B 프로젝트에서 맞춤형 차트를 만드세요. 임의의 데이터 table을 로깅하고 원하는 방식으로 정확하게 시각화하세요. [Vega](https://vega.github.io/vega/)로 글꼴, 색상, 도구 설명의 세부 사항을 제어하세요.

* 코드: 예시 [Colab 노트북](https://tiny.cc/custom-charts)을 사용해 보세요.
* 비디오: [워크스루 비디오](https://www.youtube.com/watch?v=3-N9OV6bkSM)를 시청하세요.
* 예시: 간단한 Keras 및 Sklearn [데모 노트북](https://colab.research.google.com/drive/1g-gNGokPWM2Qbc8p1Gofud0_5AoZdoSD?usp=sharing).

<Frame>
  <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/supported_charts.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=bb143b9d057cd857f52a611ee43c68ac" alt="vega.github.io/vega에서 지원하는 차트" max-width="90%" width="2634" height="588" data-path="products/wandb/_media/supported_charts.png" />
</Frame>

<h2 id="how-it-works">
  작동 방식
</h2>

1. **데이터 로깅**: 스크립트에서 [설정](/ko/products/wandb/track/config)과 요약 데이터를 로깅하세요.
2. **차트 사용자 지정**: [GraphQL](https://graphql.org) 쿼리로 로깅된 데이터를 가져오세요. 시각화 문법인 [Vega](https://vega.github.io/vega/)로 쿼리 결과를 시각화하세요.
3. **차트 로깅**: 스크립트에서 `wandb.plot_table()`로 자체 프리셋을 호출하세요.

<Frame>
  <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/pr_roc.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=efc4dc6aeb7c1819fc65f13bdf810524" alt="PR 및 ROC 곡선" width="1114" height="422" data-path="products/wandb/_media/pr_roc.png" />
</Frame>

예상한 데이터가 보이지 않으면 선택한 run에 찾고 있는 열이 로깅되지 않았을 수 있습니다. 차트를 저장하고 run table로 돌아가 **눈** 아이콘을 사용해 선택한 run을 확인하세요.

<h2 id="log-charts-from-a-script">
  스크립트에서 차트 로깅하기
</h2>

다음 섹션에서는 트레이닝 스크립트에서 차트를 직접 로깅하는 두 가지 방법을 설명합니다. 일반적인 시각화를 제공하는 기본 제공 차트 프리셋과 자체 Vega 사양을 재사용할 수 있는 맞춤형 프리셋입니다.

<h3 id="built-in-presets">
  내장 프리셋
</h3>

W\&B는 스크립트에서 직접 로깅할 수 있는 여러 기본 제공 차트 프리셋을 제공합니다. 여기에는 선형 플롯, 산점도, 막대 차트, 히스토그램, PR 곡선 및 ROC 곡선이 포함됩니다.

<Tabs>
  <Tab title="선형 플롯">
    `wandb.plot.line()`

    임의의 x축과 y축에 순서대로 연결된 점(x,y)의 목록인 맞춤형 선형 플롯을 로깅하세요.

    ```python theme={"system"}
    with wandb.init() as run:
      data = [[x, y] for (x, y) in zip(x_values, y_values)]
      table = wandb.Table(data=data, columns=["x", "y"])
      run.log(
          {
              "my_custom_plot_id": wandb.plot.line(
                  table, "x", "y", title="Custom Y vs X Line Plot"
              )
          }
      )
    ```

    선형 플롯은 임의의 두 차원에 대한 곡선을 로깅합니다. 두 값 목록을 서로 대응시켜 그리는 경우, 두 목록의 값 개수가 정확히 일치해야 합니다(예를 들어, 각 점에는 x와 y가 있어야 합니다).

    <Frame>
      <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/app_ui-line_plot.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=cabfa82b081566a0de6f27fbe0339148" alt="맞춤형 선형 플롯" width="1930" height="1228" data-path="products/wandb/_media/app_ui-line_plot.png" />
    </Frame>

    [예시 보고서를 확인하세요](https://forge.coreweave.com/wandb/wandb/plots/reports/Custom-Line-Plots--VmlldzoyNjk5NTA). 또는 [예시 Google Colab 노트북을 사용해 보세요](https://tiny.cc/custom-charts).
  </Tab>

  <Tab title="산점도">
    `wandb.plot.scatter()`

    임의의 두 축 x와 y에 점 (x, y)의 목록을 표시하는 맞춤형 산점도를 로깅하세요.

    ```python theme={"system"}
    with wandb.init() as run:
      data = [[x, y] for (x, y) in zip(class_x_prediction_scores, class_y_prediction_scores)]
      table = wandb.Table(data=data, columns=["class_x", "class_y"])
      run.log({"my_custom_id": wandb.plot.scatter(table, "class_x", "class_y")})
    ```

    이를 사용하여 임의의 두 차원에 산점도의 점을 로깅할 수 있습니다. 두 값 목록을 서로 대응시켜 그리는 경우, 목록의 값 개수가 정확히 일치해야 합니다(예를 들어, 각 점에는 x와 y가 있어야 합니다).

    <Frame>
      <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/app_ui-demo_scatter_plot.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=983038a223cb182045b4280b2ea42334" alt="산점도" width="2194" height="940" data-path="products/wandb/_media/app_ui-demo_scatter_plot.png" />
    </Frame>

    [예시 보고서를 확인하세요](https://forge.coreweave.com/wandb/wandb/plots/reports/Custom-Scatter-Plots--VmlldzoyNjk5NDQ) 또는 [예시 Google Colab 노트북을 사용해 보세요](https://tiny.cc/custom-charts).
  </Tab>

  <Tab title="막대 차트">
    `wandb.plot.bar()`

    맞춤형 막대 차트(레이블이 지정된 값 목록을 막대로 표시)를 로깅하세요:

    ```python theme={"system"}
    with wandb.init() as run:
      data = [[label, val] for (label, val) in zip(labels, values)]
      table = wandb.Table(data=data, columns=["label", "value"])
      run.log(
          {
              "my_bar_chart_id": wandb.plot.bar(
                  table, "label", "value", title="Custom Bar Chart"
              )
          }
      )
    ```

    이를 사용하여 임의의 막대 차트를 로깅할 수 있습니다. 목록에 있는 레이블과 값의 개수는 정확히 일치해야 합니다(예를 들어, 각 데이터 포인트에는 둘 다 있어야 합니다).

    <Frame>
      <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/demo_bar_plot.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=384008b16e360f00de5d354110d2c6ea" alt="막대 차트 데모" width="659" height="579" data-path="products/wandb/_media/demo_bar_plot.png" />
    </Frame>

    [예시 보고서를 확인](https://forge.coreweave.com/wandb/wandb/plots/reports/Custom-Bar-Charts--VmlldzoyNzExNzk)하거나 [예시 Google Colab 노트북을 사용해 보세요](https://tiny.cc/custom-charts).
  </Tab>

  <Tab title="히스토그램">
    `wandb.plot.histogram()`

    맞춤형 히스토그램을 로깅하세요(값 목록을 개수나 발생 빈도에 따라 구간으로 분류합니다). 예를 들어, 예측 신뢰도 점수 목록(`scores`)이 있고 그 분포를 시각화하려는 경우를 가정해 보겠습니다:

    ```python theme={"system"}
    with wandb.init() as run:
      data = [[s] for s in scores]
      table = wandb.Table(data=data, columns=["scores"])
      run.log({"my_histogram": wandb.plot.histogram(table, "scores", title=None)})
    ```

    이를 사용하여 임의의 히스토그램을 로깅할 수 있습니다. `data`는 행과 열로 구성된 2차원 배열을 지원하기 위한 목록의 목록입니다.

    <Frame>
      <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/app_ui-demo_custom_chart_histogram.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=d6a64f7b06e6c5e4eb359d0566f2d2bd" alt="맞춤형 히스토그램" width="1252" height="558" data-path="products/wandb/_media/app_ui-demo_custom_chart_histogram.png" />
    </Frame>

    [예시 보고서를 확인](https://forge.coreweave.com/wandb/wandb/plots/reports/Custom-Histograms--VmlldzoyNzE0NzM)하거나 [예시 Google Colab 노트북을 사용해 보세요](https://tiny.cc/custom-charts).
  </Tab>

  <Tab title="PR 곡선">
    `wandb.plot.pr_curve()`

    한 줄로 [정밀도-재현율 곡선](https://scikit-learn.org/stable/modules/generated/sklearn.metrics.precision_recall_curve.html#sklearn.metrics.precision_recall_curve)을 생성하세요:

    ```python theme={"system"}
    with wandb.init() as run:
      plot = wandb.plot.pr_curve(ground_truth, predictions, labels=None, classes_to_plot=None)

      run.log({"pr": plot})
    ```

    코드에서 다음 항목에 액세스할 수 있으면 언제든지 이를 로깅할 수 있습니다:

    * 예시 집합에 대한 모델의 예측 점수(`predictions`).
    * 해당 예시의 정답 레이블(`ground_truth`).
    * `labels` (선택): 레이블 또는 클래스 이름의 목록(레이블 인덱스 0이 고양이, 1이 개, 2가 새 등을 의미하는 경우 `labels=["cat", "dog", "bird"...]`).
    * `classes_to_plot` (선택): 플롯에서 시각화할 레이블의 부분 집합(목록 형식 유지).

    <Frame>
      <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/demo_average_precision_lines.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=5ca37e1a93a51e5e431ed2e5176aadf7" alt="정밀도-재현율 곡선" width="852" height="441" data-path="products/wandb/_media/demo_average_precision_lines.png" />
    </Frame>

    [예시 보고서를 확인](https://forge.coreweave.com/wandb/wandb/plots/reports/Plot-Precision-Recall-Curves--VmlldzoyNjk1ODY)하거나 [예시 Google Colab 노트북을 사용해 보세요](https://colab.research.google.com/drive/1mS8ogA3LcZWOXchfJoMrboW3opY1A8BY?usp=sharing).
  </Tab>

  <Tab title="ROC 곡선">
    `wandb.plot.roc_curve()`

    한 줄로 [ROC 곡선](https://scikit-learn.org/stable/modules/generated/sklearn.metrics.roc_curve.html#sklearn.metrics.roc_curve)을 생성하세요:

    ```python theme={"system"}
    with wandb.init() as run:
      # ground_truth는 정답 레이블 목록이고, predictions는 예측 점수 목록입니다
      ground_truth = [0, 1, 0, 1, 0, 1]
      predictions = [0.1, 0.4, 0.35, 0.8, 0.7, 0.9]

      # ROC 곡선 그래프를 생성합니다
      # labels는 클래스 이름의 선택 목록이고, classes_to_plot은 시각화할 레이블의 선택 부분집합입니다
      plot = wandb.plot.roc_curve(
          ground_truth, predictions, labels=None, classes_to_plot=None
      )

      run.log({"roc": plot})
    ```

    코드에서 다음 항목에 액세스할 수 있으면 언제든지 이를 로깅할 수 있습니다:

    * 예시 집합에 대한 모델의 예측 점수 (`predictions`).
    * 해당 예시의 정답 레이블 (`ground_truth`).
    * `labels` (선택): 레이블 또는 클래스 이름의 목록 (레이블 인덱스 0이 고양이, 1 = 개, 2 = 새 등을 의미하면 `labels=["cat", "dog", "bird"...]`).
    * `classes_to_plot` (선택): 그래프에 시각화할 레이블의 부분 집합 (목록 형식 유지).

    <Frame>
      <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/app_ui-demo_custom_chart_roc_curve.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=130ec1646d32f67f396b1cd9d645cd36" alt="ROC 곡선" width="1338" height="788" data-path="products/wandb/_media/app_ui-demo_custom_chart_roc_curve.png" />
    </Frame>

    [예시 보고서를 확인하세요](https://forge.coreweave.com/wandb/wandb/plots/reports/Plot-ROC-Curves--VmlldzoyNjk3MDE). 또는 [예시 Google Colab 노트북을 사용해 보세요](https://colab.research.google.com/drive/1_RMppCqsA8XInV_jhJz32NCZG6Z5t1RO?usp=sharing).
  </Tab>
</Tabs>

<h3 id="custom-presets">
  맞춤형 프리셋
</h3>

기본 제공 프리셋을 수정하거나 새 프리셋을 만든 다음 차트를 저장하세요. 차트 ID를 사용하여 스크립트에서 해당 맞춤형 프리셋으로 직접 데이터를 로깅하세요. [예시 Google Colab 노트북을 사용해 보세요](https://tiny.cc/custom-charts).

```python theme={"system"}
# 시각화할 열을 포함하는 table을 생성하세요
table = wandb.Table(data=data, columns=["step", "height"])

# table의 열을 차트의 필드에 매핑하세요
fields = {"x": "step", "value": "height"}

# table을 사용하여 새 맞춤형 차트 사전 설정에 데이터를 채우세요
# 직접 저장한 차트 사전 설정을 사용하려면 vega_spec_name을 변경하세요
my_custom_chart = wandb.plot_table(
    vega_spec_name="carey/new_chart",
    data_table=table,
    fields=fields,
)
```

<Frame>
  <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/custom_presets.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=7649b471b0f085152be14cb2f949749f" alt="맞춤형 차트 프리셋" max-width="90%" width="2946" height="728" data-path="products/wandb/_media/custom_presets.png" />
</Frame>

<h2 id="log-data">
  데이터 로깅
</h2>

맞춤형 차트를 시각화하기 전에 스크립트에서 차트 편집기가 쿼리할 수 있는 형식으로 기본 데이터를 로깅해야 합니다. 스크립트에서 다음 데이터 유형을 로깅하고 맞춤형 차트에서 사용할 수 있습니다:

* **설정**: 실험의 초기 설정(독립 변수)입니다. 트레이닝 시작 시 `wandb.Run.config`에 키로 로깅한 모든 명명된 필드가 포함됩니다. 예를 들어, `wandb.Run.config.learning_rate = 0.0001`입니다.
* **요약**: 트레이닝 중 로깅된 단일 값(결과 또는 종속 변수)입니다. 예를 들어, `wandb.Run.log({"val_acc" : 0.8})`입니다. `wandb.Run.log()`를 통해 트레이닝 중 이 키에 여러 번 쓰면 요약은 해당 키의 최종 값으로 설정됩니다.
* **이력**: 로깅된 스칼라의 전체 시계열은 `history` 필드를 통해 쿼리에 사용할 수 있습니다.
* **summaryTable**: 여러 값의 목록을 로깅해야 하는 경우 `wandb.Table()`을 사용하여 해당 데이터를 저장한 다음 맞춤형 패널에서 쿼리하세요.
* **historyTable**: 이력 데이터를 확인해야 하는 경우 맞춤형 차트 패널에서 `historyTable`을 쿼리하세요. `wandb.Table()`을 호출하거나 맞춤형 차트를 로깅할 때마다 해당 step의 이력에 새 table을 생성합니다.

<h3 id="log-a-custom-table">
  맞춤형 table 로깅하기
</h3>

`wandb.Table()`을 사용하여 데이터를 2차원 배열로 로깅하세요. 일반적으로 이 table의 각 행은 하나의 데이터 포인트를 나타내며, 각 열은 시각화하려는 각 데이터 포인트의 관련 필드나 차원을 나타냅니다. 맞춤형 패널을 설정할 때 `wandb.Run.log()`에 전달한 키 이름(다음 예시에서는 `custom_data_table`)을 통해 전체 table에 액세스할 수 있습니다. 개별 필드에는 열 이름(`x`, `y`, `z`)을 통해 액세스할 수 있습니다. 실험 중 여러 단계에서 table을 로깅할 수 있습니다. 각 table의 최대 크기는 10,000행입니다. [예시 Google Colab 노트북을 사용해 보세요](https://tiny.cc/custom-charts).

```python theme={"system"}
with wandb.init() as run:
  # 맞춤형 데이터 table 로깅하기
  my_custom_data = [[x1, y1, z1], [x2, y2, z2]]
  run.log(
      {"custom_data_table": wandb.Table(data=my_custom_data, columns=["x", "y", "z"])}
  )
```

<h2 id="customize-the-chart">
  차트 사용자 지정하기
</h2>

데이터를 로깅한 후, W\&B 앱에서 가져올 로깅된 값과 표시 방법을 선택하여 차트를 구축하세요. 새 맞춤형 차트를 추가하여 시작한 다음, 쿼리를 편집하여 표시된 run에서 데이터를 선택하세요. 쿼리는 [GraphQL](https://graphql.org)을 사용하여 run의 설정, 요약, 이력 필드에서 데이터를 가져옵니다.

설명을 바탕으로 맞춤형 차트를 만들도록 ARIA에 요청할 수도 있습니다. 프로젝트 Workspace에서 ARIA를 열고 원하는 차트를 설명하세요:

<AriaChatBubbles prompt="표시된 run의 검증 정확도와 트레이닝 손실을 비교하는 산점도를 만들고, 학습률에 따라 점의 색상을 지정하세요." response="X축에 검증 정확도, Y축에 트레이닝 손실을 표시하고, config에 있는 각 run의 학습률에 따라 점의 색상을 지정하는 맞춤형 차트 패널을 추가하겠습니다." />

<h3 id="build-the-graphql-query">
  GraphQL 쿼리 구축하기
</h3>

맞춤형 차트 편집기는 프로젝트 Workspace나 보고서에서 선택한 run에 대해 GraphQL 쿼리를 실행합니다. 쿼리 편집기에서 필요한 필드를 추가하세요. `config`, `summary`, `history`, `summaryTable`, `historyTable` 중에서 선택할 수 있으므로 대부분의 경우 쿼리를 처음부터 작성할 필요가 없습니다.

쿼리의 각 소스는 서로 다른 로깅 데이터에 매핑됩니다:

* **설정**은 [run 설정](/ko/products/wandb/track/config) 값(하이퍼파라미터 및 기타 설정)을 가져옵니다.
* **요약**은 [요약](/ko/products/wandb/track/log) 값을 가져옵니다. 기본적으로 `wandb.Run.log()`로 로깅한 키의 요약에는 해당 키에 마지막으로 기록된 값이 저장됩니다. 다른 집계 방식을 사용하려면 `"min"`, `"max"`, `"mean"`, `"best"`, `"none"` 중 하나를 지정하여 `wandb.Run.define_metric(..., summary=...)`을 호출하세요. 값을 직접 설정하려면 `wandb.Run.summary["key"] = value`를 대입하세요.
* **이력**은 run 이력에서 스칼라 시계열을 가져옵니다(예: 각 step의 `loss` 또는 `accuracy`). 최종 숫자뿐 아니라 전체 곡선이 필요할 때는 **이력**을 사용하세요.
* \*\*`summaryTable`\*\*은 run 요약에서 [`wandb.Table`](/ko/products/wandb/ref/python/data-types/table)을 불러옵니다. 필요한 table이 run에 단일 스냅샷으로 저장되어 있을 때 사용하세요(예: 마지막에 한 번 로깅하는 혼동 행렬).
* \*\*`historyTable`\*\*은 run 이력에서 [`wandb.Table`](/ko/products/wandb/ref/python/data-types/table)을 불러옵니다. `wandb.Run.log()`로 table을 로깅할 때마다 해당 table이 포함된 새 step이 run 이력에 추가됩니다. table이 시간에 따라 변경되거나 맞춤형 차트 편집기에서 step 선택기를 활성화하려면 \*\*`historyTable`\*\*을 사용하세요([맞춤형 차트에 step 슬라이더를 표시하려면 어떻게 하나요?](/ko/support/models/articles/how-do-you-show-a-step-slider-in-a-custo) 참조).

**`summaryTable`** 및 \*\*`historyTable`\*\*의 경우 \*\*`tableKey`\*\*를 [`wandb.Table`](/ko/products/wandb/ref/python/data-types/table) 내부의 열 이름이 아니라 `wandb.Run.log()` 내부에서 사용한 딕셔너리 키로 설정하세요.

다음 예시는 일반적인 사용 사례를 다룹니다:

* 각 step에서 로깅하는 table의 열을 시각화하려면(예: PR 곡선) \*\*`historyTable`\*\*을 추가하고, \*\*`tableKey`\*\*를 로깅한 키(예: `pr_curve`)로 설정한 다음 **Chart fields**에서 table 열을 매핑하세요. [맞춤형 차트 튜토리얼](/ko/products/wandb/app/features/custom-charts/walkthrough)을 참조하세요.
* 요약에 저장된 table의 열을 시각화하려면(예: 합성 히스토그램의 클래스 점수) \*\*`summaryTable`\*\*을 추가하고, \*\*`tableKey`\*\*를 해당 키로 설정하세요(튜토리얼에서는 `class_scores` 사용). [보너스: 합성 히스토그램](/ko/products/wandb/app/features/custom-charts/walkthrough#bonus-composite-histograms)을 참조하세요.
* 트레이닝 단계에 따른 스칼라 메트릭을 시각화하려면 **이력**에서 메트릭을 추가하세요. **요약**에서만 추가하면 차트에 run당 단일 값이 표시됩니다.

**차트 필드 이름**

쿼리가 실행되면 **Chart fields**에 Vega 사양에 바인딩할 수 있는 열이 나열됩니다. 이름은 대개 `runSets_`로 시작하며 선택한 쿼리 필드를 반영합니다. 이름을 직접 입력하는 대신 각 `${field:...}` 자리 표시자 옆의 드롭다운에서 선택하세요.

열이 표시되지 않으면 선택한 run에 키가 있는지 확인하고, run 페이지를 열어 데이터가 어떻게 로깅되었는지 확인한 다음, **`summaryTable`** 또는 \*\*`historyTable`\*\*이 해당 로깅 방식과 일치하는지 확인하세요.

맞춤형 차트는 이 GraphQL 기반 패널 쿼리를 사용합니다. [쿼리 패널](/ko/products/wandb/app/features/panels/query-panels)은 다른 표현식 언어를 사용하며 별도로 문서화되어 있습니다.

<Frame>
  <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/customize_chart.gif?s=5cc3c07f0d355e8fd592a79a1ed958e4" alt="맞춤형 차트 만들기" max-width="90%" width="1942" height="1334" data-path="products/wandb/_media/customize_chart.gif" />
</Frame>

<h3 id="custom-visualizations">
  맞춤형 시각화
</h3>

오른쪽 상단에서 **Chart**를 선택하여 기본 프리셋으로 시작하세요. 그런 다음 **Chart fields**를 선택하여 쿼리에서 가져오는 데이터를 차트의 해당 필드에 매핑하세요.

다음 이미지는 메트릭을 선택한 다음 막대 차트 필드에 매핑하는 방법을 보여줍니다.

<Frame>
  <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/demo_make_a_custom_chart_bar_chart.gif?s=d4881d3bb9356f51bd2ceb36a80b9418" alt="맞춤형 막대 차트 만들기" max-width="90%" width="2804" height="1588" data-path="products/wandb/_media/demo_make_a_custom_chart_bar_chart.gif" />
</Frame>

<h3 id="edit-vega">
  Edit Vega
</h3>

패널 상단의 **Edit**를 클릭하여 [Vega](https://vega.github.io/vega/) 편집 모드로 들어갑니다. 여기에서 UI에 대화형 차트를 생성하는 [Vega 사양](https://vega.github.io/vega/docs/specification/)을 정의할 수 있습니다. 차트의 모든 측면을 변경할 수 있습니다. 예를 들어 제목을 변경하거나 다른 색상 구성표를 선택하거나 곡선을 연결된 선 대신 점 시리즈로 표시할 수 있습니다. 또한 Vega 변환을 사용하여 값 배열을 히스토그램의 bin으로 그룹화하는 등 데이터 자체를 변경할 수도 있습니다. 패널 미리보기는 대화형으로 업데이트되므로 Vega 사양 또는 쿼리를 편집하면서 변경 사항의 효과를 바로 확인할 수 있습니다. 자세한 내용은 [Vega 문서 및 튜토리얼](https://vega.github.io/vega/)을 참조하세요.

**필드 레퍼런스**

W\&B에서 차트로 데이터를 가져오려면 Vega 사양의 원하는 위치에 `"${field:<field-name>}"` 형식의 템플릿 문자열을 추가합니다. 그러면 오른쪽의 **Chart fields** 영역에 드롭다운이 생성되며, 이를 사용하여 쿼리 결과 열을 Vega에 매핑할 열을 선택할 수 있습니다.

필드의 기본값을 설정하려면 다음 구문을 사용합니다: `"${field:<field-name>:<placeholder text>}"`

<h3 id="save-chart-presets">
  차트 프리셋 저장
</h3>

프리셋을 저장하여 패널과 프로젝트 전반에서 동일한 Vega 정의를 매번 다시 만들지 않고 재사용하세요. 모달 하단의 버튼으로 특정 시각화 패널에 변경 사항을 적용하세요. 또는 프로젝트의 다른 곳에서 재사용할 수 있도록 Vega 사양을 저장할 수 있습니다. 재사용 가능한 차트 정의를 저장하려면 Vega 편집기 상단의 **Save as**를 클릭하고 프리셋에 이름을 지정하세요.

<h2 id="reports-and-guides">
  Reports and guides
</h2>

다음 Reports는 실제 맞춤형 차트의 엔드투엔드 예시와 심층 탐색을 보여줍니다.

* [The W\&B Machine Learning Visualization IDE](https://forge.coreweave.com/wandb/wandb/posts/reports/The-W-B-Machine-Learning-Visualization-IDE--VmlldzoyNjk3Nzg)
* [Visualizing NLP Attention Based 모델](https://forge.coreweave.com/wandb/kylegoyette/gradientsandtranslation2/reports/Visualizing-NLP-Attention-Based-Models-Using-Custom-Charts--VmlldzoyNjg2MjM)
* [Visualizing The Effect of Attention on 그라디언트 Flow](https://forge.coreweave.com/wandb/kylegoyette/gradientsandtranslation/reports/Visualizing-The-Effect-of-Attention-on-Gradient-Flow-Using-Custom-Charts--VmlldzoyNjg1NDg)
* [arbitrary curves 로깅하기](https://forge.coreweave.com/wandb/stacey/presets/reports/Logging-Arbitrary-Curves--VmlldzoyNzQyMzA)

<h2 id="common-use-cases">
  일반적인 사용 사례
</h2>

맞춤형 차트는 기본 패널로 원하는 내용을 표현할 수 없을 때 유용합니다. 예시:

* 오차 막대가 있는 막대 그래프 맞춤 설정
* 맞춤형 x-y 좌표가 필요한 모델 검증 메트릭 표시(예: 정밀도-재현율 곡선)
* 서로 다른 두 모델이나 실험의 데이터 분포를 히스토그램으로 겹쳐 표시
* 트레이닝 중 여러 시점의 스냅샷을 통해 메트릭 변화 표시
* W\&B에서 아직 사용할 수 없는 고유한 시각화를 만들고 다른 사용자와 공유


## Related topics

- [예시 코드 및 노트북](/ko/products/wandb/examples.md)