이미지 리사이징 사용법 가이드

이 가이드에서는 이미지 리사이징 도구의 세 가지 변환 방식(비율 유지 축소·캔버스 리프레임·스토어 프리셋 일괄 적용)을 언제 어떻게 쓰는지 단계별로 설명하고, 기준 축 선택과 프리셋 강제 변환에서 자주 틀리는 지점을 짚습니다.

사용 목적

이 도구는 앱스토어·플레이스토어에 올릴 아이콘, 웹사이트나 문서에 붙일 스크린샷, 게시글용 썸네일처럼 규격이 정해진 이미지를 준비할 때 사용합니다. 업로드한 파일은 서버로 전송되지 않고 브라우저 안에서만 읽고 처리되므로, 화면에 민감한 정보가 담긴 스크린샷이라도 외부로 유출될 걱정 없이 변환할 수 있습니다.

사용 순서

이미지를 드래그하거나 선택 영역을 클릭해 업로드합니다. (PNG·JPEG·WebP 지원)
원본 크기가 표시되면 상단 탭에서 변환 방식을 고릅니다.
이미지 크기: 가로×세로·장변·단변·퍼센트 중 기준을 골라 값을 입력하면 비율을 유지한 채(원하면 비율 유지를 해제하고) 이미지 자체를 축소합니다.
캔버스 크기: 이미지 픽셀은 그대로 두고 프레임(캔버스) 크기만 바꿉니다. 캔버스가 커지면 배경색으로 여백을 채우고, 작아지면 이미지 위치(앵커)를 기준으로 잘라냅니다.
프리셋: 원본에 맞는 스토어 규격 프리셋을 골라 한 번에 내려받습니다. 비율이 맞지 않는 프리셋은 맞춤(패딩)·채움(크롭)·늘이기 중 강제 변환 방식을 선택해 적용할 수 있습니다. 프리셋 탭 안에는 앱스토어 카테고리 말고도 파비콘·앱아이콘 카테고리가 있어, 정사각형 이미지 한 장으로 웹·모바일 아이콘 세트를 만들 수 있습니다(자세한 내용은 아래 “파비콘·앱아이콘” 절 참고).
공용 출력 바에서 출력 포맷(원본 유지/PNG/JPEG/WebP)과 배경색(흰색/투명)을 정한 뒤 다운로드 버튼을 누르면 결과 파일(또는 여러 개일 경우 ZIP)이 저장됩니다.

옵션 선택 기준

이미지 크기: 비율을 유지한 채 이미지 자체를 줄이고 싶을 때 사용합니다. 가로가 긴 스크린샷을 미리보기용으로 줄인다면 장변 기준으로, 배치할 자리의 폭이나 높이가 정해져 있다면 가로×세로 기준으로 값을 입력하면 됩니다.
캔버스 크기: 이미지 해상도는 그대로 두고 담을 프레임 크기만 바꾸고 싶을 때 사용합니다. 배너나 카드 규격처럼 정해진 캔버스 비율에 이미지를 앉히되, 원본 픽셀은 손대지 않아야 할 때 유용합니다.
프리셋: 앱스토어 아이콘처럼 정해진 표준 규격에 맞춰 여러 크기를 한 번에 만들어야 할 때 사용합니다. 원본과 비율이 다른 프리셋은 강제 변환 방식(맞춤/채움/늘이기)을 선택해야 목록에 함께 처리됩니다.
이미지 크기·프리셋에서 업스케일을 허용하지 않는 한, 원본보다 큰 크기로는 확대되지 않습니다. 픽셀을 억지로 늘리면 화질이 저하되므로 기본값은 축소만 지원하도록 막아둔 것입니다.

실패·주의 케이스

이미지가 아닌 파일(PDF, 텍스트 등)을 업로드하면 처리 대상에서 제외되고 안내 메시지가 표시됩니다.
업스케일 허용을 켜지 않으면 원본보다 큰 목표 크기를 입력해도 확대되지 않으며, 오류로 표시됩니다.
캔버스 크기를 원본보다 작게 지정하면 앵커 위치를 기준으로 이미지가 잘려나가니, 중요한 내용이 가장자리에 있다면 앵커를 먼저 확인하세요.
JPEG 포맷은 투명을 지원하지 않아 배경이 흰색으로 저장되며, 화면에 안내 문구가 함께 표시됩니다.
여러 이미지 또는 여러 프리셋을 동시에 선택하면 결과가 개별 파일이 아니라 ZIP 하나로 묶여 다운로드됩니다. 파일별로 따로 받고 싶다면 한 번에 하나씩 처리하세요.

예시 시나리오

