#Frontend

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

Summary

Grafana 기본 차트로는 버벅이던 10만 개 산점도, 직접 만든 커스텀 패널로 부드럽게 정복하기

React와 이중 Canvas, ClickHouse 성능 튜닝으로 완성한 대용량 APM 시각화 엔지니어링의 정수

본 아티클은 OpenTelemetry 수집 데이터를 Grafana 대시보드 상에 끊김 없이 고성능 산점도로 표현하기 위한 커스텀 패널 개발 과정을 다룹니다. 기존 차트 라이브러리들의 렌더링 성능과 상호작용 한계를 돌파하기 위한 브라우저 레벨 최적화 팁을 공유합니다. 대규모 모니터링 시스템을 구축해야 하거나 프론트엔드 그래픽 가속을 다루는 엔지니어들에게 실무 수준의 아키텍처 가이드를 제시합니다.

01정상/지연/에러 상태와 요청 유형을 색상과 모양의 독립적인 두 축으로 매핑해 시각적 가독성 최대화
02대용량 드래그 렌더링 시 버벅임을 없애기 위해 물리적으로 역할을 나눈 초경량 이중 캔버스 기법 도입
03조회 시 ClickHouse의 미니맥스 인덱스가 작동하도록 ts_end 컬럼을 물리화하여 데이터 조회 연산 가속화
04StandardEditorProps 커스텀 에디터를 통한 그라파나 내부 등록 데이터소스 목록 동적 로드 설계
05웹팩 빌드 결과 캐싱 현상 등 로컬 개발 과정에서 부딪히기 쉬운 실무 지향 트러블슈팅 팁 제안

RECOMMENDATION

수만 건 이상의 고정밀 실시간 데이터 시각화가 필요한 프론트엔드 개발자나, 사내 모니터링 및 옵저버빌리티 인프라를 유기적으로 확장하려는 데브옵스 엔지니어에게 일독을 권합니다.

The Problem

기존 그라파나의 기본 제공 패널들은 대용량 산점도 시각화 환경에서 데이터 점 상태 구분, 드래그 영역 세부 재조회, 다양한 카테고리의 독립적 표현 및 10만 건 이상의 대규모 데이터 렌더링 시 발생하는 병목 현상을 해결하지 못했습니다.

The Solution

HTML5 Canvas API 기반의 이중 캔버스 구조(데이터용과 드래그 영역용 레이어 분리)를 채택한 커스텀 그라파나 패널 플러그인을 개발하였고, 조회 성능을 개선하기 위해 ClickHouse에 ts_end 물리 컬럼을 생성하고 skip index를 도입했습니다.

The Result

10만 개 단위의 대규모 실시간 요청 데이터도 웹 브라우저 렉 현상 없이 안정적으로 렌더링되었으며, 정상 및 에러 상태와 카테고리를 직관적인 도형과 색상 조합으로 정교하게 시각화하여 모니터링 효율성을 향상시켰습니다.

Trade-off

필터 변경 시마다 수만 개의 점 객체를 재생성하여 호스팅 메모리에 가해지는 부하가 존재하며, 로컬 개발 시에는 브라우저의 플러그인 캐싱(max-age=3600) 정책으로 인해 매번 캐시 우회 강제 새로고침을 적용해야 하는 불편함이 따릅니다.

Key Concepts

Concept · 01

Grafana Custom Panel Plugin

그라파나 생태계 내에서 기본 제공 시각화를 넘어 개발자가 직접 UI 컴포넌트와 속성 에디터를 직접 디자인할 수 있게 지원하는 프론트엔드 확장 아키텍처입니다.

plugin.json에 고유 식별자(id)를 지정하여 대시보드 설정과 런타임에 올바르게 로드되도록 바인딩
PanelPlugin 클래스로 우측 옵션 사이드바의 설정 요소와 React 컴포넌트의 props를 일대일 매핑
Custom Editor를 구현해 그라파나 실행 환경에 등록된 Loki나 Tempo 등의 데이터소스를 동적으로 탐색하여 동적 UI 구성

Concept · 02

Dual Canvas Layering

대량의 정적 데이터 렌더링 레이어와 사용자의 실시간 움직임에 반응하는 조작 레이어를 분리하여 화면 다시 그리기 연산 비용을 최소화하는 하드웨어 가속 기법입니다.

수만 개의 데이터 포인트를 렌더링하는 전용 Canvas와 사용자의 드래그 영역만 처리하는 오버레이 Canvas를 중첩 배치
마우스 좌표 이동에 따라 상위 오버레이 영역만 지운 뒤 사각형을 그려 60fps 수준의 즉각적인 인터랙션을 제공
데이터 배열의 불필요한 반복 탐색 및 그리기 과정을 제거하여 프론트엔드 렌더링 속도 비약적 상승

Concept · 03

DataFrame

그라파나 내부에서 데이터를 컬럼 단위 배열로 포맷팅하여 관리하는 표준화된 구조로 ClickHouse 같은 열 지향 데이터베이스와 높은 호환성을 보입니다.

DataFrame의 fields 속성을 순회하며 필요한 컬럼명을 찾아 단일 인덱스 기준으로 values에 매핑
데이터가 존재하지 않거나 스키마 불일치 오류가 날 때 대시보드가 죽지 않도록 방어적인 전처리 검증 코드 구성
1차 변환 파이프라인에서 필터링 단계와 가볍게 분리하여 리렌더링 시의 연산 부하를 제어

Continue reading · same source

More from 여기어때

View all posts from 여기어때

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

Summary