이미지 모서리 둥글게

GeekFormat 정보

클릭하여 이미지 업로드

JPG / PNG / WEBP

모서리 기본

모서리 반경

20%

050%

출력 형식

미리보기를 보려면 이미지를 업로드하세요

온라인에서 어떤 이미지에든 모서리를 둥글게 처리하세요. 프리셋을 선택하거나 슬라이더를 드래그하여 실시간으로 미리 보고, 투명 PNG를 내보낼 수 있습니다. 모든 처리는 로컬에서 이루어집니다.

이미지 모서리 둥글게 처리란?

이미지 모서리 둥글게 처리는 이미지의 4개 직각을 부드러운 원호로 대체하는 처리 기술입니다. 본 도구는 Canvas의 arcTo()로 둥근 사각형 경로를 그리고, clip()을 호출해 이미지를 그 영역으로 클리핑합니다. PNG로 내보낼 때 클리핑 영역 밖은 Alpha=0 투명 픽셀이 됩니다.

**둥근 모서리의 시각 효과는?** 둥근 모서리는 직각보다 부드럽고 친근하게 보이며, 시각적 날카로움을 줄여줍니다. UI 디자인에서 앱 아이콘, 버튼, 카드, 아바터에 폭넓게 사용됩니다. iOS가 추구하는 'Superellipse(squircle)'는 더 매끄러운 곡선으로 둥근 모서리를 진화시켰습니다.

**왜 많은 앱 아이콘이 둥근 모서리를 요구할까?** iOS / iPadOS / macOS Big Sur 이후 시스템이 앱 아이콘에 자동으로 둥근 마스크를 적용하는데, 원본 이미지에 흰색 배경이 있으면 '흰 테두리' 결함이 생깁니다. 해결책은 원본 이미지에서 둥근 모서리 PNG를 미리 내보내 시스템이 다시 마스킹하지 않게 하는 것이며, 본 도구가 바로 그 용도입니다.

**픽셀 vs 퍼센트:** 픽셀은 정밀하지만 이미지 간 정렬이 어렵고, 퍼센트는 다양한 크기에 자동 적응합니다. 디자인 시스템에서는 일반적으로 퍼센트를 사용합니다(예: iOS 앱 아이콘 22.37%, Android Adaptive Icon 25%).

**CSS border-radius와의 차이점:** CSS border-radius는 표시 계층 처리이므로 내보낸 이미지의 모서리는 여전히 직각입니다. 본 도구는 Alpha 채널이 있는 진짜 PNG를 생성해 PowerPoint, 영상, 인쇄 등 CSS가 지원되지 않는 모든 환경에서 사용할 수 있습니다.

사용 사례

소셜 계정(KakaoTalk, X, Instagram, Facebook 등) 아바타를 한 클릭으로 완전한 원형으로 생성
앱 아이콘에 빠르게 모서리 둥글게 적용(iOS 22~25%, Android Adaptive Icon 25%)
이커머스 상품 메인 이미지에 부드러운 모서리를 더해 클릭률과 전환율 향상
PowerPoint 슬라이드, 영상 편집, 인쇄물에 쓸 둥근 모서리 이미지 자산을 로컬에서 처리
디자인 시스템 통일 시 동일한 모서리 크기의 아이콘과 자산을 대량 제작(한 장씩 처리)

이용 방법

업로드 영역을 클릭해 이미지를 선택하거나 JPG/PNG/WEBP 이미지를 직접 드래그
소(10%)·중(25%)·대(50%) 프리셋 버튼으로 한 클릭 설정, 또는 슬라이더를 드래그해 임의 값으로 조정(클릭으로 퍼센트/픽셀 전환)
출력 형식 선택: PNG(투명 배경) / WEBP(작은 용량) / JPG(흰색 배경, 투명 없음)
우측에서 실시간 미리보기, 완료 후 다운로드 버튼을 눌러 자동으로 -rounded 접미사와 함께 저장

주요 기능

이중 단위: 모서리 반경을 픽셀(0-500px)과 퍼센트(0-50%) 사이에서 자유롭게 전환
3단계 프리셋: 小(10%)·中(25%)·大(50%) 한 클릭 프리셋, 사용자 지정 슬라이더도 지원
3가지 출력 형식: PNG(투명도), WEBP(작은 용량), JPG(흰색 배경) 중 선택
실시간 미리보기: 슬라이더를 조정하면 즉시 둥근 모서리 효과 확인, 체스판 배경으로 투명 영역도 또렷이 표시
드래그 업로드: 클릭하거나 JPG/PNG/WEBP 이미지를 업로드 영역으로 직접 드래그
로컬 처리: 모든 처리는 브라우저 Canvas에서 실행되며 이미지는 서버로 전송되지 않음

