디자인에서 여백(Space)은 단순히 공간을 비워두는 일이 아니다. 그건 보는 사람의 시선을 통제하고, 의미를 숨 쉬게 하는 기술이다. 많은 주니어 디자이너가 화면을 채우려 한다. 글자, 이미지, 아이콘, 그라데이션까지 가능한 한 꽉 채워 넣는다. ‘비어 있으면 허전해 보여서’라는 이유로.
하지만 역설적으로, 좋은 디자인은 얼마나 비워둘 줄 아는가로 완성된다.
여백은 시선의 휴식이다.
사람의 눈은 한 번에 모든 정보를 인식하지 못한다. 그래서 여백이 리듬을 만들어 준다. 시선이 멈추고, 이동하고, 다시 멈출 수 있도록 박자를 제공한다. 그래픽의 리듬은 결국 이 여백에서 결정된다.
여백은 감정을 말한다.
넓게 비운 화면은 고요하고 자신감 있다. 반대로 좁게 비워둔 화면은 밀도 있고 에너지 넘친다. 같은 이미지라도 ‘얼마나 숨 쉴 공간을 주느냐’에 따라 완전히 다른 인상을 남긴다.
예를 들어, 명품 브랜드의 패키지는 대부분 광활한 여백을 가진다. 로고는 작고, 중심에서 살짝 벗어나 있다. 그 작은 불균형이 오히려 여유로움을 만든다. ‘나는 굳이 설명하지 않아도 되는 브랜드야’라는 자신감의 표현이다. 반대로 B급 감성의 디자인은 여백을 거의 남기지 않는다. 색과 형태가 서로 부딪히며 에너지를 만든다.
정보의 과잉 속에서도 통제된 혼란이 하나의 스타일로 작동한다. 여백은 없지만, 대신 밀도가 있다.
즉, 여백은 ‘있음’과 ‘없음’ 모두에서 미학이 성립된다.
화이트 스페이싱(White Spacing)은 말 그대로 공백의 디자인이다. 여기서 말하는 white는 색이 아니라 공간의 질감을 의미한다. 즉, 단순히 흰색 배경이 아니라 요소와 요소 사이의 간격 전체가 화이트 스페이싱이다. 화이트 스페이싱은 레이아웃의 중심축을 세운다. 텍스트, 이미지, 버튼이 아무리 많아도 간격만 잘 잡히면 정돈된 인상이 만들어진다.
이 간격이 바로 시각적 질서의 핵심이다.
너무 좁으면 답답하고, 너무 넓으면 연결이 끊긴다. 그래서 숙련된 디자이너는 픽셀 단위로 간격을 조정한다. 그건 단순한 감이 아니라, 정보의 위계를 시각적으로 번역하는 과정이다.
예를 들어 카드형 UI를 생각해보자. 텍스트와 이미지의 여백, 버튼과 본문 간격, 카드 간의 마진—all 이게 화이트 스페이싱이다. 디자인 시스템에서 Spacing Token(예: 4px, 8px, 16px, 24px)을 정하는 이유도 여기에 있다. 간격이 곧 브랜드의 언어가 되기 때문이다.
좋은 여백(Space)을 위한 디자인 방식
1. 레이아웃보다 간격을 먼저 설계하기: 프레임을 채우기 전에 margin, padding, grid 단위를 먼저 정의하라.
2. 간격의 일관성을 유지하기: 8px 단위 시스템을 기준으로 spacing scale을 통일하면 ‘정돈된 브랜드 감각’이 생긴다.
3. 비어 있음의 용기를 가지기: 여백이 많아 보여도, 시선이 잘 흐른다면 그건 완성된 디자인이다.
오늘의 정리 —
여백(Space)은 ‘보이지 않는 디자인 시스템’이다. 간격이 곧 브랜드의 언어다.
alpha lab UX/UI 디자이너로서 배운 것, 경험한 것, 그리고 디자인 여정에서 얻은 인사이트를 나누고자 합니다.