화이트스페이스(여백) (White Space)

한 줄 정의: 디자인 요소들 사이에 의도적으로 남겨두는 빈 공간으로, 시각적 휴식과 정보 위계 형성에 기여한다.

쉽게 풀면

아무것도 없는 빈 공간을 일부러 남겨서 디자인이 답답하지 않고 정돈되어 보이게 만드는 것이다.

왜 중요한가

여백은 요소가 배치되지 않은 빈 공간을 뜻하며, 단순히 비어 있는 부분이 아니라 정보 간 관계를 명확히 하고 시각적 호흡을 만들어 가독성과 고급스러운 인상을 좌우하는 적극적 디자인 요소로 다뤄진다. 애플의 인터페이스 디자인이 넉넉한 여백을 통해 절제되고 프리미엄한 브랜드 인상을 구축한 사례로 자주 언급된다.

여백은 요소와 요소 사이의 관계뿐 아니라 텍스트 문단 내부의 행간과 자간까지 포함하는 미세 여백부터, 섹션과 섹션을 가르는 거시 여백까지 여러 층위로 나뉘어 각기 다른 설계 판단이 필요하다.

여백이 부족한 레이아웃에 콘텐츠를 추가로 채워 넣고 싶을 때는 여백을 줄이기보다 불필요한 요소 자체를 제거하는 것이 정보 위계를 지키는 올바른 접근으로 권장된다.

모바일처럼 화면이 좁은 환경에서는 여백을 인쇄물과 똑같은 비율로 유지하면 콘텐츠 영역이 지나치게 좁아져, 화면 크기에 따라 여백 비율 자체를 축소하는 조정이 필요하다. 터치 인터페이스에서는 여백이 곧 오조작을 막는 안전지대 역할도 하므로 순수한 미적 요소를 넘어 조작 정확도에도 직접 관여한다.

핵심 정리

화이트스페이스(여백)는 요소와 요소 사이, 요소 주변에 의도적으로 비워 둔 영역입니다. 이름과 달리 흰색일 필요는 없고, 배경색이나 배경 이미지가 있어도 “요소가 놓이지 않은 부분”이면 여백입니다.
크기에 따라 두 층위로 나눕니다. 미세 여백은 자간·행간·단락 간격·버튼 안쪽 간격처럼 요소 내부와 바로 곁에 있는 간격이고, 거시 여백은 섹션 사이, 페이지 가장자리, 콘텐츠 블록 사이의 큰 간격입니다.
하는 일은 크게 네 가지입니다. ① 가까운 것끼리 묶고 먼 것끼리 나눕니다(근접성의 원리). ② 무엇을 먼저 볼지 정합니다(시각적 위계). ③ 글을 읽기 쉽게 합니다(타이포그래피). ④ 차분하거나 고급스러운 인상을 줍니다.
광고 연구에서 여백은 단순한 빈칸이 아니라 의미를 전하는 장치로 다뤄집니다. Pracejus, Olsen, O’Guinn(2006)은 인쇄 광고의 여백이 역사적으로 어떤 의미(예: 고급스러움·절제)를 얻어 왔는지를 수사학적으로 논의했습니다.

예시로 보기

실제 설계에서 볼 수 있는 장면

장면	여백이 하는 일	확인할 점
본문 단락	행간·단락 간격이 줄 사이를 구분해 시선이 줄을 따라가게 합니다.	너무 좁으면 줄을 놓치고, 너무 넓으면 줄이 서로 이어져 보이지 않습니다.
카드·목록 UI	카드 안쪽 간격은 한 묶음임을, 카드 사이 간격은 서로 다른 묶음임을 알립니다.	안쪽 간격이 바깥 간격보다 작아야 묶음이 보입니다. 같거나 반대면 어느 제목이 어느 내용의 것인지 헷갈립니다.
버튼·링크 주변	눌러야 할 대상 사이의 간격이 오조작을 줄입니다.	좁은 화면에서는 간격을 줄이더라도 누르는 영역 자체는 확보해야 합니다.
랜딩 페이지	한 화면에 한 가지 메시지가 보이도록 섹션을 나눕니다.	여백이 너무 크면 중요한 정보가 화면 아래로 밀립니다.

접근성 지침 WCAG 2.1의 성공 기준 1.4.12(텍스트 간격)는 사용자가 행간을 글자 크기의 1.5배 등으로 바꿔도 내용이 잘리거나 겹치지 않아야 한다고 요구합니다. 여백이 “보기 좋은 장식”을 넘어 사용자가 조절할 수 있어야 하는 읽기 조건이기도 하다는 뜻입니다(W3C, 2018).

자주 하는 오해

