Canvas로 이미지 리사이즈를 구현하면 몇 줄의 코드로 결과 파일을 만들 수 있다. 하지만 결과가 실제 서비스 품질을 만족하는지는 별개의 문제다. 비율이 깨지거나, 작은 글자가 흐려지거나, 사진의 방향이 틀어지거나, 투명 이미지의 가장자리가 어색해질 수 있다.

이 글은 브라우저 이미지 압축 구현 전체 가이드에서 리사이즈 부분만 분리한 체크리스트다. 압축률을 높이는 것보다 먼저 "사용자가 보기 좋은 결과인지" 확인하는 데 초점을 둔다.

비율 계산은 한 곳에서만 한다

리사이즈 버그의 상당수는 너비와 높이를 따로 계산하면서 생긴다. 최대 너비와 최대 높이를 모두 고려하되, 실제 스케일 값은 하나만 사용해야 비율이 유지된다.

function getResizeSize(width, height, maxWidth, maxHeight) {
  const scale = Math.min(1, maxWidth / width, maxHeight / height);
  return {
    width: Math.max(1, Math.round(width * scale)),
    height: Math.max(1, Math.round(height * scale))
  };
}

이 함수는 원본보다 확대하지 않는다. 확대는 품질 개선이 아니라 픽셀을 늘리는 작업이기 때문이다. 작은 이미지는 그대로 두는 편이 결과를 예측하기 쉽다.

그리기 품질 옵션을 명시한다

Canvas 2D 컨텍스트에는 이미지 스무딩 관련 옵션이 있다. 브라우저마다 기본값이 같다고 가정하기보다 명시적으로 설정하는 편이 좋다.

const context = canvas.getContext("2d");
context.imageSmoothingEnabled = true;
context.imageSmoothingQuality = "high";
context.drawImage(image, 0, 0, canvas.width, canvas.height);

이 설정이 모든 문제를 해결하지는 않지만, 사진이나 큰 이미지를 줄일 때 더 안정적인 결과를 기대할 수 있다. 다만 UI 스크린샷처럼 날카로운 경계가 중요한 이미지는 결과를 직접 확인해야 한다.

EXIF 방향 문제를 염두에 둔다

스마트폰 사진은 EXIF 방향 정보를 갖는 경우가 있다. 브라우저가 이미지를 표시할 때는 방향을 보정하지만, Canvas에 그리는 과정에서 환경에 따라 기대와 다른 결과가 나올 수 있다. 공개 도구라면 세로 사진 테스트를 반드시 포함해야 한다.

EXIF를 완전히 보존하거나 조작해야 하는 요구가 있다면 별도 라이브러리 검토가 필요하다. 단순 압축 도구라면 사용자에게 메타데이터가 제거될 수 있음을 안내하는 것도 방법이다.

텍스트가 있는 스크린샷은 별도 기준으로 본다

개발 블로그에서 스크린샷은 글자와 선이 핵심이다. 사진처럼 자연 이미지 기준으로 품질을 판단하면 텍스트가 흐려질 수 있다. 스크린샷을 압축할 때는 미리보기에서 100% 배율 또는 실제 표시 배율로 글자가 읽히는지 확인해야 한다.

이 기준은 JPEG, PNG, WebP 압축 결과 비교와 함께 보면 좋다. 포맷보다 이미지 유형이 먼저다.

정리

Canvas 리사이즈 품질은 수식 하나로 끝나지 않는다. 비율 유지, 확대 방지, 스무딩 설정, EXIF 방향, 스크린샷 가독성, 투명 영역 확인까지 함께 봐야 한다. 이런 체크리스트를 도구와 글에 반영하면 콘텐츠의 실무 가치가 높아진다.