와일드카드 위젯 시작하기

원문 보기 위키 갱신 2026.10.05

와일드카드(Wildcard) 위젯은 Datadog에서 Vega-Lite 문법을 이용해 나만의 시각 표현을 만들 수 있게 해 주는 강력하고 유연한 시각화 도구예요. 이 튜토리얼에서는 기존 위젯의 쿼리를 가져와서 Vega-Lite 개념으로 나만의 시각화를 정의하고, 컨텍스트 메뉴까지 추가하는 과정을 배워볼게요.

출처: 문서

본문

개요

와일드카드 위젯은 Datadog의 강력하고 유연한 시각화 도구로, Vega-Lite 문법을 이용해 나만의 커스텀 시각 표현을 만들 수 있게 해 줘요.

튜토리얼 목표

이 튜토리얼을 끝내면 다음을 할 수 있게 됩니다:

Vega-Lite 개념을 사용해 와일드카드 위젯에서 시각화를 정의하기.
기존 위젯에서 쿼리를 가져오기.

사전 준비사항

노트북 또는 대시보드에 접근 권한이 있는 Datadog 계정.
APM 트레이스 데이터 또는 요청 기간 메트릭 같은 텔레메트리.
기본적인 Datadog 위젯과 대시보드에 익숙하고, 위젯을 추가하고 편집할 수 있어야 함.

1단계: 기존 쿼리 가져오기

처음부터 시작하는 대신 기존 위젯에서 요청(request)을 가져와 봅시다. 더 자세히 살펴보고 싶은 위젯(예: Top List)에서 쿼리를 복사하세요. 시작하려면 미리 만들어진 대시보드의 위젯을 사용할 수 있어요.

유용한 위젯(데이터베이스 쿼리 Top List)이 있는 기존 대시보드로 이동합니다.
위젯 메뉴를 사용하거나 키보드 단축키(Ctrl/CMD + C)로 위젯을 복사합니다.
새 대시보드에서 와일드카드 위젯을 추가합니다.
편집기에서 기본 쿼리를 지웁니다.
복사한 요청을 Ctrl/Cmd + V로 붙여넣습니다. 쿼리와 관련 필드가 자동으로 그대로 넘어와요.

{% video url="https://docs.dd-static.net/images//dashboards/guide/analyze_p50_vs_p95_latency_with_the_wildcard_widget/import_widget_walkthrough.mp4" /%}

2단계: 쿼리 다듬기

쿼리 편집기에서:

Data Preview를 펼쳐 쿼리에서 반환되는 필드를 확인합니다.
쿼리 옆의 As를 클릭해 쿼리에 별칭(alias)을 붙입니다. 예를 들어 p50:trace.http.request{*} by {service}→ p50로 이름을 바꾸면 명확해져요.

{% video url="https://docs.dd-static.net/images//dashboards/guide/analyze_p50_vs_p95_latency_with_the_wildcard_widget/refine_query_walkthrough.mp4" /%}

3단계: 시각화 자동 생성

쿼리 편집기 상단에서:

Define Visual 탭을 클릭합니다.
Cmd + Shift + P (Mac) 또는 Ctrl + Shift + P (Windows/Linux)를 눌러 Command Palette를 엽니다.
Auto-select chart를 선택합니다.

{% video url="https://docs.dd-static.net/images//dashboards/guide/analyze_p50_vs_p95_latency_with_the_wildcard_widget/command_palette.mp4" /%}

Datadog이 쿼리 기반으로 시각화를 자동으로 만들어줘요. Command Palette(Cmd + Shift + P)를 사용해 쿼리에 맞는 차트 유형을 자동 선택하거나, 인코딩을 추가·편집하고, 축을 회전하거나 차트 유형을 바꿀 수도 있어요.

{% collapsible-section %}

Auto-generate의 안내 예시

새 와일드카드 위젯에서 쿼리 편집기의 JSON 탭을 클릭하고 다음 쿼리를 붙여넣습니다:

