[Pilot Test Analysis System] 네이티브 캔버스 차트 도입 및 다중 리포트 ZIP 스트리밍 파이프라인 구축

2 min read

분석 시스템의 대시보드 렌더링 성능 한계를 극복하고 시각화 품질을 향상시키기 위해 보조 차트들을 네이티브 캔버스 기반으로 전면 마이그레이션했다. 또한 프론트엔드에서 다수의 세션 리포트를 다운로드할 때 발생하는 서버 메모리 누수와 응답 지연 문제를 해결하기 위해, 리포트와 스냅샷 이미지를 실시간 ZIP 아카이브로 묶어 스트리밍하는 고효율 파이프라인을 구축했다. 추가로 데이터 분석 전담 모듈의 초기 기반을 설계했다.

[uPlot / Rendering] 네이티브 Canvas Plugin 기반 상태 표시바 최적화

  • 수백 개의 HTML 요소를 생성하여 렌더링 부하를 유발하던 기존 상태 표시바 로직을 제거하고, uPlot 내부의 Canvas Drawing API를 직접 호출하여 화면을 그리는 고성능 아키텍처를 도입했다.
  • 메인 데이터 배열에 보조 지표 데이터를 병합하여 지연 시간 없이 동시에 렌더링되도록 수정하고, 캔버스의 서브 플롯 영역을 논리적으로 할당하여 시각적 간섭을 차단했다.

[React / UX] 컴포넌트 재사용성 강화 및 레이아웃 분리

  • 비디오 재생 모듈과 분석 리포트 모듈에 혼재되어 있던 UI 컴포넌트들을 통합하고 도메인 경계를 명확히 분리하는 리팩토링을 수행했다.
  • 화면 공간을 확보하기 위해 사이드바 레이아웃을 Drawer 패턴으로 교체하여 지도 및 차트의 가시 영역을 넓히고, CSS 제어를 통해 차트 영역 팽창 버그를 해결했다.

[Frontend / Interface] 대량 리포트 일괄 다운로드 UX 도입

  • 여러 개의 주행 세션을 화면에서 동시에 선택하여 Markdown 및 PDF 형태로 일괄 다운로드할 수 있는 다중 선택 인터페이스를 구현하여 사용자 편의성을 크게 향상시켰다.
  • 렌즈 캘리브레이션 파라미터를 기반으로 변환된 극좌표계(r, θ) 이벤트 데이터를 조향각, 가속페달, 속도 등 개별 동역학 지표와 함께 차트에 투영했다. 각도(θ)에 따라 색상을, 거리(r)에 따라 채도를 조절하여 렌더링함으로써 다수의 위험 객체 이벤트를 직관적으로 매핑했다.

[Spring Boot / Streaming] 다중 세션 ZIP 아카이브 파이프라인 구축

  • 클라이언트로부터 전달된 세션 ID 목록을 기반으로 데이터베이스에서 리포트 메타데이터를 일괄 조회하는 최적화 쿼리를 작성했다.
  • 디스크에 중간 임시 파일을 생성하지 않고, 메모리 부하 없이 실시간으로 압축 파일을 스트리밍 생성하여 응답하는 다운로드 엔드포인트를 구현했다. 압축 파일 내부에 논리적 디렉토리 계층을 자동 생성하여 파일 참조 링크의 무결성을 보장했다.

[Spring Security / Authentication] 글로벌 보안 규칙 및 인증 필터 적용

  • 보호 대상 엔드포인트에 글로벌 매칭 패턴을 적용하여, 단일 리포트 다운로드와 다중 세션 ZIP 다운로드 엔드포인트 모두가 공통된 JWT 인증 필터를 통과하도록 Spring Security 라우팅 규칙을 리팩토링했다.

[Architecture / Design] 실시간 데이터 분석 전담 모듈 초기화

  • 텔레메트리 분석 파이프라인을 고도화하기 위해 실시간 데이터 분석 연산을 전담하는 신규 Spring Boot 모듈 아키텍처를 구성했다.
  • InfluxDB 시계열 데이터베이스 연동 환경을 별도로 구축하고, 인증 인터셉터를 추가하여 내부 모듈 간 안전한 보안 통신 기반을 마련했다.
  • 렌즈 캘리브레이션 파라미터를 활용하여 BBOX 좌표를 극좌표계(r, θ)로 정밀 변환하고 인지 반응 분석 엔진에 주입하는 워커 레이어의 데이터 흐름을 설계했다.