빈 공간은 '남는 자리'가 아니라 '설계된 자리'다
작은 회사 홈페이지를 만들 때 사장님들이 가장 자주 하는 말이 있다. "여기 비었으니까 뭐라도 하나 더 넣죠." 배너를 채우고, 문구를 얹고, 이벤트 팝업을 하나 더 단다. 그렇게 화면은 빈틈없이 꽉 차지만, 정작 손님은 어디부터 봐야 할지 몰라 숨이 막힌 채 창을 닫는다.
여백(화이트스페이스)은 '아직 안 채운 자리'가 아니다. 시선이 쉬고, 중요한 것이 도드라지고, 손님이 다음 행동을 자연스럽게 찾게 만드는 설계 요소다. 실무에서 확인한 여백 설계의 다섯 가지 원칙을 정리한다.
1. 여백은 '읽는 순서'를 만든다
사람의 눈은 빽빽한 화면에서 우선순위를 읽지 못한다. 제목과 본문 사이, 문단과 문단 사이의 간격이 충분해야 "이게 먼저, 저게 다음"이라는 순서가 생긴다.
관련 있는 요소는 가깝게, 관련 없는 요소는 멀게 두는 것만으로도 손님은 설명 없이 구조를 이해한다. 여백은 말없이 동선을 안내하는 표지판이다.
2. 가장 중요한 버튼 주위를 비워라
'문의하기', '예약하기' 같은 핵심 버튼은 주변이 복잡할수록 묻힌다. 반대로 버튼 위아래로 넉넉한 여백을 주면, 아무 장식 없이도 그 버튼이 화면에서 가장 눈에 띈다.
- 핵심 버튼 주변에는 경쟁하는 링크나 배너를 두지 않는다
- 버튼과 설명 문구 사이는 붙이고, 다른 섹션과는 확실히 띄운다
- '여기를 누르세요'라는 시선의 여백을 버튼 스스로 갖게 한다
3. 모바일에서 여백은 '터치 안전거리'다
손님 열에 일곱은 휴대폰으로 들어온다. 링크와 버튼이 서로 붙어 있으면 손가락이 옆 것을 잘못 누르고, 그 작은 짜증이 이탈로 이어진다.
버튼끼리는 최소 손가락 하나가 들어갈 간격을, 텍스트 링크는 위아래로 충분한 터치 영역을 확보해야 한다. 모바일에서의 여백은 미관이 아니라 오작동을 막는 기능이다.
4. 줄 간격과 문단 여백이 가독성을 좌우한다
같은 글이라도 줄이 다닥다닥 붙어 있으면 읽다가 눈이 길을 잃는다. 본문 줄 간격을 글자 크기의 1.6배 안팎으로 두고, 문단 사이를 한 줄 이상 띄우면 읽는 피로가 눈에 띄게 줄어든다.
한 줄에 담기는 글자 수도 너무 길면 안 된다. 좌우 여백으로 본문 폭을 적당히 잡아, 시선이 한 줄을 끝까지 편하게 따라가게 만드는 것이 핵심이다.
5. 여백에도 '리듬'이 있어야 한다
여백을 아무 데나 제각각 주면 화면이 오히려 산만해진다. 8px, 16px, 24px처럼 일정한 간격 단위를 정해 두고 반복하면, 화면 전체가 정돈된 리듬을 갖는다.
같은 성격의 요소는 같은 간격으로, 큰 구획 사이는 더 넓은 간격으로. 이 규칙 하나만 지켜도 어설퍼 보이던 화면이 '전문가가 만든 것 같은' 인상으로 바뀐다.
비우는 것이 곧 강조하는 것이다
여백 설계의 본질은 뺄셈이다. 무엇을 더 넣을지가 아니라 무엇을 비워서 남길지를 정하는 일이고, 그 비움이 정작 손님에게 보여주고 싶은 하나를 도드라지게 한다.
CYAN 에이전시는 작은 회사의 홈페이지를 만들 때, 채우는 것만큼이나 무엇을 비울지를 함께 고민한다. 화면이 한결 숨 쉬게 되면, 손님의 시선도 사장님이 정말 보여주고 싶은 곳에 자연스럽게 머문다.
