좋은 자료를 빠짐없이 보여주고 싶은 마음에 화면을 요소로 가득 채우는 사장님이 많다. 그런데 정작 고객은 빼곡한 화면 앞에서 무엇부터 봐야 할지 몰라 그냥 뒤로 가기를 누른다. 여백은 비어 있는 실패가 아니라, 고객의 시선이 중요한 곳에 멈추도록 설계된 공간이다. 작은 회사 웹사이트가 여백으로 가독성과 신뢰를 만드는 다섯 가지 원칙을 정리했다.
1. 여백은 '버리는 공간'이 아니라 '시선을 모으는 공간'이다
요소 주위에 충분한 여백이 있으면 고객의 눈은 자연스럽게 그 요소에 집중한다. 명품 매장이 진열대 하나에 상품 하나만 올려두는 것과 같은 원리다. 가장 보여주고 싶은 핵심 버튼이나 대표 이미지 주위는 일부러 비워 두자. 화면을 꽉 채우는 순간 모든 요소가 똑같이 평범해진다.
2. 요소 사이 간격에 '규칙'을 둔다
여백이 들쭉날쭉하면 정돈되지 않은 인상을 준다. 8px의 배수(8, 16, 24, 32px)처럼 일정한 간격 체계를 정해 두고 반복하면, 특별히 꾸미지 않아도 화면이 단정해 보인다.
- 관련 있는 요소는 가깝게 — 제목과 본문, 라벨과 입력칸은 붙여 한 덩어리로 보이게 한다.
- 관련 없는 요소는 멀게 — 서로 다른 섹션 사이는 넉넉히 띄워 경계를 만든다.
3. 글이 숨 쉴 수 있는 줄 간격과 여백을 준다
한글 본문은 줄 간격을 글자 크기의 1.6~1.8배로 두고, 한 줄이 너무 길지 않게 좌우 여백을 확보해야 읽힌다. 줄이 화면 끝까지 꽉 차면 눈이 다음 줄을 찾다 지친다. 문단과 문단 사이의 빈 줄 하나가 글의 가독성을 결정한다.
4. 모바일에서는 여백을 '손가락 기준'으로 다시 잰다
데스크톱에서 보기 좋던 여백이 모바일에서는 답답하거나 반대로 너무 휑해 보일 수 있다. 모바일에서는 화면 좌우 16~20px의 안전 여백을 두고, 버튼과 링크 사이는 손가락이 잘못 누르지 않도록 충분히 띄운다. 작은 화면일수록 여백이 곧 사용성이다.
5. '여백이 무섭다'는 마음을 버린다
빈 공간을 보면 뭔가 채워야 할 것 같지만, 노련한 디자인일수록 덜어내는 데서 완성된다. 배너 하나, 문구 한 줄을 더 넣기 전에 "이것이 없으면 고객이 정말 곤란한가"를 물어보자. 대부분은 없어도 된다. 비울수록 남은 것이 또렷해진다.
정리하며
여백은 디자인 예산이 적은 작은 회사일수록 더 강력한 무기다. 비싼 그래픽 없이도 정돈된 간격과 넉넉한 공간만으로 '제대로 만든 사이트'라는 인상을 줄 수 있기 때문이다. CYAN 에이전시는 작은 회사의 웹사이트를 만들 때 화면을 채우기보다, 고객의 시선이 매출로 이어지도록 무엇을 비울지부터 함께 고민한다.