YEYETILCraftsPostsAbout

[TIL] Squircle

2026. 05. 10.Yeji Kim
DesignFrontend

들어가며

iPhone 화면 모서리, 앱 아이콘 모서리, macOS 윈도우 모서리. 다 둥글다. 그런데 자세히 보면 우리가 CSS에서 border-radius: 16px로 그리는 둥근 모서리와 미묘하게 다르다.

1. 일반 둥근 모서리의 어색함

CSS의 border-radius는 직선과 원호를 그냥 이어붙인 모양이다. 직선과 원호가 만나는 그 한 점에서 갑자기 휘어진다. 직전까지 평평하다가, 다음 순간 일정한 곡률로 휜다.

사람 눈은 이 휘는 지점을 알게 모르게 감지한다. 모양은 분명 둥근데 어딘가 딱딱하게 느껴지는 이유다. 카드를 크게 키울수록 차이가 더 도드라진다.

2. Squircle - 곡률이 흐르는 모서리

squircle은 직선에서 원호로 바뀌는 구간을 곡률이 점진적으로 변하도록 그린다. 직선 → 살짝 휘기 시작 → 점점 더 휨 → 다시 부드럽게 펴짐.

Squircle - 정사각형과 원의 중간 형태를 가진 곡선 이미지 출처: Wikimedia Commons - Squircle2.svg (Public Domain)

작은 차이 같지만 인상이 꽤 다르다. 어디까지가 직선이고 어디부터가 곡선인지 구분되지 않는 한 덩어리로 읽힌다.

3. 수학적 배경 - Superellipse

squircle은 superellipse(초타원) 의 한 종류다. 일반 타원 식 (x/a)² + (y/b)² = 1에서 지수 2를 더 큰 수로 바꾼 것.

Superellipse - 지수 n 값에 따른 도형 변화 (n=2 타원, n=4 squircle, n→∞ 사각형) 이미지 출처: Wikimedia Commons - Superellipse.svg (CC BY-SA 4.0)

지수 n을 키울수록 모양이 타원 → squircle → 사각형으로 변한다.

  • n = 2 → 평범한 타원
  • n = 4 → 정통 squircle
  • n = 5 → Apple이 쓰는 값에 가까움
  • n → ∞ → 직각 사각형

다만 Apple은 이 공식을 그대로 쓰지 않는다. 베지에 곡선 3개를 이어 붙여 n=5에 가까운 모양을 손으로 빚어 그린다고 한다. 사람 눈에 가장 자연스러운 곡선을 우선시하는 철학이라고 한다.

4. 어디에 쓰이나

  • iOS 7(2013) 부터 앱 아이콘 마스크
  • iPhone 하드웨어 디스플레이 모서리 자체
  • macOS Big Sur 이후 윈도우와 컨트롤
  • watchOS 알림 카드, Dynamic Island

5. Concentric Corners - 모서리들이 맞아떨어지는 이유

Apple 화면을 들여다보면 디스플레이 → 윈도우 → 카드 → 버튼의 모서리가 다 동심원처럼 정렬돼 있다. 이건 squircle 하나로 되는 게 아니라, 공식 하나가 더 작동한다.

안쪽 라디우스 = 바깥 라디우스 − 둘 사이 여백

바깥 컨테이너가 r=16, padding이 8이면, 안쪽 요소의 r은 8이어야 한다.

왜 이래야 하나

같은 라디우스를 가진 두 모서리라도 중심이 다르면 두 곡선은 평행하지 않다. 그러면 모서리 부근에서 둘 사이의 여백이 좁아지거나 넓어진다. 라디우스를 padding만큼 빼야 두 모서리가 일정한 간격으로 평행하게 흐른다.

두 케이스를 나란히 비교한 다이어그램은 Ondřej Konečný의 글 Nested rounded corners에 잘 나와 있다.

iPhone 디스플레이에서 시작되는 정렬

