시각적 위계와 정렬을 활용해 UI 디자인을 개선하기 | 매거진에 참여하세요

광범위하게 말하면, 시각적 위계를 이해한다는 것은 뇌가 세상을 어떻게 보고 이해하는지

즉, 어떻게 스캔하고 그것이 디지털 인터페이스 상호작용에 어떤 영향을 미치는지를 이해하는 것을 의미합니다.

페이지에 있는 각 요소가 얼마나 많은 주의를 끌지 예측할 수 있다면, 더 나은 페이지와 앱, 소프트웨어를 디자인할 수 있습니다.

사용자는 당신이 의도한 행동을 더 빠르게, 더 적은 노력으로 이해하고 수행하게 됩니다.

시각적 위계가 부족하거나 콘텐츠가 제대로 정렬되지 않으면, 뇌는 정보를 빠르게 스캔하거나 관심 있는 영역에 집중하기 어렵게 됩니다.

우리가 화면에서 본 것을 빠르게 이해하지 못하면, 실망하거나 그 경험을 떠날 가능성이 높아집니다.

다양한 크기의 메시지와 각 메시지의 읽는 순서를 보여주는 이미지

이건 인기 있는 밈이지만, 정확한 출처는 알 수 없습니다.

이런 밈을 온라인에서 많이 봤을 겁니다. 그리고 그 내용은 사실입니다.

만약 당신도 이미지에 제시된 순서대로 읽었다면, 당신만 그런 게 아닙니다.

이것이 바로 뇌가 정보를 받아들이는 방식입니다.
시각적 위계는 모든 형태의 커뮤니케이션에 스며들어 있습니다.
광고, 예술, 저널리즘 모두 이를 활용하죠.
디자이너들은 사람들이 가장 중요하게 봐야 할 부분으로 자연스럽게 시선을 이끌기 위해 시각적 위계를 의도적으로 사용합니다.

그래서 우리의 뇌는 콘텐츠를 스캔하는 것입니다. 우리가 보는 모든 단어를 읽는 건 불가능하고,

마찬가지로 모든 이미지나 소리에 집중하는 것도 불가능합니다. 따라서 우리는 사용자에게 각 영역이 무엇에 관한 것인지 알려주는 단서를 제공하고,

그들이 더 자세히 들여다볼지를 스스로 결정할 수 있게 하는 경험을 디자인해야 합니다.

정말 위계가 전혀 없는 웹 페이지의 예시를 보세요.

시선이 어디에도 머물 수 없습니다. 당신은 시선을 고정하거나 잠깐 둘 곳을 찾고 있지만, 그런 지점이 없다면 그냥 무시하게 됩니다.

페이지에 약간의 시각적 위계를 추가하면, 이제 사람들의 시선이 페이지 상단으로 끌리게 되고, 최소한 헤드라인은 읽게 됩니다.

시각적 위계가 없고 시선이 향할 곳도 없다면, 우리는 집중할 수 없고, 다음에 무엇을 해야 할지 판단하기 위해 더 많은 주의를 기울여야 합니다.

가끔은 이런 혼란이 의도적으로 사용되기도 합니다. 페이지 내 항목들에 동일한 비중을 두면, 사용자를 혼란스럽게 만들 수 있습니다.

이는 사람들이 어떤 행동도 하지 않도록 만들기 위해 흔히 사용되는 "다크 패턴"입니다

아래 예시는 선택지들이 너무 유사해서, 사용자는 각 영역을 하나하나 읽고 버튼의 텍스트를 확인해야 원하는 행동을 할 수 있게 되어 있습니다.

UI 요소의 시각적 위계와 텍스트 정렬을 함께 사용할 때 그 효과는 더욱 두드러집니다.

가장 중요한 요소를 눈에 띄게 전달하면서도 모든 요소를 정렬하면, 사용자는 페이지를 빠르게 스캔해 원하는 정보를 쉽게 찾을 수 있습니다.

정렬 또한 뇌가 화면의 콘텐츠를 스캔하는 방식에 영향을 준다

적절한 정렬은 현재 보고 있는 인터페이스가 전문 디자이너에 의해 디자인되었음을 보여주는 대표적인 신호 중 하나입니다.

잘 정렬된 화면을 보면, 비록 의식적으로 인식하지 못하더라도 "이건 신경 써서 디자인됐구나"라는 인상을 받게 됩니다.

텍스트는 텍스트끼리 정렬하라

아래 예시를 보세요. 첫 번째(왼쪽) 디자인도 나쁘지는 않지만, 어딘가 어색하게 느껴집니다.

