이 글은 img-compressor 같은 클라이언트 이미지 처리 도구를 배포하기 전에 확인할 테스트 항목을 정리한 기록입니다. 서버 업로드가 없더라도 브라우저 안에서 실패할 수 있는 지점은 충분히 많습니다.
테스트는 정상 사진 한 장으로 끝나면 안 된다
대부분의 이미지 도구는 처음에는 정상 사진 한 장으로 잘 동작합니다. 하지만 실제 사용자는 스크린샷, 투명 PNG, 큰 사진, 한글 파일명, 확장자가 애매한 파일을 함께 넣습니다. 그래서 테스트 자산을 몇 가지 유형으로 나누고, 각 유형에서 기대 결과를 정해야 합니다.
- 큰 사진: 리사이즈와 압축이 모두 동작하는지 확인합니다.
- 작은 이미지: 불필요한 추가 압축을 건너뛰는지 확인합니다.
- 투명 PNG: 변환 후 투명 영역이 기대대로 유지되는지 확인합니다.
- 스크린샷: 텍스트가 지나치게 뭉개지지 않는지 확인합니다.
- 손상 파일: 화면이 멈추지 않고 오류 안내가 나오는지 확인합니다.
기능 테스트와 사용자 흐름 테스트를 나눈다
기능 테스트는 함수가 올바른 파일을 만드는지 확인합니다. 사용자 흐름 테스트는 실제 화면에서 파일을 넣고, 진행 상태를 보고, 결과를 다운로드하고, 목록을 비우는 과정이 자연스러운지 확인합니다. 이미지 압축 도구는 두 가지가 모두 필요합니다.
예를 들어 convertToWebPFile이 WebP 파일을 만들 수 있어도, 결과 카드의 다운로드 버튼이 잘못된 URL을 가리키면 사용자에게는 실패입니다. 반대로 화면이 좋아 보여도 변환 결과가 원본보다 커지는 상황을 막지 못하면 도구의 목적이 흐려집니다.
브라우저별 확인 항목
Canvas, WebP 인코딩, 다중 다운로드는 브라우저마다 체감이 다를 수 있습니다. 최소한 Chrome, Edge, Safari 계열에서 파일 선택, 미리보기, WebP 변환, 다운로드가 정상인지 확인하는 것이 좋습니다. 모바일 Safari에서는 파일 선택과 다운로드 경험이 데스크톱과 다르게 느껴질 수 있습니다.
배포 전 체크리스트
- 홈 화면에서 파일을 선택하지 않아도 초기 렌더링이 정상인지 확인합니다.
- 여러 파일을 선택했을 때 진행 상태와 결과 개수가 맞는지 확인합니다.
- 품질값과 최대 크기 옵션을 바꿨을 때 결과가 달라지는지 확인합니다.
- 개별 삭제와 전체 삭제 후 Object URL이 정리되는지 확인합니다.
- 다운로드한 파일을 실제 이미지 뷰어에서 열어 봅니다.
- 모바일 너비에서 버튼, 파일명, 결과 수치가 겹치지 않는지 확인합니다.
기록으로 남길 것
테스트를 통과했다는 말보다 어떤 파일로 무엇을 확인했는지가 더 중요합니다. 저장소에 고정 테스트 자산을 두고, 측정 바이트와 인코더 정보를 함께 남기면 나중에 구현을 바꿨을 때 비교 기준이 됩니다. img-compressor의 벤치마크 파일도 이런 목적에 맞춰 작성된 자료입니다.
