간격은 색보다 조용히 무너집니다. 색이 틀리면 눈에 띄지만, 간격이 12px 여야 할 자리에 13px 이 들어가면 아무도 지적하지 못합니다. 다만 화면 전체가 어딘가 정돈되지 않은 느낌으로 남습니다. 원인을 지목할 수 없는 종류의 어긋남입니다.
왜 4의 배수인가
간격 척도를 4의 배수로 잡는 이유는 미학이 아니라 선택지를 줄이기 위해서입니다. 0부터 96까지 자유롭게 고르면 후보가 97개지만, 4의 배수로 제한하고 큰 쪽을 성기게 두면 후보가 열두어 개로 줍니다. 후보가 적으면 결정이 빨라지고, 같은 상황에서 같은 값이 선택될 확률이 올라갑니다 — 그것이 곧 일관성입니다.
실용적인 이유도 있습니다. 4는 흔한 본문 크기(16px)와 나누어떨어지고, 화면 배율이 1.25배나 1.5배가 되어도 소수점이 덜 생깁니다.
작은 값은 촘촘하게(4 · 8 · 12 · 16), 큰 값은 성기게(48 · 64 · 80 · 96) 둡니다. 4px 차이는 아이콘과 글자 사이에서는 확실히 보이지만 섹션 사이에서는 아무도 못 느낍니다. 척도는 등차수열이 아니라 지각에 맞춘 수열이어야 합니다.
세 가지 간격만 정하면 대부분 끝납니다
척도를 만들었다고 모든 자리에 자유롭게 쓰는 것은 아닙니다. 레이아웃의 간격은 사실상 세 종류입니다.
요소 사이는 아이콘과 라벨, 제목과 부제처럼 한 덩어리로 읽혀야 하는 것들 사이입니다. 블록 사이는 카드와 카드, 문단과 문단처럼 서로 다른 덩어리 사이입니다. 섹션 사이는 화면의 장면이 바뀌는 자리입니다. 이 세 값을 토큰으로 고정해 두면 새 컴포넌트를 만들 때 간격을 고민할 일이 거의 없어집니다.
예외 하나가 척도 전체를 무효로 만듭니다
어느 화면에서 제목이 조금 붙어 보여 margin-top: 13px 을 넣습니다. 그 자체로는 아무 문제가 없습니다. 문제는 그다음입니다 — 다음 사람이 그 코드를 보고 “여기서는 척도를 안 쓰는구나” 라고 배웁니다.
정말로 그 자리에 13px 이 필요하다면 척도에 값이 부족한 것입니다. 척도를 고치는 쪽을 택하세요. 척도 수정은 한 줄이고, 예외는 영원히 늘어납니다.
워드프레스에서는 여기에 한 가지가 더 붙습니다 — 편집자가 스페이서 블록으로 임의의 간격을 만들 수 있다는 점입니다. 그 값은 척도 밖에 있고, 화면에서만 드러납니다. 이 구멍을 닫는 방법이 5 · 6회차의 주제입니다.
레이아웃 구조가 성능과 만나는 지점은 테마 · 플러그인 아카이브에 이어지고, 실제 작업에서 이런 규약을 어떻게 세우고 검증하는지는 작업 과정에 절차 그대로 공개돼 있습니다.
다음 회차
색과 간격의 목록이 생겼습니다. 다음 회차는 그것을 실제 테마에 심는 방법 — CSS 커스텀 프로퍼티로 :root 한 곳에서 사이트 전체가 바뀌게 만듭니다.