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

> 내장 Web SQL UI(`/play`)의 컬럼별 색상 구분 모드에 대한 문서

# Web UI 색상 구분

내장 Web SQL UI(`play.html`, 모든 ClickHouse HTTP 포트의 [`/play`](/docs/ko/concepts/features/interfaces/http) 경로에서 제공됨)는 결과 셀에 색상을 적용해 컬럼 내 패턴을 한눈에 더 쉽게 식별할 수 있도록 합니다. 각 컬럼에는 서로 독립적으로 전환할 수 있는 자체 색상 구분 모드가 있습니다.

<div id="switching-the-mode">
  ## 모드 전환
</div>

모든 컬럼 헤더 오른쪽에는 🌈 아이콘이 표시됩니다. 이 아이콘을 클릭하면 해당 컬럼의 사용 가능한 모드가 차례로 전환됩니다. 호버가 가능한 포인터(마우스)가 있는 장치에서는 헤더 위에 포인터를 올렸을 때만 아이콘이 표시되므로 평소에는 화면을 가리지 않습니다. 반면 호버를 지원하지 않는 터치 장치 및 기타 저정밀 포인터 장치에서는 아이콘이 항상 표시되어 직접 탭할 수 있습니다.

컬럼에서 제공되는 모드 집합은 해당 유형에 따라 달라집니다:

* 숫자 컬럼과 `Date`/`DateTime`/`Date32`/`DateTime64` 컬럼은 `bar` → `heatmap` → `categorical` → `none` 순서로 전환됩니다.
* 그 밖의 모든 컬럼은 `none`과 `categorical` 사이를 전환합니다.

기본 모드는 숫자 컬럼에서는 `bar`이고, 날짜 및 시간 컬럼을 포함한 그 밖의 모든 컬럼에서는 `none`입니다.

<div id="modes">
  ## 모드
</div>

* **`bar`** — 값에 비례하는 가로 막대를 셀 안에 그립니다. 숫자 컬럼에서는 막대가 0 기준선부터 늘어나고, `Date`/`DateTime` 컬럼에서는 타임스탬프에 0 기준선이 의미가 없으므로 대신 컬럼의 `min`..`max` 범위에 걸쳐 표시됩니다.
* **`heatmap`** — 컬럼의 최솟값과 최댓값 사이에서 스케일된 값을 색으로 인코딩해 셀 배경 전체를 채웁니다.
* **`categorical`** — 셀 값을 해시해 얻은 색으로 셀 배경을 채우므로, 같은 값에는 같은 색이, 다른 값에는 다른 색이 적용됩니다. 이 방식은 모든 컬럼 타입에서 작동합니다.
* **`none`** — 색상 구분을 적용하지 않습니다.

`Date`, `DateTime`, `Date32`, `DateTime64` 컬럼은 시간 값을 기준으로 색이 지정되며, 스케일이 보는 사람의 브라우저 시간대에 영향을 받지 않도록 UTC로 파싱됩니다.

`heatmap`과 `categorical` 배경색은 `oklch` 색 공간을 사용하며, 색조(hue)만 바꾸고 명도(lightness)와 채도(chroma)는 테마별로 고정하므로 라이트 테마와 다크 테마 모두에서 셀 텍스트의 가독성이 유지됩니다. 행이 두 줄 이상으로 표시되더라도 배경은 셀 전체를 채웁니다.

<div id="categorical-emphasis">
  ## 선택 시 categorical 강조
</div>

`categorical` 모드에서는 셀을 선택하면 같은 값을 가진 다른 셀이 더 굵은 글꼴과 높은 대비의 텍스트 색상(어두운 테마에서는 순수한 흰색, 밝은 테마에서는 순수한 검은색)으로 표시되어 강조됩니다. 선택한 셀 자체는 강조되지 않습니다. 따라서 컬럼의 다른 위치에서 특정 값이 어디에 나타나는지 쉽게 확인할 수 있습니다.

<div id="persistence">
  ## 지속성
</div>

선택한 모드는 페이지 URL과 브라우저 이력에 컬럼별로 저장되므로, 페이지를 새로고침하거나 링크를 공유하거나 앞뒤로 이동해도 유지됩니다. URL과 이력 상태를 간결하게 유지하기 위해 기본값이 아닌 선택만 저장됩니다.

<div id="limitations">
  ## 제한 사항
</div>

* 세로(전치) 단일 행 레이아웃에서는 색상 구분이 표시되지 않습니다.
* `DateTime64(9)`에서 1마이크로초 미만의 차이는 그라데이션으로 시각적으로 의미 있게 표현하기 어려워 색상 눈금에서 구분되지 않습니다.