텍스트가 안 읽히는 이유는 글자 수가 아닐 수 있습니다
같은 문장을 두 화면에 놓아 보세요. 한쪽은 제목·본문·링크·버튼이 서로 붙어 있고, 다른 쪽은 관련된 요소가 가깝고 생각이 바뀌는 곳에 큰 간격이 있습니다. 말은 같아도 두 번째 화면이 훨씬 덜 피곤합니다.
화이트스페이스는 빈 장식이 아닙니다. 무엇을 함께 읽고, 무엇을 구분할지 알려 주는 구조입니다.
먼저 답: 여백은 정보량이 아니라 읽는 부담을 줄입니다
빽빽한 화면에서는 내용을 이해하기 전부터 라벨, 테두리, 배지, 버튼을 분류해야 합니다. 이 시각적 경쟁이 인지 부담을 키웁니다. 적절한 간격은 다음 문장과 주요 행동을 찾기 쉽게 만듭니다.
단, 여백은 모호한 문장이나 약한 대비를 고쳐 주지 않습니다. 명확한 구조를 더 잘 보이게 하는 증폭기라고 생각하세요.
읽기 흐름을 바꾸는 세 가지 규칙
같은 생각은 가깝게, 다른 생각은 멀게
사람은 가까운 요소를 한 그룹으로 봅니다. 카드의 제목·설명·버튼은 가깝게, 다음 카드 전에는 더 큰 간격을 둡니다. px 하나를 외우기보다 관계를 만드세요.
- 제목은 자신이 소개하는 첫 문단에 더 가깝게 둡니다.
- 레이블은 자기 입력칸에 더 가깝게 둡니다.
- 그룹 안의 간격과 그룹 사이의 간격을 같게 두지 않습니다.
문단에 ‘생각이 끝났다’는 신호를 줍니다
행간과 문단 간격이 비슷하면 긴 글은 벽처럼 보입니다. 한 문단에는 한 주장만 두고, 주제가 바뀌면 소제목이나 더 큰 간격을 줍니다. 독자는 멈추지 않고도 위치를 찾습니다.
모바일에서 다시 확인합니다
데스크톱에서 예쁜 여백은 모바일에서 답답할 수 있습니다. 한 줄 길이, 문단 간격, 링크와 CTA의 존재감, 텍스트 간격 확대 후의 레이아웃을 함께 확인하세요.
5분 여백 진단
화면을 축소해서도 다음이 보이면 구조가 살아 있습니다.
- 시선이 제목 → 설명 → 주요 CTA로 흐르는가
- 같은 카드·폼·문단의 요소가 한 묶음으로 보이는가
- 주제나 작업이 바뀌는 곳에 한 박자 쉬는 간격이 있는가
- 테두리와 색을 줄여도 소속이 보이는가
- 확대와 모바일 폭에서도 이 질서가 유지되는가
결론: 여백의 질문을 바꾸세요
“여백을 더 넣을까?” 대신 묻습니다. 이 간격이 묶어야 할 것과 구분해야 할 것을 더 분명하게 만드는가? 답이 예라면, 여백은 미관이 아니라 가독성의 도구입니다.
참고: W3C Cognitive Accessibility—Use White Space. 이는 고정된 픽셀 처방이 아니라 설계 판단을 돕는 패턴입니다.