핸드오프 문서에서 가장 흔한 형태는 화살표와 숫자입니다. 여기 24, 저기 32, 이 사이는 37. 정확해 보이지만 이 방식에는 두 가지 문제가 있습니다. 첫째, 그 숫자가 어디서 왔는지가 함께 넘어가지 않습니다. 둘째, 화살표를 그리지 않은 자리는 여전히 미정입니다.
37이라는 숫자를 받은 개발자는 그것을 그대로 씁니다. 그리고 다음 화면에서 비슷한 자리를 만들 때 무엇을 써야 할지 몰라 다시 물어봅니다. 숫자를 하나 넘길 때마다 질문 하나가 유예될 뿐입니다.
척도를 만든다는 것
척도는 쓸 수 있는 값의 전체 목록입니다. 4를 기준으로 배수를 늘려 가는 방식이 가장 널리 쓰입니다 — 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64처럼 작은 쪽은 촘촘하게, 큰 쪽은 성기게 둡니다. 작은 간격은 1~2px 차이도 눈에 보이지만 큰 간격은 8px 차이도 잘 안 보이기 때문입니다.
척도를 만들 때 흔한 실수는 단계를 너무 많이 두는 것입니다. 20과 24와 28이 모두 있으면 고르는 사람이 매번 망설이고, 망설임은 결국 화면마다 다른 선택으로 나타납니다. 열 단계 안팎이면 대부분의 사이트에 충분합니다.
척도가 있으면 그리지 않은 화면도 맞습니다
척도의 진짜 가치는 여기 있습니다. 개발자가 새 화면을 만들 때, 척도가 없으면 근처 화면에서 값을 베껴 옵니다. 베낀 값이 원래 예외였다면 예외가 복제되고, 그렇게 몇 번 반복되면 척도 밖의 값이 사실상의 기본값이 됩니다.
워드프레스 테마에서는 이 척도를 스타일 계층의 변수로 심어 둘 수 있습니다. 이름을 붙인 간격 단계가 스타일시트에 정의돼 있으면, 새 컴포넌트를 만들 때 숫자를 적는 대신 이름을 부르게 됩니다. 그 순간부터 척도 밖의 값을 쓰는 일은 의식적인 행동이 되고, 의식적인 행동은 리뷰에서 잡힙니다.
예외를 다루는 법
척도로 해결되지 않는 자리가 반드시 생깁니다. 로고의 시각적 정렬, 아이콘의 광학 보정처럼 눈으로 맞춰야 하는 값들입니다. 이때는 예외라고 명시합니다 — “이 값은 척도 밖이며 광학 보정 목적” 이라는 한 줄이면 충분합니다.
명시된 예외는 안전합니다. 위험한 것은 예외인지 실수인지 구분되지 않는 값이고, 그것은 다음 사람이 복제합니다.
토큰과 척도를 테마에 실제로 앉히는 방법은 개발 워크플로우 아카이브에서 더 다루고, 우리가 직접 만들어 쓰는 도구들은 무료 도구에서 받을 수 있습니다.
다음 회차
규칙이 다 넘어갔으면 이제 구현물을 볼 차례입니다. 다음 회차는 구현 리뷰 — 픽셀을 밀어 달라고 하는 대신 규칙 위반을 지적하는 방법입니다.