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

# 데모 데이 - 2026-05-29

> ClickStack 데모 데이 - 2026-05-29

<div id="version-aware-improved-schema-filtering">
  ## 버전 인식 기반의 개선된 스키마 필터링
</div>

*[@knudtty](https://github.com/knudtty)의 시연*

<Frame>
  <iframe src="https://www.youtube.com/embed/bAVaBnfJ82Y" title="YouTube 동영상 플레이어" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
</Frame>

이제 ClickStack은 오픈소스 스키마에 추가된 alias 컬럼을 전문 검색 인덱스가 올바르게 지원하는 ClickHouse 26.2 이상 버전에서만 direct\_read 최적화를 적용합니다. 이전에는 이 최적화가 제대로 동작하지 않는 구버전에서도 시도될 수 있었습니다. 버전 확인은 스키마를 검사해 쿼리 시점에 수행되며, alias 컬럼 자체도 이제 기본적으로 오픈소스 스키마에 포함됩니다.

또한 자동 완성용 materialized view를 text index에 직접 쿼리하는 방식으로 대체하는 진행 중인 작업도 소개되었습니다. 현재는 두 방식이 겹치는 작업을 수행해 수집 부하를 늘리고 있습니다. 벤치마크를 통해 text index 쿼리가 성능 측면에서도 충분히 버틴다는 점이 확인되면 materialized view를 단순화하거나 제거할 수 있습니다. Aaron은 또한 향후 ClickHouse text index 버전에서 위치 인코딩이 키-값 필터 lookup의 정확도를 어떻게 더 높일 수 있는지에 대한 팀의 질문에도 답했습니다.

**관련 PR:** [#2341](https://github.com/hyperdxio/hyperdx/pull/2341) feat: 로그 및 traces에 기본 direct\_read 최적화 추가, [#2405](https://github.com/hyperdxio/hyperdx/pull/2405) feat(common-utils): SQL 필터에 direct\_read 키-값 항목 최적화 적용, [#2376](https://github.com/hyperdxio/hyperdx/pull/2376) feat: 필터와 자동 완성에 text index 사용

<div id="better-log-parsing">
  ## 더 나은 로그 파싱
</div>

*시연: [@dhable](https://github.com/dhable)*

<Frame>
  <iframe src="https://www.youtube.com/embed/vhkMlddahu4" title="YouTube 동영상 플레이어" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
</Frame>

한 고객의 로그에서는 이벤트 body가 `level` 필드를 포함한 JSON 객체였습니다. 심각도 추론 로직은 두 가지를 수행하고 있었습니다. 먼저 body를 JSON으로 파싱해 속성을 추출하고, OTel에서 심각도가 설정되지 않은 경우에는 문자열 매칭으로 폴백했습니다. 그런데 이 문자열 매칭이 body 내부의 alert manager 이름에 들어 있는 "alert"라는 단어를 잡아내면서 로그 레벨을 잘못 분류하고 있었습니다.

이 수정에서는 가드 조건을 추가했습니다. body가 JSON으로 파싱되고 이미 level 필드를 포함하고 있다면 문자열 추론 단계를 완전히 건너뜁니다. 약 1년 전에 구축한 스모크 test suite 덕분에 새 테스트 케이스만 추가해도 수정 사항을 쉽게 검증하고 관련 엣지 케이스를 포착할 수 있었으며, 이는 정확히 그 목적에 맞게 설계된 것이었습니다.

**관련 PR:** [#2363](https://github.com/hyperdxio/hyperdx/pull/2363) fix(log-parser): body가 level 필드를 포함한 JSON으로 파싱될 때 문자열 추론 건너뛰기

<div id="mcp-server-improvements">
  ## MCP 서버 개선 사항
</div>

*시연: [@brandon-pereira](https://github.com/brandon-pereira)*

<Frame>
  <iframe src="https://www.youtube.com/embed/aIy1zfmlz3Y" title="YouTube 동영상 플레이어" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
</Frame>

이번 주에는 MCP 관련 여러 개선 사항이 적용되었습니다. 이벤트 패턴의 버킷화와 점수화가 개선되었고, 오류 힌트가 향상되었으며, 공용 헬퍼도 정리되었습니다. 또한 제품명에 맞춰 도구 프리픽스도 `hyperdx_`에서 `clickstack_`로 변경되었습니다.

**관련 PR:** [#2337](https://github.com/hyperdxio/hyperdx/pull/2337) feat(mcp): MCP 도구 품질 개선 — 오류 힌트, 공용 헬퍼, 더 나은 메시지, [#2396](https://github.com/hyperdxio/hyperdx/pull/2396) refactor(mcp): 도구 프리픽스를 hyperdx\_에서 clickstack\_로 변경, [#2343](https://github.com/hyperdxio/hyperdx/pull/2343) feat(mcp): patch\_dashboard, get\_dashboard\_tile, search\_dashboards 도구 추가, [#2418](https://github.com/hyperdxio/hyperdx/pull/2418) fix(mcp): 읽기 쉬운 차트 범례를 위한 alias 설명 및 예시 개선, [#2412](https://github.com/hyperdxio/hyperdx/pull/2412) refactor: 공용 헬퍼와 schema 수준 검사를 사용해 MCP ObjectId 검증 단순화

<div id="new-series-color-palette">
  ## 새로운 시리즈 색상 팔레트
</div>

*시연: [@elizabetdev](https://github.com/elizabetdev)*

<Frame>
  <iframe src="https://www.youtube.com/embed/YzECP3diWvg" title="YouTube 동영상 플레이어" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
</Frame>

Elizabet는 Alex의 색상 선택기 작업을 지원하기 위해 HyperDX와 ClickStack 테마 전반에서 데이터 시각화 색상 팔레트를 통합하는 작업을 진행했습니다. 두 테마는 각각 별도의 팔레트와 예외 규칙을 사용하고 있었기 때문에 색상 체계를 파악하기가 불필요하게 복잡했습니다. 목표는 두 테마 모두에서 사용할 수 있는 단일 팔레트를 만드는 것이었습니다.

대비와 접근성을 확인하기 위해 Elizabet는 색각 시뮬레이션 도구를 사용하여 업계 표준 팔레트(Tableau, Observable, IBM)를 테스트했습니다. ClickHouse 팔레트는 성능이 좋지 않았습니다. 녹색이 흰색 배경에서 충분한 대비를 제공하지 못했습니다. Tableau와 Observable은 각각 최소 1개의 검사에서 실패했고, IBM 팔레트는 모든 검사를 통과했지만 색상이 5개뿐이라 충분하지 않았습니다. 전체적으로는 Observable의 팔레트가 가장 적합했고, 파란색을 약간 조정한 뒤 이제 두 테마에서 공통으로 사용됩니다.

**관련 PR:** [#2362](https://github.com/hyperdxio/hyperdx/pull/2362) refactor(theme): chart 팔레트 토큰 이름을 hue 이름으로 변경하고 테마 전반에서 통합

<div id="new-page-layout-with-sticky-header">
  ## 고정 헤더를 지원하는 새로운 페이지 레이아웃
</div>

*데모: [@elizabetdev](https://github.com/elizabetdev)*

<Frame>
  <iframe src="https://www.youtube.com/embed/e7d3ocqi4Ac" title="YouTube 동영상 플레이어" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
</Frame>

새로운 PageHeader와 PageLayout 컴포넌트 조합이 대시보드, 서비스 맵, 클라이언트 세션, Kubernetes, ClickHouse 대시보드 등 모든 주요 페이지에 적용되었습니다. 이제 모든 페이지에서 동일한 패딩, 헤더 아래 구분선, 제목 구조를 사용합니다. 이전에는 페이지마다 구성이 일관되지 않았습니다. 일부는 왼쪽에 제목이 있고 오른쪽에 컨트롤이 있었지만, 일부는 제목이 아예 없었습니다.

고정 동작은 prop으로 선택적으로 활성화할 수 있습니다. sticky 슬롯에 전달한 내용은 스크롤해도 헤더 아래에 계속 고정되며, 나머지 요소는 일반적으로 스크롤됩니다. 아무것도 전달하지 않으면 breadcrumbs 또는 페이지 옵션만 자동으로 고정됩니다.

**관련 PR:** [#2282](https://github.com/hyperdxio/hyperdx/pull/2282) PageHeader/PageLayout 추가 및 Sessions 마이그레이션, [#2345](https://github.com/hyperdxio/hyperdx/pull/2345) 목록 페이지에서 PageHeader 제목 사용, [#2346](https://github.com/hyperdxio/hyperdx/pull/2346) Service Map을 PageLayout으로 마이그레이션, [#2347](https://github.com/hyperdxio/hyperdx/pull/2347) Kubernetes 대시보드를 PageLayout으로 마이그레이션, [#2348](https://github.com/hyperdxio/hyperdx/pull/2348) ClickHouse 대시보드를 PageLayout으로 마이그레이션, [#2364](https://github.com/hyperdxio/hyperdx/pull/2364) feat(dashboard): sticky 쿼리 toolbar와 함께 PageLayout으로 마이그레이션, [#2394](https://github.com/hyperdxio/hyperdx/pull/2394) fix(PageHeader): sticky header가 drawer overlay 아래에 유지되도록 수정

<div id="new-datasource-selector-and-color-picking-for-series">
  ## 새 데이터 소스 셀렉터와 시리즈용 색상 선택기
</div>

*시연: [@alex-fedotyev](https://github.com/alex-fedotyev)*

<Frame>
  <iframe src="https://www.youtube.com/embed/DKfJs9onl50" title="YouTube 동영상 플레이어" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
</Frame>

Alex가 소개한 2가지 UI 개선 사항입니다. 데이터 소스 셀렉터가 더 깔끔하게 정리되었습니다. 이제 이를 클릭하면 선택할 수 있는 데이터 소스만 표시됩니다. 스키마 보기나 새 source 생성 같은 관리 작업은 별도의 케밥 메뉴로 이동했습니다. 이렇게 선택과 구성을 분리해, 오랫동안 할 일 목록에 있던 항목을 반영하고 팀의 피드백에도 대응했습니다.

이제 Number 타일에도 정적 색상 선택기가 추가되어 메트릭에 특정 색상을 지정할 수 있습니다. 임계값이나 컬럼 값을 기준으로 빨간색, 초록색, 노란색으로 바뀌는 조건부 색상 규칙도 현재 작업 중입니다. Elizabet의 통합 팔레트가 적용되면 두 기능 모두 현재의 "color 1, 2, 3" 레이블 대신 적절한 이름이 붙은 색상을 사용하게 되며, 이는 Grafana 같은 도구에서 넘어오는 사용자에게도 의미 있는 개선이 될 것입니다.

**관련 PR:** [#2365](https://github.com/hyperdxio/hyperdx/pull/2365) feat(source-picker): chip + kebab menu UX, [#2265](https://github.com/hyperdxio/hyperdx/pull/2265) feat(app): number tile static color picker

<div id="better-hints-for-dashboard-actions">
  ## 대시보드 작업에 대한 더 나은 힌트
</div>

*[@alex-fedotyev](https://github.com/alex-fedotyev)의 데모*

<Frame>
  <iframe src="https://www.youtube.com/embed/yQaKMSXp8YA" title="YouTube 동영상 플레이어" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
</Frame>

이제 대시보드 테이블 타일의 행에 더 유용한 hover 상태가 표시됩니다. 마우스를 올리면 커서와 아이콘이 바뀌어, 클릭 시 어떤 동작이 수행되는지 알 수 있습니다. 연결된 대시보드를 열거나 data source로 드릴다운하는 동작입니다. 이 변경 전에는 행을 클릭할 수 있다는 점조차 분명하지 않았고, 클릭하면 무엇이 일어나는지도 알기 어려웠습니다.

**관련 PR:** [#2321](https://github.com/hyperdxio/hyperdx/pull/2321) feat(app): 대시보드 table tile row click에 대한 hover 힌트 및 네이티브 링크 affordance