이 글은 img-compressor의 결과 카드와 다운로드 흐름을 기준으로 정리했습니다. 이미지 압축 도구에서는 압축 자체만큼이나 사용자가 받은 파일을 나중에 알아볼 수 있게 만드는 일이 중요합니다.
문제: 다운로드된 파일이 무엇인지 알 수 있어야 한다
브라우저에서 압축 파일을 만들면 결과는 메모리 안의 File 또는 Blob입니다. 사용자가 다운로드했을 때 파일명이 모두 download.webp처럼 나오면, 여러 장을 처리한 뒤 어떤 파일이 어떤 원본에서 왔는지 알기 어렵습니다. 특히 사진을 여러 장 압축하는 상황에서는 파일명 보존이 작업 흐름의 일부입니다.
좋은 기준은 원본 이름의 핵심을 유지하되, 출력 형식과 처리 결과를 구분할 수 있게 하는 것입니다. 예를 들어 profile.png를 압축했다면 원래 형식 결과와 WebP 변환 결과가 서로 다른 확장자를 가져야 합니다. 사용자는 파일 아이콘이나 확장자만 보고도 어떤 결과인지 알아야 합니다.
확장자는 결과 포맷을 기준으로 정한다
압축 후에도 원본 형식을 유지하는 흐름과 WebP로 변환하는 흐름은 다릅니다. 원본 형식을 유지했다면 기존 확장자를 그대로 둘 수 있지만, WebP 변환 결과라면 확장자를 .webp로 바꿔야 합니다. 파일명만 원본을 닮고 실제 MIME type이 다르면 후속 작업에서 혼란이 생깁니다.
const baseName = originalName.replace(/\.[^/.]+$/, '');
const webpName = baseName + '.webp';
const webpFile = new File([blob], webpName, { type: 'image/webp' });파일명 생성 로직은 작아 보이지만, 다운로드 UX에서는 눈에 띄는 부분입니다. 사용자는 처리 결과를 로컬 폴더에서 다시 확인하고, 다른 서비스에 업로드하거나 문서에 삽입합니다. 이때 원본과 연결되는 이름이 남아 있으면 작업 비용이 줄어듭니다.
일괄 다운로드에서는 중복 이름을 조심한다
서로 다른 폴더에서 온 파일이 같은 이름을 가질 수 있습니다. 브라우저 입력은 경로를 노출하지 않기 때문에, 도구 입장에서는 두 파일이 같은 이름인지 정도만 알 수 있습니다. 여러 파일을 한 번에 받을 때 중복 이름이 있으면 운영체제나 브라우저가 자동으로 번호를 붙일 수 있습니다.
이 문제를 완전히 해결하려면 결과 객체에 순번을 붙이거나, 다운로드 파일명에 처리 시간을 넣는 방식을 고려할 수 있습니다. 다만 파일명이 지나치게 길어지면 오히려 사용성이 떨어집니다. 현재 단계에서는 원본 이름을 유지하고, WebP 변환 결과만 확장자로 구분하는 기준이 가장 단순합니다.
파일명 점검 체크리스트
- 원본 파일명이 결과 카드에 표시되는지 확인합니다.
- WebP 결과의 확장자가 실제 MIME type과 일치하는지 확인합니다.
- 확장자가 없는 파일명에서도 결과 이름이 깨지지 않는지 확인합니다.
- 여러 파일을 연속 다운로드할 때 파일명이 모두 같은 값으로 나오지 않는지 확인합니다.
- 한글 파일명과 공백이 포함된 파일명에서도 다운로드가 정상인지 확인합니다.
다음 개선 방향
추가로 개선한다면 사용자가 접두사나 접미사를 직접 지정하는 옵션을 줄 수 있습니다. 예를 들어 -compressed, -webp 같은 접미사를 선택하게 하면 원본과 결과를 더 쉽게 구분할 수 있습니다. 다만 기본값은 복잡하지 않아야 하며, 도구를 처음 쓰는 사용자가 옵션을 몰라도 안전한 파일명을 받을 수 있어야 합니다.
