일관 팔레트의 중복 색상 이해하기
일관 팔레트의 중복 색상 이해하기 (Understanding Duplicate Colors in the Consistent Palette)
일관(Consistent) 색상 팔레트는 태그 값에 안정적이고 반복 가능한 색상을 할당해 시간에 따른 차트 간 데이터 연관을 쉽게 해 주도록 설계되었어요. 하지만 주어진 위젯 내에서 이미 어떤 색상이 사용 중인지는 추적하지 않기 때문에, 특히 표시되는 태그 값이 많을 때 단일 그래프에 중복 색상이 나타날 수 있습니다.
출처: 문서
본문
개요 (Overview)
일관(Consistent) 색상 팔레트는 태그 값에 안정적이고 반복 가능한 색상을 할당해 시간에 따른 차트 간 데이터 연관을 더 쉽게 만들도록 설계되었어요. 하지만 주어진 위젯 내에서 이미 사용 중인 색상은 추적하지 않습니다. 이로 인해, 특히 많은 태그 값이 표시될 때 단일 그래프에 중복 색상이 나타날 수 있어요.
이 가이드는 일관 팔레트를 사용할 때 태그 색상이 왜 중복되는지 설명하고, 이 동작을 완화하기 위한 옵션을 정리해 줍니다.
중복 색상이 발생하는 이유 (Why duplicate colors occur)
일관 팔레트는 결정적 해시(deterministic hashing) 알고리즘을 사용해 태그 값을 색상에 매핑해요. 이는 특정 태그 값이 모든 대시보드·노트북·시간대에서 항상 같은 색상으로 나타나도록 보장합니다. 하지만 팔레트는:
- 특정 그래프에서 이미 사용된 색상을 추적하지 않습니다.
- 접근성, 색상 대비, 다크 모드 호환성을 위해 선택된 제한된 16~20개의 큐레이팅 색상을 사용합니다.
색상 매핑이 고정되어 있고 팔레트가 제한적이므로, 특히 태그 그룹 수가 사용 가능한 색상 수를 초과하면 여러 태그 값에 같은 색상이 할당될 수 있어요.
이러한 트레이드오프는 단일 위젯 내 고유성보다 시간과 보기 전반의 색상 일관성을 우선시합니다.
색상 오버라이드 사용 (Use color overrides)
그래프가 데이터 센터나 리전 같은 소수(15개 미만)의 비교적 고정된 태그 값을 표시한다면, 색상 오버라이드 기능으로 각 시리즈에 고유한 색상을 지정할 수 있어요. 자세한 내용은 색상 오버라이드(Color overrides)를 참고하세요.
예시 대시보드 tiledef
{
"viz": "timeseries",
"requests": [
{
"style": {
"palette": "semantic",
"type": "solid",
"width": "normal"
},
"type": "area",
"formulas": [
{
"style": {
"palette": "classic",
"palette_index": 0
},
"alias": "ap1",
"formula": "query2"
},
{
"style": {
"palette": "classic",
"palette_index": 4
},
"alias": "eu1",
"formula": "query1"
},
{
"style": {
"palette": "green",
"palette_index": 3
},
"alias": "us1",
"formula": "query3"
},
{
"style": {
"palette": "warm",
"palette_index": 3
},
"alias": "us3",
"formula": "query4"
},
{
"style": {
"palette": "purple",
"palette_index": 5
},
"alias": "us5",
"formula": "query5"
}
],
"queries": [
{
"query": "sum:process.reporting_processes.total{app:process-resolver ,datacenter:ap1.prod.dog}.fill(last).rollup(max).weighted()",
"data_source": "metrics",
"name": "query2"
},
{
"query": "sum:process.reporting_processes.total{app:process-resolver ,datacenter:eu1.prod.dog}.fill(last).rollup(max).weighted()",
"data_source": "metrics",
"name": "query1"
},
{
"query": "sum:process.reporting_processes.total{app:process-resolver ,datacenter:us1.prod.dog}.fill(last).rollup(max).weighted()",
"data_source": "metrics",
"name": "query3"
},
{
"query": "sum:process.reporting_processes.total{app:process-resolver ,datacenter:us3.prod.dog}.fill(last).rollup(max).weighted()",
"data_source": "metrics",
"name": "query4"
},
{
"query": "sum:process.reporting_processes.total{app:process-resolver ,datacenter:us5.prod.dog}.fill(last).rollup(max).weighted()",
"data_source": "metrics",
"name": "query5"
}
],
"response_format": "timeseries"
}
],
"yaxis": {
"include_zero": true,
"scale": "linear",
"label": "",
"min": "auto",
"max": "auto"
},
"markers": []
}
한계와 유지보수 과제 (Limitations and maintenance challenges)
이 색상 중복 동작은 일관 팔레트의 알려진 한계입니다. group-by 값이 많거나 동적 태그가 있는 대시보드에서는 중복 색상이 시각적 명확성을 떨어뜨릴 수 있어요.
색상 오버라이드 기능으로 시리즈별로 수동으로 색상을 오버라이드할 수는 있지만, 특히 다음 경우에는 유지보수에 많은 시간이 들 수 있습니다:
- 태그 값의 수가 자주 변하는 경우
- 같은 로직을 여러 위젯에 적용해야 하는 경우
이 과정을 단순화하려면 정적 JSON 정의를 유지보수하는 대신, 스크립팅을 통한 위젯 생성(Terraform)이나 업데이트 자동화를 고려해 보세요.