[Pilot Test Analysis System] 비디오 스트리밍 최적화, 텔레메트리 차트 시각화 및 PRT 분석 모델 구축
• 3 min read
초기 비디오 스트리밍 과정에서 발생한 로딩 지연과 렌더링 프레임 드랍 현상을 해결하기 위해 Nginx 기반 스트리밍 설정을 튜닝하고 React DOM 제어를 명령형으로 변경하는 등 프론트엔드와 네트워크 계층 전반을 최적화했다. 아울러 대규모 분석 리포트를 다중 조건으로 검색하는 허브 시스템을 구축하고, 운전자 인지 반응 시간(PRT) 산출 및 동적 집계 쿼리용 분석 모델을 통합 구현했다.
[Nginx / Media Streaming] MP4 스트리밍 모듈 및 버퍼 최적화
- 타임라인 탐색을 매끄럽게 지원하기 위해 Nginx에 MP4 모듈 및 Byte-Range 요청 헤더를 활성화해 동영상 탐색 중 발생하는 프리징 버그를 해결했다.
- 대용량 텔레메트리 페이로드를 안정적으로 전달하기 위해 프록시 버퍼 사이즈를 상향하고 Gzip 압축을 활성화해 네트워크 페이로드를 경량화했다.
- 웹 브라우저 호환성을 확보하기 위해 H.265 코덱으로 녹화된 액션캠 원본 영상을 H.264 포맷으로 사전 인코딩하는 백그라운드 변환 파이프라인을 추가해 크로스 브라우저 범용성을 갖췄다.
[Spring Boot / In-Memory Data] Caffeine Cache 레이어 구축
- 데이터베이스로 빈번히 인입되는 텔레메트리 API 호출 부하를 줄이기 위해 Spring Boot 캐시 추상화 계층을 활성화했다.
- 초고속 로컬 캐시 라이브러리 Caffeine Cache를 도입하고 TTL 및 최대 캐시 엔트리를 설정해 최신 데이터를 지연 없이 신속 제공하는 응답 파이프라인을 구축했다.
[React / Visualization] uPlot 기반 텔레메트리 차트 렌더링 최적화
- 상태 업데이트 지연을 방지하기 위해 uPlot 차트 좌표를 직접 추출해 막대 차트와 툴팁이 즉각 동기화되도록 시각화 레이아웃 시스템을 개편했다.
- 재생 도중 마우스 좌표가 흔들리는 문제를 해결하기 위해 커서 수직 좌표를 캐싱하고 X축 이동에만 반응하도록 툴팁 포지셔닝 로직을 수정했다.
[Leaflet / Map Interface] 이진 탐색 기반 고성능 맵 동기화
- 타이머 업데이트 시 수만 개 좌표 배열을 필터링하는 연산 부하를 제거하기 위해 이진 탐색 알고리즘을 도입해 O(log N) 성능으로 현재 위치를 조회하는 맵 동기화 아키텍처로 변경했다.
- React 가상 DOM 렌더링 파이프라인을 우회하고 Leaflet 명령형 API로 맵 좌표와 팝업 요소를 직접 조작해 비디오 재생 간 부드러운 화면 전환을 구현했다.
[Spring Boot / Component] Report Hub 검색 및 필터링 시스템 구축
- 복수 주행 세션을 자치구, 방문 일자, 태그 등 다중 조건으로 통합 검색하는 Report Hub 대시보드 페이지를 신규 개발했다.
- 서버사이드 페이징 데이터 포맷(PagedModel)에 맞춰 페이지네이션 컨트롤러를 동기화하고, 복잡한 검색 로직을 순수 함수 유틸리티로 분리해 컴포넌트 코드 가독성을 개선했다.
[Data Analysis / Domain] PRT 통합 분석 모델 설계
- 기존 초기 반응 및 물리적 반응 시간 측정 기준을 통합해 단일 PRT 모델(평균/최소/최대 반응 시간) 스키마를 새롭게 설계했다.
- 텔레메트리 서버에서 통계 지표를 수집하는 서비스 로직을 확장하고, 분석 조건 변경 시 기존 데이터를 정리한 후 신규 기준으로 즉각 재생성하도록 데이터 무결성 제어 로직을 보완했다.
[JPA / Database] Criteria API 기반 동적 집계 쿼리 엔진
- 다중 검색 조건 및 태그 조합(AND/OR 조건)에 맞춘 유연한 데이터 필터링을 지원하기 위해 JPA CriteriaBuilder 패턴을 적용했다.
- 필터링된 모든 세션의 총 주행 거리 및 주행 시간을 데이터베이스 계층 내 SUM, COALESCE 연산으로 즉각 집계해 단일 DTO로 반환하는 API를 설계하여 애플리케이션 서버 부하를 줄이고 응답 속도를 개선했다.