디자인과 심리학 : 13. 시각적 위계

굳이 말로 설명하지 않아도 무엇이 더 중요한 지 알 수 있게 하는 방법

시각적 위계(Visual Hierarchy) : 사람의 눈이 물체를 인식하는 방식을 착안해, 해당 물체의 중요도를 시각적으로 판단할 수 있게 한다.

'위계'는 지위나 계층의 등급을 뜻한다. 이러한 위계는 군대의 열병식에서 뚜렷하게 드러난다. 수많은 병사들은 모두 일치된 동작으로 제식을 지키며 행진한다. 멀리서 바라보면, 그 수많은 병사들 무리는 하나의 군집으로 인식된다.

우리는 그 행진 속에서 유독 눈에 띄는 요소들을 발견할 수 있다. 기수(부대 그 자체를 뜻하는 깃발을 들고 있는 사람), 거대한 탱크, 그 부대에서 가장 지위가 높은 사람 등이 바로 그것이다. 

열병식을 처음 보는 사람도, '아 저 부대는 어떤 부대이고, 이러한 무기를 갖추고 있으며, 부대장은 저 사람이구나'라는 걸 한눈에 알 수가 있다.

출처 : 연합뉴스

기수의 깃발은 높이 올라서 있다. 깃발의 색은 국방색 군복을 입은 병사들과는 다르다. 또한 행진하지 않고 펄럭인다. 탱크의 크기는 병사들보다 훨씬 크다. 부대장과 인접한 군집은 앞에서 행진하는 병사들과 다르게 정렬되어있다. 크기, 색, 대조, 정렬을 통해 시각적으로 위계가 형성되었다.

이러한 시각적 위계는 실생활에서도 발견할 수 있다. 스쿨버스나 중앙선의 색상은, 왜 하필 황색인 걸까?

비슷해보이는 수많은 차들이 있는 도로에서 운전자의 집중력은 자연스레 떨어진다. 이때 빠르게 운전자의 이목을 집중시키기 위해 황색을 사용한 것이다. 이 또한 시각적으로 '위험 강도'에 위계를 둔 것이라고 할 수 있다. (황색은 망막 위에서 넓게 퍼지는 성질이 있기 때문에, 색채 중에서 가장 크게 보인다. 따라서 운전자는 눈앞에 있는 물체에 집중할 때, 황색에 더 민감하게 반응하게 된다. 또한 황색은 어두운 곳, 안개 낀 곳에서도 잘 보인다. 출처 : https://post.naver.com/viewer/postView.nhn?volumeNo=13484654&memberNo=33997674)

그렇다면 온라인에서는 어떨까?

사람들은 하루에도 수많은 서비스를 이용하며 각자가 원하는 정보를 얻거나 목표를 달성해나간다. 디자이너는 사람들이 원하는 것을 더 빨리 얻을 수 있도록, 이러한 시각적 위계를 설계한다. 아래 이미지를 한 번 살펴보자.

사람들은 어떤 화면에서 목표를 더 빨리 달성할 수 있을까?

숙소 예약에서 가장 높은 위계를 획득해야 하는 요소는 당연히 '숙소와 관련된 정보'일 것이다. 왼쪽 화면도 숙소의 이미지 덕분에 먼저 시선이 가긴 하지만, 숙소의 이름보다 큰 탭 바(Tap Bar)나 필터링 바(Filtering Bar) 때문에 시선이 분산되어 버린다. 또한 제일 중요한 '할인 또는 가격 정보'가 강조되어있지 않기에, 사람들은 아래에 있는 숙소들과 내가 보고 있는 숙소를 한눈에 비교하기 어려워진다.

이렇게 시각적 위계를 전혀 고려하지 않으면, 사람들은 자신이 어디서부터 어디로 이동해야 할지, 어떤 버튼을 클릭해 다음 과정으로 넘어가야 하는지 판단하기 어려울 수밖에 없다. 그렇게 목표를 달성하는데 소모하는 에너지와 시간의 양이 늘어날수록, 사용자 경험은 나빠지기 마련이다.

열병식에서 예를 들었던 것처럼, 온라인 환경에서도 크기, 색상, 대조, 정렬 등을 통해 위계를 둘 수 있다. 디자이너는 어떤 정보가 상대적으로 더 중요하고 덜 중요한지 판단 후, 그에 맞는 시각적 위계를 철저히 설계할 필요가 있다.