이미지 자르기

이미지 자르기 도구란?#

잘라내기는 가장 단순한 이미지 조작처럼 들립니다. 사각형 하나를 남기고 나머지를 버리면 그만이니까요. 하지만 제대로 하려고 하는 순간 질문이 몰려듭니다. 잘라낸 영역이 섬네일이나 배너 슬롯에 맞게 고정된 종횡비를 유지하나요, 기울어진 수평선을 먼저 바로잡을 수 있나요, 내보낸 결과가 업로드하기에 충분히 작나요, 그리고 이 중 그 어느 것도 내 기기를 떠나나요? 이 페이지는 브라우저 안에서 네 가지 모두에 답하는 풀 크롭 스튜디오입니다.

이미지를 끌어 놓고, 그 위에 선택 상자를 그리고(또는 8개의 핸들 중 하나를 잡아 크기를 조정하고), 선택적으로 전체 프레임을 회전하거나 뒤집고, 1:1이나 16:9 같은 비율로 선택을 고정한 뒤, 선택한 품질로 잘라낸 영역을 PNG, JPEG, WebP로 내보냅니다. 모두 이 탭 안의 Canvas API로 실행됩니다. 원본 파일은 로컬에서 읽고 결과도 로컬에서 재인코딩되므로 아무것도 업로드되지 않습니다.

사용 방법#

1. 점선 드롭 영역에 그림을 끌어 놓으세요(또는 클릭해서 파일을 선택). 드롭 존을 대체하며 편집기가 나타납니다.
2. 자르기 전에 미리보기 위쪽의 도구 모음으로 전체 프레임을 변환하세요.
   • 90° 회전은 클릭할 때마다 이미지를 시계 방향으로 90° 돌립니다. 잘라내기 선택은 회전된 좌표 공간에서 추적되므로 항상 보이는 것과 일치합니다.
   • 좌우 반전 / 상하 반전은 프레임을 가로 또는 세로로 뒤집습니다.
3. 드롭다운에서 종횡비를 고르세요. 자유(아무 사각형이나 드래그), 1:1(아바타/프로필), 4:3, 16:9(배경화면/동영상 커버). 비율이 잠겨 있으면 드래그하는 동안 상자가 그 형태를 유지합니다. 코너 핸들은 커서 위치까지 늘어나고, 가장자리 핸들은 수직 방향을 자동으로 계산합니다.
4. 상자 본체를 드래그하면 이동하고, 8개 핸들 중 하나를 드래그하면 크기를 조정합니다. 마우스와 터치 모두 작동합니다.
5. 미리보기 아래의 내보내기 옵션을 설정하세요.
   • 출력 형식 — JPEG(가장 작음, 손실), WebP(작음, 최신), 또는 PNG(무손실, PNG에는 품질 조절계가 없으므로 품질 슬라이더가 비활성화됨).
   • 출력 최대 변 — 픽셀 단위 숫자. 비율은 유지한 채 잘라낸 영역의 긴 변이 이 값으로 제한됩니다. 전체 자르기 해상도를 유지하려면 0으로 두세요.
   • 품질 — 5–100, JPEG과 WebP에만 사용됩니다. 92가 합리적인 기본값이고 섬네일은 80으로 낮추세요.
6. 다운로드 옆의 표시기를 보세요. 선택 크기와 결과 출력 크기를 보여줍니다. 예를 들어 1:1 선택이 800으로 제한되면 1500×1500 → 800×800.
7. 다운로드를 클릭해 저장하세요. 선택 재설정으로 선택을 중앙 기본값으로 되돌립니다.

주요 특징#

