[Pilot Test Analysis System] 4채널 비디오 동기화 및 Web Worker 기반 데이터 처리

지난달 PostGIS 기반 공간 데이터 아키텍처를 도입하고 대시보드 UI 모듈화를 통해 렌더링 성능을 획기적으로 개선했음에도 불구하고, 대용량 텔레메트리 데이터와 4채널 주행 비디오를 브라우저에서 동시에 재생할 때 발생하는 메인 스레드 블로킹 현상은 새로운 과제로 남아있었다. 이러한 제약을 극복하고 브라우저 환경에서 대규모 텔레메트리 데이터와 다채널 영상을 지연 없이 동기화하기 위해, 상태 관리 아키텍처를 전면 개편하고 Web Worker 기반의 연산 오프로딩을 구현했다.

[React / Architecture] 2x2 쿼드런트 레이어 및 다중 비디오 동기화

• 전면, 후면, 좌/우측 비디오를 2x2 쿼드런트 레이아웃에 배치하고, 메인 타임라인에 맞춰 4개의 영상이 오차 없이 동기화되도록 시스템 아키텍처를 설계했다.
• 무한 탐색 루프 현상을 방지하기 위해 React의 렌더링 사이클을 우회하는 수동 상태 구독(Subscribe) 방식을 채택하여 업데이트 성능을 극대화했다.
• 영상 동시 재생 시 프레임 지연을 방지하기 위해 메인 스레드의 개입을 최소화하는 렌더링 파이프라인을 구축했다.

[Web Worker / Data Pipeline] 브라우저 스레드 오프로딩 및 비동기 처리

• 대규모 텔레메트리 JSON 페이로드를 브라우저 메인 스레드에서 파싱할 때 발생하는 블로킹 현상을 해결하기 위해, Comlink 기반의 Web Worker를 도입하여 데이터 연산 부하를 백그라운드 계층으로 격리했다.
• 백그라운드 스레드에서 방대한 GPS 및 차량 거동 데이터를 필터링하고 다운샘플링하도록 데이터 처리 파이프라인을 분리했다.
• 비디오 재생 모드 진입 시, 불필요한 대시보드 폴링(Polling) 요청을 강제 비활성화하여 네트워크 및 렌더링 리소스 낭비를 차단했다.

[Zustand / State Management] 3-Tier 전역 상태 관리 모델 적용

• 거대해진 전역 상태를 목적에 따라 분리하기 위해 Zustand 기반의 3-Tier 아키텍처를 도입했다.
• 전역 UI 상태, 대시보드 상태, 비디오 세션 상태로 명확히 분리하여 상태 오염을 방지하고 상태 변경 추적의 안정성을 확보했다.