Squircle(superellipse)을 SVG/CSS clip-path로 생성. iOS 앱 아이콘처럼 자연스럽게 둥근 사각형 — border-radius로는 못 만드는 도형.
🟦 Squircle 미리보기
비교: border-radius (왼쪽) vs Squircle (오른쪽)
SVG path d
CSS clip-path

Squircle 생성기 사용법

  1. 너비·높이·곡률(n)을 조정합니다.
  2. 프리셋(정원형·iOS·macOS·정사각 근접)으로 빠르게 시작하세요.
  3. 실시간 미리보기와 border-radius 비교로 차이를 확인합니다.
  4. SVG 파일·SVG 코드·CSS clip-path 중 원하는 형식으로 export합니다.

주요 기능

  • Superellipse 수학으로 정확한 squircle 생성
  • 곡률 2.5~8 자유 조정 (4가 iOS 표준)
  • 4가지 프리셋 (정원·iOS·macOS·각진 사각)
  • SVG path + CSS clip-path 동시 export
  • border-radius와 시각 비교

활용 예시

  • iOS·iPadOS 앱 아이콘 디자인 — Apple 공식 곡률
  • 웹 카드/버튼 — border-radius보다 자연스러운 모서리
  • 제품 사진 마스크 — clip-path로 적용
  • 모바일 앱 UI — Material Design보다 부드럽게
  • SVG 아이콘 배경 — 일관된 형태

Squircle이 뭔가요? border-radius와 어떻게 다른가요?

Squircle(square + circle)은 superellipse이라는 수학 곡선의 특수 케이스입니다. border-radius는 모서리만 둥글게 하고 변은 직선이지만, squircle은 전체 외곽이 부드러운 한 줄의 곡선입니다. iOS 앱 아이콘이 대표적이며, 자세히 보면 둥근 사각형이 아니라 부드러운 squircle이라는 걸 알 수 있습니다. CSS에는 직접 지원이 없어 SVG path 또는 clip-path로 구현합니다. 공식: |x/a|^n + |y/b|^n = 1에서 n이 4 정도면 iOS, n=2면 타원, n=∞면 사각형입니다.

자주 묻는 질문

왜 border-radius로 안 되나요?

border-radius는 모서리에 원호를 그릴 뿐, 변은 직선입니다. squircle은 외곽 전체가 한 줄로 이어진 부드러운 곡선이라 다릅니다.

iOS의 정확한 n 값은?

Apple 공식 비공개지만 분석상 약 n = 4.0~5.0입니다. 본 도구의 "iOS 앱" 프리셋이 4입니다.

이미지에 적용은?

SVG clipPath 또는 CSS clip-path로 이미지에 적용할 수 있습니다.

무료?

네, 완전 무료입니다.