UX 디자이너가 알아야 할 여백의 힘
today
Today UX 아티클
오늘은 여백의 힘 에 대해 애기하고자 합니다.
Nich Babich의 원문을 번역한 글입니다
여백(whitespace)란 페이지에 있는 요소들 사이 혹은 그 주변에 있는 빈 공간을 의미합니다. 스크린 상의 귀한 공간을 낭비하는 것이라고 생각하는 사람들도 많이 있을 수 있지만, 여백은 디자인에서 필수적인 요소입니다.
“여백은 소극적인 배경이 아니라, 적극적인 구성요소로 여겨져야 한다”
Jan Tschichold
오늘은 깔끔하고 조잡하지 않은 느낌을 전달하기 위해 디자인에서 여백을 활용하는 방법을 다루고자 합니다.
여백
여백을 뜻하는 “negative space”라는 용어는 오브젝트의 형태를 보다 명확하게 잡아내던 전통적인 예술에서 사용되던 용어입니다. 그 빈 공간이 흰색일 필요도 없습니다. 핵심 요소와 상충되지 않는 빈 공간이라면 무엇이든 “여백(whitespace)”으로 분류할 수 있습니다. “whitespace”라는 말과 흰색은 사실 별 상관관계가 없으며, 그 대신 “negativespace”라는 용어를 사용할 수도 있습니다.
“Suprematist Composition: Airplane Flying” by KasimirMalevich.그래픽 유저 인터페이스에서의 여백
전통적인 미술과 마찬가지로, 그래픽 유저 인터페이스에서도 오브젝트는 여백을 필요로 합니다. 텍스트, 버튼, 로고 등의 오브젝트에도 숨 쉴 공간이 필요한 것이죠. 좋은 유저 인터페이스를 보면, 모든 페이지의 상단부터 하단까지 여백이 적절히 사용되었음을 알 수 있습니다. GUI에서 여백의 구성 요소는 다음과 같습니다.
마진, 패딩, 페이지 사이의 간격
그래픽과 이미지 주변의 공간
텍스트 콘텐츠에서 자간과 행간
페이지에서 여백은 UI 요소가 차지하는 공간만큼이나 중요합니다. 빈 공간이라 하여도 목적이 있으며 레이아웃의 시각적 통일감을 위해 사용될 수 있기 때문입니다. 여백은 다음 4가지의 기본적인 기능을 수행하게 됩니다.
1. 이해도를 높여준다
여백은 내용을 쉽게 읽고 훑어보게 해주며, 예측 가능하게 해 줍니다.
가독성을 우선순위로 두기
텍스트 사이의 간격은 페이지의 콘텐츠 그 자체를 규정하는 데 도움이 되기 때문에 중요합니다. 위치타 주립대학교의 연구 결과에 따르면, 여백이 드러날수록 독자의 이해력은 올라가고 읽는 속도도 빨라졌다고 합니다. Dmitry Fadeyev는 이렇게 말합니다.
“문단 사이 위아래, 좌우로 적절하게 사용된 여백은 이해도를 20%가량 높여줍니다.
텍스트 콘텐츠를 최적화할 때 항상 기억해야 할 두 가지는 문단 간격과 행 간격입니다. 행 사이의 간격은 텍스트의 가독성을 굉장히 개선해줄 수 있습니다. 일반적으로 간격이 넓을수록 유저는 더 편하게 읽을 수 있는데, 그렇다고 간격이 지나치게 넓어지게 되면 통일감이 저해되고 연속적으로 읽지 못하게 될 수도 있습니다. 다시 말해, 완벽한 균형을 찾는 것이 중요합니다.
왼쪽: 모든 것이 지나치게 바싹 붙어있고 여백이 부족하여 독자의 눈에 피로해집니다.
오른쪽: 적절한 간격으로 가독성이 높아졌습니다. Image credit: Apple
2. 관계를 명확히 보여준다
전반적인 레이아웃은 부분 부분이 합쳐져서 나타나게 됩니다. 내용 간의 관계는 주변의 여백에 의해 결정됩니다. 여백이 시각적 단서의 역할을 하는 것이죠.
연관 있는 요소끼리 묶어주기
사람들이 시각 정보를 어떻게 조직하는지 관찰해본 결과, 형태주의 심리학자들은 근접성의 원리를 발견하였습니다. 서로 가까이에 있는 오브젝트는 비슷한 것으로 묶어서 보려는 경향이 있다는 것입니다.
게슈탈트의 법칙에 따르면 서로 가까이에 있는 오브젝트는 하나의 유닛처럼 보인다고 합니다.
GUI의 맥락에서는 서로 가까이에 있는 오브젝트를 묶어 하나의 유닛처럼 본다는 뜻인데, 가령 웹 폼의 경우, 레이블은 관련 입력란과 가깝게 배치하는 것이 좋다는 것입니다.
레이블을 해당 입력란과 가깝게 배치하면 훨씬 더 명확하게 정보가 전달됩니다.3. 시선을 끌어준다
충분 한 여유 공간 없이 너무 많은 요소와 정보를 쑤셔 넣어 제공하는 앱과 웹사이트가 많이 있습니다.
유저 인터페이스를 복잡하게 만들게 되면 유저는 지나치게 많은 정보에 당황하게 됩니다. 복잡한 페이지는 매력적이지 않으며 유저가 내용을 읽고 싶게 만들지도 않습니다. 특히, 시각적 계층구조가 없을 때는 더 심각합니다.
인터페이스가 복잡하면 유저에게 너무 많은 정보가 과부하됩니다. 복잡함을 줄이면 이해도가 올라갈 것입니다. 방해가 되는 부분은 지우고, 유저가 집중해야 하는 일부만 보여주세요.
관련 내용으로 유저의 눈길 끌기
요소 사이의 거리가 멀수록 눈길이 가게 되어있습니다. 화면을 구성하는 요소가 많지 않으면, 화면 상에 있는 요소들은 더눈에 띄게 됩니다. 방황하고 있는 눈이 페이지의 특정 요소로 움직일 수 있도록 여백을 활용해보세요. 콘텐츠의 특정 영역 주변에 여백을 넣으면 유저의 눈길이 해당 영역으로 옮겨지게 됩니다. 그 주변에 아무것도 없기 때문이죠.
오브젝트 주변에 여백이 많을수록, 눈길이 더 가게 됩니다.
보시다시피 Mailchimp에서는 디자인에서 여백을 넓게 활용하고 있습니다. Mailchimp의 홈 화면을 빠르게 훑어볼 때, 거의 즉시 “Sign Up Free”라는 버튼이 눈길을 사로잡게 됩니다.
시각적 계층구조 만들기
여백은 적절히 사용하기만 하면, 페이지에 균형감과 몰입도를 더해주게 되어, 궁극적으로 디자인의 의도를 전달하는 데 도움이 됩니다.
디자이너로서, 우리는 유용한 의사소통 도구를 만들 책임을 가지고 있습니다.
여백은 계층구조 전체를 서포트할 수 있습니다. 여백으로 대칭구조 혹은 비대칭 구조를 만들 수 있습니다. 비대칭 구조는 페이지 상의 특정 영역이나 요소로 관심을 끄는 데 훌륭한 도구입니다. 비대칭적인 공간에 사용된 요소는 주변 요소보다 더 눈에 띄게 됩니다.
비대칭적인 여백에 요소를 배치하게 되면 주변의 다른 요소보다 특히 눈에 잘 들어옵니다.4. 럭셔리한 느낌을 만들어준다
여백이 보통 사용자 경험을 개선해주는 테크닉으로 여겨지긴 하지만, 순전히 심미적인 목적으로 사용될 수도 있습니다. 디자이너는 고급 브랜드의 우아한 느낌을 주기 위해 여백을 사용하기도 합니다. 세심하게 선택된 서체 및 사진과 함께, 풍부하게 사용된 여백을 럭셔리 브랜드에서 많이 보셨을 겁니다. 여백은 제품 그 자체가 화면의 공간보다 더 중요하다는 느낌을 만들어, 일반적인 웹페이지에 세련되면서도 호화로운 느낌을 더해줍니다.
제품 스스로 자신에 대해 얘기할 수 있게 해주세요.
패션 분야에서는 마케팅 자료에서 여백을 많이 사용함으로 독자들에게 브랜드의 세련됨, 고품질, 높은가격의 느낌을 전달합니다.결론
여백은 빈 캔버스가 아닙니다. 강력한 디자인 툴이죠. 여백을 마스터하는 일은 어려울 수 있습니다. 여백을 적용하는 작업은 예술이면서 과학이기도 합니다. 좋은 레이아웃을 만들기 위해서 어느 정도의 여백을 사용해야 하는지 완전히 이해하는 데는 많은 연습이 필요합니다. 더 많이 디자인해볼수록, 더 많이 배우게 될 것입니다.
전민수 UX 컨설턴트 소개
(UX 실무 경력: 27년차 UX 전문가: LG전자, 서울시청 등 약 300회 이상 UX 컨설팅 수행)
(UX 강사 경력: 23년차: 삼성, SK, KT 등 약 1,000회 이상 UX 강의 진행)
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 최소 1개에서 최대 4개 강좌 (온라인) 줌 Live 강좌 진행) (PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
[VOD 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(인프런에서 총 20개 VOD UX 강좌를 오픈했습니다)
(PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
https://www.inflearn.com/users/196290
