그래프에 적합한 색상 선택하기
Datadog 그래프에서 색상은 데이터 계열(series)을 구분하는 기본 수단이에요. 그래프에 적합한 색상을 선택하면 팀원들이 그래프의 데이터를 해석하고, 인사이트를 얻고, 효과적으로 트러블슈팅할 수 있게 해 줘요.
출처: 문서
본문
Datadog 그래프에서 색상은 데이터 계열을 구분할 수 있는 기본적인 방법이에요. 그래프에 적합한 색상을 선택하면 팀원들이 그래프의 데이터를 해석하고 통찰을 얻고 효과적으로 트러블슈팅할 수 있어요.
{% image source="https://docs.dd-static.net/images/dashboards/guide/colors/colors_top.5b5aa95b82f69f4cebbe02e53cbbb64f.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/colors/colors_top.5b5aa95b82f69f4cebbe02e53cbbb64f.png?auto=format&fit=max&w=850&dpr=2 2x" alt="Under the heading 'Graph your data', the user is selecting from a list of color palettes." /%}
색상 팔레트 유형
범주형(Categorical) 팔레트
범주형 팔레트는 구분이 필요하지만 자연스러운 순서를 따르지 않는 데이터에 가장 적합해요. 예를 들면 가용성 영역(availability zones)이죠.
{% image source="https://docs.dd-static.net/images/dashboards/guide/colors/2_alphabet.c4b8906622f0333038b20a8145bebf0c.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/colors/2_alphabet.c4b8906622f0333038b20a8145bebf0c.png?auto=format&fit=max&w=850&dpr=2 2x" alt="A palette showing letters A B C D E F G, where each letter is a different hue." /%}
Classic
기본 Classic 팔레트는 가독성에 맞게 최적화된 6개의 구별되는 색상 집합을 사용해요. 계열 수가 6개를 초과하면 계열에 할당된 색상이 반복돼요. 인접한 계열은 일반적으로 구별되는 색상을 가져요. 하지만 드물게 중간 계열이 일부 시간 구간에 값이 없으면 인접 계열이 같은 색을 사용할 수 있어요.
Classic 색상 팔레트는 시각적 접근성 지원이 있어요.
{% image source="https://docs.dd-static.net/images/dashboards/guide/colors/3_classic_palette.1fb6dabdf783fb35697478aa0a4535c9.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/colors/3_classic_palette.1fb6dabdf783fb35697478aa0a4535c9.png?auto=format&fit=max&w=850&dpr=2 2x" alt="An overview of what the Classic palette looks like for a donut graph and a stacked bar graph." /%}
Consistent/Semantic
Consistent 팔레트는 태그 값을 기반으로 데이터 계열에 일관되게 고정 색상을 할당해요. 이렇게 하면 서로 다른 차트 간에 데이터를 더 쉽게 연관지을 수 있어요. 하지만 같은 위젯 내에서 인접한 데이터 계열에 고유한 색상을 보장하지는 않으며, 접근성 지원도 없어요. 자세한 내용은 Consistent 팔레트의 중복 색상 이해하기를 참고하세요.
{% image source="https://docs.dd-static.net/images/dashboards/guide/colors/4_consistent_palette.3e615aab25d15342d0b4d74dd092e9a1.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/colors/4_consistent_palette.3e615aab25d15342d0b4d74dd092e9a1.png?auto=format&fit=max&w=850&dpr=2 2x" alt="A color palette for the Consistent/Semantic palette." /%}
{% image source="https://docs.dd-static.net/images/dashboards/guide/colors/5_consistent_interface.b62440f0751ae621cc3311d560e6b2d7.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/colors/5_consistent_interface.b62440f0751ae621cc3311d560e6b2d7.png?auto=format&fit=max&w=850&dpr=2 2x" alt="Consistent palette bar graphs." /%}
호환되는 소수의 태그에 대해 Datadog은 각 데이터 계열 뒤에 있는 의미를 자동으로 인식해요. 이 경우 Consistent 색상 팔레트는 색상으로 의미를 나타내는 Semantic 색상 팔레트로 나타나요. 예를 들어 빨간색은 오류를 나타낼 수 있어요. 지원되는 태그 목록은 호환되는 Semantic 태그를 참고하세요.
{% image source="https://docs.dd-static.net/images/dashboards/guide/colors/6_semantic_interface.fac6dfe1cbc3394486680a66bd5db5a1.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/colors/6_semantic_interface.fac6dfe1cbc3394486680a66bd5db5a1.png?auto=format&fit=max&w=850&dpr=2 2x" alt="Semantic palette bar graph." /%}
발산형(Diverging) 팔레트
데이터셋 내 값의 차이를 강조해야 할 때 발산형 팔레트를 사용하세요. 발산형 팔레트는 자연스러운 순서와 자연스러운 중간점이 있는 데이터에 가장 적합해요. 예: 메모리 사용률의 변화량(-100%에서 +100%, 자연 중간점 0%).
발산형 팔레트에는 두 가지 옵션이 있어요: cool(초록과 파랑) 또는 warm(노랑과 주황 사이 보간).
{% image source="https://docs.dd-static.net/images/dashboards/guide/colors/7_divergent_palette.7a774927250142d25ab81d9825275c27.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/colors/7_divergent_palette.7a774927250142d25ab81d9825275c27.png?auto=format&fit=max&w=850&dpr=2 2x" alt="A palette showing -3 -2 -1 0 1 2 3, with different color gradients on both ends." /%}
{% image source="https://docs.dd-static.net/images/dashboards/guide/colors/8_divergent_graphs.2eab86faa172a723a2c9a795131ed247.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/colors/8_divergent_graphs.2eab86faa172a723a2c9a795131ed247.png?auto=format&fit=max&w=850&dpr=2 2x" alt="Diverging palette graphs." /%}
순차형(Sequential) 팔레트
데이터셋의 서로 다른 계열에 공통점이 있음을 강조해야 할 때 순차형 팔레트를 사용하세요. 이 팔레트는 호스트 그룹의 CPU 사용률(0%에서 100%)처럼 자연스러운 순서가 있는 데이터에 잘 맞아요.
색상 옵션에는 보라, 주황, 회색, 빨강, 초록, 파랑이 있어요.
색상 오버라이드와 결합하면, 순차형 팔레트는 단일 차트에서 여러 쿼리의 결과를 구분하는 데 도움이 돼요.
{% image source="https://docs.dd-static.net/images/dashboards/guide/colors/9_sequential_palette.f9b40d91a0f1fd11306e096484955893.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/colors/9_sequential_palette.f9b40d91a0f1fd11306e096484955893.png?auto=format&fit=max&w=850&dpr=2 2x" alt="A palette showing 1 2 3 4 5 6 7, where the colors are a gradient." /%}
{% image source="https://docs.dd-static.net/images/dashboards/guide/colors/10_sequential_graphs.07c69aa90e00d19c148764a9af8bb2ac.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/colors/10_sequential_graphs.07c69aa90e00d19c148764a9af8bb2ac.png?auto=format&fit=max&w=850&dpr=2 2x" alt="Sequential palette graphs." /%}
색상 오버라이드
색상 오버라이드를 사용하면 각 쿼리에 원하는 단일 색상을 할당할 수 있어요. 단일 차트에서 여러 쿼리의 결과를 구분할 때 특히 유용해요.
{% image source="https://docs.dd-static.net/images/dashboards/guide/colors/11_overrides.2ad38ee89f9394a8c06f2b3af8fff930.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/colors/11_overrides.2ad38ee89f9394a8c06f2b3af8fff930.png?auto=format&fit=max&w=850&dpr=2 2x" alt="The panel that allows a user to configure color overrides." /%}
참고: 쿼리가 태그로 집계한다면(예: 'sum by' 또는 'avg by' 사용), 팔레트 오버라이드만 선택할 수 있어요. 이는 서로 다른 계열이 같은 색상을 사용하는 것을 방지해 가독성을 보존해 줘요.
{% image source="https://docs.dd-static.net/images/dashboards/guide/colors/12_palette_and_color_override_comparison.49a4390fc211e1303e0ca6c12f052270.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/colors/12_palette_and_color_override_comparison.49a4390fc211e1303e0ca6c12f052270.png?auto=format&fit=max&w=850&dpr=2 2x" alt="A side-by-side comparison of the color override and palette override dropdown panels." /%}
접근성 설정
Datadog은 색각 이상, 낮은 시력, 대비 감도 같은 시각적 요구에 맞춘 접근성 색상 모드를 제공해요. 접근성 색상 모드를 선택하면 모든 그래프가 특정 시각 요구에 맞춘 접근성 색상 집합의 Classic 팔레트로 렌더링돼요. 사용자 기본 설정 페이지에서 접근성 색상 모드를 설정할 수 있어요.
{% image source="https://docs.dd-static.net/images/dashboards/guide/colors/visual_accessibility.db3896c7f4c12eea97113b8435f13bfb.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/colors/visual_accessibility.db3896c7f4c12eea97113b8435f13bfb.png?auto=format&fit=max&w=850&dpr=2 2x" alt="Available visual accessibility options: Default, protanopia (difficulty distinguishing greens and reds), deuteranopia (difficulty distinguishing between reds, greens, and yellows), tritanopia (difficulty distinguishing blues and greens), high contrast (increased separation between colors for lower visual acuity), low saturation (decreased contrast for visual contrast sensitivity)." /%}