Best Practices

투명도가 필요할 때는 JPG 대신 PNG 선택

JPG는 Alpha 채널을 지원하지 않으므로 선택하면 모서리 부분이 흰색으로 채워져 보기 흉한 흰색 블록이 생깁니다. 투명도가 확실히 필요 없는 경우에만 JPG를 선택하고, 그 외에는 기본값으로 PNG를 선택하세요.

투명도와 작은 용량이 모두 필요할 때 WEBP 선택

WEBP도 투명도를 지원하면서 PNG보다 25~35% 가벼워 웹 자산을 위한 최적 선택입니다. 다만 일부 오래된 디자인 소프트웨어는 WEBP를 인식하지 못하므로 도구 간 협업 시에는 PNG를 우선하세요.

앱 아이콘의 모서리 둥글기 비율 선택

iOS 앱 아이콘은 시스템이 약 22.37%의 모서리를 자동 적용하지만, 원본 이미지에 흰색 배경이 있으면 '흰 테두리' 결함이 생깁니다. 본 도구로 미리 둥근 모서리 PNG(22~25% 권장)를 만들어 두는 것이 정답입니다. Android Adaptive Icon은 25%를 안전 영역으로 권장합니다.

아바타는 50% 반경으로 완전한 원 생성

KakaoTalk, X, Instagram 등 대부분의 소셜 플랫폼은 아바타를 완전한 원으로 표시합니다. 50% 프리셋을 선택하면 한 번의 클릭으로 투명 PNG 원형 아바타가 생성되며, 라이트/다크 테마 모두에 자연스럽게 어울립니다.

iOS 앱 아이콘 가이드라인

내보낸 둥근 이미지에 CSS border-radius를 다시 적용하지 마세요

본 도구에서 내보낸 둥근 PNG를 CSS border-radius + overflow:hidden 컨테이너로 감싸면 가장자리가 이중 처리되어 흐릿해집니다. 둥근 이미지는 그대로 img 태그로 표시해 주세요.

더 복잡한 모서리(단일 모서리 다름, TabBar 상단만 둥글게) 필요 시

본 도구는 4 모서리가 동일한 표준 둥근 모서리만 지원합니다. TabBar 상단 2개 모서리만, 하단 2개 모서리만, 모서리마다 다른 반경 등 복잡한 모양은 이미지 에디터 또는 Figma 같은 디자인 도구를 활용해 주세요.

자주 묻는 질문

이미지에 모서리를 둥글게 추가하는 방법은?

업로드 후 소·중·대 프리셋 버튼을 클릭해 빠르게 둥근 모서리를 적용하거나, 슬라이더를 드래그해 원하는 픽셀값(0-500px) 또는 퍼센트(0-50%)를 지정합니다. 우측 패널에서 실시간으로 미리 볼 수 있으며, 완료되면 다운로드 버튼을 눌러 파일이 자동으로 -rounded 접미사와 함께 저장됩니다.

모서리 반경은 픽셀과 퍼센트 중 어떤 것을 써야 하나요?

픽셀은 정밀한 제어가 가능해 고정 크기 자산에 적합합니다. 퍼센트는 이미지의 짧은 변에 맞춰 스케일되어 다양한 크기에 유연하게 대응합니다. 본 도구는 한 번의 클릭으로 단위 전환을 지원하며, 50%는 항상 완전한 원이 되어 프로필 사진에 이상적입니다.

둥근 모서리 부분은 어떻게 처리되나요?

PNG 또는 WEBP 출력을 선택하면 모서리 부분이 완전 투명(Alpha=0)이 되어 어떤 배경과도 자연스럽게 어우러집니다. JPG 출력을 선택하면 흰색으로 채워지며(화면에 노란색 경고 표시), 투명도가 필요하지 않은 최종 이미지에 적합합니다.

지원되는 이미지 형식은 무엇인가요?

입력은 JPG, PNG, WEBP 세 가지 형식을 지원합니다. 출력은 PNG(투명), WEBP(작은 용량), JPG(흰색 배경) 중 선택할 수 있습니다. 다운로드된 파일에는 자동으로 -rounded 접미사가 붙어 원본과 구분됩니다.

모서리 크기에 제한이 있나요?

퍼센트 모드는 0~50%(50%에서 완전한 원), 픽셀 모드는 0~500px 범위입니다. 값이 클수록 모서리가 더 둥글어지며, 이미지 짧은 변의 절반에 도달하면 정원이 됩니다. 본 도구는 Canvas의 arcTo + clip으로 표준 원호 모서리를 구현하며 Squircle(초타원)에는 대응하지 않습니다.

아바타나 앱 아이콘을 만들 수 있나요?

