애플도 사용하는 UX 비주얼 기초 원리 [1/3]
뭘 좋아할지 몰라 13개나 준비했어. 첫 번째 에피소드
Key principles of Visual Hierarchy in UX Design
UX 디자인에 있어서 비주얼 체계를 잡는 주요 원리.라고 해석할 수 있다.
한국어로 해석하기보다는 영어 그 자체로 이해하고 받아들이는 게 훨씬 뜻이 제대로 전달된다.
UX 디자인의 모든 요소는 유저의 경험을 개선하는 것을 도와야 하며 메시지를 명확히 전달해야 한다.
그러기 위해서는 UX 디자인 비주얼 체계가 잘 잡혀있어야 한다.
그렇다면 비주얼 체계를 어떻게 잡아야 할까? 그리고 이를 어떻게 활용할 수 있을까?
그전에 비주얼 체계(Visual Hierarchy)가 무엇일까? 에 대해서 먼저 이야기해보자.
비주얼 체계(Visual Hierarchy)는 디자인 요소의 순위를 매기는 데 사용된다. 그리고 유저가 요소들을 보는 순서를 정하는 것에 사용된다. 대비, 규모, 균형 등과 같은 원리를 사용함으로써, 각 요소를 적절한 위치에 위치시키고 그 속에서 가장 중요한 요소가 두드러지도록 할 수 있다.
그렇다면, UX 디자인에 있어서 왜 비주얼 체계가 중요한 것일까?
비주얼 체계는 유저가 프로덕트를 더 쉽게 살펴보는 것을 돕기 위한 정보를 구축하는 데 있어서 중요한 역할을 할 수 있다. 이를 통해 프로덕트를 사용하는데 필요한 노력의 양을 극도로 줄일 수 있다.
UX 디자인은 프로덕트에 대한 마찰, 불편함을 줄이고 편리함을 향상하는 것이다. 이를 하기 위해서는 비주얼 체계에 공을 들여야 한다.
어떤 원리를 이용하는 것이 효과적일까?
1. 포커스를 가져오기 위해 크기 조절과 확대/축소를 이용해라
사이즈를 조절하는 것은 가장 기본적이지만 매우 중요한 원리다. 이는 요소의 중요성을 나타낼 때 적합하다. 그리고 사용자의 시선을 어떤 영역으로 집중시킬 수 있다.
요소의 스케일을 증가시킴으로써 사용자의 관심을 끌 수 있다. 그러나 너무 많은 요소를 확대하거나 크기를 증가시키면, 다른 요소의 중요도를 감소시킬 수 있으니 이를 주의해야 한다.
위의 사진을 보면 무엇이 가장 먼저 눈에 들어오는가? 당연 가장 큰 글씨다. 이는 크기 조절 원리가 매우 효과적이라는 것을 증명한다. 그렇다고 해서 스크린 속 다른 요소들에 피해를 주지도 않는다.
2. 두드러지게 하기 위해서 대비와 색을 사용하라
색은 크기와 마찬가지로 요소의 중요성을 주기 위해서 사용될 수 있다. 더 밝은 컬러는 전형적으로 유저의 관심을 더 많이 끈다.
마찬가지로, 높은 대비를 가진 색은 더 강하게 주의를 끌 것이다. 아래의 두 개의 사진을 비교해보면, 밝은 색은 배경이 어두울 때, 어두운 색은 배경이 밝을 때 눈에 확 들어온다.
한 가지 밝은 색을 포인트로 사용하면 요소의 위치와 순서에는 상관없이 주의를 끌 수 있다.
아래의 예를 보면 핑크색이 눈에 가장 먼저 들어오고 이는 가장 중요한 행동을 일으키는 데 사용된다. 이런 방법을 통해서 당신은 유저에게 기쁜 경험을 줄 수 있고, 당신이 원하는 흐름 속에서 더 많은 대화를 증가시킬 수 있다.
3. 관점/초점을 이용하라
대부분의 웹과 앱의 인터페이스는 2차원으로 디자인되어 있다. 관점, 초점을 이용함으로써 거리와 분리에 대한 환상을 만들 수 있다. 이를 통해 중요한 영역에 있는 요소에 사용자의 관심을 끌어당길 수 있다.
관점을 이용하는 방법에는 몇 가지가 있다.
1) 주변의 요소들보다 크기를 더 키우는 방법으로, 크기가 커진 요소는 사용자에게 비교적으로 더 가깝게 느껴질 것이다.(원근법)
2) 다른 요소들보다 더 천천히 혹은 더 빠르게 움직이는 모션을 통해서 착시효과를 준다.
3) 그림자 혹은 블러 효과 사용
이 방법들로 극적인 시작적 효과를 줄 수 있다.
오른쪽 사진은 배경에 블러 처리를 하고 텍스트에 그림자 효과를 주었다. 이는 사용자에게 거리감을 주며, 눈에 더 잘 띄게 해 준다.
4. 패턴의 중요성
각 사람은 콘텐츠를 보기 위해서 전형적으로 사용하는 자신만의 잠재의식 패턴이 있다는 것을 아는가?
이 패턴은 사람마다 다를 수 있고, 콘텐츠의 유형에 따라서도 달라질 수 있다. 하지만 사람들이 가장 흔하게 사용하는 패턴은 Z와 F패턴이다.
두 가지 패턴을 활용한 디자인을 통해서 유저들에게 더 나은 경험을 줄 수 있다.
1) Z패턴
Z패턴은 말 그대로 Z 모양으로 시선이 처리가 된다는 뜻이다.
이 패턴은 텍스트가 아니거나 무겁지 않은 콘텐츠에 가장 효과가 좋다. Z패턴은 보는 사람이 빠르게 요소들을 스캔할 수 있고 각 요소의 중요성을 어디에 뒀는지 알 수 있다.
애플이 이를 사용하고 있다. 가장 먼저 맥 옵션을 가로로 훑고, 대각선 방향으로 맥북 이미지가 눈에 들어온다. 그 이후 구매 버튼으로 이어진다.
2) F패턴
기사나 블로그처럼 텍스트가 많은 페이지에서는 F패턴이 두드러지게 사용된다.
이 패턴에서 유저는 가로 방향으로 콘텐츠를 스캔한다. F패턴 레이아웃은 독자가 이미지와 헤드라인을 쉽고 빠르게 스캔하도록 한다.
F패턴을 이용한 디자인에서 명심할 것이 있다. 유저는 처음 몇 줄은 왼쪽 끝에서 오른쪽 끝까지 스캔할지도 모른다. 하지만 자신이 원하는 것을 빠르게 찾기 위해서 왼쪽 편에서만 시선이 머무르는 경우도 있다.
이 기사에서는 총 13가지 원리를 다루고 있다.
하나의 글에 이 모든 원리를 담기에는 독자를 스크롤 지옥으로 빠뜨려야 하며, 데이터를 대량으로 갉아먹는 글이 될 수도 있기 때문에 총 3편으로 나누어서 정리하려 한다.
그럼 2편에서 만나요~
p.s. 끝까지 글을 읽은 당신을 칭찬합니다. 우리는 의미 없는 스크롤링이 아닌 공부를 하고 자기 계발을 하고 있습니다. 적어도 최소한의 노력과 관심은 기울이고 있다는 것이지요.
