[Pilot Test Analysis System] 밀리초 단위 고해상도 텔레메트리 시각화 엔진

주행 텔레메트리 데이터를 직관적으로 시각화하고 분석가 편의를 개선하기 위한 대화형 인터페이스를 구축했다. 고해상도 데이터 실시간 렌더링 최적화 및 사용자 경험(UX) 개선을 핵심 목표로 설정했다.

[TypeScript / Visualization] 밀리초 단위 텔레메트리 차트 렌더링

• 차트 확대 시 축 정렬이 어긋나고, 불연속적 센서 데이터로 인해 그래프가 계단형으로 왜곡되는 시각적 결함을 해결했다.
• 속도, 가속도, 조향각 데이터에 이동 평균 필터 및 스플라인 보간법을 적용해 궤적이 자연스럽게 렌더링되도록 개선했다.
• 줌 인·아웃 조작 시 동기화된 다중 차트 간 스케일을 강제 정렬해 시각적 불일치를 해결했다.
• 재생 구간 내 차트 패닝을 차단하고, 사용자가 지정한 줌 레벨을 지속 유지하도록 상호작용 제어 로직을 개선했다.

[React / UI Component] 심층 분석용 썸네일 타임라인 인터페이스

• 전체 주행 기록 중 미세 상황을 추적하기 위해 밀리초 단위 정밀 구간 분석 모달 컴포넌트를 추가하고, 차트 하단에 썸네일 타임라인을 결합했다.
• Y축 스케일 동적 조정 기능을 도입해 주행 속도 변화폭에 비례하도록 차트 렌더링 범위를 자동 최적화했다.
• 차트 영역 내 마우스 더블 클릭 이벤트를 감지하여 줌 초기화 기본 동작을 방지하고 특정 시간대 상세 분석 모달을 즉시 호출하게 연동했다.

[TypeScript / Analytics UI] 주행 이벤트 필터링 및 타임라인 오버레이

• 좌·우회전, 지정 속도 초과 등 특정 조건에 일치하는 이벤트를 신속 탐색하는 필터 기능 요구사항을 수용했다.
• 사전 정의 주행 프리셋을 선택하거나, 속도 및 조향 변화율 등 수치 조건을 조정하는 전용 필터 패널을 구축했다.
• 백엔드 이벤트 추출 API와 통신해 조건 일치 구간을 추출한 후, 이를 재생 진행률 바 위에 상호작용 가능 마커로 렌더링했다.
• 차트 툴팁 내에 인접 이벤트 대비 경과 시간을 실시간 연산 표출해 상황 전후 인과관계 분석 효율을 개선했다.

[React / Map Display] GPS 궤적 및 공간 데이터 시각화 개선

• 과거 궤적과 현재 주행 위치가 명확히 구분되지 않던 단일 선 렌더링 방식의 GPS 궤적 묘사를 수정했다.
• 전체 GPS 궤적을 저투명도 베이스라인으로 렌더링하고, 이미 주행을 마친 구간만 고투명도로 렌더링하는 이중 렌더링 방식을 적용했다.
• 어린이 보호구역 등 공간 폴리곤 데이터를 특정 줌 레벨 이상 조건하에 제한적으로 표시하고, 고대비 색상을 적용하여 위성 지도상 시인성을 개선했다.