홈페이지를 만들다 보면 빈 공간이 자꾸 아깝게 느껴집니다. 그래서 위아래 틈을 줄이고, 남는 자리마다 배너와 사진과 문구를 욱여넣게 됩니다. 그렇게 꽉 채운 화면은 정성껏 만든 것처럼 보이지만, 정작 손님의 눈에는 어디부터 봐야 할지 모를 빽빽한 벽으로 다가옵니다. 여백은 비워서 버리는 자리가 아니라, 손님의 시선을 이끌기 위해 일부러 남겨두는 설계입니다. 작은 회사 웹사이트가 여백을 무기로 바꾸는 5가지 원칙을 정리했습니다.
1. 여백은 '비어 있음'이 아니라 '여기를 보라'는 신호다
중요한 제목이나 버튼 주위를 넉넉히 비우면, 손님의 눈은 자연스럽게 그 빈 곳 한가운데로 모입니다. 반대로 사방을 다른 요소로 둘러싸면 아무리 큰 글씨도 묻혀 버립니다. 강조하고 싶은 것일수록 색이나 크기보다 먼저 주변을 비우세요. 여백은 가장 조용하면서도 가장 강력한 강조 수단입니다.
2. 가까이 둘 것과 멀리 둘 것 — 여백이 관계를 말한다
사람은 가까이 붙어 있는 것을 한 묶음으로 받아들입니다. 제목과 그에 딸린 설명은 바짝 붙이고, 서로 다른 항목 사이에는 넉넉한 틈을 둬야 합니다. 흔한 실수는 모든 간격을 똑같이 주는 것입니다.
- 묶을 것: 소제목과 본문, 사진과 그 설명, 가격과 상품명
- 떼어낼 것: 서로 다른 메뉴, 서로 다른 섹션, 본문과 다음 항목
선이나 박스를 긋기 전에, 간격만 조절해도 정보의 구조가 또렷해집니다.
3. 글은 줄과 문단 사이에 숨 쉴 틈이 있어야 읽힌다
줄 간격이 빽빽하면 눈이 다음 줄을 못 찾고 같은 줄을 다시 읽게 됩니다. 본문 글자라면 줄 간격은 글자 크기의 1.6배 안팎, 문단과 문단 사이에는 한 줄 정도의 빈 공간을 두는 것이 편안합니다. 특히 모바일에서는 한 줄에 너무 많은 글자가 들어가지 않도록 좌우 여백을 충분히 주어야 손님이 끝까지 읽습니다.
4. 중요한 버튼일수록 주변을 비워라
문의·예약·전화 같은 핵심 버튼은 다른 요소와 딱 붙어 있으면 눈에 들어오지 않고, 손가락도 엉뚱한 곳을 누릅니다. 버튼 위아래로 넉넉한 여백을 두면 시선이 머물고 누르기도 쉬워집니다. 여백은 '여기를 누르세요'라는 무언의 안내입니다. 가장 바라는 행동일수록 그 주위를 비워 두세요.
5. 여백에도 기준 단위를 정해 일관되게
어떤 곳은 12px, 어떤 곳은 17px처럼 간격이 제멋대로면 화면이 미묘하게 어수선해집니다. 8px의 배수(8·16·24·32…)처럼 기준 단위를 하나 정해 모든 간격에 적용하면, 손님이 의식하지 못하는 사이에 화면이 정돈되어 보입니다. 일관된 여백은 '잘 만든 곳'이라는 신뢰로 이어집니다.
채우는 것보다 비우는 것이 더 어렵습니다
좋은 디자인은 무엇을 넣을지가 아니라 무엇을 덜어낼지에서 갈립니다. 빈 공간을 견디지 못하고 자꾸 채우려는 마음을 내려놓는 순간, 화면은 비로소 숨을 쉬고 손님의 눈도 편안해집니다. CYAN은 작은 회사의 홈페이지를 만들 때 무엇을 채울지만큼 어디를 비울지를 함께 고민합니다. 화면이 답답하게 느껴진다면, 콘텐츠를 더하기 전에 여백부터 점검해 보시길 권합니다.