IMG

Squircle, 스쿼클?

요즘 다시 스쿼클이 주목받고 있는 것 같아. 그런데 이걸 어디서 처음 시도했는지 의견이 분분하더라고. 삼성 One UI, 카카오톡의 프로필 이미지가 이 스쿼클을 사용하고 있어서 마치 이들이 첫 시도인 것처럼 홍보하고 있지만, 내가 기억하기로 스쿼클은 Nokia N9 가이드라인이 첫 시도였다고 봐.

 

Nokia N9 UX Guidelines

 

n9.dy.fi

국내에선 널리 회자되지 않았지만, 피처폰에서 스마트폰으로 넘어 오면서 고전했던 노키아의 야심찬 도전이 N9 Guideline (이후 meego로 개명) 이었어. 폰트, 색상, 아이콘 스타일 등 정말 쟁쟁한 디자이너들을 모아 만든 걸작이었지만, 이미 노키아가 시장에서 밀린 상황이어서 그다지 넓게 확장되지는 못했어. 개인적으론 참... 더 멀리 가는 모습을 보고 싶었는데.

특히, Nokia N9에 포함된 Nokia pure 폰트는 차세대의 Myriad가 될 수 있었다고 봐. 아까워.

암튼, 스쿼클.

거의 모든 GUI 요소들이 모두 Rounded Rectangle을 사용하는 이유는 명확해. 사각형 그리드를 유지하면서도 내적 응집력을 가질 수 있으며, 요소 간 거리를 줄이더라도 답답하지 않도록 하기 때문이지. 여기서 한 발 더 나아간 것이 바로 Squircle인데, 효용으로 보면 Rounded Rectangle보다 스쿼클이 훨씬 좋지. 하지만, 직선인 부분이 없어서 그리드가 덜 보인다는 점과, 코딩으로 그리기 어렵다는 점, 여러 스쿼클을 모아 두었을 때 그다지 깔끔해 보이지 않는다는 점 등의 단점도 명확해서, 확장하기는 어려웠던 것 같아.

https://www.wikiwand.com/en/Squircle

그런데, 여러 서비스들에서 스쿼클을 잘못 그리는 경우가 있어서, 간단히 그려보려 해.

0. 잘못된 스쿼클 도법

잘못 그린 스쿼클 중 가장 전형적인 형태는 Rounded Rectangle의 코너를 원에 가깝게 확대한 거야. 여러 서비스들에서 흔하게 발견되는 실수(?)인데, 아무래도 직선에서 곡선으로 바뀌는 부분이 개운하지 않지. 일반적인 Rounded Rectangle에서는 '사각형의 장식'으로써 원호가 들어가는 데, 이렇게 주객이 전도된 경우엔, 직선이 거슬릴 수밖에 없거든.

 

원을 4등분하고 그 사이에 사각형을 껴넣은 것 같아. 

 

제대로 된 스쿼클을 그리는 방법으로는 - 내가 아는 한 - 아래 세 가지 방법이 있어.

1. 원의 핸들을 유지한 채 가운데로 모으는 방법

일단 원을 그리고, 각 포인트를 안쪽으로 모으는 방법이야. 모서리의 커브가 스무스하고, 각 포인트의 곡률은 0이 되어서 높이를 정하기 유리하지. 또한, 포인트를 얼마큼 안쪽으로 넣고 빼느냐에 따라 핸들의 길이가 상대적으로 조절되므로, 원하는 곡률의 스쿼클을 만드는 데 유리해.

2. 각 모서리에 포인트를 두고, 핸들을 사선으로 두는 방법

원에 포인트를 추가하고 (일러스트레이터 : Object > Path > Add Anchor Points) 상하좌우의 포인트를 제거하는 방식이야. 각 포인트가 모서리에 있어서 좌우상하로 확장하기 쉽지만, 각 호의 정점이 커브 위에 있으므로, 높이/너비를 명확히 계측하기 어려운 단점도 있어. (3번 이미지의 파란색 점선) 직사각형으로 확장될 것을 고려한다면 1번 예제보다 이게 더 유리하겠지만, 모서리의 커브가 상대적으로 (1번 예제보다) 거친 느낌이기도 해.

3. 수식을 이용한 그리기

두가지 방식 : Superellipse-based squircle(좌), Fernández–Guasti squircle(우)

물론, 가장 이상적인 방법은 이미지보다 코딩이지. 알려진 방법은 위의 두 가지 수식이고 (위 링크 참조) 두 수식 모두 1번 예제와 비슷한 구조야. png, svg 등 용량 문제로만 보면 수식으로 그리는 게 당연히 가볍겠지만, 현실적이진 않지.^^

 


 

우리 쪽 디자인이 점점 산업화되면서, 애자일이니 스쿼드니 OKR이니... 프로세스나 조직구조에 대한 고민들은 많이 하는데, 정작 디자이너들이 시각적인 정교화를 고민하지 않는 것 같아서, 아쉬운 마음에 글을 남겨 봐.

 

ps. 추가

회색은 잘못그린 스쿼클, 빨강은 1번 예제로 그린, 파랑은 2번 예제로 그린 - 뭐 의미없네? ^^