사진 크기 조절 가이드
세 도구의 역할은 분명합니다. 구도 재구성은 변환기, 아이콘은 포지, 순수한 용량 감소는 일괄 압축입니다. 아래는 실제로 쓰는 순서를 따라 각 단계의 기본값과 바꾸는 방법을 적었고, 끝에는 문제 해결 목록을 두었습니다.
셋 모두 브라우저 안에서 로컬로 동작하며 업로드 엔드포인트도 계정도 없습니다. 이미지를 한 번 불러오면 오프라인에서도 계속 작동합니다.
이미지 한 장으로 7개 플랫폼과 11개 규격을 한 번에 처리해야 하거나, 정확한 자르기와 투명 배경이 필요할 때.
결과 · 11개의 „플랫폼-용도-가로x세로“ 파일과 social-sizes 압축 파일
사이트나 앱에 favicon, 홈 화면, PWA, 확장 프로그램 아이콘 세트가 필요하고 파일명도 각 플랫폼 관례에 맞춰야 할 때.
결과 · 관례에 맞는 이름의 아이콘 20개와 icons 압축 파일(README 포함)
여러 이미지를 구도 변경 없이 통일해서 줄이거나, 용량 상한 안에 맞춰야 할 때.
결과 · 같은 이름의 -min 파일과 compressed-images 압축 파일
이미지 크기
이미지 불러오기
세 가지 진입, 결과는 동일
세 가지 방법, 결과는 완전히 같습니다:
- 끌어다 놓기 — 변환기는 페이지 어디에 놓아도 받습니다(현재 이미지를 교체). 일괄 압축은 결과가 이미 있을 때 추가합니다. 포지는 업로드 영역에 놓아야 합니다.
- 파일 선택 — 업로드 영역을 클릭하면 파일 선택기가 열립니다.
- 붙여넣기 — 스크린샷 후
⌘/Ctrl + V. 디스크에 저장하는 단계까지 생략됩니다.
형식: 변환기와 포지는 JPG / PNG / WebP / AVIF / GIF를 받습니다(GIF는 첫 프레임만, 애니메이션은 유지되지 않음). 일괄 압축은 JPG / PNG / WebP / AVIF를 받고 애니메이션 GIF와 SVG는 이유와 함께 건너뜁니다.
크기: 긴 변이 목표보다 작지 않게 하세요. 변환기와 포지는 4096px를 넘는 원본을 생성 전에 4096px로 줄입니다. 이 단계는 메모리만 제한하고 출력에는 영향을 주지 않습니다. 가장 큰 규격도 YouTube 채널 배너 (2560 × 1440)이기 때문입니다. 일괄 압축은 파일당 50.00 MB, 한 번에 60개까지입니다.
쉽게 빠지는 함정: 홈에서 이미지를 끌면 그 이미지를 달고 변환기로 이동합니다. 이 경로는 같은 탭의 메모리를 거칩니다. 새로 고치거나 새 탭을 열면 사라지므로 다시 선택해야 합니다.
채우기와 맞추기
가장자리를 자를지, 둘레에 여백을 둘지
결과를 눈에 띄게 바꾸는 유일한 선택입니다. 어느 모드가 더 낫다기보다 무엇이 필요한지에 달렸습니다.
- 결과
- 프레임을 채우고 남는 부분은 잘림
- 적합한 용도
- 스크린샷, 포스터, 가운데 피사체 사진
- 주의
- 가장자리 정보가 사라짐. 어느 쪽인지는 초점이 결정
- 배경
- 사용하지 않음
- 결과
- 이미지 전체가 보이고 둘레에 배경
- 적합한 용도
- 차트, 글자가 있는 디자인, 전체를 보여야 하는 것
- 주의
- 여백이 생김. 이미지에 맞는 배경을 고르세요
- 배경
- 여백 색. 기본은 흰색
전환하면 모든 결과가 즉시 다시 계산됩니다. 누를 버튼은 없습니다.
구도 초점
피사체가 가운데가 아닐 때의 프레이밍
초점은 어느 쪽을 버릴지 정합니다. 위는 위쪽을, 아래는 아래쪽을 남깁니다. 맞추기 모드에서는 여백이 어느 끝에 쌓일지를 제어합니다.
필요한 경우: 세로 이미지를 16:9 썸네일로, 가로 이미지를 9:16 커버로, 인물 사진을 정사각형 게시물로 만들 때. 이 세 경우에 기본값인 가운데는 자르면 안 될 곳을 자르기 쉽습니다.
자르기 대화상자
수동 선택, 비율 고정
초점만으로는 가까이 갈 뿐입니다. 특정 영역을 정확히 맞추려면 자르기 대화상자를 쓰세요. 여기에는 독립된 두 개념이 있고, 둘을 분리해 두는 것이 헷갈리지 않게 하는 핵심입니다:
- 선택 상자는 화면에 고정되어 있고, 끌어서 어느 영역이 남을지 정합니다.
- 이미지 확대는 상자 뒤의 이미지만 바꾸고, 상자 자체는 움직이지 않습니다.
비율 칩은 11개 규격에서 중복을 제거한 8가지 비율에서 나옵니다: 16:9 (1280×720), 3:1 (1500×500), 1:1 (400×400), 9:16 (1080×1920), 1:1.56 (420×654), 40:21 (1200×630), 4:1 (1584×396), 2:3 (1000×1500). 각 칩에는 그 비율을 가진 첫 규격의 픽셀 크기가 표시되고, 칩이 활성인 동안 모서리 핸들은 비례해 조절됩니다.
자르기는 겹쳐 쌓입니다. „자르기 적용“은 매번 원본이 아니라 현재 이미지에서 다시 자릅니다. 되돌리려면 소스 바의 „자르기 되돌리기“를 쓰세요. 포지의 자르기 대화상자는 1:1만 제공합니다. 모든 출력이 정사각형이기 때문입니다.
모바일에는 스페이스 바가 없습니다. 손가락 하나로 상자를 끌고, 두 손가락으로 집어 확대하고 이미지를 이동합니다. 나머지는 같습니다.
형식과 품질
JPEG와 PNG 중 고르기
JPEG는 사진과 대부분의 콘텐츠에 맞고, 투명이 필요 없을 때 파일을 절반으로 줄입니다. 품질 기본값은 92(범위 40–100)입니다. 80 아래에서는 그라데이션과 평면 영역에 눈에 보이는 띠가 생기고, 95 위로는 눈에 띄는 개선 없이 파일만 커집니다.
PNG는 투명(영상 위 자막 바, 배경을 뺀 로고)이나 큰 평면 단색과 글자가 있는 이미지에 씁니다. 투명을 켜면 자동으로 PNG로 바뀝니다. JPEG에는 알파 채널이 전혀 없기 때문입니다. 다시 JPEG로 바꾸면 토글이 꺼지므로 „투명으로 보이는데 흰색으로 내보내짐“ 상태가 되지 않습니다.
PNG는 무손실이라 품질 슬라이더가 회색으로 비활성화됩니다. 정상입니다.
내보내기와 이름 규칙
개별 파일, ZIP, 파일명 규칙
개별 다운로드는 각 카드 오른쪽 아래나 미리보기 안의 „이것만 다운로드“에 있습니다. 전체 세트는 결과 헤더의 „ZIP 다운로드“ 버튼입니다. 미리보기에는 두 모드가 있습니다. 플랫폼 보기는 실제 플랫폼 형태(원형 아바타, 둥근 카드, 인터페이스 오버레이 포함)로 그리고, 원본은 내보낸 픽셀을 1:1로 보여줍니다.
파일명은 고정이라 그대로 에셋 라이브러리에 들어갑니다: 플랫폼-용도-가로x세로.jpg, 예를 들어 {sample}. 압축 파일 이름은 로컬 시각이 붙은 social-sizes-20261024-1208.zip입니다.
전부 필요 없을 때는 툴바 오른쪽의 „규격 내보내기“에서 필요한 것만 체크하세요. 생성하는 파일을 줄이면 시간과 캔버스 메모리를 아낍니다.
로고 하나에서 전체 세트로
한 소스에서 모든 크기로
포지는 이미지 한 장을 여섯 그룹, 20개 파일로 만듭니다: 브라우저 탭(favicon), 내비게이션 로고, iPhone 홈 화면, Android / PWA, Chrome 확장 프로그램, 그리고 원형 아바타와 작은 크기입니다. 모든 크기, 형식, 파일명은 자체 발명이 아니라 각 플랫폼 문서를 따릅니다.
1024 × 1024 정사각형 로고가 권장 소스입니다. 정사각형이 아니어도 됩니다. 여백을 두고 비례 배치되며 절대 늘어나지 않습니다.
네 가지 컨트롤의 역할
- 모양(정사각형 / 둥근 모서리 / 원)은 그려지는 윤곽만 바꿉니다. iOS 홈 화면 아이콘과 마스커블은 항상 꽉 찹니다. 마스크는 시스템이 적용하므로 미리 잘라 두면 이중 테두리에 모서리가 검게 채워집니다.
- 안쪽 여백(0–20%)은 실제로 로고를 나타내는 규격(favicon, 내비게이션 로고, PWA 기본 아이콘)에만 적용됩니다. 아바타와 터치 아이콘은 꽉 찬 상태로 남습니다. 그렇지 않으면 „이미지가 줄었다“고 오해합니다. 마스커블은 최소 10%를 유지합니다. 시스템이 가운데 80%만 보장하기 때문입니다.
- 배경 / 투명: iOS는 알파를 허용하지 않고 투명 픽셀은 검게 채워지므로 apple-touch와 PWA 규격은 강제로 불투명해지고, 투명 토글은 이들에 아무 효과가 없습니다.
- 확대하지 않음은 원본 픽셀을 그대로 넣습니다. 소스가 목표보다 작을 때 흐려지는 대신 픽셀 격자가 남아, 작은 로고의 문제가 바로 보입니다.
오해하기 쉬운 두 가지 출력
favicon.ico는 16 / 32 / 48 PNG를 한 파일에 넣은 것이고 브라우저가 그중 하나를 고릅니다. 세 파일로 나누지 마세요. favicon.svg와 logo.svg는 비트맵을 SVG에 넣은 과도기적 컨테이너입니다. 비트맵은 진짜 벡터가 될 수 없으므로 이 파일들은 파일명과 참조만 맞추는 역할입니다. 실제 서비스에서는 디자인에서 같은 이름의 진짜 벡터를 내보내 덮어쓰게 하세요.
배포하기
파일은 각 플랫폼의 관례 이름(favicon.ico, favicon-16x16.png, apple-touch-icon.png, android-chrome-512x512.png, android-chrome-maskable-512x512.png, icon-192.png)을 씁니다. 모두 사이트 루트에 넣으세요. 소스 바의 „전체 ZIP 다운로드“는 소스 크기, 자르기 범위, 렌더링 파라미터, 파일 목록을 담은 README.txt를 포함해 icons-20261024-1208.zip으로 한 번에 받습니다. 페이지 아래 스니펫에는 복사해 쓸 HTML head와 manifest.json 블록이 있습니다.
결과를 판단하려면 카드를 보세요. 각 카드는 실제 표시 크기로 아이콘을 그리고, 열면 픽셀 단위까지 확대됩니다. 16px 버전에서 윤곽이 알아보이지 않는다면 마크를 더 단순하게 만들어야 합니다.
여러 장을 통일해서 줄이기
품질 사다리와 목표 용량
일괄 압축은 정확히 한 가지만 합니다. 비슷한 이미지 묶음을 구도는 건드리지 않고 작게 만듭니다. 변환기와 달리 자르지도 비율을 바꾸지도 않습니다. 포지와 달리 새 파일 형식을 만들지 않습니다.
출력 형식
스마트(기본)는 JPEG 원본을 JPEG로 두고 PNG / WebP / AVIF 원본을 WebP로 변환합니다. WebP는 알파를 유지하고 보통 PNG의 절반 이하이며, PNG를 PNG로 다시 인코딩하는 것은 거의 효과가 없습니다. JPEG / WebP / PNG를 강제할 수도 있습니다. 브라우저가 WebP 인코딩을 지원하지 않으면 PNG로 되돌아가고 확장자도 따라가며, 페이지 상단에 알려 줍니다.
품질과 크기
품질 슬라이더는 40–100, 기본값 80입니다. 옆의 세 프리셋은 轻压缩 90 / 推荐 80 / 高压缩 60입니다. 그보다 낮추면 눈에 보이는 블록 노이즈가 생기므로 하한이 40입니다.
„긴 변“은 축소 안 함 / 3840 / 2560 / 1920 / 1280을 제공하고 축소만 합니다. 상한보다 작은 원본은 그대로 두고 절대 위로 보간하지 않습니다. PNG를 선택하면 품질 슬라이더와 목표 용량이 모두 적용되지 않습니다. PNG는 무손실이라 용량으로 제어하는 것이 의미 없기 때문입니다.
목표 용량을 쫓는 방식
KB 상한이 주어지면 먼저 품질 사다리를 내려갑니다(최대 6단계, 30까지). 그다음 치수를 25%씩 줄입니다(최대 3회, 320px 아래로는 내려가지 않음). 둘 다 안 될 때만 그 행을 „미달“로 표시합니다. 성공한 척하지 않습니다.
결과가 원본보다 나빠지지 않습니다
축소가 없었는데 인코딩 결과가 더 커졌다면 원본 파일을 그대로 전달하고 „원본 유지“로 표시합니다. 이 규칙 덕분에 압축이 순손실이 되는 일은 없고, 대신 아무 일도 안 한 것처럼 보이는 행이 생깁니다.
파라미터를 바꿔도 자동으로 다시 압축하지 않습니다
품질·크기·형식을 바꾸면 안내만 뜨고, 화면의 결과는 아직 이전 파라미터로 계산된 것입니다. 확인 후 „다시 압축“을 누르세요. 묶음 × 여러 번 인코딩은 비용이 크고, 슬라이더를 움직일 때마다 다시 계산하면 메인 스레드가 잠깁니다.
이름과 비교
출력 이름은 원본에 -min을 붙입니다(형식이 바뀌면 확장자도 바뀜). 한 묶음 안에서 중복되면 -2, -3을 붙입니다. 그렇지 않으면 ZIP의 뒤 항목이 앞 항목을 덮어씁니다. 압축 파일은 compressed-images-20261024-1208.zip입니다. 행을 클릭하면 비교 라이트박스가 열리고, 구분선은 픽셀 단위로 끌 수 있으며 ← / →로 이미지를 넘깁니다.
재인코딩은 픽셀만 기록하므로 EXIF(카메라, 조리개, 셔터, GPS)는 사라집니다. 보통은 원하는 동작이지만 EXIF로 보관한다면 원본을 먼저 백업하세요.
한계
용량, 개수, 치수의 상한
- 서버 없음 — 업로드 엔드포인트도 계정도 없습니다. 프라이버시와 오프라인 사용을 얻는 대신 새로 고치면 모두 지워집니다. 결과는 이 탭에만 존재합니다.
- 4096px 축소 — 변환기와 포지는 4096보다 긴 변을 생성 전에 줄입니다. 목표보다 작은 이미지는 그래도 확대됩니다. 이 단계가 그것을 구해 주지는 못합니다.
- 캔버스 메모리 — 모바일에서 11개 규격을 한 번에 생성하면 버벅일 수 있습니다. 선택을 줄이면 나아집니다. 일괄 압축은 묶음당 60개, 파일당 50.00 MB이 상한입니다.
- 형식 제한 — 애니메이션 GIF를 다시 인코딩하면 애니메이션이 사라지고, SVG는 벡터라 래스터화하면 반드시 왜곡되며, 브라우저는 HEIC를 디코딩하지 못합니다. 일괄 압축은 셋 다 건너뛰고 이유를 알려 줍니다.
- 투명은 형식에 묶입니다 — 투명 출력은 PNG로만 존재합니다. JPEG에서는 투명 영역이 선택한 배경색으로 채워집니다.
문제 해결
결과가 이상할 때 이 순서로 확인하세요
결과가 흐릿합니다
원본이 너무 작습니다. 폭 1080 정사각형 게시물은 최소 1080px의 원본 폭이 필요하고, YouTube 채널 배너은 2560px이 필요합니다. 소스 바의 치수를 확인하세요. 목표보다 작으면 확실히 위로 보간됩니다.
중요한 내용이 잘렸습니다
채우기(cover)는 항상 가장자리를 자릅니다. 그것이 정의이고 버그가 아닙니다. 맞추기로 바꾸거나, 자르기 대화상자에서 목표 비율을 고정하고 필요한 영역을 잡으세요.
아바타가 한쪽이 잘린 것처럼 보입니다
아바타는 원형으로 잘리므로 모서리는 절대 보이지 않습니다. 피사체를 지름 80%의 가운데 원 안에 두세요. 미리보기의 플랫폼 보기에서 실제 원형 결과를 볼 수 있습니다.
내보낸 PNG가 예상보다 훨씬 큽니다
정상입니다. 1080×1920 이미지를 PNG로 저장하면 3~5 MB가 될 수 있습니다. 투명이 필요 없으면 JPEG를 쓰세요. 같은 내용이 보통 200~500 KB입니다.
휴대폰에서 큰 이미지를 올린 뒤 페이지가 버벅입니다
모바일 브라우저는 페이지당 캔버스 메모리에 상한이 있습니다. 툴바 오른쪽의 „규격 내보내기“에서 선택을 줄이고 두세 개씩 생성하세요. 눈에 띄게 나아집니다.
일괄 압축에서 줄지 않은 이미지가 있습니다
두 가지 경우입니다. 원본이 이미 강하게 압축되어 재인코딩이 손해만 되거나, „긴 변“이 꺼져 있어 치수는 그대로인데 인코딩 결과만 커진 경우입니다. 둘 다 원본 파일을 전달하고 그 행을 „원본 유지“로 표시합니다.
아이콘을 설치하면 가장자리가 검습니다
iOS는 알파를 허용하지 않아 투명 픽셀이 검게 됩니다. 여기서는 apple-touch와 PWA 규격을 강제로 불투명하게 처리하지만, 원본이 투명 배경의 어두운 로고라면 내보내기 전에 배경을 로고 색에 가깝게 설정하세요.
압축 파라미터를 바꿨는데 아무 일도 없습니다
일괄 압축은 의도적으로 실시간 재계산을 하지 않습니다. 한 묶음이 수십 장이고 각각 최대 아홉 번 인코딩될 수 있기 때문입니다. 파라미터 변경은 안내만 띄우고, „다시 압축“을 눌러 확정합니다. 단일 이미지 도구는 실시간으로 갱신됩니다.
새로 고치니 전부 사라졌습니다
세 도구 모두 업로드 엔드포인트가 없어 서버 사본이 없습니다. 이미지는 이 탭의 메모리에 있고, 새로 고침·닫기·새 탭에서 지워집니다. 필요한 것은 먼저 다운로드하세요.
특정 규격에 대해 아직 궁금한 점이 있나요?규격 라이브러리에는 각 항목의 실제 표시 규칙, 가려지는 영역, 가장 흔한 실패가 정리되어 있습니다. 변환기, 아이콘 포지, 일괄 압축기는 모두 바로 쓸 수 있습니다.