1200×800 스크린샷 → 600px 장변 미리보기: 블로그 글에 넣을 스크린샷을 이미지 크기 탭에서 장변 600px로 지정하면, 비율을 유지한 600×400 이미지가 만들어집니다.
정사각형 로고 → 16:9 배너 캔버스: 캔버스 크기 탭에서 목표 프레임을 16:9로 입력하고 앵커를 가운데로 두면, 로고 픽셀은 그대로 두고 좌우에 배경색이 채워진 배너가 만들어집니다.
스토어 아이콘 세트 → 프리셋 일괄 적용 → ZIP: 정사각형 원본 아이콘을 업로드한 뒤 필요한 스토어 규격 프리셋을 모두 선택하면, 규격별 PNG 파일이 ZIP 하나로 묶여 다운로드됩니다.

팁

업스케일을 허용하지 않는 한 원본보다 큰 크기로는 확대하지 않습니다. 화질 저하를 막기 위한 정책입니다.
이미지 크기와 캔버스 크기는 서로 다른 조작입니다 — 픽셀을 줄이려면 이미지 크기, 프레임만 바꾸려면 캔버스 크기를 사용하세요.
여러 프리셋을 동시에 선택하면 하나의 ZIP으로 묶여 내려받아집니다.
비율이 맞지 않는 프리셋도 강제 변환 방식을 고르면 함께 내려받을 수 있습니다.

파비콘·앱아이콘

프리셋 탭에는 앱스토어 카테고리와 별도로 파비콘·앱아이콘 카테고리가 있습니다. 브라우저 탭에 표시되는 파비콘부터 스마트폰 홈 화면에 추가했을 때 보이는 아이콘까지, 정사각형 원본 이미지 한 장으로 필요한 세트를 한 번에 만듭니다. iOS Safari는 apple-touch-icon이라는 별도 링크로 180×180 아이콘을 요구하고 Android Chrome은 site.webmanifest의 icons 항목(192·512)을 읽기 때문에, 파비콘과 홈 화면 아이콘은 플랫폼별 관행에 따라 서로 다른 산출물로 준비해야 합니다(180이 하나의 공식 규격 문서로 명문화된 값은 아니지만, iOS 8 이후 최신 iPhone을 모두 커버하는 값으로 업계에 굳어진 크기입니다).

파비콘·앱아이콘 만드는 순서

여백을 최소화한 정사각형 PNG(가능하면 512×512 이상)를 준비합니다.
이미지를 업로드한 뒤 프리셋 탭에서 파비콘·앱아이콘 카테고리를 선택합니다.
site.webmanifest에 기록할 앱/사이트 이름을 입력합니다.
“아이콘 생성 후 다운로드” 버튼을 눌러 icons.zip을 받습니다.
압축을 풀어 favicon.ico·PNG·site.webmanifest를 사이트 루트에 올리고, snippet.txt 안의 <link> 태그를 문서 <head>에 붙여넣습니다.

icons.zip 구성

favicon-16x16.png · favicon-32x32.png · favicon-48x48.png — 브라우저 탭· 즐겨찾기용 파비콘 개별 PNG.
favicon.ico — 16·32·48 세 해상도를 하나의 컨테이너에 담은 멀티 해상도 아이콘. 구형 브라우저 호환과 기본 폴백에 쓰입니다(내부 바이트 구조는 아래 “favicon.ico 내부 구조” 절 참고).
apple-touch-icon.png(180×180) — iOS Safari가 홈 화면에 추가할 때 쓰는 아이콘.
android-chrome-192x192.png · android-chrome-512x512.png — Android·PWA 설치 아이콘으로, site.webmanifest의 icons 항목에 등록됩니다.
site.webmanifest — 앱 이름과 192·512 아이콘 경로, 테마색·표시 모드 (standalone)를 담은 PWA 매니페스트.
snippet.txt — 위 파일들을 문서에 연결하는 <link> 태그 모음.

favicon.ico 내부 구조 — 하나의 파일에 세 해상도가 들어가는 원리

favicon.ico는 신비한 단일 이미지 포맷이 아니라, 이 도구가 코드로 직접 조립하는 바이너리 컨테이너입니다. 파일은 ICONDIR(6바이트 헤더) 뒤에 이미지 개수만큼 ICONDIRENTRY(엔트리당 16바이트)가 나란히 오고, 그 뒤로 각 이미지의 PNG 데이터가 순서대로 붙는 구조입니다. 전체 버퍼 크기(헤더 6바이트 + 엔트리 16바이트×이미지 수 + PNG 데이터 합)를 먼저 계산해 한 번에 할당한 뒤, 멀티바이트 숫자 필드(2·4바이트)는 리틀엔디언으로 기록합니다(1바이트 필드는 엔디언과 무관).