• 제대로 느껴지는 비율 고정 크기 조정. 코너 핸들은 양축에서 커서 위치까지 늘어나고, 가장자리 핸들은 드래그한 축만 조정하고 비율에서 다른 축을 다시 계산합니다. 의도치 않은 늘어남이 없습니다.
• 변환을 반영하는 선택. 회전과 뒤집기는 오프스크린 캔버스에 한 번 적용되고 잘라내기 상자는 그 변환된 공간에 있으므로, 선택한 것이 정확히 내보내는 것입니다. 미리보기와 출력 사이에 불일치가 없습니다.
• 정직한 품질의 세 가지 포맷. PNG는 무손실로 표시되고 슬라이더를 조용히 무시하는 대신 비활성화합니다. JPEG과 WebP는 인코더에 직접 전달되는 실제 품질 값을 노출합니다.
• 선택적 출력 상한. 최대 변을 설정하면 잘라낸 영역이 비율을 유지하며 축소됩니다. 아바타, Open Graph 이미지, 업로드 제한에 편리하며, 직접 계산할 필요가 없습니다.
• 실시간 전후 표시. 선택 해상도와 최종 출력 해상도가 나란히 있어서, 상한이나 비율 변경을 확정하기 전에 확인할 수 있습니다.
• 100% 로컬. 이미지는 브라우저가 디코딩하고 브라우저가 재인코딩합니다. 업로드 종점이 없습니다.

실제 예시#

4000×3000 가로 사진이 있고 긴 변이 1280px인 16:9 배너 섬네일이 필요하다고 합시다. 사진을 불러오고, 종횡비를 16:9로 설정한 뒤 수평선 위로 선택을 드래그하세요. 비율이 잠겨 있으므로 상자가 16:9 사각형으로 스냅됩니다. 원본 픽셀 기준 선택이 4000×2250에 자리 잡았다고 가정합시다. 이제 출력 최대 변에 1280을 입력하세요. 표시가 다음으로 갱신됩니다.

crop size  4000 × 2250  →  1280 × 720

출력 형식: JPEG을 선택하고, 품질은 92로 둔 채 다운로드하세요. 장면에 따라 약 180–280 KiB 정도의 1280×720 JPEG을 얻습니다. 원본 수 메가바이트 파일의 극히 일부이면서, 히어로 배너가 필요로 하는 정확한 종횡비에 레터박스가 없습니다. 같은 흐름으로 1:1과 출력 최대 변 512를 쓰면 업로드 준비가 끝난 프로필 사진이 됩니다.

FAQ#

선택이 일정 크기 이하로 줄어들지 않아요. 왜 그런가요?#

핸들이 잡힐 수 있도록, 그리고 내보내기가 찌그러진 조각이 되지 않도록 8픽셀의 최소 변 길이가 있습니다. 극도로 조밀하게 잘라내야 한다면 확대해서 작은 영역을 자르지 말고, 더 큰 영역을 자른 뒤 출력 최대 변으로 축소하세요.

16:9로 잠갔는데 가장자리 근처에서 드래그하니 상자 크기가 바뀌었습니다.#

이미지 밖으로 상자가 나가지 않도록 하는 경계 클램프입니다. 비율이 잠긴 상자가 가장자리를 넘으려고 하면 비율이 살아남도록 짧은 변이 줄어듭니다. 먼저 상자를 중앙으로 옮긴 뒤 크기를 조정하세요.

JPEG으로 내보낼까요, WebP로 할까요?#

동일한 품질에서 WebP는 일반적으로 JPEG보다 25–35% 작고, 이제 중요한 모든 곳에서 지원됩니다. 하위 호환 파이프라인이 WebP를 거부할 때만 JPEG을 사용하세요. 잘라낸 결과가 로고, UI 스크린샷, 또는 날카로운 경계와 평면 색상이 있어 손실 아티팩트가 보일 수 있는 것이라면 PNG를 사용하세요.

잘라내면 파일 크기가 줄어드나요?#

두 가지 방식으로 그럴 수 있습니다. 면적이 줄면 인코딩할 픽셀 수가 줄고, 거기에 출력 최대 변이 추가로 축소할 수 있습니다. 하지만 노이즈가 많은 사진을 200×200으로 품질 100으로 잘라내면, 품질 80의 전체 이미지보다 여전히 클 수 있습니다. 손실 크기에서 진짜 조절계는 품질 슬라이더입니다.