[Pilot Test Analysis System] 4채널 비디오 동기화 및 Web Worker 기반 데이터 처리
• 2 min read
이전 작업으로 PostGIS 기반 공간 데이터 아키텍처 도입과 대시보드 UI 모듈화로 렌더링 성능을 개선했으나, 대용량 텔레메트리 데이터와 4채널 주행 비디오를 브라우저에서 동시 재생할 때 발생하는 메인 스레드 블로킹 현상을 해결해야 했다. 브라우저 환경 내 대규모 텔레메트리 데이터와 다채널 영상을 지연 없이 동기화하기 위해 상태 관리 아키텍처를 전면 개편하고 Web Worker 기반 연산 오프로딩을 구현했다.
[React / Architecture] 2x2 쿼드런트 레이어 및 다중 비디오 동기화
- 전후좌우 비디오를 2x2 쿼드런트 레이아웃에 배치하고, 메인 타임라인에 맞춰 4개 영상을 오차 없이 동기화하도록 시스템 아키텍처를 설계했다.
- 무한 탐색 루프 현상을 방지하기 위해 React 렌더링 사이클을 우회하는 수동 상태 구독 방식을 채택해 업데이트 성능을 향상시켰다.
- 다중 영상 재생 시 프레임 지연을 방지하기 위해 메인 스레드 개입을 줄이는 렌더링 파이프라인을 구축했다.
[Web Worker / Data Pipeline] 브라우저 스레드 오프로딩 및 비동기 처리
- 대규모 텔레메트리 JSON 페이로드를 브라우저 메인 스레드에서 파싱할 때 겪는 블로킹 현상을 해결하기 위해 Comlink 기반 Web Worker를 도입해 데이터 연산 부하를 백그라운드 계층으로 분리했다.
- 백그라운드 스레드에서 대량 GPS와 차량 거동 데이터를 필터링하고 다운샘플링하도록 데이터 처리 파이프라인을 분리했다.
- 비디오 재생 모드 진입 시 불필요한 대시보드 폴링 요청을 강제 비활성화해 네트워크와 렌더링 리소스 낭비를 제거했다.
[Zustand / State Management] 3-Tier 전역 상태 관리 모델 적용
- 비대해진 전역 상태를 목적별로 분리하기 위해 Zustand 기반 3-Tier 아키텍처를 도입했다.
- 전역 UI 상태, 대시보드 상태, 비디오 세션 상태로 역할을 명확히 분리해 상태 오염을 방지하고 변경 추적 안정성을 확보했다.