ICONDIR 6바이트는 reserved(항상 0)·type(1=아이콘, 2=커서)·count(담긴 이미지 개수) 세 필드로 이루어지며, 이 도구는 항상 type=1을 기록합니다. 뒤이어 이미지 한 장마다 붙는 ICONDIRENTRY 16바이트는 width·height(각 1바이트)·팔레트 색상 수(0=트루컬러, 팔레트 없음)·reserved(1바이트, 0 고정)·color planes(2바이트, 값 1)·bits per pixel(2바이트, 값 32 고정)·데이터 길이(4바이트)·데이터 오프셋(4바이트) 여덟 필드를 담습니다. 마지막 두 필드가 이 엔트리가 가리키는 PNG가 파일 어디서 시작해 몇 바이트인지 알려주므로, 뷰어는 ICONDIR의 count만큼 ICONDIRENTRY를 순회하며 각자의 오프셋으로 점프해 PNG를 꺼내는 방식으로 “한 파일 안의 여러 해상도”를 구현합니다.

width·height 필드는 각각 1바이트라 0~255만 표현할 수 있습니다. 256px 이상인 치수는 이 필드에 그대로 쓸 수 없어, 값을 0으로 기록하는 것이 ICO 포맷의 관례입니다(0을 “256”을 뜻하는 특수값으로 예약). 이 도구의 인코딩 함수도 이 관례를 코드에 그대로 반영해 두었지만, 실제로 만드는 favicon.ico는 16·32·48px 세 크기만 담으므로 이 0-치환 분기가 실행될 일은 없습니다 — 256px 이상 큰 아이콘은 favicon.ico가 아니라 android-chrome-512x512.png 같은 개별 PNG로만 제공됩니다.

각 엔트리가 가리키는 이미지 데이터는 압축되지 않은 옛 비트맵(BMP DIB) 방식이 아니라 PNG 파일 그 자체입니다 — 이 도구는 PNG 바이트를 시그니처까지 포함해 통째로 복사해 넣을 뿐 다시 인코딩하지 않습니다. bits per pixel 필드도 소스 이미지의 실제 비트 심도를 측정해 넣는 것이 아니라 32(bpp)로 고정해 기록합니다. PNG를 그대로 담는 이 방식(PNG-in-ICO)은 Windows Vista부터 지원되기 시작한 비교적 최근 방식이라, 그 이전에는 압축되지 않은 비트맵 방식만 쓸 수 있었습니다.

참고로 다운로드되는 favicon.ico의 MIME 타입은 image/x-icon으로 지정됩니다. IANA에 공식 등록된 미디어 타입은 image/vnd.microsoft.icon이며, image/x-icon은 널리 쓰이지만 비표준인 레거시 문자열입니다.

파비콘·앱아이콘 확인할 점

정사각형이 아닌 원본은 각 아이콘 크기의 정사각형으로 눌려 저장되어 비율이 왜곡됩니다. 여백을 줄인 정사각형 원본을 준비하세요.
Android는 기기·런처에 따라 아이콘을 원형·둥근 사각형 등으로 잘라내는 마스커블(maskable) 처리를 할 수 있으므로, 로고를 가장자리까지 채우지 말고 중앙 안전 영역(대략 80%)에 배치하는 편이 안전합니다. 다만 이 도구가 만드는 site.webmanifest의 icons 항목은 “purpose” 필드를 쓰지 않습니다 — 아이콘을 마스커블로 명시적으로 선언하지는 않으므로, 안전 영역을 지키는 것은 도구가 강제하는 규칙이 아니라 사용자가 스스로 지키는 편이 안전한 관례입니다.
원본 해상도가 512px보다 작으면 확대 과정에서 흐려질 수 있습니다. 이미지 크기 탭과 달리 이 카테고리는 업스케일을 막지 않으므로, 512×512 이상의 선명한 정사각형 원본을 사용하세요.
브라우저는 파비콘을 강하게 캐시합니다. 교체 후 반영이 늦으면 강력 새로고침이나 시크릿 창, 쿼리스트링(예: favicon.ico?v=2)으로 캐시를 무력화하세요.
snippet.txt가 가리키는 경로와 실제 업로드 경로가 다르면 아이콘이 표시되지 않습니다. 배치 경로를 바꿨다면 스니펫과 매니페스트 안의 href·src도 같은 경로로 맞추세요.

자주 묻는 질문

Q. 업로드한 이미지는 서버에 저장되나요?
아니요. 모든 변환은 브라우저 메모리 안에서만 이루어지며 서버로 전송되지 않습니다. 페이지를 닫으면 데이터도 함께 사라집니다.

