[하루 5분 UX] 시각 디자인의 원칙

---

시각적 무게

• 시각적 무게 개념은 직관적이다.
• 레이아웃에서 어떤 것들을 다른 것들보다 더 무겁게 보이게 해야 한다.
• 사용자가 의미 있는 정보를 알아차릴 수 있게 하는 것이 디자이너의 일이다.
• 사용자가 목표를 이루는 데 방해받지 않는 것도 중요하다.
• 디자인의 특정 부분에 시각적 무게를 줌으로써 사용자의 시선을 좀 더 쉽게 유도할 수 있고, 그들의 시선이 다음에 어디로 가야 할지 결정할 수 있다.

 

 

Constrast

• 밝은 것과 어두운 것의 차이
• 밝은 것과 어두운 것의 차이가 확연할수록 콘트라스트가 더 높다.

 

 

Depth와 사이즈

• 뎁스와 사이즈는 시각적 무게에 변화를 준다.
• 일반적으로 중요한 것을 덜 중요한 것에 비해 크게 만든다.
• 이는 한 페이지 안에서 시각적 계층을 만들어내며, 사용자가 훑어보기 쉽게 한다.

 

---

색상

의미를 담아라

• 색상을 일부러 선택했다면 반드시 의미를 담아야 한다.

 

진출 혹은 후퇴를 표현하라

• '구매' 버튼 같은 것은 화면 밖으로 튀어나온 것처럼 보이는 색상으로 정해야 한다.
• 사람들은 앞으로 '진출' 하는 것처럼 보이는 색상을 더 많이 클릭한다.

 

시각적 원칙들을 조합하라

• 오류나 경고 표지는 빨간색으로 만들고 콘트라스트를 높여라.

 

---

 

반복과 패턴 깨기

패턴을 깨라

• 패턴을 깨면 정작 사용자들이 봐야 할 중요한 것들로부터 눈길을 뺏을 수도 있다.
• 패턴을 깨기 전에 우선 패턴을 잘 만들어야 한다.

 

강조하고 싶은 부분에 변화를 주어라

• 패턴이나 배열을 만들기 위해서는 시각적 무게와 색상을 일정하게 유지해야 한다.

 

---

라인 텐션과 엣지 텐션

Line tension

• 선이나 길이 존재하지 않는데도 존재하는 것으로 인식하는 것이다.

 

Edge tension

• 레이아웃 측면에서는 라벨처럼 작은 것에 더 많은 집중이 필요할 때 사용하면 좋다.
• 사람들이 클릭했으면 하는 버튼으로 향하는 시각적 길을 만들 수도 있다.

 

---

정렬과 근접성

Alignment(정렬)

• 비슷한 기능을 가진 버튼들도 정렬될 수 있고, 다른 차원의 콘텐츠도 정렬될 수 있다.
• 정보는 스프레드시트처럼 열과 행 속에서 여러 가지 다양한 의미를 전달할 수 있다.

 

Proximity(근접성)

• 두 대상 사이의 거리는 서로 얼마나 연관되었는지에 관한 느낌을 전달할 수 있다.
• 디자인을 할 때 관련성 있는 요소들은 서로 가까이 놓고, 관련성 없는 요소들은 멀리 떨어뜨려 놓아야 한다.

 

---

UX를 위한 모션 이용하기

사용자를 기다리게 하지 마라

• 애니메이션은 나타나는 데 시간이 걸리고, 기다려야 하는 사용자는 쉽게 짜증을 느낀다.
• 기다리는 것보다 더 나쁜 것은 간혹 애니메이션이 글씨를 가리기도 하고, 사용자가 읽고 클릭해야 할 콘텐츠와 버튼을 찾는 데 방해가 된다는 점이다.

 

직선은 방향성을 만든다

• 주요 기능을 강조하거나 사용자들이 어디로 가야 할지 안내하고 싶다면 움직이는 직선 모션은 좋은 선택이다.

 

사람들의 시선은 곡선을 따라 이동한다

• 사용자들이 애플리케이션을 처음 이용해 설명이 필요한 경우라면 그들이 화면을 한 바퀴 둘러볼 수 있도록 곡선 모션을 이용하는 것이 좋다.