데이터 규모와 목적별 렌더링 엔진 최적화를 통한 Timeline UI 설계

Context

범용적인 Timeline UI 라이브러리들이 스토리텔링과 운영 대시보드의 서로 다른 요구사항을 단일 구조로 처리함에 따른 성능 저하 발생. 특히 DOM 기반 렌더링 방식은 대규모 실시간 데이터 처리 시 브라우저 리소스 고갈 및 렌더링 병목 현상을 초래함.

Technical Solution

• 100k+ 대규모 데이터 처리를 위해 DOM 대신 Canvas 기반 렌더링 엔진을 채택하여 렌더링 오버헤드 최소화
• 실시간 업데이트 및 부드러운 스크롤 구현을 위해 픽셀 단위 제어가 가능한 OO API 구조 설계
• 목적에 따른 렌더링 전략 분리: 리치 미디어 중심의 스토리텔링은 DOM/HTML 방식, 고밀도 데이터 탐색은 Canvas 방식 적용
• 데이터 규모(10~100k+)에 최적화된 상이한 데이터 구조 및 인터랙션 레이어 분리 설계
• 프레임워크 종속성을 낮춘 Vanilla JS 기반 핵심 로직 구축 후 Angular 등 특정 프레임워크용 Wrapper 제공