Art, Design & Lifelog

Art, Philosophy, Design, Font, Music, Essay, Critique, Diary, Opinion, News

IMG/UIX

UX의 ZEN. 03 - 모서리가 둥근 사각형은 왜 사용하는가.

Curious ARTBRAIN 2021. 1. 18. 12:14

* 이걸 우리말로 뭐라고 불러야 하지? 라운디드 렉탱글? 둥글린 사각형? 콩글리시로 흔히 '라운딩 사각형'이라고 부르긴 하지만 가장 찝찝한 표현이고. 이 글에서는 '둥근 모서리'로 불러야 할 것 같아. 사실 UX의 분류상으로 보면 Rounded Rectangle 보다는 Rounded Corner(s)로 이야기를 전개하는 게 맞겠지. 하지만, 이번 이야기는 단순히 '둥근 모서리의 사각형' 이야기만 할게.

요즘 같이 일하는 주니어는 라운딩을 싫어해.

왜인지 물어보면, "굳이 필요없는 요소라고 느껴서"라던가 "디자인이 어려지기 때문"이라고 답하더라구. 이런 친구들은 Cargo 스타일의 디자인을 좋아하는 유형이지, 혹은 바우하우스를 신봉하는 편이던가. 

맞는 말이긴 해. 모서리를 둥글리면 여러모로 귀찮은 일이 생기지. 미묘하지만 렌더링 시간이 조금 더 걸리고, 섬네일의 경우엔 모서리에 위치한 정보에 간섭이 생기기도 하고. 또 선택할 때 (클릭 또는 탭) 에러를 만들기도 하니까. 기술적으로는 굳이 모서리 라운딩이 필요 없을 거야.

하지만 모서리를 둥글게 하는 것이 정말 표현의 영역에만 한정되는 일인지는 생각해 볼 필요가 있어.

둥근 모서리가 오직 시각적인 즐거움이나 디자인 톤의 역할만 갖고 있다면, 왜 이토록 오랫동안 살아남았으며, 자바스크립트, CSS 등 개발언어로 계속 고도화되고 있는지를 이해할 수 없지. 이유는 명확해, 단순한 장식이 아니라, UX적인 관점에서 분명한 기능이 있는 요소이기 때문이야. 

하지만 이를 명확하게 정의한 문서나 디자인 가이드가 아직은 존재하지 않는 것 같아. 그래서, 개인적인 생각이라도, 둥근 모서리가 갖는 기능적인 효용을 간단히 정리해 보려 해.


1. 정서적인 부드러움

일반적으로 가장 많이 생각하는 이유일 거야. 둥근 모서리는 직각 모서리보다 시각적인 자극이 적어. 이는 비단 UX 부문 뿐만 아니라 모든 디자인 영역에서 발견되는 공통적인 감각이야. 각진 모서리는 우리의 경험상 '경계, 주의'의 감정을 불러 일으키거든. 어쩔 수 없지, 사람의 눈은 특이한 곳을 파악함으로서 더 오래 생존하도록 만들어졌고, 이 주의기제는 디지털 환경에서도 동일하게 작동해. 

그러니까, 어떻게 보면 '둥근 모서리를 쓰는 이유'가 아니라 '각진 모서리를 피하는 이유'라고 말할 수 있겠지.

라운딩을 쓰지 않고서도 모서리의 시각적인 자극을 없앤 사례가 있지. 29CM. 초기에는 사각형의 모든 모서리를 흰색 바탕에 노출시켰는데, 현재 버전은 모서리가 드러나지 않게 섬네일을 서로 붙이는 방향으로 바뀌었어. 섬네일 이미지를 모두 통제하기 때문에, 두 섬네일을 붙여도 되는 상황이니까. (무작위 섬네일이면 에러처럼 보일 확률이 높은 형식) 

하지만, 운영을 하다 보면, 당연히 기능이 붙게 마련. 좋아요 버튼, 댓글 버튼도 생기고, 뱃지도 생기고 - 이렇게 계속 늘어나게 되면, 시원하게 화면을 직선으로 풀어 쓰겠다는 처음의 결심을 지키기 힘들어지지. 아무래도 확장성이 부족하거든. 직선만을 써서 릴렉스한 환경을 만드는 건 참 어려운 일이야. 이럴 땐 UI 구성을 고민해 볼 법도 한데 ⁠—.

