이미지 둥근 자르기
이미지를 원형으로 자르기
도구 사용해보기
소개
이미지 둥근 자르기 도구를 사용하면 정확한 제어로 이미지를 원형 또는 둥근 모양으로 자를 수 있습니다. 자르기 영역을 조정하고, 원 크기를 조정하고, 아바타, 썸네일 및 프로필 사진용 완벽한 원형 이미지를 만들 수 있습니다.
사용 방법
- 이미지 파일 업로드
- 원형 자르기 영역 선택
- 자르기 원의 크기 및 위치 조정
- 잘린 원형 이미지 미리보기
- 잘린 이미지 다운로드
- 프로젝트에서 원형 이미지 사용
사용 사례
- 원형 프로필 이미지 생성
- 아바타 표시용 이미지 자르기
- 원형 썸네일 생성
- 소셜 미디어용 둥근 이미지 생성
- 제품 이미지를 원으로 자르기
팁
- 중요한 부분에 초점을 맞추기 위해 자르기 영역 배치
- 일관된 결과를 위해 종횡비 유지
- 더 나은 품질을 위해 고해상도 이미지 사용
- 자르기를 확정하기 전에 미리보기
- 자를 때 최종 사용 사례 고려
- 정사각형 이미지는 원형 자르기에 가장 적합
이미지 둥근 자르기란?
이미지 라운드 크로퍼는 사진이나 그래픽을 완벽한 원으로 잘라 소셜 플랫폼(Twitter, Instagram, Slack, GitHub)에서 사용되는 둥근 아바타와 프로필 사진을 생성합니다. 두 가지 제작 경로가 있습니다. CSS 접근 방식은 정사각형 컨테이너에 `border-radius: 50%`를 적용하여 시각적으로 이미지를 마스크하지만 기본 파일은 모서리가 투명한 직사각형으로 남깁니다(알파가 있는 WebP/PNG에서만 작동). Canvas 접근 방식은 `ctx.arc()` + `ctx.clip()`을 통해 직사각형 픽셀을 원형 알파 마스크에 합성한 다음 투명도가 구워진 진정한 원형 PNG/WebP를 내보냅니다. 출력 파일 자체가 원형이어야 할 때(파비콘, 앱 아이콘, 다운로드 가능한 아바타) Canvas 경로가 필요합니다. CSS는 렌더링에만 영향을 미치고 저장된 바이트에는 영향을 미치지 않기 때문입니다. 현대 크로퍼는 원 위치를 조정하고 마스크 내 이미지 크기를 조정하고 원 주위에 색상이 있는 링(테두리)을 추가하고 레티나 디스플레이용 여러 해상도(128px, 256px, 512px)로 내보낼 수도 있습니다.
일반적인 사용 사례
소셜 미디어 아바타 및 프로필 사진
Twitter, Instagram, LinkedIn, Slack은 모두 프로필 사진을 원으로 표시하지만 사용자는 직사각형 셀카를 업로드합니다. 라운드 크로퍼를 사용하면 사용자가 원형 마스크 내에 얼굴을 배치하고 레티나 디스플레이에서 선명하게 렌더링되는 알파가 있는 512x512 PNG를 내보낼 수 있습니다. 라운드 크롭이 없으면 플랫폼이 중앙에서 자동 잘라내기를 하여 종종 머리를 잘라내거나 턱을 베어냅니다.
투명 배경의 앱 아이콘 및 파비콘
iOS 앱 아이콘, Android 적응형 아이콘, 현대 파비콘은 종종 외부가 투명한 원형 아이콘이 필요합니다. Canvas 마스크 접근 방식은 알파 채널을 PNG에 직접 구워 넣어 아이콘이 모든 배경색 위에서 깨끗하게 놓이게 합니다. 여러 내보내기 크기(16px 파비콘부터 512px PWA 아이콘까지)가 동일한 소스 크롭에서 나옵니다.
팀 디렉토리 및 배지 사진
기업 인트라넷과 회의 배지는 시각적 일관성을 위해 원형 헤드샷을 사용합니다. 200장의 직원 사진을 4px 흰 테두리가 있는 400x400 PNG로 일괄 라운드 크롭하면 그리드에서 깨끗하게 배치되는 균일한 타일이 생성됩니다. 테두리는 사진이 어두운 배경에 배치될 때 어두운 배경 위의 어두운 가장자리를 방지합니다.
코드 예제
알파 내보내기가 있는 Canvas 원형 마스크
클립 경로가 원형 알파를 내보낸 파일에 구워 넣는 것입니다. ctx.clip() 이후의 모든 drawImage 호출은 원으로 제한되고 외부 픽셀은 결과 PNG에서 완전히 투명합니다. `image/png`(JPEG 아님) 사용이 필수입니다. JPEG에는 알파 채널이 없고 모서리를 흰색으로 채우기 때문입니다. 색상이 있는 링에는 클립을 적용하기 전에 원을 스트로크합니다.
const canvas = document.createElement('canvas');
const size = 512;
canvas.width = canvas.height = size;
const ctx = canvas.getContext('2d')!;
// 원형 클립 경로 그리기
ctx.beginPath();
ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
ctx.closePath();
ctx.clip();
// 원을 채우도록 크기 조정하여 이미지 그리기
const img = new Image();
img.onload = () => {
const scale = Math.max(size / img.width, size / img.height);
const w = img.width * scale;
const h = img.height * scale;
ctx.drawImage(img, (size - w) / 2, (size - h) / 2, w, h);
canvas.toBlob((blob) => {
/* 알파가 구워진 원형 PNG */
}, 'image/png');
};
img.src = sourceDataUrl;CSS 전용 원형 표시(파일 변경 없음)
CSS 접근 방식은 렌더링 전용입니다. 소스 파일은 직사각형으로 유지되고 `border-radius: 50%`가 시각적으로 마스크합니다. 표시에는 문제없지만 사용자가 이미지를 다운로드하면 원래 직사각형을 얻습니다. `object-fit: cover`가 필수입니다. 이것 없이는 이미지가 정사각형을 채우기 위해 늘어나고 얼굴이 왜곡됩니다. 표시에는 이것을 사용하고 다운로드가 원형이어야 하면 Canvas 접근 방식을 사용하세요.
.avatar {
width: 128px;
height: 128px;
border-radius: 50%;
object-fit: cover; /* 가로세로비 유지, 넘침 잘라내기 */
object-position: center; /* 중앙에 초점(얼굴) */
border: 3px solid #fff; /* 선택적 링 */
box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}
/* 반응형: img가 아닌 컨테이너로 크기 조정 */
.avatar-wrap { width: 25vw; max-width: 200px; aspect-ratio: 1; }
.avatar-wrap img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }모범 사례
- ✓내보내기 형식에 PNG 또는 WebP 사용 - JPEG에는 알파 채널이 없고 투명한 모서리를 흰색으로 채워 원형 모양을 망칩니다.
- ✓drawImage 전에 ctx.clip() 적용 - 클립 경로는 이후의 모든 그리기 호출을 원으로 제한하여 투명도를 저장된 파일에 구워 넣습니다.
- ✓얼굴을 원의 정중앙이 아닌 상단 1/3에 배치 - 구도상 더 매력적이고 Twitter/LinkedIn의 잘라내기 방식과 일치합니다.
- ✓레티나 디스플레이에서 선명한 렌더링을 위해 표시 크기의 2배(예: 256px 표시에 512px)로 내보내고 비 레티나에는 CSS로 다운스케일합니다.
- ✓원형 가장자리가 배경에 녹아드는 것을 방지하려면 2-4px 대비 테두리(어두운 사진에는 흰색, 밝은 사진에는 어두운 색)를 추가하세요.
흔히 하는 실수
- ✗알파 채널이 없는 JPEG으로 내보내기 - 투명한 모서리가 흰색으로 채워지고 원이 사진이 든 흰색 정사각형이 됩니다.
- ✗<img>에 border-radius를 적용하지만 원본 파일을 다운로드 - 사용자는 원을 기대하지만 직사각형을 얻습니다.
- ✗정중앙에서 잘라내어 턱을 아래 가장자리에, 이마를 위에 배치 - 자연스러운 프레이밍을 위해 얼굴을 상단 1/3로 이동합니다.
- ✗저해상도 소스(예: 128px)를 사용하여 확대 - 원 가장자리가 픽셀화됩니다. 항상 출력 크기의 최소 2배에서 시작하세요.
- ✗object-fit: cover를 잊어 이미지가 정사각형 컨테이너를 채우기 위해 늘어나고 얼굴이 타원으로 왜곡됩니다.