ときめき。

Art, Design, Essay, News

ZEN of UX

ZEN of UX. 01 - Squircle, 스쿼클?

ARTBRAIN 2020. 8. 18. 14:04

요즘 다시 스쿼클이 주목받고 있는 것 같아. 그런데 이걸 어디서 처음 시도했는지 의견이 분분하더라고. 삼성 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

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

 

728x90

 

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이니... 프로세스나 조직구조에 대한 고민들은 많이 하는데, 정작 디자이너들이 시각적인 정교화를 고민하지 않는 것 같아서, 아쉬운 마음에 글을 남겨 봐.



 

© Clubhouse

 

[+] Update 2021. 02. 03

요즘 핫한 Clubhouse의 섬네일도 스쿼클로 만들어져 있더군. 앱이 면분할을 지양하는 UI라서 어떻게 정보를 그루핑하느냐가 중요한 상황인데, 섬네일 사이 여백이 흰 기둥처럼 보였다면 화면이 조금 더티해 보였을 것 같아. 스쿼클을 사용한 덕분에 섬네일 사이 여백보다 각 섬네일들에 시선이 더 가는 것 같지? 또한, 흔하게 쓰는 원형 섬네일을 썼다면, 맨 우측 이미지처럼 섬네일-띠를 써야할 때 주변 여백을 더 많이 잡아주었어야 할 거야. 맨 왼쪽 이미지처럼 두 섬네일을 겹쳐야 할 때도 스쿼클 형태가 가장 견고하게 연결되어 보일 것 같고. (상하 align은 조만간 잡히겠지 뭐. 1000억이나 투자받았다는데 까짓 간격 쯤이야 ^^)

(클럽하우스 앱에 대한 리뷰는 조만간...^^)

 

회색은 잘못그린 스쿼클, 빨강은 1번 예제로 그린, 파랑은 2번 예제로 그린 스쿼클

 

 

728x90
반응형