KO게시일: 2026-05-07수정일: 2026-05-07

이미지 사이즈 변경: 픽셀과 비율을 맞추는 방법

핵심 요약: 이미지 사이즈 변경은 파일 용량보다 가로, 세로, 비율을 맞추는 작업에 가깝습니다. SNS, 쇼핑몰, 블로그, 문서 제출 화면은 서로 다른 치수와 비율을 요구할 수 있습니다. Frisbly의 이미지 압축 도구는 original, 1920, 1280, 720, 사용자 지정 폭 흐름으로 비율을 유지한 채 새 이미지를 만들 수 있습니다. 잘림이 중요한 이미지라면 리사이즈와 자르기를 구분해 처리해야 합니다.

사이즈 변경이 필요한 이유

고해상도 카메라 사진은 웹 게시용으로는 너무 클 수 있습니다. 원본은 보관 가치가 있지만, 블로그 본문이나 SNS 피드에 그대로 쓰면 전송과 표시가 무거워질 수 있습니다. 이미지 사이즈 변경은 필요한 표시 크기에 맞춰 픽셀 치수를 줄이는 과정입니다.

플랫폼마다 요구하는 모양도 다릅니다. 정사각형 썸네일, 세로형 피드 이미지, 가로형 링크 미리보기, 문서 첨부용 사진은 적절한 비율이 다릅니다. 단순히 폭만 줄일지, 먼저 자른 뒤 줄일지 목적을 보고 선택합니다.

리사이즈와 자르기 구분하기

리사이즈는 이미지 전체의 비율을 유지하면서 픽셀 수를 바꾸는 작업입니다. 자르기는 이미지의 일부를 덜어내 새 비율을 만드는 작업입니다. 세로 사진을 정사각형으로 만들려면 리사이즈만으로는 부족하고, 중요한 피사체가 보이도록 자르기 위치를 잡아야 합니다.

Frisbly의 src/features/image-compress/lib/resize.ts는 대상 폭을 기준으로 높이를 계산해 비율을 유지합니다. original, 1920, 1280, 720 preset과 사용자 지정 폭을 지원하고, 원본보다 큰 폭으로 늘리지 않는 흐름을 사용합니다. 그래서 치수를 줄일 때 사진이 옆으로 늘어나거나 눌리는 상황을 피할 수 있습니다.

SNS 치수 확인하기

Instagram 도움말은 사진 폭과 비율 조건을 안내합니다. 원문 기준으로 사진의 폭이 320에서 1080픽셀 사이이고 비율이 1.91:1에서 4:5 사이일 때 원래 해상도를 유지하는 조건을 설명합니다. Reels cover 관련 도움말은 9:16 비율과 최소 720픽셀 같은 별도 안내를 제공합니다.

이런 수치는 게시 위치에 따라 다르게 적용될 수 있습니다. 피드, 스토리, 릴스 커버, 프로필, 링크 미리보기는 같은 이미지라도 다르게 잘릴 수 있습니다. 공식 도움말과 실제 미리보기를 함께 보고, 중요한 얼굴이나 문구를 가장자리 가까이에 두지 않는 편이 좋습니다.

웹 페이지용 이미지 사이즈

web.dev의 responsive images 자료는 화면 조건에 맞는 이미지를 제공하는 개념을 설명합니다. 같은 이미지를 데스크톱과 모바일에서 모두 쓸 때는 표시 폭이 다르므로, 원본 하나만 그대로 쓰면 낭비가 생길 수 있습니다. HTMLImageElement의 naturalWidth 같은 값은 브라우저가 읽은 이미지의 실제 폭을 확인할 때 참고됩니다.

웹 페이지에 올릴 이미지는 표시 폭, 레이아웃 밀도, 파일 형식을 함께 봅니다. 큰 배너, 본문 이미지, 카드 썸네일은 필요한 픽셀 수가 다릅니다. 한 장을 먼저 내보내 페이지에 넣어 보고, 흐림이나 잘림이 없는지 확인한 뒤 같은 기준을 적용합니다.

Frisbly에서 작업하는 순서

원본 사진을 고르고, 먼저 목적에 맞는 폭을 선택합니다. 1920px은 넓은 웹 표시나 일반적인 큰 이미지 사본에, 1280px은 본문과 공유용 이미지에, 720px은 작은 미리보기나 가벼운 공유에 시험해 볼 수 있습니다. 사용자 지정 폭은 특정 CMS나 디자인 기준이 있을 때 유용합니다.

그 다음 WebP 또는 AVIF 형식을 선택하고 품질 값을 조절합니다. 사이즈 변경만으로 용량이 충분히 줄지 않을 수 있으므로 압축 결과까지 함께 봅니다. 결과 파일은 실제 업로드 화면에서 비율, 잘림, 선명도를 확인한 뒤 사용합니다.

자주 묻는 질문

이미지 사이즈 변경은 용량 줄이기와 다른가요? 다릅니다. 사이즈 변경은 픽셀 치수를 바꾸는 일이고, 용량 줄이기는 파일 바이트 크기를 줄이는 일입니다. 둘은 함께 사용할 수 있습니다.

가로세로 비율은 왜 유지해야 하나요? 비율을 유지하지 않으면 얼굴, 제품, 로고가 늘어나거나 눌려 보일 수 있습니다. 새 모양이 필요하면 리사이즈보다 자르기를 먼저 고려합니다.

Instagram에는 어떤 비율이 필요한가요? 게시 위치에 따라 다릅니다. Instagram 도움말은 사진 업로드의 폭과 비율 조건을 설명하고, Reels cover는 별도 안내가 있습니다.

사용자 지정 폭을 원본보다 크게 넣으면 어떻게 하나요? Frisbly의 resize 흐름은 원본 폭을 넘기지 않는 쪽으로 처리합니다. 작은 이미지를 억지로 키우면 선명도가 나빠질 수 있기 때문입니다.

직접 사용해보기

Frisbly의 이미지 압축 도구에서 preset 폭과 사용자 지정 폭을 비교하고, 결과가 필요한 게시 위치에서 자연스럽게 보이는지 확인해 보세요.

References

관련 도구

이미지 압축이미지 자르기이미지 회전