부드러운 둥근 모서리를 위해

현대 UI에서 매우 빈번하게 사용되는 둥근 모서리를 구현하기 위해서는 꽤 복잡한 부분을 고려해야 한다. CSS를 예로 들자면 borderRadius 속성을 사용해 일정한 곡률을 적용하여 간단히 모서리를 둥글게 만들 수 있다. 하지만 이 방식은 문제가 있다.

일정한 곡률로 인해 직선과 곡선이 만나는 지점에서 갑작스러운 변화가 생긴다. 이는 시각적으로 날카로운 느낌을 줄 수 있다. 그렇다면 어떻게 해야 더 자연스러운 곡선을 만들 수 있을까?

해답은 가변 곡률에 있다. 곡선의 시작점에서 끝점까지 곡률을 점진적으로 변화시키는 것이다. 이렇게 하면 훨씬 부드럽고 자연스러운 곡선을 얻을 수 있다.

물리학적으로 보면, 이는 등가속도 운동이 아닌 등가가속도 운동과 유사하다. 속도 변화율이 일정한 것이 아니라, 가속도 자체가 변하는 것이다. 기하학적으로는 이런 곡선을 '스쿼클(초타원)’이라고 부른다. 그래서 이 사각형의 이름도 Squircle(스쿼클)이라 한다. 이는 다음과 같은 방정식으로 표현된다:

▲ 슈퍼렐립스 공식 - Desperately seeking squircles @figma

Apple의 경우 제품에 이 Squicle을 적극적으로 사용하고 있다. MacBook Pro와 HomePod 같은 하드웨어부터

iOS 7 이후의 키보드 버튼, 앱 아이콘 등 UI 디자인에도 모두 일반적인 둥근 사각형(Rounded Square) 대신 스쿼클(Squircle)이 적용되어 있다.

출처: Apple's Icons Have That Shape for a Very Good Reason - HackerNoon

출처: Desperately seeking squircles - figma

이러한 스쿼클의 적용은 단순히 미적인 선택을 넘어서, 사용자 경험에도 큰 영향을 미친다. 부드러운 곡선은 시각적으로 더 편안하고 자연스러운 느낌을 주어, 사용자들이 인터페이스와 상호작용할 때 더 편안함을 느끼게 한다.

그렇다면, Squircle은 개발 단계에서 어떻게 구현할 수 있을까?

우선, iOS의 경우 Apple에서 iOS 개발자들을 위해 UIKit에서 이미 스쿼클 형태를 구현할 수 있는 도구를 제공하고 있다.

UIBezierPath의 cornerRadius 속성과 함께 continuous 곡률을 사용하면 스쿼클과 유사한 모양을 만들 수 있다. iOS 13부터는 cornerCurve 속성을 통해 더욱 정확한 스쿼클 형태를 구현할 수 있게 되었다. cornerCurve에는 두 가지 속성이 존재하는데 .circular 는 Rounded Square를, .continuous 는 Squircle을 생성하는 데 사용한다.

웹에서는 CSS의 border-radius 속성을 사용해 일반적으로 둥근 모서리를 구현한다. 하지만 Squircle을 구현하는 것은 CSS만으로는 불가능하다. 따라서 직접 SVG 스쿼클을 만들어야 하는데, 이미 만들어진 라이브러리가 있다. phamfoo/figma-squircle


import { getSvgPath } from 'figma-squircle'

const svgPath = getSvgPath({
  width: 200,
  height: 200,
  cornerRadius: 24,
  cornerSmoothing: 0.8,
})

function PinkSquircle() {
  return (
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
      <path d={svgPath} fill="pink" />
    </svg>
  )
}

위와 같이 SVG 스쿼클을 생성한 후, 이를 적용할 수 있다. 컴포넌트 형태로 좀 더 쉽게 구현해둔 React 라이브러가 있어 함께 소개한다. bring-shrubbery/squircle-js

안드로이드의 경우, UI 요소에 둥근 모서리를 적용하기 위해서는 보통 배경이 되는 xml 파일을 만들어 borderRadius 옵션을 준다. 따라서 역시 직접 path를 그리는 방식으로 구현해야 하며, 이를 구현해둔 라이브러리들이 존재한다. stoyan-vuchev/squircle-shape

References

Desperately seeking squircles | Figma Blog

In a famous 1972 interview, Charles Eames answered a short sequence of fundamental questions about the nature of design.