사장님들은 홈페이지에 담을 이야기가 참 많습니다. 그동안 쌓아 온 경력, 취급 품목, 자격증, 후기, 오시는 길까지 하나라도 빠지면 손해 같아서 화면 한 장에 빼곡히 밀어 넣습니다. 그런데 손님 입장에서 그렇게 꽉 찬 화면은 정보가 많은 곳이 아니라 어디부터 봐야 할지 모르겠는 곳입니다. 눈이 쉴 곳이 없으니 몇 초 훑다가 그냥 뒤로가기를 누릅니다. 여백은 비어서 아까운 공간이 아니라, 무엇을 보라고 손님의 눈길을 정리해 주는 설계입니다.
1. 여백은 '버리는 공간'이 아니라 '강조하는 도구'다
글자나 이미지 주변이 비어 있을수록 그 요소는 더 또렷하게 보입니다. 가장 중요한 문구, 예약 버튼, 대표 사진 하나에 넉넉한 여백을 두면 손님의 시선이 자연스럽게 그곳에 멈춥니다. 반대로 모든 것을 똑같이 강조하면 아무것도 강조되지 않습니다. 비운 만큼 남은 것이 눈에 띈다는 감각이 여백 설계의 출발점입니다.
2. 요소 사이 간격에 규칙을 정한다
여백이 들쭉날쭉하면 화면이 어수선해 보입니다. 8px을 기본 단위로 삼아 8·16·24·32처럼 간격을 배수로 통일하면, 특별히 화려하지 않아도 화면이 정돈되어 보입니다. 특히 관계가 가까운 요소는 붙이고, 다른 묶음끼리는 넉넉히 띄우는 것이 핵심입니다. 제목과 본문은 가깝게, 문단과 다음 섹션은 멀게 두면 손님이 굳이 읽지 않아도 구조가 눈에 들어옵니다.
3. 문단은 한 줄이 너무 길지 않게 폭을 잡는다
한 줄이 화면 끝까지 늘어지면 눈이 다음 줄 앞머리를 찾다가 지칩니다. 본문 한 줄은 한글 기준 대략 35~45자 안쪽으로 폭을 제한하고, 줄 간격은 글자 크기의 1.6~1.8배 정도로 띄우는 것이 편안합니다. 넓은 화면일수록 본문을 화면 전체에 붙이지 말고 가운데로 폭을 좁혀 좌우에 여백을 남기면 읽는 부담이 크게 줄어듭니다.
4. 모바일에서는 '손끝의 여백'을 챙긴다
손님 열에 여덟은 휴대폰으로 봅니다. 화면이 좁다고 버튼과 링크를 다닥다닥 붙이면 손가락이 자꾸 옆 버튼을 누릅니다. 누를 수 있는 요소는 최소 44px 이상 크기로 잡고 서로 충분히 띄워야 오작동이 줄어듭니다. 화면 좌우 가장자리에도 16~20px 정도 안쪽 여백을 두어 글자가 모서리에 붙지 않게 합니다.
5. '더 담기'보다 '덜어 내기'를 먼저 고민한다
여백이 부족한 진짜 이유는 대개 간격이 아니라 내용이 너무 많기 때문입니다. 첫 화면에 열 가지를 말하려 하면 결국 아무것도 전해지지 않습니다. 손님이 가장 먼저 알아야 할 한 문장, 다음으로 할 행동 하나만 남기고 나머지는 아래로 내리거나 별도 페이지로 미루세요. 덜어 낸 자리에 생긴 여백이 그 한 가지를 더 선명하게 만들어 줍니다.
여백은 돈이 아니라 판단으로 만든다
여백 설계에는 값비싼 디자인 비용이 들지 않습니다. 무엇을 남기고 무엇을 뒤로 미룰지 판단하는 일이 대부분입니다. 다만 이 판단은 사장님이 홈페이지를 만들 때는 유독 어렵습니다. 담고 싶은 이야기가 전부 소중하기 때문입니다. CYAN 에이전시는 작은 회사의 홈페이지를 만들 때 무엇을 더할지보다 무엇을 덜어 손님의 눈길을 어디에 모을지를 함께 정리합니다. 지금 홈페이지가 답답하게 느껴진다면, 내용을 더 넣기 전에 여백부터 살펴보시길 권합니다.
