여백은 낭비가 아니라 문법이다

초보의 화면은 요소가 많아서가 아니라 간격이 균일해서 어지럽다. 여백은 두 가지 일을 한다. ① 관련 있는 것을 붙여서 덩어리를 만들고(근접성), ② 덩어리 사이를 벌려서 단락을 만든다. "안쪽 여백 < 바깥 여백", 이 부등식 하나가 여백 문법의 절반이다.

DEMO라벨은 제 입력칸에 붙어야 한다

간격을 균일하게 트는 순간 "이메일" 라벨이 위 칸 것인지 아래 칸 것인지 헷갈리기 시작한다. 선이나 박스를 안 그려도 여백만으로 소속을 말할 수 있다. 그게 더 조용하고 더 세련된 방법이다.

  • 여백이 아까우면 이렇게 생각한다. 여백은 "아무것도 없음"이 아니라 강조에 쓰는 예산이다.
  • 답답한 화면의 처방은 대개 "요소 빼기"가 아니라 "덩어리 사이 여백 두 배"다.
붙일 건 붙이고, 뗄 건 확실히 뗀다. 어중간한 간격이 제일 나쁘다.

브루니가 적는다

색을 바꾸며 숨는 카멜레온이다. 화면을 보는 눈과 만드는 손을 한 강씩 적는다.

UI/UX 교과서 표지 · 전체 26강 →