brunch

매거진 UX 디자인의 모든 것

라이킷 63 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Aug 24. 2016

여백의 미를 고려한 UX 법칙

UX 디자인 배우기 #15

Today UX 아티클

TheInteraction Design Foundation에 게재된 Mads Soegaard의 글 Thepower of white space를 소개하고자 합니다.

많은 요소가 인터랙티브 디자인의 구조와 레이아웃을 형성하는데 이 글에서는 그중 생명 유지에 필수적인 것이 바로 ‘여백’이라고 말합니다. 웹사이트나 앱에서 여백이란 캔버스와 같은 역할을 하는 것으로 각 요소가 모여 하나의 디자인이 될 수 있게 해준다고 합니다. 이 글에서는 왜 여백을 디자인하는 것이 중요한지 이야기합니다.

여백이란 무엇인가?

여백이란 여러 디자인 요소 사이사이(between)의 공간과 각 디자인 요소 내부(within)에 존재하는 공간이라고 합니다. 영어로 여백을 white space라고 하는데, 꼭 흰색일 필요는 없고 어떤 색상, 질감, 패턴, 이미지를 써도 된다고 합니다. 문제는 여백에 대해 디자이너와 클라이언트가 이해하는 바가 다르다는 점에 있다고 합니다. 디자인 이론은 여백의 활용을 긍정적으로 얘기하지만 많은 클라이언트와 매니저들은 여백을 낭비라고 생각한다고 합니다. 하지만 실제로 여백은 디자인 사이의 균형을 맞춰 주고, 콘텐츠를 잘 조직해주어 시각 커뮤니케이션 경험을 개선하는 역할을 한다고 합니다.

여백 유형 1. 미시 여백(Micro white space)

디자인 요소 사이에 있는 작은 공간으로 예를 들면 문장과 문단 사이, 이미지 사이, 메뉴 링크 사이에 있는 공간을 뜻한다고 합니다. 특히 미시 여백은 콘텐츠 가독성에 직접적인 영향을 미친다고 합니다.

여백 유형 2. 거시 여백(Macro white space)

주요 레이아웃 요소 사이에 있는 넓은 공간으로 예를 들면 대부분의 웹사이트에서 좌우에 있는 공간, 콘텐츠 블록 사이의 공간을 뜻한다고 합니다.
미시 여백과 다르게 전체 디자인의 구성요소 역할을 한다고 합니다. 거시 여백을 효과적으로 사용한 사례가 구글의 홈페이지라고 합니다.

어떤 여백을 사용해야 하는지 결정하는 것은 무엇인가

미시 여백과 거시 여백 사용은 다음 요인에 따라 달라진다고 합니다:

콘텐츠 - 레이아웃 안에 들어가는 정보가 많아질수록 거시 여백을 쓸 수 있는 공간은 줄어드는 반면 미시 여백 공간의 양은 늘어날 것이라고 합니다. 이렇게 절충하지 않으면 콘텐츠를 읽기가 매우 어려워진다고 합니다.

디자인 – 유저 인터페이스 디자인은 미시 여백과 거시 여백의 비율에 영향을 미친다고 합니다.

유저 – 미시 여백과 거시 여백의 적절한 균형을 맞추기 위해 유저 리서치를 활용할 수 있다고 합니다. 특정 타깃 유저에게 쓰면 좋아도 알려진 비율은 없으며 타깃 유저에게 테스트를 하여 결정하면 된다고 합니다.

브랜딩 메시지– 여백의 활용하여 회사와 제품의 질을 보여줄 수도 있다고 합니다.(예: 애플, 벤츠, IKEA 홈페이지)

애플 홈페이지

IKEA 홈페이지

아래 이미지는 BBC 뉴스의 예전 웹사이트 버전으로 거시 여백과 미시 여백을 보여주고 있습니다. 종이 신문과 비교했을 때 여백이 많이 부족하지만, 많은 양의 정보를 제공하여 신뢰성을 보여주고 있다고 합니다.

능동 vs. 수동: 여백의 유용성에 접근하는 또 다른 방법

여백을 미시적 또는 거시적으로 보지 않고 능동적 또는 수동적 관점에서 보는 방법도 있다고 합니다.

능동적 여백(Active white space)
페이지 구조를 강화하고 특별한 읽는 방식, 플로우, 콘텐츠 순서를 따라 유저를 안내해준다고 합니다.

수동적 여백(Passive white space)
특별한 역할 없이 미적인 부분만을 위해 적용한다고 합니다. (자간, 행간 등)

여백을 디자인할 때 고려해야 할 3가지 요소

가독성 - 미시 여백은 인터페이스 콘텐츠 가독성에 있어서 필수적이라고 합니다. 폰트, 사이즈, 색상, 스타일, 제목, 장식 등 타이포그래피 스펙을 정할 때 반드시 여백을 고려하여 선택해야 한다고 합니다.

디자인 톤과 브랜딩 - 여백은 전체 디자인의 톤에 영향을 미친다고 합니다. 가령 거시 여백이 크면 미니멀리즘과 고급스러움을 보여줄 수 있고, 거시 여백이 적으면 정보성이 있음을 보여줄 수 있다고 합니다.

초점과 관심 - 여백을 잘 활용하면 유저가 초점을 맞춰야 하는 곳으로 주의를 끌 수 있다고 합니다. 여백만 잘 활용해도 원하는 요소에 스포트라이트를 줄 수 있다고 합니다.