[Pilot Test Analysis System] 레이더 뷰 도입 및 텔레메트리 렌더링 성능 한계 돌파

객체 인식 데이터를 시계열 차트와 병행하여 표출하려 했으나, 차량 주변의 객체 분포를 선형 차트로 이해하기에는 직관성이 매우 떨어졌다. 또한 수만 건의 데이터를 렌더링하기 위해 상태 구간 분할 작업을 수행할 때 메인 스레드가 블로킹되어 차트 패닝(Pan) 조작이 불가능한 수준의 프레임 드랍이 발생했다. 이를 타개하기 위해 웹 워커 연산 오프로딩을 적용하고 극좌표계 기반의 레이더 컴포넌트를 설계하였다.

[TypeScript / Web Worker] Comlink 기반 차트 세그먼트 연산 백그라운드 오프로딩

• uPlot 차트에 데이터를 주입하기 전, 가감속 및 회전 등의 상태 구간을 계산하는 세그먼트 분할 병목을 해결하기 위해 Comlink 기반 전용 워커(chart.worker.ts)를 구축함.
• 무거운 반복 연산을 백그라운드 스레드로 이관하여, 차트 조작 시 발생하던 UI Jank 및 프리징 현상을 완전히 제거함.

[Canvas API / UI Component] 극좌표계 변환 데이터 시각화 및 이진 탐색 프레임 렌더링

• 차량 중심의 극좌표계(r, θ)로 변환된 객체 데이터를 직관적으로 렌더링하기 위해 Canvas API를 활용한 PolarRadarView 컴포넌트를 신설함.
• θ(각도) 값에 따라 객체 인식 포인트의 색상을 구분하고, r(거리) 값이 작을수록(차량에 가까울수록) 채도가 진하게 표출되도록 시각화 로직을 적용함.
• 기존 거동 데이터 그래프에 조향각(Steering Angle) 데이터를 추가하고, 해당 그래프 상단에 보행자 등 객체 인식 시점을 오버레이(Overlay) 표기하여 이벤트의 직관성을 향상함.
• 재생 시점(masterTime) 변경 시 이진 탐색(Binary Search)을 적용하여 가장 인접한 프레임을 O(log N) 속도로 확보하도록 최적화함. 방어적 렌더링 가드(Rendering Guard)를 적용하여 캔버스 과부하를 억제함.

[React / UX] 다중 세션 ZIP 일괄 다운로드 및 Drawer 사이드바 레이아웃 구축

• 기존에 구현된 분석 리포트 자동 저장(PDF, Markdown) 기능을 확장하여, useTableSelection 훅을 통해 다수의 세션 리포트를 단일 ZIP 압축 파일로 일괄 다운로드하는 파이프라인을 구축함.
• 모달 내에 복잡하게 얽혀 있던 필터 컨트롤 영역을 DaisyUI의 Drawer 컴포넌트를 활용한 접이식 사이드바로 리팩토링하여 화면 공간의 활용성과 조작 편의성을 극대화함.