[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, θ)로 정밀 변환한 뒤 인지 반응 분석 엔진에 주입하는 워커 레이어 데이터 흐름을 설계했다.