> ## 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.html`, 모든 ClickHouse HTTP 포트의 [`/play`](/concepts/features/interfaces/http) 경로에서 제공됨)에서 고정(sticky) 컬럼을 사용하는 방법에 대한 문서

# Web UI 고정 컬럼

내장 Web SQL UI(`play.html`, 모든 ClickHouse HTTP 포트의 [`/play`](/docs/ko/concepts/features/interfaces/http) 경로에서 제공됨)에서는 결과 테이블의 나머지 부분을 가로로 스크롤하더라도 선택한 컬럼이 계속 보이도록 유지할 수 있습니다. 고정 컬럼은 스크롤되어 화면에서 사라지는 대신 결과 영역의 가까운 쪽 가장자리에 붙어 있으므로, 식별자, 이름, 날짜와 같은 핵심 컬럼이 현재 읽고 있는 오른쪽 컬럼들 옆에 계속 표시됩니다.

<div id="pinning-a-column">
  ## 컬럼 고정하기
</div>

모든 컬럼 헤더의 왼쪽에는 📌 압정 아이콘이 표시됩니다. 컬럼을 고정하려면 이 아이콘을 클릭하고, 고정을 해제하려면 다시 클릭하십시오. 이 아이콘은 실제 버튼이므로 키보드 사용자는 Tab 키로 이 아이콘으로 이동한 뒤 키보드로 토글할 수 있으며, 보조 기술에도 고정 상태가 전달됩니다.

호버할 수 있는 포인터(마우스)가 있는 장치에서는 헤더에 마우스를 올리거나 토글에 포커스가 있을 때만 아이콘이 표시되므로, 그렇지 않은 경우에는 화면을 방해하지 않습니다. 반면 호버가 없는 터치 장치 및 기타 거친 포인터 장치에서는 아이콘을 직접 탭할 수 있도록 항상 표시됩니다. 고정된 컬럼은 해당 컬럼이 고정되었음을 나타내는 표시로 아이콘이 선명하게 계속 표시됩니다.

<div id="when-pinning-is-available">
  ## 컬럼 고정을 사용할 수 있는 경우
</div>

컬럼 고정은 테이블이 가로로 스크롤될 만큼 충분히 넓을 때만 사용할 수 있습니다. 테이블 전체가 뷰포트 안에 들어오면 스크롤되어 사라질 부분이 없으므로, 컬럼 고정 토글은 비활성화되고 키보드 tab 순서에서도 제외됩니다. 결과를 가로로 스크롤할 수 있게 되는 순간(예: 결과가 넓은 경우, window가 좁은 경우, 또는 스트리밍되는 결과가 가로로 계속 확장되는 경우) 토글이 활성화됩니다.

<div id="how-a-pinned-column-behaves-when-scrolling">
  ## 스크롤할 때 고정 컬럼이 어떻게 동작하는지
</div>

고정된 컬럼은 가로 스크롤 중에는 콘텐츠와 함께 움직이다가 뷰포트에서 벗어나려는 순간 가까운 가장자리에 붙습니다. 즉, 왼쪽 컬럼은 왼쪽 가장자리에, 오른쪽 컬럼은 오른쪽 가장자리에 고정되어 계속 표시됩니다. 여러 개의 고정 컬럼이 있으면 원래 순서를 유지한 채 가장자리를 따라 차례로 쌓이고, 각각은 테두리로 스크롤되는 콘텐츠와 구분됩니다. 고정된 셀은 아래에서 스크롤되는 일반 셀 위에, 선택된 셀까지 포함해, 덮어 그려지므로 항상 읽기 쉽게 유지됩니다.

<div id="shared-across-results">
  ## 결과 간에 공유됨
</div>

고정 상태는 컬럼명 기준으로 관리되며, 컬럼별 [색상 지정 모드](/docs/ko/concepts/features/interfaces/web-ui-color-coding)와 마찬가지로 페이지의 모든 결과 테이블에서 공유됩니다. 한 결과에서 `id`라는 이름의 컬럼을 고정하면, 다른 결과의 `id` 컬럼과 같은 컬럼을 반환하는 이후 쿼리에서도 해당 컬럼이 계속 고정된 상태로 유지됩니다.

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

고정된 집합은 페이지 URL, 브라우저 이력, 탭별 결과 스냅샷에 저장되므로 페이지를 다시 로드하거나, 링크를 공유하거나, 뒤로 또는 앞으로 이동해도 그대로 유지됩니다. 크기를 작게 유지하기 위해 저장되는 것은 고정된 컬럼뿐입니다 — 빈 집합은 URL이나 이력 상태에 아무것도 추가하지 않습니다.

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

* 세로(전치된) 단일 행 레이아웃에는 가로 스크롤되는 컬럼이 없으므로 컬럼 고정을 지원하지 않습니다.