Q. WebP와 JPEG 중 무엇을 선택해야 하나요?
사진처럼 색이 복잡한 이미지를 더 작은 용량으로 압축하려면 WebP가 유리합니다. 다만 오래된 프로그램이나 일부 외부 서비스가 WebP를 지원하지 않는다면 호환성이 검증된 JPEG을 선택하세요. 투명 배경이 필요하다면 WebP 또는 PNG를 사용해야 합니다.

Q. favicon.ico 하나에 어떻게 여러 크기가 들어가나요?
favicon.ico는 이 도구가 직접 조립하는 바이너리 컨테이너입니다. 6바이트짜리 ICONDIR 헤더 뒤에 이미지 개수만큼 16바이트짜리 ICONDIRENTRY가 나란히 오고, 그 뒤로 각 PNG 데이터가 순서대로 붙습니다. 각 ICONDIRENTRY는 자신이 가리키는 이미지의 가로·세로 크기와 데이터 위치(오프셋)를 담고 있어, 브라우저는 이 색인만 보고 필요한 해상도의 PNG를 즉시 찾아냅니다. 이 도구가 만드는 favicon.ico는 16·32·48px 세 해상도를 이렇게 한 파일에 담아 어떤 환경에서도 또렷하게 보이도록 합니다. 개별 PNG도 함께 제공되어 최신 브라우저는 PNG를, 구형 환경은 ICO를 사용합니다.

Q. 파비콘을 바꿨는데 브라우저에 그대로예요.
브라우저는 파비콘을 매우 공격적으로 캐시합니다. 강력 새로고침(Ctrl+Shift+R)을 하거나, 시크릿 창에서 확인하거나, 파일명 뒤에 쿼리스트링(예: /favicon.ico?v=2)을 붙여 캐시를 무력화하세요. 배포 직후 몇 분 정도 반영이 늦을 수도 있습니다.

Q. 파비콘·앱아이콘 원본이 정사각형이 아니면 어떻게 되나요?
정사각형이 아닌 이미지는 각 아이콘 크기의 정사각형으로 눌려 저장되어 비율이 왜곡됩니다. 파비콘·앱아이콘은 아주 작게 표시되므로 여백을 최소화한 정사각형 원본(가능하면 512×512 이상)을 준비하는 것이 가장 좋은 결과를 냅니다.

Q. iOS와 Android 아이콘은 왜 따로 준비하나요?
iOS Safari는 apple-touch-icon이라는 별도 링크로 180×180 아이콘을 요구하고, Android Chrome은 site.webmanifest의 icons 항목(192·512)을 읽습니다. 요구 방식과 크기가 서로 다르기 때문에 파비콘·앱아이콘 카테고리는 두 계열을 함께 만들어, 홈 화면 추가나 설치 시 어느 플랫폼에서든 아이콘이 또렷하게 나오도록 합니다.

Q. 마스커블(maskable) 아이콘이 뭔가요?
Android는 기기 제조사마다 아이콘을 원형·둥근 사각형 등 다양한 모양으로 잘라냅니다. 마스커블 아이콘은 가장자리가 잘려도 핵심 그림이 남도록 안전 영역(대략 중앙 80%) 안에 로고를 배치한 아이콘입니다. 다만 이 도구가 만드는 site.webmanifest의 icons 항목은 "purpose" 필드를 쓰지 않아, 아이콘을 마스커블로 명시적으로 선언하지는 않습니다. 즉 안전 영역을 지키는 것은 도구가 강제하는 규칙이 아니라 사용자가 스스로 지키는 편이 안전한 관례입니다 — 로고가 가장자리까지 꽉 차 있으면 (기기·런처에 따라) 잘려 보일 수 있으니 여백을 두는 편이 안전합니다.

Q. ICO 파일에는 256px 이상 큰 아이콘도 넣을 수 있나요?
이 도구가 만드는 favicon.ico는 16·32·48px 세 크기만 담으므로 실제로 겪을 일은 없지만, ICO 포맷 자체에는 흥미로운 제약이 있습니다. 가로·세로 치수를 기록하는 필드가 1바이트라 0~255만 표현할 수 있어, 256px 이상인 치수는 그대로 쓸 수 없고 대신 0으로 기록하는 것이 관례입니다(0이 "256"을 뜻하는 특수값). 256px 이상 큰 아이콘이 필요하다면 이 도구가 함께 만드는 android-chrome-512x512.png처럼 개별 PNG 파일로 받아 쓰는 편이 자연스럽습니다.

Q. 홈 화면 아이콘이 흐릿하게 나와요.
원본 해상도가 512px보다 작으면 icons.zip을 만드는 과정에서 512×512로 확대되며 흐려집니다. 이미지 크기 탭과 달리 파비콘·앱아이콘 카테고리는 업스케일을 막지 않으므로, 작은 이미지를 억지로 키우기보다 512×512 이상의 선명한 정사각형 원본을 준비하세요.