> ## 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.

> `/play` 경로에서 제공되는 브라우저 내장형 쿼리 인터페이스 Web SQL UI(Play) 문서

# Web SQL UI (Play)

Web SQL UI(Play)는 ClickHouse에 내장된 브라우저 기반 쿼리 인터페이스입니다. 이 인터페이스는 모든 ClickHouse HTTP 포트의 `/play` 경로(예: `http://localhost:8123/play`)에서 제공됩니다. 쿼리를 작성하고 실행할 수 있으며, 결과를 테이블이나 차트로 확인하고, URL을 복사해 쿼리를 공유할 수도 있습니다.

인터페이스 전체는 `programs/server/play.html`에 들어 있으며, 프레임워크나 build 단계 없이 ClickHouse 실행 파일에서 직접 제공되는 단일 독립 페이지입니다. 단, 차트 렌더링은 예외입니다. `uPlot` 차트 라이브러리는 결과를 처음 차트로 표시할 때 타사 CDN에서 지연 로드되므로, 오프라인 환경이나 egress가 제한된 배포 환경에서는 차트를 사용할 수 없습니다.

<div id="query-tabs">
  ## 쿼리 탭
</div>

탭을 사용하면 여러 쿼리를 한 편집기에서 번갈아 다루거나 브라우저 이력에 의존할 필요 없이 나란히 유지할 수 있습니다.

각 탭에는 고유한 쿼리 텍스트, 제목, 쿼리 매개변수, 마지막 결과가 있습니다. connection 설정(URL, 사용자 이름, 비밀번호)은 전역으로 유지되며 모든 탭에서 공유됩니다.

<div id="when-the-tab-bar-appears">
  ### 탭 표시줄이 나타나는 경우
</div>

탭 표시줄은 쿼리를 실행했거나 탭이 2개 이상일 때 나타납니다. 결과가 없는 단일 탭은 탭 기능이 생기기 전의 페이지와 똑같이 보이므로, 필요해질 때까지는 탭 표시줄이 보이지 않습니다.

활성 탭은 시각적으로 페이지와 자연스럽게 이어집니다. 배경은 쿼리별 hash 색상(페이지 배경에 이미 사용되는 것과 같은 색상)을 따르며, 밝은 theme에서는 위쪽이 더 진하고 어두운 theme에서는 위쪽이 더 밝은 그라데이션이 적용됩니다. 비활성 탭은 각 탭의 쿼리 text hash를 기준으로 색조가 입혀지므로, 서로 다른 탭이 색상으로 자동 구분됩니다.

<div id="creating-closing-and-renaming-tabs">
  ### 탭 만들기, 닫기, 이름 바꾸기
</div>

* 탭 오른쪽의 `[+]` 버튼을 사용해 새 탭을 만드세요.
* 탭의 `x` 아이콘을 사용해 탭을 닫으세요.
* 새 탭에는 기본적으로 `Query A`, `Query B`와 같은 이름이 지정됩니다.
* 활성 탭의 제목을 클릭하면 인라인으로 편집할 수 있으며, 편집 필드는 텍스트 길이에 맞춰 늘어납니다.

<div id="switching-tabs">
  ### 탭 전환
</div>

* 비활성 탭을 클릭하면 해당 탭으로 전환됩니다.
* 탭 패널 위에서 마우스 휠을 스크롤해 탭을 전환할 수 있습니다. 위로 스크롤하면 왼쪽 탭으로, 아래로 스크롤하면 오른쪽 탭으로 이동합니다(해당 탭이 있는 경우). 세로 및 가로 휠 스크롤이 모두 작동합니다.

탭 표시줄은 가로 방향으로 sticky하게 동작합니다. 즉, 페이지를 가로로 스크롤해도 하단의 ClickHouse 로고처럼 왼쪽에 그대로 유지됩니다. 세로 방향으로는 페이지의 다른 요소와 함께 스크롤됩니다.

<div id="persistence-and-browser-history">
  ### 영속성 및 브라우저 이력
</div>

워크스페이스(탭, 탭 제목, 활성 탭, 탭 순서, 작은 결과 스냅샷)는 IndexedDB에 저장되며, 다시 로드할 때 복원됩니다. 영속성은 최선형으로 제공됩니다. IndexedDB를 사용할 수 없으면 워크스페이스는 현재 세션 동안 인메모리 상태로 동작합니다.

탭은 브라우저의 History API 및 URL과도 연동됩니다:

* 이력 state에는 활성 탭이 포함되므로 브라우저의 뒤로 및 앞으로 버튼으로 탭을 전환할 수 있습니다.
* URL에는 `tab=<name>` 매개변수가 추가됩니다. 로드 시 URL의 쿼리와 `tab` 매개변수는 저장된 탭과 reconcile됩니다. 즉, 해당 이름의 기존 탭이 있으면 이를 재사용하고(해당 탭의 쿼리로 대체), 이름을 찾을 수 없거나 이름이 없는 경우에는 새 탭이 생성됩니다. 따라서 사용자가 저장한 탭은 유지하면서 새 쿼리가 포함된 URL을 열 수 있습니다.

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

쿼리가 실행 중일 때 탭을 전환하면 해당 쿼리의 실행 중 상태는 사라집니다.

복원을 위해 스냅샷으로 저장되는 것은 작은 결과뿐입니다. 큰 결과(스냅샷 크기 제한 초과) 또는 이미지 결과는 저장되지 않습니다. 즉, 탭을 전환하거나 새로고침한 뒤에도 탭에는 쿼리가 남아 있지만 렌더링된 결과는 유지되지 않으며, 쿼리를 다시 실행하면 결과가 다시 생성됩니다. 이는 단일 쿼리 결과와 "Run all"(다중 쿼리) 실행의 결합된 출력 모두에 적용됩니다.