김용희

2.5GB(약 1만 개) 다운로드에서 arrayBuffer()·JSZip 방식이 Chrome Memory 스냅샷 기준 ArrayBuffer가 전체의 90% 이상(약 2GB)을 점유해 UI 지연·멈춤이 발생하던 문제를, fetch 응답 ReadableStream을 ZipWriter로 단일 ZIP에 실시간 기록하고 createWritable로 디스크에 저장하는 혼용(스트리밍 수신 → 단일 ZIP) 구조로 전환했습니다.
혼용 구조를 통해 ArrayBuffer 점유를 90% 이상에서 52% 이하로 절감해, 메모리 고갈 없이 대용량 다운로드를 안정적으로 할 수 있게 개선했습니다.

1만 개 이상의 파일 업로드 시 무거운 파싱 연산이 메인 스레드를 장시간 점유하여 발생하는 병목 현상을 해결하고자 연산 구조를 재설계했습니다.
메인 스레드는 목록/분류에 필요한 최소 정보만 신속히 읽도록 역할을 최소화하고, 상세 파싱 연산은 백그라운드의 Web Worker을 사용했습니다.
CPU 코어 수 기반으로 Worker 개수를 제어하고 JS Heap 메모리 사용률을 모니터링하여 처리 배치(Batch) 크기를 동적으로 조절하는 스케줄러를 구축했습니다.
진행 상태 업데이트 이벤트를 배치 단위로 패칭하여 불필요한 메인 스레드 리렌더링과 메모리 부하를 방지했습니다. 종합적으로 스크립트 실행 시간을 단축(29.8초 → 13.4초)시켜 안정적인 UI 반응성을 확보했습니다.

신규 기능 추가나 코드 수정 후 기존 코어 기능에 의도치 않은 회귀가 발생하는 것을 줄이기 위해, Jest 및 React Testing Library 기반의 회귀 테스트 환경을 구축하고 풀 리퀘스트(PR) CI 파이프라인에 연동했습니다.
파일 업로드 처리, 작업 목록·트랜잭션 조회 등 핵심 기능을 중점으로 주요 UI 동작을 검증하는 체계를 적용하여, 코드 병합 전 테스트된 영역의 회귀를 사전에 차단하도록 하여 서비스 안정화를 향상시켰습니다.

작업 목록 진입 시 FCP 10.7초, LCP 21.5초로 초기 로딩이 느렸던 문제를 해결하기 위해, React.lazy와 Suspense를 활용한 라우트 단위 코드 분할을 적용하고 번들 청크 로드 순서를 최적화했습니다.
동일 조건 측정 기준 FCP를 10.7초에서 3.4초로 약 68% 단축하고 LCP를 21.5초에서 3.6초로 약 83% 단축하여 초기 화면 표시 속도를 크게 개선했습니다.

데모 버전 관찰을 통해 발견된 UI/UX 문제점과 파편화된 디자인 요소, Props Drilling 현상을 근본적으로 해결하기 위해, 정식 서비스 개발 초기 단계부터 화면 외부 뼈대 구조를 새로 설계하고 디자인 토큰 중앙화 기반의 Storybook 디자인 시스템으로 문서화하여 신규 구축했습니다.
도메인 중심의 업무 단위(features/) 디렉터리 구조를 도입하여 코드 변경의 영향 범위를 구조적으로 제한하고, 서버 데이터는 TanStack Query 커스텀 훅으로, UI 필터 및 모달 상태는 Zustand 스토어로 이원화하여 목록 재요청 시에도 UI 상태가 유지되도록 정밀한 상태 아키텍처를 구현했습니다.

수천 장 규모의 의료 이미지를 연속 넘김 시 발생하는 동일 이미지 재요청 및 탭 메모리 누적 문제를 방지하기 위해, 이미지 요청만을 대상으로 하는 Service Worker 기반 Cache-First 저장 및 응답 체계를 구축했습니다.
캐시 사용량 실측 결과 대부분 512MB에서 1GB 미만 범위 내에서 수용 가능한 점을 반영하여, Workbox ExpirationPlugin으로 캐시 수명 7일 및 디스크 저장 용량 상한선 1GB(9,000건)를 설정하고 브라우저 할당량 초과 시 캐시를 자동 비우도록 purgeOnQuotaError 옵션을 적용했습니다.
웹 서비스 업데이트 시 구버전 프레임 캐시가 남지 않도록, 웹 서비스 산출물 목록 기반의 빌드 해시를 캐시 저장소 이름에 결합하여 해시 변경 시 이전 캐시 데이터를 자동 삭제하도록 구현했습니다.
이미지 호출 및 캐시 저장 실패 상황에서도 이미 호출된 네트워크 응답을 활용해 화면 열람을 유지하도록 예외 처리를 구성하여 캐시 오류로 인한 불필요한 재요청을 차단했습니다.

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

제품별로 분리된 화면 구조로 인해 원본 이미지, AI 처리 결과, 작업 상태, 설정값을 개별 확인하며 발생하던 검토 지연을 해결하기 위해, 핵심 기능을 단일 화면 흐름으로 통합한 공용 뷰어를 구축했습니다.
화면 전환 없이 비교 및 검토 작업이 가능하도록 사이드 패널 내 작업 선택 및 상태 확인 기능을 배치하고, 선택 시 원본과 결과를 즉시 대조할 수 있도록 나란히 보기, 단독 보기, 겹쳐 보기 등 비교용 통합 레이아웃을 구현했습니다.

(주) 클라리파이