오해	바로잡기
여백은 낭비되는 공간이다.	여백은 정보의 관계와 순서를 만드는 데 쓰이는 설계 요소입니다. 비어 있어도 하는 일이 있습니다.
여백은 클수록 좋다.	지나치면 관련된 요소가 떨어져 보이고, 스크롤이 늘며, 핵심 정보가 첫 화면 밖으로 밀립니다. 목적과 화면 크기에 맞는 비율이 있습니다.
여백은 흰색이어야 한다.	배경색과 무관하게 요소 사이의 빈 공간을 뜻합니다. 어두운 배경의 디자인에도 여백은 있습니다.
여백이 많으면 전환율이 오른다.	한 실험의 결과를 모든 화면과 제품으로 일반화할 수 없습니다. 효과는 콘텐츠 양, 대상 사용자, 기기에 따라 달라지므로 실험 조건을 함께 읽어야 합니다.
여백과 패딩·마진은 같은 말이다.	여백은 효과를 가리키는 말이고, 패딩(요소 안쪽 간격)과 마진(요소 바깥 간격)은 그것을 구현하는 두 가지 수단입니다.

논문에서는 이렇게 쓰입니다

실제 논문에서

이 용어를 직접 쓴 국내 논문 문장을 아직 수집하지 못했습니다. 수집되는 대로 출처와 함께 싣겠습니다.

예시 문장

아래는 용어의 쓰임을 보여 주려고 만든 예시로, 실제 논문에서 가져온 문장이 아닙니다.

본 연구는 랜딩 페이지 전환율에 미치는 화이트스페이스 비율의 영향을 사용자 실험으로 검증하였다.

여백의 양이 사용자의 집중도와 행동 전환율에 어떤 영향을 미치는지 실험한 결과를 소개한다.

"레이아웃에 여백을 충분히 확보했을 때 사용자의 정보 탐색 속도와 만족도가 함께 높아졌다."

인터페이스 디자인의 가독성과 인지부하를 다루는 연구에서 여백 활용의 효과를 검증하는 맥락으로 등장한다.

조금 더 깊게 보면

여백을 단순히 남는 공간으로 취급해 콘텐츠로 채우려는 시도는 오히려 정보 위계를 무너뜨리고 가독성을 해칠 수 있어, 의도적으로 설계된 여백의 가치를 실무에서 이해시키는 것이 종종 클라이언트 설득의 과제가 된다.

근접성의 원리가 요소 간 거리로 그룹을 인식시키는 지각 이론이라면 여백은 그 원리를 실현하는 구체적 레이아웃 요소라는 관계로 이해할 수 있다.

여백은 요소 내부의 여백(패딩)과 요소 사이의 여백(마진)으로 구분되며, 이 둘을 혼용하면 같은 시각적 간격이라도 반응형 레이아웃에서 서로 다르게 반응해 의도치 않은 간격 붕괴가 생길 수 있다.

주의할 점

화이트스페이스는 반드시 흰색을 의미하지 않으며 배경색과 무관하게 요소 간 빈 공간 전체를 지칭한다.

헷갈리기 쉬운 용어

여백과 자주 함께 나오는 말들입니다.

용어	한 줄 설명	구별 포인트
네거티브 스페이스	주된 형태 주변·사이에 생기는 빈 공간	실무에서는 같은 뜻으로 쓰기도 하지만, 빈 공간이 형태로 읽히는 현상(도형과 배경의 관계)을 말할 때 더 자주 씁니다.
근접성의 원리	가까이 있는 요소를 한 묶음으로 보는 지각 원리	“왜 그렇게 보이는가”를 설명하는 원리이고, 여백은 그 원리를 구현하는 수단입니다.
시각적 위계	요소의 중요도 순서를 눈에 보이게 하는 원리	크기·색·위치와 함께 여백도 위계를 만드는 수단 중 하나입니다.
타이포그래피	글꼴·크기·자간·행간을 다루는 활동	자간·행간은 타이포그래피 안의 미세 여백입니다.

참고 문헌

Lidwell, W., Holden, K., & Butler, J. (2010). Universal Principles of Design (Rev. ed.). Rockport Publishers.
Pracejus, J. W., Olsen, G. D., & O’Guinn, T. C. (2006). How nothing became something: White space, rhetoric, history, and meaning. Journal of Consumer Research, 33(1), 82–90.
Bringhurst, R. (2004). The Elements of Typographic Style (3rd ed.). Hartley & Marks.
Kirkpatrick, A., O’Connor, J., Campbell, A., & Cooper, M. (Eds.). (2018). Web Content Accessibility Guidelines (WCAG) 2.1. W3C Recommendation.

표의 기준값은 위 문헌에 근거한 관례이며, 분야·학술지마다 다른 기준을 쓸 수 있습니다.