![[2편] Grafana 커스텀 패널로 10만 점 산점도 그리기 — 만들고 나서야 보인 함정 3가지 섬네일](https://miro.medium.com/v2/resize:fill:64:64/1*dmbNkD5D-u45r44go_cf0g.png)
핵심 요약
여기어때가 Grafana 커스텀 패널로 10만 점 산점도 렌더링을 구현하고, 기본 패널의 한계를 넘어 트레이스 데이터를 직관적으로 시각화하는 아키텍처를 제시했습니다.
구현 방법
- OpenTelemetry + ClickHouse로 AP М 트레이싱 데이터 파이프라인 구성
- Grafana 패널 플러그인: plugin.json, module.ts, React 기반 ScatterPanel 구현
- 렌더링 전략: 캔버스 기반 이중 구조(점 데이터 캔버스 + 오버레이)로 드래그 영역 및 좌표 변환, Y축 클램프 처리, 색상/모양 그룹화 렌더링
주요 결과
- 대용량(10만 점) 렌더링에 적합한 설계와 구현 방식 제시
- 색상/모양의 조합 및 이중 캔버스 구조로 성능 최적화 및 UX 향상에 대한 실무 가이드 제시
