간격 스케일

정의

간격 스케일은 여백에 쓰는 숫자를 아무렇게나 고르지 않고, 미리 정해 둔 단위의 배수만 사용하는 규칙입니다. 예를 들어 4·8·16·24·32처럼 일정한 간격의 값만 후보로 두고 그 안에서 고르는 방식입니다. 매번 마음대로 13px, 17px, 21px을 쓰는 대신 정해진 사다리의 칸 위에서만 값을 선택하는 셈입니다. 선택지가 몇 개로 줄어들면 결정이 빨라지고, 화면 곳곳의 여백이 서로 같은 기준을 공유하게 되어 전체에 일정한 리듬이 생깁니다. 이 리듬은 눈에 잘 띄지 않지만 화면이 정돈되어 보이는 결정적인 이유가 됩니다. 스케일은 여백뿐 아니라 요소 크기나 모서리 둥글기 같은 값에도 똑같이 적용해, 화면 전체가 하나의 일관된 체계 위에서 움직이게 만들 수 있습니다.

왜 중요한가

규칙 없이 정한 여백은 하나하나는 그럴듯해 보여도, 여러 개가 모이면 미묘하게 어긋나 화면 전체가 어수선해집니다. 사람 눈은 15px과 16px의 차이는 잘 못 느껴도, 값들이 제각각이라는 무질서함은 신기하게 알아챕니다. 스케일을 쓰면 이런 애매한 차이가 사라지고 모든 여백이 같은 기준 위에 정렬되어, 색이나 선을 더하지 않고도 화면이 정돈되어 보입니다. 또 값이 몇 개로 정해져 있으니 디자이너와 개발자가 '한 칸 더 띄워 주세요' 같은 공통 언어로 소통할 수 있고, 나중에 간격을 조정할 때도 규칙을 따라 예측 가능하게 바꿀 수 있어 유지보수가 훨씬 수월해집니다. 결국 스케일은 개인의 감각에 의존하던 여백을 팀이 함께 공유하는 시스템으로 바꿔 주는 장치입니다.

흔한 실수

• 스케일을 정해 놓고도 급할 때마다 예외 값을 끼워 넣는 것입니다. 한두 개의 예외가 쌓이면 어느새 규칙이 무너져, 스케일을 쓰지 않은 것과 다를 바 없어집니다.
• 단계를 너무 촘촘하게 만드는 것입니다. 4, 6, 8, 10, 12처럼 간격이 좁으면 값끼리 차이가 잘 안 보여 굳이 나눈 의미가 없고, 오히려 고를 때 더 헷갈립니다.
• 스케일을 문서로만 남기고 코드의 실제 값과 연결하지 않는 것입니다. 규칙과 코드가 따로 놀면 시간이 지나며 둘이 어긋나, 결국 아무도 규칙을 신뢰하지 않게 되고 다시 제각각 값을 쓰게 됩니다.

실무 팁

• 가장 널리 쓰이는 출발점은 8을 기본 단위로 삼는 '8포인트 그리드'입니다. 값이 8의 배수라 눈에 리듬이 생기고 15px 같은 애매한 값이 사라져, 디자이너와 개발자의 소통도 한결 쉬워집니다. 작은 여백이 필요하면 4를 보조 단위로 함께 쓰면 됩니다.
• 스케일 값에는 숫자 대신 토큰 이름을 붙여 쓰세요. 이름으로 부르면 나중에 기준 단위를 바꿔도 한곳만 고치면 전체에 반영되어, 여백 조정이 훨씬 안전해집니다. 이렇게 이름으로 관리하는 습관은 자연스럽게 디자인 토큰이라는 더 큰 체계로 이어집니다.

관련 개념