* 29CM는, 상품기획 및 프로모션 UI의 다양한 시도에 비해, 구매 UI쪽 구성이 너무나 올드해. 탭, 필터, 소팅, 좋아요, 댓글, 뱃지(핫, 뉴, 솔드아웃, 무료배송 등), 서브 타이틀, 할인율, 이전가격, 할인가격... 그냥 죄다 깔아두었어. 그냥 전단지 레벨의 UI 구성이야. 이정도면 직무유기지. 이런 뻔한 구조를 받아서 이렇게까지 정리한 디자이너는 정말 칭찬해줘야 해. 제품 리스트/옵션/장바구니 등 구매쪽 UI를 기획한 사람은 반성 좀 하셔요.

리스트 형태의 전과 후 - © 29CM

 

2. 구조보다 컨텐츠에 집중을 유도

라운딩을 사용하게 되면, 모서리에 빼앗기는 시각적인 분산을 막을 수 있어. 이 역할로만 쓰이는 경우는 대개 아주 작은 라운딩을 사용하지.

© Netflix
© Watcha

위는 넷플릭스고, 아래는 왓챠야. 넷플릭스는 작은 라운딩이 있고, 왓챠는 없어. 구별이 될까? ^^

사소하지만, 이건 분명한 전략의 차이야.

왓챠의 간격과 각진 모서리는 '띠' 형태를 강조하기 때문에, 전체 구조와 컨텐츠 간의 경계가 먼저 눈에 들어와. 빠른 탐색을 유도하는 듯한 뉘앙스야. 그에 비해서 넷플릭스는 하나하나의 컨텐츠를 눈으로 읽고 넘어가게 하고 있어. 잘 보면 섬네일 제목의 위치도 다른데 ⁠— 넷플릭스는 어색하게라도 섬네일 안에 타이틀을 넣은 반면, 왓챠는 섬네일 아래에 제목을 뒀잖아. 즉, 넷플릭스의 섬네일은 텍스트고, 왓챠의 섬네일은 그래픽인 거지

그래서, 하나를 선택했을 때 추가정보를 보여주는 UI도 서로 차이가 있어. 넷플릭스는 추가정보를 검토하라고 일단 멈추도록 ⁠— 가로로 흐르던 정보를 세로로 펴면서 멈춰. 이에 비해, 왓챠는 되게 한국적이야. 가로의 흐름을 유지한 채로 줄거리를 대충 알려주고, 볼래? 아냐? 아니면 다음으로 넘어가고. 응? 얼른 골라. 하는 거지. 그래서 높이의 변화도 크지 않고, 시선이 움직이는 범위도 작아. '빨리빨리 민족'다운 UI. ^^

이 사소한 라운딩이 전략적인 선택일까 싶지만, 주로 컨텐츠 각각의 개성이 뚜렷한 서비스에는 굵직한 라운딩을 쓰고, 동일한 질서를 갖는 서비스는 라운딩을 안쓰거나 미세한 라운딩을 쓰는 경향이 있어. 전자로는 AirBnB가 있고, 후자로는 Uber 정도가 되겠지?

이 라운딩의 효과에 대한 연구는 그다지 많지 않은데, 깊은 흥미가 생긴다면 - Barrow 신경학 연구소에서 발표한 논문을 살펴보는 것도 좋을 거야. 옵아트 작가인 빅토르 바자렐리의 그림을 신경학적으로 연구한 내용인데, 위 내용과 결이 비슷한 내용이 좀 있어. 

애트니브에 따르면 "곡률의 강도가 센 포인트는 (즉, 급한 각도의 커브나 꺾임, 모서리 등) 낮은 곡률점보다 더 많은 정보를 포함하기 때문에, 형태를 인식하는 데 보다 중요하게 작용한다"고 한다. (애트니브, 1954)

Attneave proposed that ‘points of maximum curvature’ (such as curves, angles, corners and terminators) contain more information than non- or low-curvature features and therefore they are more important for object recognition (Attneave, 1954)

http://macknik.neuralcorrelate.com/pdf/articles/troncoso_et_al_Art_and_Perception_chapter.pdf

 

3. 내부로의 응집력, 방향성

© Apple