iPhone X 이후 디스플레이의 물리적 모서리는 약 38.5pt 짜리 squircle이다 (Kyle Bashour가 슬라이더로 직접 맞춰 측정한 값이라고 한다).

그 안의 UI는 이 값에서 시작해 단계마다 padding만큼 빼나간다.

  • 디스플레이 r ≈ 38.5pt
  • 가장자리에 붙은 카드: 38.5 − 카드 padding
  • 그 안의 또 다른 카드: 또 padding만큼 빼기
  • 그 안의 버튼: 또 빼기

세 단계, 네 단계까지 nested 돼도 모서리가 다 평행하게 흘러간다. "quiet geometry"라고 하기도 한다.

iOS 26의 ConcentricRectangle (WWDC 2025)

이 동심 정렬을 시스템이 자동으로 해주는 도형이 ConcentricRectangle이다. 그동안 일일이 빼서 계산하던 걸 시스템이 알아서 해준다.

swift
parent
  .containerShape(.rect(cornerRadius: 24))
 
ConcentricRectangle()
  .padding(8)
  // 자동으로 r = 24 - 8 = 16 으로 그림

부모뿐 아니라 물리 디스플레이 모서리까지 인식한다. 콘텐츠가 화면 가장자리에 닿으면 자동으로 38.5pt 곡률에 맞춰 조정된다.

CSS에는 아직 표준 헬퍼가 없어서 calc()로 직접 계산한다.

css
.outer {
  border-radius: 16px;
  padding: 8px;
}
.inner {
  border-radius: calc(16px - 8px); /* = 8px */
}

6. 플랫폼별 사용법

SwiftUI

swift
RoundedRectangle(cornerRadius: 16, style: .continuous)

기본값은 .circular(평범한 원호). .continuous를 명시해야 squircle이 된다.

UIKit (iOS 13+)

swift
view.layer.cornerRadius = 16
view.layer.cornerCurve = .continuous

iOS 13에서 cornerCurve 속성이 추가됐다. 그 전엔 mask layer로 직접 그려야 했다.

CSS의 새 corner-shape

css
.card {
  border-radius: 16px;
  corner-shape: squircle;
}

2025-2026년에 Chromium에 먼저 도입된 신규 속성이다. 키워드로 round(기존), squircle, bevel, scoop, notch가 있다.

다만 2026년 5월 현재 Chrome 139+ 등 Chromium 계열만 지원, Safari/Firefox는 미지원이다. 그 전엔 squircle.js, react-ios-corners 같은 라이브러리로 SVG/mask를 직접 그려야 했고, 지금도 크로스브라우저로 가려면 그쪽이 안전 할듯!

7. 비교 실험

css
.circular {
  border-radius: 48px;
}
 
.squircle {
  border-radius: 48px;
  corner-shape: squircle; /* Chromium only */
}

라디우스 8px 미만에서는 차이가 거의 없다. 그런데 라디우스가 커질수록 squircle 쪽이 같은 면적인데도 더 묵직하게 보인다. 사이즈가 클수록 차이가 커지므로, 앱 아이콘이나 큰 카드일수록 효과가 크다.

정리

  • border-radius는 직선이 원호로 꺾이는 지점에서 갑자기 굽기 시작한다. 사람 눈은 이 미세한 꺾임을 감지한다
  • squircle은 곡률이 매끄럽게 이어지는 모서리. superellipse 수식의 변형
  • iOS 7부터 Apple 생태계 전반에 깔린, 그 부드러운 인상의 근간
  • SwiftUI는 .continuous, UIKit은 cornerCurve, CSS는 corner-shape: squircle (Chromium만)
  • 그 위에 concentric corners - r_inner = r_outer − gap 공식으로 nested 요소들이 동심 곡선처럼 정렬됨
  • iOS 26의 ConcentricRectangle이 이 계산을 자동화해줌

레퍼런스