여백은 빈 공간이 아니라 정보다
디자인을 배울 때 흔히 듣는 말이 있다. "여백을 두려워하지 마라." 그런데 왜 여백이 가독성을 높인다고 하는 걸까. 단순히 "깔끔해 보여서"가 아니라, 실제로 뇌가 정보를 처리하는 방식과 관련이 있다. 이 글에서는 여백과 가독성의 관계를 인지심리학 연구를 바탕으로 정리하고, 어디까지가 검증된 근거이고 어디부터가 과장인지 구분한다.
줄 길이와 읽기 속도 — 비교적 탄탄한 근거
타이포그래피 연구에서 가장 오래되고 반복적으로 검증된 주제 중 하나가 "한 줄에 몇 글자를 담을 것인가"이다. 여러 연구와 업계 가이드라인이 공통적으로 언급하는 범위는 한 줄에 5075자(영문 기준)이며, 그중에서도 약 66자 부근이 안정적인 기준값으로 자주 인용된다. 이 권장치는 타이포그래퍼 로버트 브링허스트(Robert Bringhurst)의 고전적 가이드라인(4575자)까지 거슬러 올라간다. 실증 연구 쪽에서는 다이슨(Dyson)과 헤이즐그로브(Haselgrove)의 연구가 자주 인용되는데, 약 55자 내외의 중간 길이 줄이 빠른 읽기와 느린 읽기 모두에서 효과적이었다는 결과를 냈다. 줄이 너무 길면 다음 줄로 넘어갈 때 시선이 어디로 돌아가야 할지 잃기 쉽고(트래킹 피로), 반대로 너무 짧으면 읽기 리듬이 자주 끊긴다.
UX 리서치 기관 Baymard Institute의 실사용 조사도 이를 뒷받침한다. 한 줄에 80자를 넘는 상품 설명 텍스트는 60~70자 범위의 텍스트보다 훨씬 자주 건너뛰어졌다는 결과가 나왔다. 즉 좌우 여백(마진)을 어떻게 잡느냐가 곧 줄 길이를 결정하고, 이는 실제 읽기 속도와 이탈률에 영향을 준다는 점에서 여백은 미감이 아니라 기능이다.
역사적으로 더 자주 인용되는 연구로 콜린 휠던(Colin Wheildon)의 "Type & Layout"이 있다. 그는 수년에 걸친 조사에서 표준적 레이아웃(적절한 여백·자간·행간)을 지킨 지면과 그렇지 않은 지면 사이의 이해도 차이를 측정했고, 표준을 지킨 쪽의 이해도가 크게 높았다고 보고했다. 다만 이 연구는 방법론 공개가 제한적이어서 학계에서 재현성 논쟁이 있다는 점도 함께 알아둘 필요가 있다. 즉 절대적 수치로 인용하기보다는 방향성을 보여주는 참고 자료로 받아들이는 것이 안전하다.
인지부하 이론: 여백이 부족하면 뇌가 더 힘들어진다
교육심리학자 존 스웰러(John Sweller)가 1988년에 제시한 인지부하 이론(Cognitive Load Theory)은 UX 디자인에서도 널리 인용된다. 핵심은 인간의 작업기억(working memory)이 용량과 지속시간에 제한이 있고, 새로운 정보는 모두 이 제한된 작업기억을 거쳐야 장기기억으로 넘어간다는 것이다. 이론은 부하를 세 가지로 나눈다.
- 내재적 부하(intrinsic load): 콘텐츠 자체의 복잡도
- 외재적 부하(extraneous load): 정보가 제시되는 방식(레이아웃, 타이포그래피)에서 발생하는 불필요한 부담. 디자인으로 줄일 수 있는 영역
- 본질적 부하(germane load): 실제 이해·학습에 쓰이는 인지 자원
여기서 디자이너가 직접 통제할 수 있는 것이 외재적 부하다. 스웰러와 타르미지(Tarmizi)가 1988년 처음 보고한 "분리 주의 효과(split-attention effect)"는, 서로 관련된 정보(예: 도형과 그 설명)가 물리적으로 떨어져 있을 때 학습자가 이를 머릿속에서 통합해야 하는 추가 부담이 생긴다는 것을 보여준다. 이 부담은 관련 정보를 물리적으로 가깝게 배치하면 줄어들거나 사라진다. 여백은 이 통합 부담을 줄이는 가장 직접적인 도구다. 정보 블록 사이에 적절한 여백이 있으면 사용자는 콘텐츠 이해에만 작업기억을 쓸 수 있다.
게슈탈트 근접성 원리 — 여백이 그룹을 만든다
게슈탈트 심리학의 근접성 법칙(Law of Proximity)은 여백이 가독성뿐 아니라 정보 구조 인식에도 관여한다는 것을 보여준다. Nielsen Norman Group(NN/g)은 서로 가까이 배치된 요소는 하나의 그룹으로 인식되고, 멀리 떨어진 요소는 관계없는 것으로 인식된다고 설명한다. 근접성은 그룹핑 원리 중에서도 특히 강력해서, 색이나 모양의 유사성 같은 경쟁 신호보다도 우선해서 작동하는 경우가 많다. 즉 여백의 크기 자체가 "이 텍스트와 저 텍스트는 관련이 있다" 또는 "이건 별개의 섹션이다"라는 정보를 무언어로 전달한다.
NN/g는 특히 폼(form) 디자인에서 이 원리가 중요하다고 강조한다. 라벨과 입력창 사이의 간격이 필드 그룹 간 간격과 비슷하면 사용자는 어떤 라벨이 어떤 입력창에 속하는지 혼동한다. 반대로 그룹 간 여백을 그룹 내 여백보다 명확히 크게 두면, 복잡한 작업에서도 인지부하를 줄일 수 있다.
실제 UI 사례로 보는 여백의 효과
애플 제품 상세 페이지는 여백을 적극적으로 활용하는 대표 사례다. 한 화면에 한두 개의 핵심 메시지만 배치하고 나머지는 넓은 여백으로 채운다. 이는 단순히 미니멀한 미감을 위해서가 아니라, 사용자가 스크롤하며 하나의 메시지에만 시선을 집중하도록 유도해 외재적 인지부하를 최소화하는 전략으로 볼 수 있다.
미디엄(Medium) 같은 아티클 레이아웃은 본문 컬럼 폭을 의도적으로 좁게 제한한다. 이는 앞서 살펴본 줄 길이 연구와 정확히 일치하는 설계로, 넓은 모니터에서도 좌우에 넉넉한 여백을 남겨 시선이 줄 끝에서 헤매지 않도록 돕는다.
반면 정보를 빼곡하게 채운 랜딩 페이지(할인 배너, CTA 버튼, 팝업이 동시에 노출되는 이커머스 페이지 등)는 근접성 원리가 무너진 대표 사례다. 관련 없는 요소들이 비슷한 간격으로 붙어 있으면 사용자는 어떤 정보가 중요한지 스스로 판단해야 하고, 이 판단 과정 자체가 추가적인 인지부하로 작용한다.
모바일 앱의 입력 폼 역시 여백 설계가 사용성에 직결되는 영역이다. 라벨-입력창 간격이 좁고 필드 간 여백이 일정하지 않으면 사용자는 실수로 잘못된 필드를 탭하거나 필수 항목을 헷갈려 한다. 반대로 필드 그룹별로 여백을 위계화하면(그룹 내부는 좁게, 그룹 사이는 넓게) 근접성 원리에 따라 자연스럽게 정보가 조직화되어 보인다.
실무 체크리스트
- 줄 길이: 본문 텍스트는 한 줄에 45
75자(한글 기준 약 3040자) 내외로 유지한다. 넓은 화면에서는 컬럼 폭을 제한하거나 좌우 여백을 늘린다. - 행간(line-height): 본문은 폰트 크기의 1.4~1.8배 정도를 기본값으로 검토한다. 행간이 좁으면 줄 사이 여백이 부족해 다음 줄을 찾기 어렵다.
- 문단 간격: 문단과 문단 사이에는 줄 간격보다 명확히 큰 여백을 둔다. 문단 내부 줄 간격과 문단 간 간격이 비슷하면 근접성 원리가 깨져 글이 하나의 덩어리로 보인다.
- 그룹 간 여백 위계: 관련된 요소(라벨+입력창, 제목+설명)는 가깝게, 관련 없는 섹션은 명확히 멀게 배치한다. 여백의 차이가 곧 정보 구조의 신호다.
- 화면당 정보량: 한 화면(또는 한 스크롤 영역)에 담는 핵심 메시지는 최소화한다. 동시에 처리해야 할 정보가 많을수록 외재적 인지부하가 커진다.
- 여백을 빈 공간 낭비로 보지 않기: 여백을 줄여 정보를 더 채워 넣고 싶은 유혹이 있을 때마다, 그것이 콘텐츠 이해를 돕는지 아니면 단순히 밀도만 높이는지 구분한다.
과장된 주장은 걸러서 보기
인터넷에는 "여백을 늘리면 이해도가 몇 %p 상승한다"는 식의 구체적인 수치를 내세우는 글이 많다. 하지만 이번 조사에서는 그런 정량적 인과관계를 직접 입증한 신뢰할 만한 1차 연구를 확인하지 못했다. 반면 줄 길이와 읽기 속도·이탈률의 관계, 인지부하 이론의 작업기억 제약, 게슈탈트 근접성 원리는 여러 독립적인 출처에서 일관되게 뒷받침되는 내용이었다. 여백을 설계할 때는 "여백=무조건 좋음"이라는 단순한 공식보다, 여백이 실제로 어떤 인지적 부담을 줄여주는지를 구체적으로 따져보는 태도가 더 유용하다.