Multi-threading 도입으로 4억 개의 데이터 포인트를 1초 내 렌더링

Context

복잡한 시나리오에서 고성능 데이터 처리가 필요한 JavaScript 기반 데이터 시각화 라이브러리의 한계 직면. 단일 스레드 기반의 JS 환경에서 대규모 데이터 셋 렌더링 시 발생하는 UI Lag 및 처리 속도 저하 해결 필요.

Technical Solution

• 메인 스레드 부하 분산을 위한 built-in Multi-threading 아키텍처 적용
• 40개 채널 및 채널당 1,000만 개 데이터 포인트의 병렬 처리 로직 구현
• 데이터 로딩, Zoom-in/out, Reload 작업 시 UI 블로킹을 방지하는 비동기 처리 구조 설계
• 계층적 데이터 시각화를 위한 Sunburst Chart 도입을 통한 Part-to-whole 관계 표현 최적화
• 다중 차트와 요약 테이블을 결합한 Dashboard 구조를 통해 데이터 탐색 효율 증대

Impact

• 총 4억 개(40 channels * 10M points)의 데이터 포인트를 1초 내 로딩 완료
• 대규모 데이터 셋 상태에서 Zoom 및 Reload 시 Lag 없는 인터랙션 달성

Key Takeaway

브라우저의 싱글 스레드 제약을 극복하기 위해 연산 집약적인 데이터 처리 로직을 Multi-threading으로 분리함으로써 UX 성능과 데이터 처리량을 동시에 확보한 사례