JPG, PNG, WebP, AVIF 사진을 브라우저에서 원형으로 잘라 투명 PNG로 저장해요.
또는 여기에 이미지를 드롭하세요
자르는 중…
사진을 원형으로 잘라 브라우저에서 바로 다운로드해요. JPG, PNG, WebP, AVIF 파일을 페이지에 드래그하면 Cropper.js가 원형 마스크 스테이지로 열어줘요. 핸들을 드래그해서 위치를 잡고, 원의 크기를 조정한 다음 저장을 누르면 돼요. 브라우저가 투명 PNG, WebP, AVIF로 인코딩하거나, 배경색을 선택하면 JPEG로 저장해줘요. 파일은 기기에서 직접 다운로드되고, DevTools의 네트워크 탭을 열어보면 이미지 데이터를 전송하는 POST 요청이 없다는 걸 확인할 수 있어요. 25MB, 최대 1,600만 화소까지 지원해요. 데스크톱과 모바일 어디서든 앱 설치 없이 바로 쓸 수 있어요. LinkedIn, Discord, Slack, Instagram의 원형 프로필 슬롯에 정확하게 맞춰야 할 때 많이 사용해요.
JPG, PNG, WebP, AVIF 파일을 페이지에 드래그하면 Cropper.js v2가 원형 마스크 스테이지로 이미지를 열어줘요. 화면 중앙에 원형 선택 영역이 자동으로 놓이고, 핸들을 드래그해서 얼굴이나 로고를 프레임에 맞출 수 있어요. 코너 핸들이나 핀치 제스처로 원의 크기를 조정한 다음 저장을 누르면, 브라우저가 결과를 로컬에서 인코딩해서 기기로 다운로드해줘요. 자르는 동안 DevTools의 네트워크 탭을 열어보면 이미지 데이터를 전송하는 POST 요청이 나타나지 않아요. 일반 사진은 30초 안에 끝나요.
다운로드 메뉴에는 네 가지 형식이 있어요. PNG는 원형 외부를 완전히 투명하게 유지하는 가장 안전한 기본값이고, 로고와 아바타에 잘 맞아요. WebP는 같은 투명도를 지원하면서 PNG보다 25-40% 작아서 웹용 이미지에 적합해요. AVIF는 가장 작은 파일을 만들지만 @jsquash/avif WASM 인코더가 모바일 중급 기기에서 8MP 이미지 기준 약 30초까지 걸려요. JPEG는 알파 채널이 없어서 단색 배경을 직접 선택해야 하고, 투명 PNG를 거부하는 오래된 플랫폼에서만 사용해요. JPEG에서 '무손실'을 약속하지 않아요.
대부분의 소셜 플랫폼은 원형 마스크로 아바타를 렌더링해요. 미리 자르면 프레임 안에 무엇이 들어갈지 직접 제어할 수 있어요. LinkedIn은 최소 400×400px 프로필 사진을 권장해요. Discord 서버 목록의 사용자 아바타는 128×128px로 표시돼요. Instagram 모바일 프로필은 약 110px, Slack 워크스페이스 아바타는 약 36px로 렌더링돼요. 도구는 원본 해상도로 내보내기 때문에, 픽셀 단위로 정확한 출력 크기가 필요하면 먼저 크기를 조정하세요. WhatsApp과 Telegram의 원형 프로필 슬롯에도 같은 방식으로 맞춰요.
25MB나 1,600만 화소를 넘는 파일은 친절한 오류 메시지와 함께 거부돼요. 확인은 파일 이름이 아니라 매직 바이트로 해요. HEIC는 Safari에서만 로드돼요. Chrome, Firefox, Edge는 2026년 현재 HEIC용 createImageBitmap을 구현하지 않아요. GIF는 첫 번째 프레임만 내보내고 애니메이션은 보존하지 않아요. AVIF 인코딩은 모바일에서 느려요. 8MP 입력 기준 중급 스마트폰에서 약 30초까지 걸릴 수 있어요. 얼굴이나 피사체를 자동으로 감지하는 AI는 없어요. 원의 위치는 항상 수동으로 맞춰요.
Cropper.js는 브라우저의 Canvas API에서 마스크를 그려요. 인코딩도 로컬에서 실행돼요. PNG와 JPEG는 canvas.toBlob, AVIF는 @jsquash/avif WASM을 사용해요. 결과: 자르는 동안 DevTools의 네트워크 탭을 열어보면 이미지 데이터를 전송하는 POST나 PUT 요청이 나타나지 않아요. 저장 후 잠깐 보이는 blob: URL은 브라우저가 로컬 결과를 해석하는 것이지 서버로 데이터를 보내는 게 아니에요. 'image가 절대 기기를 벗어나지 않는다'고 약속하기보다는, 직접 확인할 수 있는 관찰 가능한 사실로 설명해요.
프로필 사진은 다른 사람이 가장 먼저 보는 요소예요. 대부분의 플랫폼이 원형 마스크로 아바타를 자르기 때문에, 사용자가 정사각형을 올리면 플랫폼이 알아서 자르는데, 미리 자르면 프레임 안에 어떤 부분이 들어갈지 결정할 수 있어요. 브랜딩용 원형 로고와 배지에도 같은 도구를 써요. 자연스러운 헤드샷 팁 하나: 머리 주변에 약간의 여백을 두고 피사체를 중앙에 배치하면 작은 크기에서도 잘 읽혀요. LinkedIn, Discord, Slack, Instagram, WhatsApp 모두 원형으로 렌더링해요.
업로드 영역을 클릭하거나 JPG, PNG, WebP, AVIF, GIF 파일을 페이지에 드래그해요. 원형 자르기 스테이지가 자동으로 열려요.
원형을 드래그해서 얼굴이나 로고를 중앙에 맞춰요. 핀치나 스크롤로 크기를 조정해서 원하는 프레임을 잡아요.
투명 원형은 PNG나 WebP를 선택하고, 가장 작은 파일은 AVIF, 단색 배경이 필요하면 JPEG를 선택해요.
브라우저가 로컬에서 결과를 인코딩하고 기기로 다운로드해요. 파일 이름에는 원본 이름에 -circle이 추가돼요.
JPG, PNG, WebP, AVIF, GIF, BMP 이미지를 자르기 스테이지에 드래그해요. Cropper.js가 이미지 중앙에 원형 선택 영역을 자동으로 놓아줘요. 원형을 드래그해서 피사체를 프레임에 맞추고, 코너 핸들이나 핀치 제스처로 크기를 조정한 다음 저장을 누르면 돼요. 기본적으로 투명 PNG로 인코딩해서 다운로드해줘요. 일반 사진 기준으로 30초 내에 완료돼요.
입력은 JPG, PNG, WebP, AVIF, GIF(첫 번째 프레임만, 애니메이션 보존 안 됨), BMP, SVG를 받아요. HEIC는 Safari에서만 작동해요. Safari가 createImageBitmap으로 HEIC를 기본 처리하기 때문이에요. Chrome, Firefox, Edge에서는 HEIC 파일을 거부하고 친절한 오류 메시지를 표시해요. 형식 확인은 파일 이름이 아닌 매직 바이트로 해요.
PNG, WebP, AVIF는 모두 알파 채널을 지원해서 원형 외부 영역이 완전히 투명해요. 다운로드한 파일을 대부분의 디자인 툴이나 메시지 앱에서 열면 배경이 체크무늬로 표시되는데, 이게 투명하다는 뜻이에요. JPEG는 투명도를 지원하지 않아서 JPEG를 선택하면 바깥 영역의 채우기 색상을 선택하라는 안내가 나와요.
네. PNG, WebP, AVIF를 선택하면 원형 외부가 완전히 투명한 이미지로 저장돼요. Figma나 Canva 같은 디자인 툴에 붙여넣으면 흰 테두리 없이 어떤 배경색 위에도 자연스럽게 올라가요. JPEG는 투명도가 없어서 배경색을 직접 골라야 해요.
iPhone, iPad, Android 기기의 모던 브라우저에서 작동해요. 드래그 핸들이 터치와 핀치 제스처를 지원해요. 모바일에서의 주요 제한은 AVIF 인코딩 시간이에요. 고해상도 사진은 WASM 인코더가 CPU에서 실행되기 때문에 30초 이상 걸릴 수 있어요. PNG와 WebP는 훨씬 빠르고 중급 기기에서도 잘 작동해요.
이미지를 원 모양으로 잘라주는 브라우저 기반 툴이에요. Cropper.js v2가 원형 마스크를 구동하고, canvas composite 연산(destination-in)으로 내보내기 시 원형 외부를 제거해요. PNG, WebP, AVIF는 알파 채널로 투명 배경을 유지하고, JPEG는 선택한 배경색으로 채워요. LinkedIn, Discord, Slack, Instagram의 프로필 아바타 슬롯에 정확히 맞는 이미지가 필요할 때 많이 사용해요.
좋은 원형 자르기 뒤에 있는 기술, 형식 및 작은 결정에 대한 팀의 메모.