이 글은 img-compressor의 결과 카드와 벤치마크 데이터를 바탕으로 작성했습니다. 이미지 압축 도구에서 결과 숫자는 자랑용 지표가 아니라 사용자가 다운로드 여부를 판단하는 근거입니다.
문제: 줄었다는 말만으로는 충분하지 않다
압축 결과를 “성공”이라고만 표시하면 사용자는 무엇이 얼마나 좋아졌는지 알 수 없습니다. 원본이 3MB였는지 30KB였는지에 따라 같은 20% 감소도 의미가 다릅니다. 그래서 결과 카드에는 원본 크기, 출력 크기, 감소율을 함께 보여 주는 것이 좋습니다.
감소율은 직관적이지만 절대 크기와 같이 읽어야 합니다. 10KB 파일이 20% 줄어든 것과 3MB 파일이 20% 줄어든 것은 사용자에게 전혀 다른 결과입니다. 또한 출력 포맷이 바뀌었는지도 함께 표시해야 합니다.
감소율 계산은 단순하게 유지한다
const reduction = Math.max(
0,
Math.round((1 - outputSize / originalSize) * 100)
);결과가 더 커졌을 때 음수 감소율을 그대로 보여 주면 사용자가 혼란스러울 수 있습니다. 기본 압축 도구에서는 더 큰 결과를 채택하지 않는 방어 조건을 두고, 표시값도 0보다 작아지지 않게 하는 편이 자연스럽습니다. 다만 디버깅이나 벤치마크 화면에서는 커진 결과를 따로 기록할 수 있습니다.
바이트 값은 읽기 쉬운 단위로 바꾼다
원본 데이터는 바이트 단위로 측정하는 것이 정확하지만, 화면에는 KB 또는 MB로 보여 주는 편이 읽기 쉽습니다. 중요한 것은 표시 단위가 바뀌어도 계산 기준이 흔들리지 않는 것입니다. 내부 계산은 바이트로 하고, 화면 표시만 포맷팅하면 반올림으로 인한 오해를 줄일 수 있습니다.
결과 카드 점검 항목
- 원본 크기와 출력 크기가 같은 단위 체계로 표시되는지 확인합니다.
- 감소율이 출력 크기 기준으로 정확히 계산되는지 확인합니다.
- WebP 변환 결과와 일반 압축 결과가 구분되는지 확인합니다.
- 출력 파일이 더 커진 경우 자동으로 성공처럼 표시하지 않는지 확인합니다.
- 여러 결과를 비교할 때 가장 중요한 값이 눈에 먼저 들어오는지 확인합니다.
벤치마크와 결과 카드는 목적이 다르다
벤치마크 표는 고정 자산과 조건을 설명하기 위한 자료입니다. 반면 결과 카드는 사용자가 방금 선택한 파일의 처리 결과입니다. 두 화면이 같은 값을 쓰더라도 문맥이 다릅니다. 벤치마크에서는 인코더와 측정일을 적고, 결과 카드에서는 사용자가 받을 파일의 크기와 포맷을 빠르게 보여 주는 것이 우선입니다.
