part1

의료 영상에 대한 AI 분석 요청·결과 확인·파일 업로드를 한 흐름으로 다루는 의료 영상 작업 포털을 개발했습니다.

주요 기술: React, TypeScript, Zustand, TanStack Query, Styled-components, Vite, Jest, React Testing Library, Storybook, Web Worker

대용량 다운로드 스트리밍 최적화

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

혼용 구조를 통해 ArrayBuffer 점유를 90% 이상에서 52% 이하로 절감해, 메모리 고갈 없이 대용량 다운로드를 안정적으로 할 수 있게 개선했습니다.

대량 파일 파싱 및 Web Worker 기반 동시 처리 최적화

1만 개 이상의 파일 업로드 시 무거운 파싱 연산이 메인 스레드를 장시간 점유하여 발생하는 병목 현상을 해결하고자 연산 구조를 재설계했습니다.

메인 스레드는 목록/분류에 필요한 최소 정보만 신속히 읽도록 역할을 최소화하고, 상세 파싱 연산은 백그라운드의 Web Worker을 사용했습니다.

CPU 코어 수 기반으로 Worker 개수를 제어하고 JS Heap 메모리 사용률을 모니터링하여 처리 배치(Batch) 크기를 동적으로 조절하는 스케줄러를 구축했습니다.

진행 상태 업데이트 이벤트를 배치 단위로 패칭하여 불필요한 메인 스레드 리렌더링과 메모리 부하를 방지했습니다. 종합적으로 스크립트 실행 시간을 단축(29.8초 → 13.4초)시켜 안정적인 UI 반응성을 확보했습니다.

회귀 테스트 자동화 체계 구축

신규 기능 추가나 코드 수정 후 기존 코어 기능에 의도치 않은 회귀가 발생하는 것을 줄이기 위해, Jest 및 React Testing Library 기반의 회귀 테스트 환경을 구축하고 풀 리퀘스트(PR) CI 파이프라인에 연동했습니다.

파일 업로드 처리, 작업 목록·트랜잭션 조회 등 핵심 기능을 중점으로 주요 UI 동작을 검증하는 체계를 적용하여, 코드 병합 전 테스트된 영역의 회귀를 사전에 차단하도록 하여 서비스 안정화를 향상시켰습니다.

작업 목록 초기 로딩 성능 개선 (Lighthouse)

작업 목록 진입 시 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 상태가 유지되도록 정밀한 상태 아키텍처를 구현했습니다.