5장 비주얼 스타일과 아름다움 - 사용자를 끌어들이는 UX/UI의 비밀

2022 우아한스터디 - UX 패턴파인더 스터디

 

 

아름다움이 가진 힘을 절대 과소평가 말라.

 

비주얼 디자인의 역할

완성도 높은 비주얼 디자인과 룩앤필은 디지털 제품을 돋보이게 할 수 있다. 브랜드의 성격과 정체성을 전달하며 소비자가 브랜드를 경험하는 모든 순간에서 브랜드를 대표하는 역할을 한다. 

*룩앤필(look-and-feel)은 제어 및 디스플레이의 일관성을 의미한다. GUI 관점에서 룩(색, 모양, 레이아웃, 글꼴)과 필(단추, 상자, 메뉴와 같은 동적인 요소) 모두를 일컫는 용어이다.

즉, 비주얼 디자인은 제품 사용성을 높이거나 브랜드 신뢰를 쌓을 수 도 있고, 반대로 무너뜨릴 수도 있다. 스탠포드 웹 신뢰성 프로젝트(Stanford Web Credibility Project) 연구에 따르면, 사용자는 어설퍼보이는 웹사이트를 신뢰하지 않았다.

좋은 비주얼 디자인은 디테일이 완벽하고, 사용자에게 유용하거나, 공감되거나, 즐거움을 줄 수 있어야 한다. 물리적 형태와 필요한 기능이 조화를 이루는 게 진정한 아름다움이다. 

 

시각적 계층구조

시각적 계층구조(Visual Hierarchy)는 주어진 레이아웃에서 각 요소가 보여지는 상하위 관계를 어떻게 구성했는지를 일컫는다. 크기, 대비, 근접성 등을 어떻게 구성하느냐에 따라 달라진다. 

잘 설계된 시각적 계층구조는 사용자가 전체 컨텐츠의 체계를 더 빠르고 쉽게 이해할 수 있도록 돕는다.

출처: http://styleguide.co.kr/content/visual-hierarchy/visual-hierarchy.php

 

구성

화면이 바뀔 때 화면 요소가 이유없이 변경되는 것만큼 사용자에게 거슬리는 건 없다. 화면이 바뀔 때 화면 요소가 이동하지 않도록 해라. 텍스트 정렬이 무작위로 왼쪽 정렬에서 가운데 정렬 등으로 변경되는 것 또한 가독성을 떨어뜨린다.

같은 의미라면 같은 용어를 사용해야 한다. 아이콘을 사용한다면 동일한 기능을 지칭할 때는 항상 같은 아이콘을 반복해서 사용해야 한다. 아이콘에 모두 동일한 스타일(선 두께, fill 여부, circle 여부)이 적용되었는지도 확인하자.

참고: UI디자인의 원리 - 아이콘(icon)

 

색상

색상 조합은 보는 사람을 미소짓게 할 수도, 침울하게 만들 수도 있다. 동일한 컨텐츠라 해도 크게 다른 인상을 남긴다.

PC 환경에서는 배경색을 밝은 톤으로 설정하는 경우가 더 흔하다. 어두운 배경은 선명하고 강력한 느낌을 준다. 또, 강한 대비는 긴장감과 힘, 대담한 감정을 불러 일으킨다. 반대로 약한 대비는 차분하고 긴장을 풀어주는 느낌이다.

채도가 높은 색상 두 가지를 조합하면 더욱 역동적이고 풍성한 느낌을 불러일으킨다.

통계적으로 남성 중 10%, 여성 중 1%가 특정 종류의 색각이상을 가졌다고 한다. 따라서 색상만으로 의미를 구분하지 말고, 다른 형태나 텍스트로 의미를 강화해야한다.

 

타이포그래피

대부분의 정보는 텍스트로 표현되기 때문에 읽기 쉽고 눈이 피로하지 않게 텍스트 디자인을 하는 것의 중요성은 말할 필요도 없다.

일반적으로 10pt 이하로 크기를 줄이지 않는 것을 권고한다. 가장 작은 표준 본문 크기는 12pt이다. 푸터의 저작권 정보등은 9pt도 괜찮다.

본문 텍스트에는 하나의 서체만 하나만 사용하고, 주제목에도 동일한 서체를 사용하자.

• 서체(typeface) 예시: Times New Roman
• 폰트(font) 예시: Times New Roman 이탤릭체 18pt

세리프체는 글자 끝 부분에 장식선이 있는 서체로, 빽빽한 텍스트에 활용한다. 같은 이유로 디지털 매체 뿐만 아니라, 종이책의 본문에도 주로 세리프체가 사용되어왔다. 단, 작은 크기일 때는 세리프 폰트의 장식선 렌더링이 깨져 가독성을 해칠 수 있다.

산세리프체는 끝 장식선이 없는 서체이다. 현대적인 느낌을 준다. 작은 크기에서도 가독성이 높아 UI에서 주로 활용한다. 

 

 

비주얼 디자인 트렌드

스큐어모피즘 Skeuomorphism

2007년 첫 출시된 애플 아이폰부터 적용된 UI 디자인이다. 사물의 디자인적 요소의 사실적 특징을 그대로 표현하는 디자인 기법으로, 과도하게 구체적으로 묘사되어있어 오히려 사용자의 주의를 분산시킨다.

 

플랫 디자인 Flat Design

2013년 iOS7에서 스큐어모피즘의 단점을 보완하며 선보인 UI 디자인이다. 복잡한 그래픽을 2차원의 단순한 구성과 색상으로 직관적으로 인식할 수 있도록 한다. 미니멀리즘 적인 성격을 띄고 있다. 

너무 단순화되어 사용자가 기능을 짐작하기 어렵기도 하고 지나친 제약으로 모든 디자인이 비슷비슷해지는 문제로 혹평을 받기도 했다.

좌: 스큐어모피즘  우 : 플랫디자인

 

머티리얼 디자인 Material Design

2014년 구글에서 안드로이드 5.0 롤리팝부터 적용한 UI 디자인이다. 플랫 기반이지만 빛과 그림자로 입체효과와 원근감을 추가해 플랫 디자인의 단점을 개선한다. 

카드 UI를 적극 활용하면서 모바일/웹 반응형 디자인에 쉽게 대응할 수 있게 되었다.

 

뉴모피즘 Newmorphism

2020년 '새로운 스큐어모피즘' 이라는 이름으로 등장한 UI 디자인이다. 스큐어모피즘처럼 3차원의 입체감을 표현하지만, 표현방식은 빛과 그림자로 한정해 도자기같이 매끈한 질감 표현이 특징으로, 부드럽고 유려한 느낌을 준다.

빛과 그림자만 사용해서 부드러운 표현을 하다보니 UI요소간의 구분이 확실하지 않아 시력이 낮은 사용자 등이 이용하기 적합하지 않다.

뉴모피즘의 낮은 접근성

 

내용출처: 사용자를 끌어들이는 UX/UI의 비밀(제니퍼 티드웰, 찰스 브루어, 아인 발렌시아 저)

 

이미지출처
- https://material.io/design
- https://uxdesign.cc/neumorphism-the-zombie-trend-88cff23de46b
- https://clearbridgemobile.com/skeuomorphism-vs-flat-design/