네, 가능합니다. 완전한 원형 아바타는 50% 프리셋으로 한 번에 생성할 수 있습니다. iOS 앱 아이콘은 22~25%를 권장하며(25% 프리셋으로 한 클릭 매칭), Android Adaptive Icon은 25%를 안전한 반경으로 사용하세요. 투명 PNG 출력은 모든 테마에 잘 어울립니다.

모서리 둥글게 처리로 이미지가 흐려지나요?

흐려지지 않습니다. 본 도구는 Canvas에서 원본 해상도 그대로 경로 클리핑을 수행하며 재샘플링이나 압축을 일체 하지 않습니다. 출력 화질은 원본과 완전히 동일하며 모서리 부분만 클리핑되어 가장자리는 선명하게 유지됩니다.

내 이미지가 서버로 전송되나요?

아니요. 모든 처리는 브라우저 내 Canvas API를 통해 로컬로 실행되며, 이미지는 어떤 서버로도 전송되지 않습니다. 페이지를 떠나면 폐기됩니다. 개인정보가 담긴 사진, 신분증 사본 등 민감한 자산도 안심하고 처리할 수 있습니다.

모서리 효과가 표시되지 않는 이유는?

다음을 확인해 주세요: ① 반경 값이 0보다 큰지(슬라이더가 가장 왼쪽이 아님) ② 이미지가 정상적으로 로드되었는지(JPG/PNG/WEBP 중 하나) ③ 브라우저가 HTML5 Canvas를 지원하는지(모든 모던 브라우저 지원). 문제가 지속되면 페이지를 새로 고침하고 다시 업로드해 주세요.

CSS border-radius와 무엇이 다른가요?

CSS border-radius는 브라우저 표시 계층에서만 작동하며 이미지 파일 자체에 모서리를 굽지 않습니다. 본 도구는 Alpha 채널이 적용된 진짜 PNG 파일을 내보내므로, PowerPoint, 영상 편집, 인쇄 등 CSS가 지원되지 않는 모든 환경에서 둥근 모서리 이미지를 사용할 수 있습니다.

용어집

모서리 반경(Border Radius): 둥근 모서리 원호의 반경 값으로, 모서리 휘어짐 정도를 결정합니다. 값이 클수록 더 둥글어지며, 이미지 짧은 변의 절반에 도달하면 완전한 원이 됩니다. 본 도구는 픽셀(0-500px)과 퍼센트(0-50%) 두 단위를 지원합니다.
Alpha 채널: PNG/WEBP에 내장된 투명 채널로, 픽셀당 0~255 값으로 투명도를 나타냅니다. 본 도구는 둥근 모서리 부분의 픽셀을 Alpha=0으로 설정해 어떤 배경과도 자연스럽게 어우러지는 완전 투명 출력을 만듭니다.
Squircle(초타원): iOS 7 이상에서 도입된 둥근 형태로, 기존 둥근 사각형보다 더 매끄러우며 수식 x⁴+y⁴=r⁴를 따릅니다. 본 도구는 표준 원호를 출력하므로 Squircle이 필요하면 Figma/Sketch 같은 디자인 도구를 사용하세요.
Adaptive Icon: Android 8.0 이상에서 도입된 적응형 아이콘으로, 전경과 배경 두 개의 레이어로 구성됩니다. 25% 반경이 안전 영역이며, OEM 런처가 자체 모양의 마스크를 적용합니다.
Canvas arcTo: Canvas 2D API의 원호 그리기 메서드입니다. 본 도구는 arcTo + clip을 조합해 둥근 사각형 경로를 만들고, 이미지를 그 안으로 클리핑하며, 내보낼 때 외부 영역을 Alpha=0 투명 픽셀로 만듭니다.

플랫폼별 모서리 둥글기 규격 빠른 참조

플랫폼 / 요소	기준 크기	권장 모서리 비율	약 (px)
iOS / iPadOS 앱 아이콘	`1024 × 1024`	약 22.37%	≈ 229 px
Android Adaptive Icon	`108 × 108`	약 25%	≈ 27 px
macOS Sonoma 앱 아이콘	`1024 × 1024`	Squircle 초타원	고정 px 없음
Windows 11 카드	`—`	약 8 px	8 px
Material Design 3 Large	`—`	약 28 px	28 px
KakaoTalk / X 아바타	`640 × 640`	50%(완전한 원)	320 px
Twitter / Instagram 아바타	`400 × 400`	50%(완전한 원)	200 px
이커머스 메인 이미지	`800 × 800`	16~24 px 권장	16-24 px

Authoritative References

ReferenceMDN - border-radius
ReferenceApple HIG - 앱 아이콘 가이드라인
ReferenceWikipedia - 슈퍼타원
ReferenceMDN - CanvasRenderingContext2D.arcTo()