간격 스케일

여백은 오랫동안 눈으로 맞췄습니다. 제목과 본문 사이가 좁아 보이면 벌리고 넓어 보이면 줄이는 식이라, 시안 한 장에 13, 14, 16, 18 처럼 어중간하게 다른 값이 섞였습니다. 왜 18인지는 만든 사람도 설명하지 못했습니다.

문제는 그 값이 코드로 넘어가면서 커집니다. 개발자는 시안에서 거리를 재 숫자를 그대로 적으니, 같은 모양의 카드가 화면마다 다른 여백을 갖습니다. 검수 자리에서 왜 18이냐고 물으면 그게 보기 좋았다는 답이 돌아오고, 그 답으로는 다음 화면에서 무엇을 쓸지가 정해지지 않습니다.

간격 스케일은 쓸 수 있는 값을 미리 정해 그 논쟁을 없앴습니다. 칸이 여덟 개뿐이면 13과 14 사이를 고민할 일이 사라집니다.

기준 단위 하나를 정하고 그 배수로만 표를 만듭니다. 4나 8을 기준으로 잡는 것이 관행이고, 4를 골랐다면 4, 8, 12, 16, 24, 32, 48, 64 같은 여덟 칸이 나옵니다.

지켜야 할 규칙은 셋입니다.

1. 표 밖의 값을 쓰지 않습니다. 18이 필요해 보이면 16이나 24 중 하나를 고릅니다. 예외를 한 번 허용하면 표는 참고 자료가 되고 다시 아무 숫자나 쓰이기 시작합니다.
2. 칸 사이가 눈에 보일 만큼 벌어져 있어야 합니다. 4, 5, 6, 7 처럼 촘촘하면 고르는 사람이 차이를 느끼지 못해 결국 감으로 고릅니다.
3. 값이 커질수록 칸 간격도 넓힙니다. 4에서 8은 두 배지만 60에서 64는 거의 같아 보입니다. 그래서 위쪽은 24, 32, 48, 64 처럼 띄어 둡니다.

표는 값이 아니라 이름으로 씁니다. space-4 같은 이름을 붙여 디자인 토큰으로 등록하면 디자인 도구와 코드가 같은 표를 봅니다. 열과 간격을 정해 둔 배치 틀인 그리드 시스템도 이 표에서 값을 가져오기 때문에, 컬럼 사이의 거터와 카드 안쪽 여백이 같은 눈금 위에 놓입니다.

"이 여백 18인데 스케일에 없는 값이에요. 16으로 맞출까요?"

표 밖의 값이 들어왔으니 가까운 칸으로 옮기자는 제안입니다.

"간격 스케일을 4 기준으로 갈까요, 8 기준으로 갈까요?"

기준 단위를 정하자는 말입니다. 8은 칸이 적어 관리가 쉽고 4는 촘촘한 조정이 됩니다.

"여백 값이 코드에 직접 박혀 있어서 스케일을 바꿔도 안 따라옵니다."

표를 이름으로 쓰지 않고 숫자로 적어 둔 곳이 남아 있다는 지적입니다.

페이지덱에서는 민서가 화면 40장의 여백 값을 전부 뽑아 세어 봤습니다. 서로 다른 값이 23개 나왔고 그중 9개는 한 번만 쓰인 값이었습니다. 4 기준 여덟 칸으로 표를 만들고 한 번만 쓰인 값은 가까운 칸으로 옮겼습니다. 태오는 그 여덟 칸만 코드에 등록하고 나머지 숫자를 지웠습니다.