21.6.3.2 브라우저 OOM 방어를 위한 LTTB(Largest Triangle Three Buckets) 알고리즘 다운샘플링

Zenoh 망에서 웹소켓을 타고 과거 데이터와 현재 데이터가 하나의 무결점 시간 배열로 합쳐졌다(21.6.3.1장 참조).
하지만 이 배열이 1초에 100개씩 쌓이는 고정밀 로봇 관절의 텔레메트리(Telemetry) 라면 어떻게 될까? 1시간만 지나도 데이터 포인트는 36만 개, 하루면 860만 개가 브라우저의 전역 상태(Zustand Map) 안에 적재된다.

이 800만 개의 점을 Recharts 나 Chart.js 같은 프론트엔드 라이브러리에 냅다 밀어 넣으면 브라우저의 V8 자바스크립트 엔진 메모리 한계(Memory Limit, 통상 1.4GB)를 찢어버리고 크롬 탭이 차갑게 죽어버린다(OOM, Out of Memory 크래시).
본 절에서는 인간의 망막이 어차피 구별하지 못하는 초정밀 픽셀 데이터를 수학적으로 박살 내어 용량을 1/1000로 압축하면서도 시각적인 피크점(Anomaly Spike)만은 악착같이 살려내는 극강의 다운샘플링 수술, LTTB(Largest Triangle Three Buckets) 알고리즘 런북을 갈파한다.

1. N-th 다운샘플링의 기만과 피크(Peak) 증발

메모리가 터지는 초보 개발자들이 가장 먼저 사용하는 임시방편은 “데이터 10개 중 1개만 남기고 다 버리기” 와 같은 무식한 모듈로 연산(index % 10 === 0)이다.

정상 궤도: 로봇 모터 온도가 20도에서 평화롭게 머물고 있다. 10개씩 버려도 차트 선형에는 문제가 없다.
파멸 궤도: 찰나의 순간, 로봇 온도가 1초 동안 500도로 솟구쳤다가 20도로 다시 내려왔다! (장애 스파이크) 이 스파이크가 하필 버려지는 9개의 인덱스 사이에 끼어 있었다면? 관제 대시보드 화면상에는 이 500도의 치명적 에러가 선 한 번 그어지지 않은 채 암살당해 버린다(Spike Loss).

관제 차트에서 튀어 오르는 에지(Edge) 데이터를 잃어버리는 것은 관제의 본질 자체를 기만하는 행위다.

2. 수학적 마법: LTTB 버킷 분할과 면적 극대화 보존

아키텍트는 단순 무식한 컷팅(Modulus)을 버리고, 빅데이터 시각화의 성배로 불리는 LTTB (Largest Triangle Three Buckets) 알고리즘을 Node.js 중계기나 브라우저의 Web Worker 단에 박아넣는다.

이 수학 공식의 사상은 다음과 같다.

인간의 모니터 가로 픽셀은 기껏해야 1920px 이다. 데이터를 딱 모니터 픽셀 수인 1,000개 정도의 묶음(Buckets)으로 찢어놓는다.
두 번째 묶음 안에서 어떤 놈을 대표로 뽑을지 고를 때, 앞 묶음의 대표점과 뒤 묶음의 평균점을 이어 삼각형(Triangle) 을 그린다.
그 삼각형 묶음 내 수많은 점들을 하나하나 연결해 가며 가장 삼각형의 면적(Area)이 거대하게 나오는 녀석 하나를 해당 묶음의 대표로 차출한다!

// [LTTB 시각 지배 다운샘플링 런북]
import { downsample } from 'lttb';

// 무려 10만 개의 로봇 시계열 포인트가 들어있다 치자. 
// 이 데이터가 차트 라이브러리에 박히기 직전 가로채어 수술대에 올린다.
const rawData = useRobotStore(state => state.telemetryHistory);

// 인간 눈으로 구별되는 마지노선인 1,000 포인트로 무자비하게 깎아버린다!
const compressedData = downsample(rawData, 1000); 

return <LineChart data={compressedData} />;

3. 시각적 무결성(Visual Integrity)과 OOM 분쇄

이 알고리즘이 브라우저 렌더러 앞단을 덮치면 두 가지 기적이 일어난다.

첫째, OOM (Out of Memory)의 영구 종식.
800만 개의 점이 브라우저 메모리로 날아오더라도 배열 사이즈는 무조건 1,000개로 수렴하여 고정(Clamp)된다. HTML DOM Node 개수가 락온(Lock-on)되므로 브라우저 프레임은 1년 365일을 켜놓아도 절대 60 FPS 에서 추락하지 않는 방탄 복원력을 거머쥔다.

둘째, 스파이크 장애점의 절대 사수.
LTTB 의 삼각형 면적 극대화 논리 구조상, 조용하던 값들 속에 갑자기 미친 듯이 위로 솟구친 점(Spike)이 발생하면 그 점을 대조해 만든 삼각형의 넓이는 수학적으로 무조건 최대폭으로 벌어지게 된다. 알고리즘은 본능적으로 이 평범하지 않은 장애 극단치 데이터(Outlier/Anomaly)를 자신의 버킷 대표선수로 채택하여 생존시킨다.

데이터의 양적인 허례허식을 무참히 갈아버리되, 관리자가 봐야 하는 시각적 극치(Anomaly Peak)의 진실만을 모니터 픽셀 해상도의 한계선 안으로 강압적으로 압축해 내는 것. 이것이 쏟아지는 Zenoh L7 폭우 속에서 프론트엔드 V8 엔진의 심장 정지를 틀어막고 압도적 시각 통제권을 사수해 내는 궁극의 퍼포먼스 튜닝이다.