이미지 모서리 둥글게

모서리 반경

운영체제, 앱 스토어, UI 디자인 시스템은 모두 둥근 모서리를 좋아합니다, iOS 아이콘, Material 카드, 최신 Tailwind 컴포넌트. 이미지를 업로드하면 이 도구가 설정한 반경으로 네 모서리를 둥글게 만들고, 투명한 모서리의 PNG로 내보내며, 선택적으로 티켓 스텁이나 말풍선 느낌을 위해 모서리마다 다른 반경을 적용합니다.

이미지 모서리를 둥글게 만드는 방법

  1. 1

    이미지 업로드

    JPG, PNG, WebP.

  2. 2

    반경 선택

    픽셀 단위 또는 짧은 변의 백분율로.

  3. 3

    선택: 모서리별로 다르게

    위쪽 모서리만 둥글게(카드) 또는 비대칭(티켓).

  4. 4

    배경 선택

    투명(PNG) 또는 JPG로 저장 시 단색.

  5. 5

    내보내기

    PNG는 둥근 알파를 보존하고, JPG는 선택한 색으로 평탄화합니다.

흔한 UI 형태별 반경 선택

반경 프리셋

형태 반경
은은한 UI 카드 4-8 px
Material Design 카드 4 px (M3에서는 8 px)
iOS 앱 아이콘 변의 22.37% (“스퀘클”)
macOS 앱 아이콘 변의 18.75%
Instagram 스토리 버블 12-16 px
둥근 아바타 짧은 변의 50% (완전한 원형)
티켓 스텁 비대칭, 한두 모서리만 둥글게
채팅 버블 꼬리 쪽 한 모서리 작게, 나머지 크게

스퀘클 문제

iOS 아이콘은 단순한 둥근 사각형이 아닙니다, 전환부가 수학적으로 더 매끄러운 “초타원(superellipse)“을 씁니다. 진짜 스퀘클은 CSS border-radius나 단순 알파 마스크가 렌더링할 수 있는 범위를 넘어서며, 도구는 일반 아이콘 크기에서 구별되지 않는 고차 둥근 사각형으로 근사합니다.

투명도 동작

  • PNG 출력이 기본입니다, 둥근 모서리가 투명 픽셀이 됩니다. 앱 아이콘, UI 카드, 다양한 배경 위에 이미지를 합성해야 하는 곳에 유용합니다.
  • JPG 출력은 투명할 수 없습니다. 둥근 모서리가 선택한 색으로 채워져 사실상 사진이 액자에 든 것처럼 보입니다.

모서리별 다른 반경

채팅 버블 느낌: 세 모서리를 12 px로 둥글게 하고 한 모서리를 0 px로 둡니다(“꼬리”가 붙을 모서리). 티켓 스텁: 둘은 날카롭게, 둘은 둥글게. 비대칭 반경은 이미지가 무언가에 붙어 있음을 암시하는 빠른 방법입니다.

안티앨리어싱

모서리 곡선은 4배 슈퍼샘플링으로 그려져 일반 보기 크기에서 선명합니다. 인쇄하거나 크게 확대해도 반경은 여전히 눈에 띄게 매끄럽습니다.

자주 묻는 질문

Apple은 모서리 곡률이 아이콘 변의 약 22.37%인 스퀘클을 씁니다. 1024 × 1024 캔버스에서는 약 229 px의 실효 모서리 반경이지만, 정확한 계산은 단순 둥근 사각형과 약간 다릅니다.

네. 반경은 이미지 종횡비와 무관하게 모서리별로 적용됩니다. 극단적 비율(매우 넓거나 높은)에서 반경을 짧은 변의 50%로 설정하면 캡슐 형태가 됩니다.

아니요, JPG는 투명도를 지원하지 않습니다. 둥근 알파를 유지하려면 PNG로 내보내거나, JPG에 배경색을 골라 모서리가 그 색으로 채워지게 하세요.

네. 도구는 알파 마스크만 추가하고 이미지를 리사이즈하지 않습니다. 둥글게와 리사이즈를 결합하려면 리사이저를 먼저 적용하세요.

관련 도구

이 도구는 다른 언어로도 제공됩니다