{
  "response_format": "scalar",
  "queries": [
    {
      "query":       "avg:system.cpu.user{*} by {env}",
      "data_source": "metrics",
      "name":        "query1",
      "aggregator":  "last"
    },
    {
      "query":       "max:system.cpu.user{*} by {env}",
      "data_source": "metrics",
      "name":        "query2",
      "aggregator":  "last"
    }
  ],
  "formulas": [
    { "formula": "query1" },
    { "formula": "query2" }
  ],
  "sort": {
    "count": 15,
    "order_by": [
      {
        "type":   "formula",
        "index":  0,
        "order":  "desc"
      }
    ]
  }
}

Save Edits를 클릭합니다.
쿼리 편집기 상단에서 Define Visual 탭을 클릭합니다.
Cmd + Shift + P (Mac) 또는 Ctrl + Shift + P (Windows/Linux)를 눌러 Command Palette를 엽니다.
Auto-select chart를 선택합니다. 그래프가 막대 차트에서 산점도로 자동으로 바뀌는 것을 확인할 수 있어요.

{% /collapsible-section %}

4단계: 컨텍스트 메뉴 추가

그래프에 인터랙티브 기능을 추가하려면 컨텍스트 메뉴 지원을 활성화하세요.

시각 편집기의 JSON 탭에서 다음 예시 막대 차트 위젯을 복사·붙여넣어 컨텍스트 메뉴를 추가하는 방법을 확인합니다. 이 예시에는 툴팁과 컨텍스트 메뉴 설정이 포함돼 있어요.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Bar chart showing CPU usage by environment with Datadog context menu support",
  "data": {
 "name": "table1"
  },
  "mark": "bar",
  "encoding": {
 "x": {
   "field": "env",
   "type": "nominal",
   "sort": "-y",
   "title": "Environment"
 },
 "y": {
   "field": "query1",
   "type": "quantitative",
   "title": "CPU Usage (%)"
 },
 "tooltip": [
   {
     "field": "env",
     "type": "nominal"
   },
   {
     "field": "query1",
     "type": "quantitative",
     "title": "CPU Usage (%)"
   },
   {
     "field": "timestamp",
     "type": "temporal",
     "title": "Timestamp"
   }
 ]
  },
  "params": [
 {
   "name": "datadogPointSelection",
   "select": "point"
 }
  ]
}

1. 위젯을 실행하고 저장합니다.
1. 대시보드에서 방금 만든 위젯을 찾아 그래프의 아무 데이터 포인트나 클릭하면 **컨텍스트 메뉴**가 나타나요.

자세한 내용은 [Datadog에서 와일드카드 위젯과 Vega-Lite 사용하기](https://docs.datadoghq.com/dashboards/guide/using_vega_lite_in_wildcard_widgets.md#context-menu-and-context-links)를 참고하세요.

## 다음 단계

와일드카드 위젯은 다양한 커스터마이징을 지원해요:

- [선 두께를 조절해 가중치와 강도를 표현하기](https://vega.github.io/vega-lite/examples/trail_color.html)
- [값을 시각적으로 표현하도록 이미지 추가하기](https://vega.github.io/vega-lite/examples/isotype_bar_chart_emoji.html)
- [더 풍부한 컨텍스트를 위해 시각화 레이어링하기](https://vega.github.io/vega-lite/examples/layer_line_rolling_mean_point_raw.html)

더 많은 영감이 필요하다면 [Datadog 와일드카드 위젯 예시](https://docs.datadoghq.com/dashboards/guide/wildcard_examples.md)와 [Vega-Lite 예시](https://vega.github.io/vega-lite/examples/)를 참고하세요.

## 더 알아보기 (Learn more)

도움이 되는 추가 문서, 링크, 아티클이에요:

- [Wildcard widget Overview](https://docs.datadoghq.com/dashboards/widgets/wildcard.md)
- [Wildcard widget example visualizations](https://docs.datadoghq.com/dashboards/guide/wildcard_examples.md)
- [Using Vega-Lite in Wildcard widgets](https://docs.datadoghq.com/dashboards/guide/using_vega_lite_in_wildcard_widgets.md)