스쿼클을 간절히 찾 (새 탭에서 열림)

피그마 엔지니어가 iOS의 ‘스퀴클(squircle)’을 Figma에 구현하기 위해 수학적 형태를 분석한 과정을 설명한다. 스퀴클은 단순한 둥근 사각형이 아니라 직선과 곡선의 연결부에서 곡률이 연속적으로 변해 더 자연스럽고 독립적인 형태로 인식된다. 처음에는 슈퍼타원으로 설명할 수 있다고 보았지만, 실제 애플 아이콘과 비교한 결과 체계적인 오차가 발견되며 더 정교한 모델이 필요해졌다.

디자인 문제로서의 스퀴클

• 스퀴클은 ‘square’와 ‘circle’을 합친 표현으로, iOS 7에서 애플 앱 아이콘에 적용되며 널리 알려졌다.
• 기존의 둥근 사각형은 직선과 원호가 만나는 지점에서 곡률이 갑자기 바뀐다.
• 스퀴클은 이 전환을 부드럽게 만들어 외곽선 전체의 곡률이 연속적으로 이어진다.
• 수학적으로 작은 차이지만, 시각적으로는 형태가 단순히 모서리를 깎은 사각형이 아니라 하나의 유기적인 물체처럼 보이게 한다.
• 맥북 모서리나 유선 이어버드 케이스처럼 산업 디자인에서도 곡률의 연속성은 표면의 하이라이트와 물체의 인상에 큰 영향을 준다.

공학에도 적용되는 디자인의 제약

• 글은 Charles Eames의 디자인 정의인 “특정 목적을 달성하기 위해 요소를 배열하는 계획”에서 출발한다.
• 디자인의 핵심은 가능한 많은 제약을 인식하고, 그 제약 안에서 작업하는 데 있다.
• 엔지니어링에서도 시간, 단순성, 유지보수성, 미적 완성도 같은 제약을 함께 고려해야 한다.
• 스퀴클 구현 과정은 수학적 문제를 다루지만, 탐색·실패·숨은 문제 발견·제약의 변화·해결이라는 전형적인 디자인 과정과 동일한 구조를 가진다.

슈퍼타원이라는 첫 번째 해법

• 스퀴클의 정확한 수학적 표현을 찾기 위해 기존 연구를 조사했고, 초기에는 슈퍼타원이 유력한 후보로 제시됐다.

• 슈퍼타원은 다음과 같은 형태로 표현할 수 있다.

  [ \left|\frac{x}{a}\right|^n + \left|\frac{y}{b}\right|^n = 1 ]

• (n=2)이면 일반적인 타원이 된다.

• (a=b=1, n=2)이면 단위원이 된다.

• (n>2)로 설정하면 모서리가 점점 사각형에 가까워진다.

• (n)이 무한대로 커지면 경계가 직사각형에 가까워진다.

• 초기 분석에서는 (n=5) 정도의 슈퍼타원이 애플 아이콘과 매우 비슷하게 보였다.

• 이 모델이 정확하다면 Bézier 곡선 여러 개로 근사한 뒤 Figma의 도형 시스템에 통합할 수 있었다.

실제 아이콘과의 불일치

• 슈퍼타원은 시각적으로는 매우 유사했지만 실제 iOS 아이콘의 외곽선을 정확히 설명하지 못했다.
• 가능한 (n) 값을 바꿔도 실제 형태와 비교하면 작지만 일관된 차이가 남았다.
• 이는 단순한 측정 오차가 아니라 모델 자체의 구조적 한계였다.
• 따라서 “비슷하게 보이는 우아한 공식”을 사용하는 것만으로는 충분하지 않았고, 사용자가 기대하는 실제 애플 형태를 재현하려면 더 정확한 곡선 모델이 필요했다.
• 이후 연구에서는 여러 개의 Bézier 곡선을 조합해 스퀴클 모서리를 구성하는 가설이 제시되며 다음 단계로 이어진다.

정확한 그래픽 구현에서는 시각적으로 비슷한 근사식과 실제 디자인을 충실히 재현하는 모델을 구분해야 한다. 특히 곡률 연속성처럼 작은 수학적 차이가 최종 형태의 인상과 품질을 좌우할 수 있으므로, 공식의 단순성보다 실제 데이터와의 검증이 중요하다.