이전 버전의 맥 OS까지 사용되었던 툴바의 디자인이야. 이 이미지는 라운딩의 활용과 변형을 보여줄 뿐만 아니라, 복잡하고 좁은 정보 집합에서 라운딩이 유기적인 맥락을 만들 수 있음을 단적으로 보여주고 있어. 그리고 가장 중요한 건, 간격(space)과 라운딩이 유사한 역할을 수행한다는 걸 보여주는 몇 안되는 사례야. 이게 젤 중요해. 즉, 충분히 간격을 확보할 수 없을 때, 라운딩이 간격의 역할을 보완할 수 있음을 보여주는 증거. 

이번에 바뀐 Big Sur의 툴바인데, 이건 라운딩을 없앴다기보다... 아이패드 UI와의 통일감을 위해서 바뀐 거야.

동적인 마우스 커서의 모양 변화 - © sixcolors.com

아이패드에서 이런 거 하려다 보니, 사각형으로 감싸는 형태를 지워야 했겠지. 아마 조만간에 맥 OS에도 들어올 것 같아. 라운딩을 동적으로 '이동'하게 만들고 보니, 어쩔 수 없이 그룹 간 간격이 더 넓어지게 된 것 같아. 맥 UI가 예전처럼 '막 구겨 넣어야 할' 상황은 아니니까 좀 넉넉히 두었다고 생각할 수도 있지만, 나는 라운딩이 빠진 영향이 더 크다고 생각해. 

728x90

 

4. 그렇다면, 언제 얼만큼의 라운딩을 주어야 할까?

여기까지의 내용을 정리해 보면, 언제 써야 할지 대충은 나오는 것 같아.

  1. 부드러운 정서 환기가 필요할 때
  2. 연계되는 항목들이 서로 독립적일 때 (각각의 개성이 강할 때)
  3. 구조보다 컨텐츠로 집중하기를 강요할 때
  4. 구성이 밀집되어 있거나, 그럴 가능성이 농후할 때, 확장성을 보장해야 할 경우

그렇다면, 라운딩의 직경은 어떻게 결정되어야 할까? 이 문제는 이제 주관적인 영역인데... 이 사이트로 실험을 해보았어.

지금 사용중인 10px
0px
20px
4px
40px - 요건 좀 취향의 영역으로 넘어간 듯?

 

라운딩 값을 테스트하기에는 이 예시가 부족하단 거 인정! 써도 그만 안써도 그만인 상황이야. 그래도, 위에 말한 가설을 대입해 보면 :

각 컨텐츠 간, 각 섬네일 간의 연결성이 없으니까 충분히 넉넉하게 라운딩을 써도 될 것 같아. 섬네일 사이의 공간이 충분히 넓기는 하지만 섬네일의 높이도 높아서 서로 영향을 주기도 해. 특히 캡틴 아메리카의 경우, 동세가 뚜렷하기 때문에 중간 흰색 여백이 마치 전면의 흰색 기둥처럼 느껴지기도 하지. 또한 이 탬플릿은, 이미지를 보다가 텍스트를 확인하러 내려가는 동선이 긴데, 섬네일 하단의 라운딩이 텍스트의 시작점을 찾는 걸 방해하는 느낌이네. 그래서, 이 캡쳐를 한 후에 - 나는 이 부분 라운딩을 10px에서 8px로 줄였어.   

결론이 개운치 않아서 미안한데, 결국 내가 하고자 하는 얘기는 이거야. - 라운딩은 결코 취향이나 무드만의 영역이 아니고, UX 관점에서 선택되어져야 하는 UI 요소라는 것! 

[+]

이번에 업데이트된 Mac OS 'Big Sur'의 아이콘 변화야. 라운딩이 커진 이유는 위 내용과 관계없이, 아이폰 앱과 맥 앱의 경계가 사라질 것이기 때문이지. (새로 출시된 M1칩이 사실은 모바일 CPU거든)

라운딩의 사용은 UX적인 니즈도 있지만, 브랜딩이나 사업상의 이유, 취향의 간섭 등 다양한 이유 때문에 사용되기도 하고 배제되기도 해. 그래서 주니어들이 라운딩의 효용을 오독하는 경우가 많은 것 같아서 아쉬운 마음에 두서없이 길게 썼어.

Update ⁠— 둥근 모서리 사각형에 대한 일화를 발견해서 소개해. (링크)
스티브 잡스가 '둥근 모서리 사각형 (RoundRect.)'을 OS 안에 구현해 달라고 떼써서 결국 집어넣었다는 일화. 그 당시 기술로는 어려웠을텐데. ^^ 

728x90

1 2 3 4 5 6 7 ··· 11