화면에 담을 정보가 많을수록 사장님 마음은 조급해집니다. 회사 소개도 넣고, 제품 사진도 넣고, 후기와 연락처까지 한 화면에 빼곡히 채우면 왠지 더 알차 보입니다. 그런데 정작 손님은 그 빽빽한 화면 앞에서 어디를 봐야 할지 몰라 그냥 창을 닫습니다. 여백은 채우지 못한 빈자리가 아니라, 고객의 눈이 머물 곳을 정해 주는 설계입니다.
1. 여백은 '버리는 공간'이 아니라 '시선을 모으는 도구'다
비어 있는 공간이 아까워 보이지만, 그 빈 곳이 있어야 옆에 놓인 글과 버튼이 눈에 들어옵니다. 고급 브랜드 사이트일수록 화면이 휑할 만큼 비어 있는 이유가 여기 있습니다. 핵심 메시지 하나에 충분한 여백을 두면, 손님은 헤매지 않고 그 한 곳을 봅니다.
2. 묶고 나누는 것은 선이 아니라 여백이다
관련 있는 정보는 가까이, 다른 정보는 멀리 두는 것만으로 구분선이나 박스 없이도 화면이 정리됩니다. 이를 '근접성의 원칙'이라 부릅니다.
- 제목과 본문은 가깝게, 다른 단락 사이는 넉넉하게 띄웁니다.
- 버튼과 그 설명 문구는 한 덩어리처럼 붙여 둡니다.
- 선을 긋고 싶은 충동이 들면, 먼저 여백으로 해결되는지 보세요.
3. 줄 간격과 글자 사이가 가독성의 절반이다
같은 글이라도 줄 간격이 좁으면 답답하고, 너무 넓으면 흩어집니다. 본문 줄 간격은 글자 크기의 1.6~1.8배가 읽기 편하고, 한 줄은 너무 길지 않게(한글 기준 35~45자) 잡는 것이 좋습니다. 글이 숨 쉴 틈이 있어야 손님도 끝까지 읽습니다.
4. 버튼과 핵심 정보 주위는 더 비워라
'문의하기'나 '구매' 같은 가장 중요한 버튼일수록 주변을 비워야 합니다. 사방이 다른 요소로 빽빽하면 정작 누르라는 버튼이 묻혀 버립니다. 핵심 행동 버튼 둘레에 여백을 넉넉히 두는 것만으로도 클릭이 늘어납니다.
5. 모바일에서도 '숨 쉴 틈'은 남겨라
화면이 좁다고 여백을 모두 없애면, 손가락이 엉뚱한 버튼을 누르고 글은 가장자리에 딱 붙어 답답해집니다. 좌우에는 최소한의 안쪽 여백(보통 16~20px)을 남기고, 터치 버튼 사이는 손끝이 헷갈리지 않을 만큼 띄워 주세요.
여백은 디자인의 마지막이 아니라 시작이다
여백을 잘 쓴 화면은 '비어 보이는' 게 아니라 '정돈되어 보입니다'. 정보를 더 넣는 것보다 덜어 내고 비우는 결정이 더 어렵고, 그래서 더 중요합니다. CYAN 에이전시는 작은 회사 웹사이트를 만들 때 무엇을 채울지만큼 무엇을 비울지를 함께 고민합니다. 화면이 답답해 손님을 놓치고 있다면, 한 번쯤 여백의 눈으로 우리 사이트를 다시 들여다보시길 권합니다.