홈페이지를 만들 때 작은 회사 사장님이 가장 흔히 하는 말이 있다. "이왕 만드는 김에 여기 소개도 넣고, 이벤트도 넣고, 후기도 넣어 주세요." 그렇게 화면을 빈틈없이 채우면 마음은 든든하지만, 정작 손님의 눈에는 아무것도 또렷이 들어오지 않는다. 여백은 채우지 못한 낭비가 아니라, 손님의 시선을 봐야 할 곳으로 안내하는 설계 도구다.
1. 여백은 '빈 공간'이 아니라 '시선을 안내하는 길'이다
사람의 눈은 빽빽한 곳에서 무엇을 먼저 봐야 할지 판단하지 못하고 그냥 지나친다. 반대로 어떤 요소 주위를 넉넉히 비워 두면, 눈은 자연스럽게 그 요소로 향한다. 가장 중요한 대표 문구 하나, 핵심 버튼 하나의 주변을 과감히 비우는 것이 정보를 하나 더 넣는 것보다 힘이 세다.
2. 관련 있는 것끼리 가깝게, 다른 것끼리 멀게
여백은 '무엇과 무엇이 한 묶음인지'를 말없이 알려 준다. 제목과 그에 딸린 설명은 바짝 붙이고, 서로 다른 항목 사이는 넉넉히 띄운다. 이 간격의 위계가 무너지면 손님은 제목이 위 문단에 딸린 것인지 아래 문단에 딸린 것인지 헷갈려 하며 읽기를 포기한다.
3. 간격은 '일관된 단위'로 관리하라
어떤 곳은 12px, 어떤 곳은 17px, 또 어떤 곳은 23px씩 제각각으로 띄우면 화면 전체가 미묘하게 어수선해진다. 8의 배수(8·16·24·32px)처럼 하나의 기준 단위를 정해 두고 모든 간격을 그 배수로만 두면, 특별한 장식 없이도 화면이 정돈되어 보인다. 이것이 잘 만든 사이트와 아마추어 사이트를 가르는 눈에 안 띄는 차이다.
4. 첫 화면일수록 과감히 비워라
손님이 처음 마주하는 화면은 정보량이 아니라 인상이 승부처다. 무엇을 파는 곳인지 알려 주는 한 문장과 다음 행동을 이끄는 버튼 하나면 충분하고, 나머지는 아래로 내려도 된다. 첫 화면을 비울수록 그 안의 메시지가 또렷해지고, 손님은 '정돈된 곳'이라는 신뢰를 먼저 갖는다.
5. 모바일에서 여백이 무너지지 않게 하라
데스크톱에서 아름답던 여백이 좁은 휴대폰 화면에서는 답답하게 뭉치거나 반대로 텅 비어 허전해지기 쉽다. 화면 좌우 바깥 여백은 최소 16~20px을 확보해 글자가 모서리에 붙지 않게 하고, 요소 사이 간격은 화면 크기에 따라 단계적으로 줄여 준다. 손님의 절반 이상이 휴대폰으로 들어온다는 점을 잊으면 안 된다.
비움의 기준을 세우는 일
여백 설계는 결국 '무엇을 덜어낼 것인가'를 판단하는 일이고, 이는 넣는 일보다 훨씬 어렵다. CYAN 에이전시는 작은 회사의 홈페이지를 만들 때 콘텐츠를 무작정 채우기보다, 손님이 봐야 할 것 하나가 또렷이 남도록 덜어내는 데 더 공을 들인다. 화면이 답답하게 느껴진다면, 무엇을 더할지가 아니라 무엇을 비울지부터 살펴볼 때다.
