part1

의료영상에 대한 AI로 처리한 영상 결과를, 원본과 한 화면에서 비교·검증할 수 있는 웹 뷰어를 개발했습니다.

주요 기술: React, TypeScript, Zustand, Styled-components, Webpack, Rsbuild, Service Worker

서비스 워커 기반 이미지 캐싱 계층 구축 및 메모리 최적화

수천 장 규모의 의료 이미지를 연속 넘김 시 발생하는 동일 이미지 재요청 및 탭 메모리 누적 문제를 방지하기 위해, 이미지 요청만을 대상으로 하는 Service Worker 기반 Cache-First 저장 및 응답 체계를 구축했습니다.

캐시 사용량 실측 결과 대부분 512MB에서 1GB 미만 범위 내에서 수용 가능한 점을 반영하여, Workbox ExpirationPlugin으로 캐시 수명 7일 및 디스크 저장 용량 상한선 1GB(9,000건)를 설정하고 브라우저 할당량 초과 시 캐시를 자동 비우도록 purgeOnQuotaError 옵션을 적용했습니다.

웹 서비스 업데이트 시 구버전 프레임 캐시가 남지 않도록, 웹 서비스 산출물 목록 기반의 빌드 해시를 캐시 저장소 이름에 결합하여 해시 변경 시 이전 캐시 데이터를 자동 삭제하도록 구현했습니다.

이미지 호출 및 캐시 저장 실패 상황에서도 이미 호출된 네트워크 응답을 활용해 화면 열람을 유지하도록 예외 처리를 구성하여 캐시 오류로 인한 불필요한 재요청을 차단했습니다.

개발 환경 빌드 도구 마이그레이션

Webpack에서 Vite로 전환할 경우 기존 커스텀 설정을 재작성하는 공수가 큰 상황에서, Webpack 호환성이 높은 Rust 기반 Rsbuild를 도입하여 기존 환경의 변경 비용을 줄였습니다. 결과적으로 HMR 시간을 3초에서 0.7초로 약 4배 단축하여 로컬 개발 피드백 루프를 개선했습니다.

공용 뷰어 통합 및 화면 레이아웃 최적화

제품별로 분리된 화면 구조로 인해 원본 이미지, AI 처리 결과, 작업 상태, 설정값을 개별 확인하며 발생하던 검토 지연을 해결하기 위해, 핵심 기능을 단일 화면 흐름으로 통합한 공용 뷰어를 구축했습니다.

화면 전환 없이 비교 및 검토 작업이 가능하도록 사이드 패널 내 작업 선택 및 상태 확인 기능을 배치하고, 선택 시 원본과 결과를 즉시 대조할 수 있도록 나란히 보기, 단독 보기, 겹쳐 보기 등 비교용 통합 레이아웃을 구현했습니다.