이 기록은 img-compressor의 ImageCompressor 컴포넌트에 있는 실제 상태와 함수 흐름을 기준으로 합니다. 특정 라이브러리의 일반 사용법이 아니라, 파일 도구 UI에서 어떤 코드가 언제 필요한지를 정리했습니다.
초기 화면과 압축 실행은 필요한 코드가 다르다
첫 화면에서 사용자에게 필요한 것은 파일을 고를 수 있는 입력과 품질·크기 옵션입니다. 실제 압축 라이브러리는 파일을 선택하고, 리사이즈 후에도 추가 압축이 필요한 경우에만 필요합니다. 구현은 browser-image-compression을 정적 import하지 않고 해당 분기 안에서 동적으로 불러옵니다.
const { default: imageCompression } = await import(
'browser-image-compression'
);
const compressedFile = await imageCompression(resizedFile, {
maxSizeMB: 1,
maxWidthOrHeight: Math.max(maxWidth, maxHeight),
useWebWorker: true,
fileType: resizedFile.type,
initialQuality: quality,
});이 구조는 모든 사용자가 압축 라이브러리를 다운로드할 필요가 없게 합니다. 다만 실제 효과는 번들 분석과 배포 환경에서 다시 측정해야 하며, 이 글은 동적 import가 존재한다는 구현 사실만 기록합니다. 성능 개선 수치를 추정으로 쓰지 않는 것이 중요합니다.
다중 파일은 진행 상태가 없으면 멈춘 것처럼 보인다
여러 파일을 처리할 때 컴포넌트는 current, total, type으로 진행 상태를 관리합니다. 압축과 WebP 일괄 변환을 같은 표시 영역에서 다루되, 작업 종류는 구분합니다. 파일 목록을 결과 상태에 추가하기 전까지는 다운로드 버튼을 보여 주지 않아 처리 중인 파일과 완료 파일이 섞이지 않습니다.
setProcessingProgress({
current: i + 1,
total: imageFiles.length,
type: 'compressing',
});
const compressed = await compressImage(imageFiles[i]);
if (compressed) compressedImages.push(compressed);현재 구현은 반복문에서 await로 한 파일씩 처리합니다. 이 선택은 진행 표시와 결과 순서를 단순하게 만들지만, 대량 파일에서 가장 빠른 방식이라고 단정할 수는 없습니다. 동시 처리 수를 늘리려면 기기 메모리, 오류 격리, 취소 처리까지 별도 설계가 필요합니다.
상태를 나누면 버튼의 의미도 분명해진다
컴포넌트는 전체 압축 중 상태, 개별 WebP 변환 중인 항목, 모든 항목의 WebP 변환 상태, 직접 WebP 모드를 따로 유지합니다. 하나의 loading 값으로 합치면 “파일 추가를 막아야 하는지”, “특정 항목 버튼만 막아야 하는지”, “전체 다운로드가 가능한지”를 판단하기 어려워집니다.
isCompressing: 새로 선택한 파일을 처리하는 구간convertingWebP: 특정 카드의 변환 버튼을 잠그는 구간convertingAllWebP: 일괄 변환 버튼을 잠그는 구간images: 다운로드와 미리보기가 가능한 완료 결과
상태 이름은 기능 명세가 됩니다. 나중에 오류 안내, 취소, 재시도를 추가할 때도 어느 상태가 바뀌는지 추적하기 쉽습니다.
현재 구현에서 의도적으로 하지 않는 일
이 컴포넌트에는 업로드 취소, 백그라운드 큐 우선순위, 서버 동기화가 들어 있지 않습니다. 파일을 하나씩 처리하는 동안 사용자가 새 파일을 추가하면 다음 결과 목록에 합쳐지는 구조이며, 처리 중인 한 장을 중단하는 별도 API는 없습니다. 이 한계를 문서에 남기면, 다음 기능을 넣을 때 무엇을 상태 모델에 추가해야 하는지 분명해집니다.
예를 들어 취소 기능을 추가하려면 단순히 버튼 하나를 넣는 것으로 끝나지 않습니다. 현재 작업을 식별할 값, 취소된 결과를 목록에 넣지 않는 조건, 진행률 초기화, Object URL 정리, 사용자가 다시 시도할 수 있는 UI가 함께 필요합니다. 이런 항목은 구현되지 않은 기능을 성능이나 사용자 경험 개선으로 포장하지 않고, 다음 설계 과제로 남겨 두는 편이 안전합니다.
검증할 사용자 흐름
- 이미지를 선택하기 전에는 파일 입력과 옵션만 보이는지 확인합니다.
- 여러 장을 선택하면 현재 처리 수와 전체 수가 진행 영역에 표시되는지 확인합니다.
- 압축이 끝난 항목만 결과 카드와 다운로드 버튼을 갖는지 확인합니다.
- WebP 변환 중에는 해당 카드 또는 일괄 변환 버튼이 중복 실행되지 않는지 확인합니다.
- 전체 삭제 뒤 새 파일을 선택했을 때 이전 미리보기 URL이 재사용되지 않는지 확인합니다.
다운로드 전 확인할 것
이 구현은 브라우저에서 임시 링크를 만들어 다운로드를 실행합니다. 일괄 다운로드에서는 요청을 같은 순간에 몰지 않도록 인덱스별 짧은 지연을 둡니다. 브라우저별 다중 다운로드 권한과 팝업 차단 동작은 실제 대상 브라우저에서 확인해야 하며, 사용자에게 파일이 어디에 저장되는지는 브라우저 설정에 따라 달라질 수 있습니다.
