[2편] Grafana 커스텀 패널로 10만 점 산점도 그리기 — 만들고 나서야 보인 함정 3가지

기존 Grafana 패널로는 10만 점 규모의 산점도 렌더링과 정확한 데이터 조회가 불가능해 커스텀 플러그인을 개발했다. 이 과정에서 발견된 세 가지 주요 문제와 해결책을 소개한다.

1. 렌더링 성능 최적화 SVG는 5만 개 이상의 요소에서 DOM 레이아웃 계산으로 멈추는 문제가 있어 Canvas를 사용했다. 점 캔버스와 오버레이 캔버스를 분리해 드래그 시 버벅임을 방지했으며, 색과 모양 조합으로 그룹핑해 fillStyle 전환 횟수를 줄였다. 또한 Y축 상한을 p99 x 1.1로 클램프해 꼬리 긴 응답시간으로 인한 축 확장을 막았다.

2. 쿼리 설계 및 서버 집계 X축(종료 시각)과 정렬 키(시작 시각) 불일치로 인덱스 사용이 불가능했던 문제를 MATERIALIZED 컬럼(ts_end) 물리화로 해결했다. 과도한 점 전송을 줄이기 위해 서버에서 픽셀 격자(tx, ty) 단위로 GROUP BY 집계를 수행했다. 로컬 실측 결과 데이터 행 수가 8.5배 감소하고 조회 시간이 78ms에서 28ms로 단축됐다.

3. 증분 조회 및 캐싱 이벤트 시각의 비단조성으로 인한 데이터 누락을 방지하기 위해 적재 시각(inserted_at)을 커서로 사용하는 증분 조회 방식을 적용했다. 스냅샷과 델타 데이터를 수신하며, ClickHouse query cache를 활용해 첫 조회 후 응답 시간을 33ms에서 6ms로 개선했다. 갱신 주기에 하한을 둬 부하를 통제하고, 2시간 이상 데이터는 롤업 테이블을 사용해 효율을 높였다.