간격 시스템(스페이싱) — 4의 배수가 기본인 이유

간격 시스템이 없으면 패딩값으로 13px, 여백으로 22px 같은 애매한 숫자를 쓰게 됩니다. 개발자에게 전달할 때도 대충 “이 정도”라는 감각으로 넘기면 구현 결과가 디자인과 미묘하게 어긋납니다. 간격 시스템을 세워두면 여백과 패딩을 고를 때마다 새로 고민할 필요가 없어집니다.

1. 왜 4의 배수인가

많은 디자인 시스템이 4px 또는 8px를 기본 단위로 삼습니다. 대부분의 디바이스 해상도와 아이콘 그리드가 짝수 기반이라 4의 배수로 값을 정하면 반픽셀 렌더링 같은 미세한 어긋남이 줄어듭니다. 개발 쪽에서도 4배수는 rem 단위로 변환했을 때 계산이 깔끔해서 CSS 변수로 옮기기 수월합니다.

컴포넌트 내부와 레이아웃으로 나누기

같은 간격 시스템이라도 컴포넌트 내부 여백과 레이아웃 여백은 성격이 다릅니다. 용도별 범위를 나눠두면 디자이너가 값을 고를 때 헤매지 않습니다.

피그마의 오토레이아웃을 활용하면 이 값들을 컴포넌트에 바로 적용하면서 반응형 대응도 함께 처리할 수 있는데, 관련 내용은 피그마 오토레이아웃 완전 정복에서 자세히 다뤘습니다.

2. 토큰으로 관리하고, 예외는 명시적으로

간격 시스템 역시 컬러나 타이포그래피처럼 디자인 토큰으로 등록해두는 것이 좋습니다. space-100, space-200처럼 이름을 붙여 실제 픽셀 값과 분리해두면, 나중에 8px 기준에서 4px 기준으로 전환하는 것 같은 큰 변경도 토큰 값만 바꾸면 끝납니다. 하드코딩된 숫자를 화면 곳곳에 흩어놓으면 이런 전환이 사실상 불가능해집니다.

가장 흔한 실수는 시스템을 만들어놓고 예외를 너무 쉽게 허용하는 것입니다. “이번만 13px”같은 예외가 반복되면 시스템은 금방 무의미해집니다.

3. 왜 간격이 가장 자주 무너지는가

개발 단계에서도 간격은 유독 어긋나기 쉬운 값이다. 디자인 파일에서는 정확히 16px로 그려진 여백이, 실제 코드에서는 마진과 패딩이 겹치거나 부모 요소의 gap 속성과 함께 계산되면서 실제 화면에서는 다른 값으로 나타나는 경우가 흔하다. 컬러나 타이포그래피는 값 하나가 그대로 적용되지만, 간격은 여러 요소의 여백이 합쳐지거나 상쇄되는 방식으로 작동하기 때문에 구현 단계에서 어긋날 여지가 훨씬 크다. 컬러나 타이포그래피는 눈에 잘 띄기 때문에 리뷰 과정에서 벗어난 값이 상대적으로 쉽게 걸러진다. 간격은 다르다. 13px과 16px의 차이는 화면을 나란히 놓고 비교하지 않는 이상 거의 눈에 띄지 않기 때문에, 규칙에서 벗어난 값이 조용히 쌓여도 아무도 알아채지 못한다. 간격 시스템이 다른 어떤 영역보다 쉽게 무너지는 이유는 여기에 있다. 어긋남이 작고 조용하기 때문에, 발견됐을 때는 이미 화면 곳곳에 퍼져 있는 경우가 많다.

흔한 오해는 간격을 “디자이너의 감각에 맡겨도 되는 영역”으로 여기는 것이다. 실제로는 오히려 간격이야말로 가장 엄격하게 규칙화해야 하는 값이다. 컬러나 폰트는 브랜드에 따라 다양성을 가질 수 있지만, 여백과 패딩은 화면 전체의 리듬을 만드는 요소이기 때문에 규칙에서 벗어나는 순간 전체적인 정돈감이 흔들린다.

• 기본 단위를 4px 또는 8px 하나로 통일하기
• 컴포넌트 내부용과 레이아웃용 범위 구분하기
• 간격 값을 이름 붙인 토큰으로 등록하기
• 오토레이아웃 등 실제 도구에 값 적용해 검증하기
• 예외 발생 시 별도 토큰으로 명시하기

간격 토큰이 자리 잡으면 컴포넌트를 새로 만들 때마다 여백을 재는 대신 정해진 값 중에서 고르기만 하면 된다. 이 과정이 익숙해지면 컬러나 타이포그래피에서도 같은 방식, 즉 값을 직접 정하지 않고 토큰에서 선택하는 습관이 자연스럽게 퍼진다. 간격은 눈에 잘 띄지 않는 만큼, 오히려 시스템 전체가 얼마나 잘 지켜지고 있는지를 보여주는 가장 정직한 지표이기도 하다.

4. 마치며

간격 시스템은 화면에서 가장 눈에 안 띄지만 가장 자주 어긋나는 부분입니다. 4의 배수라는 단순한 규칙 하나만 지켜도 여백 관련 논쟁의 상당수가 사라집니다. 다음 리뷰에서는 컬러와 폰트뿐 아니라 간격 값도 함께 확인해보세요.