두 개의 추천글 박스 컴포넌트 와이어프레임: 왼쪽은 요소들이 조금씩 어긋나 있고, 오른쪽은 잘 정렬되어 있음

왼쪽과 오른쪽을 비교해 보면, 오른쪽은 따옴표 아이콘이 아닌 텍스트 기준으로 정렬되어 있다는 걸 알 수 있습니다.

이로 인해 훨씬 읽기 쉽고 스캔하기도 수월합니다.

이 차이는 콘텐츠가 많을수록 더욱 뚜렷해집니다.

아이콘 기준이 아닌 텍스트 기준으로 정렬하면, 사용자가 아이콘과 헤드라인을 더 쉽게 스캔하고 이해할 수 있습니다. 전반적으로 읽기에도 훨씬 수월하죠.

수평 정렬

이미지나 텍스트 박스의 수평 정렬 역시 중요합니다. 페이지 상단이 모두 정렬되어 있으면, 가로로 시선을 옮기며 스캔하는 것이 훨씬 쉬워집니다.

수평 정렬의 또 다른 형태

수평 정렬의 또 다른 형태는 콘텐츠 블록들이 계단식으로 배열되었더라도, 시선이 머무는 기준선(eye-line)이 유지되는 경우입니다.

만약 이 시선의 흐름이 끊기면, 뇌는 자연스럽게 다음 콘텐츠로 뛰어넘으려 하게 됩니다. 이렇게 되면 첫 번째 콘텐츠에 집중하기가 어려워집니다.

텍스트 박스를 나란히 배치하는 것은 시각적인 흥미를 더해줄 수 있지만, 정렬이 어긋나거나 겹치게 되면 콘텐츠를 이해하는 데 방해가 됩니다.

페이지 전체에 걸쳐 텍스트가 배치되는 경우, 각 영역 사이에 수직 공간을 충분히 확보해 주세요. 이렇게 하면 사용자가 각 콘텐츠를 별개로 보고 인식하기 쉬워집니다.

긴 페이지를 피하려고 콘텐츠를 너무 빽빽하게 압축해서 배치하고 싶은 유혹이 들 수 있습니다.

하지만 실제로 사람들은 웹사이트에서 긴 페이지 자체는 그다지 신경 쓰지 않습니다.

우리가 진짜 불편해하는 건 요소들이 너무 가까이 붙어 있을 때입니다.

뇌는 그것들을 하나의 묶음(chunk)으로 인식해버려서, 개별 콘텐츠에 집중하기가 어려워지기 때문입니다.

종합 정리

정렬이 잘되지 않은 웹 페이지 전체와, 잘 정렬된 페이지를 비교해 봅시다. 같은 콘텐츠를 담고 있어도, 정렬된 쪽은 시선이 덜 흔들리고 집중하기가 훨씬 쉽습니다.

같은 내용을 담고 있는 두 개의 웹페이지를 비교하는 GIF: 하나는 잘 정렬되어 있고, 다른 하나는 그렇지 않음

우리의 뇌는 패턴을 사랑합니다.
많은 콘텐츠 중심 웹사이트들이 대칭적으로 구성되어 있는 걸 눈치채셨나요?

아래 오버레이를 보세요. 모든 요소들이 깔끔하고 정돈되게 정렬되어 있습니다.
웹페이지의 와이어프레임을 만들 때, 이런 식으로 정렬 오버레이를 적용해보는 것은 유용한 연습입니다.

전체가 얼마나 잘 정렬되어 있는지 시각적으로 확인할 수 있으니까요.

결론

이 글은 시각적 위계와 정렬에 대해 배울 수 있는 것들의 표면만 살짝 다룬 것에 불과합니다.

하지만 여기 소개된 기본적인 예시들만 잘 적용해도, 여러분의 디자인은 충분히 더 나아질 수 있습니다.

디자인을 할 때는 항상 어떤 부분에 시선이 자연스럽게 끌리는지 분석해 보세요.

웹사이트를 스캔할 때 시선이 끊기거나 집중이 흐트러지는 순간이 있다면 그 지점을 유심히 살펴보는 것도 중요합니다.

이런 모든 것들이 다른 사람들도 그 디자인을 어떻게 인식할지 예측할 수 있는 단서가 됩니다.
더 좋은 방법은, 친구들에게 여러분의 작업물을 보여주고 똑같은 질문을 해보는 것입니다.
개선이 필요한 영역을 찾아내고 고쳐 나가세요.

그렇게 하면, 여러분의 사이트는 확실히 더 좋아질 것입니다.

해당글은 아래 원문을 번역 및 재가공한 글입니다. 원문은 아래에서 확인하실 수 있습니다.

https://balsamiq.com/learn/articles/visual-hierarchy-and-alignment/