[UI 디자인] 간격 규칙

UI 디자인에서 간격은 단순한 여백이 아니라,
화면 전체의 구조와 리듬을 결정하는 중요한 요소입니다.
특히 “간격 규칙(Spacing Rule)”을 사용하면
디자인이 더 빠르고, 더 깔끔하고, 더 협업하기 좋은 형태로 만들어집니다.

 

1. 간격 규칙이란 무엇일까?

간격 규칙은 **8px, 16px, 24px…**처럼
정해진 숫자의 배수만 사용해 여백을 설정하는 방식을 말합니다.

 

이 규칙을 사용하면
여백을 일일이 재고 판단할 필요 없이
정해진 스케일 안에서 반복적으로 선택하기만 하면 되기 때문에
디자인 속도가 훨씬 빨라집니다.

 

2.  간격 규칙이 가지는 장점

1️⃣  불필요한 선택이 줄어든다

 

“여긴 11px? 13px? 17px?”
이런 고민을 할 필요가 없습니다.
정해진 간격에서 고르는 것만으로도 충분합니다.

 

2️⃣  UI 전체가 더 일관적이 된다

 

같은 스케일로 구성된 간격은
전체 화면의 리듬을 맞추고,
사용자가 정보를 읽고 해석하기 쉽게 만들어줍니다.

 

3️⃣  협업이 훨씬 쉬워진다

 

디자이너가 8px 단위를 쓰면
개발자도 “아, 이 간격은 8의 배수겠네” 하고 금방 이해합니다.
서로 같은 언어를 쓰게 되는 것이죠.

간격 규칙 적용 예시

 

3. 왜 하필 ‘8px’일까?

많은 디자인 시스템이 8px을 기본 단위로 사용하는 이유는
과거의 8pt 그리드 시스템에서 시작되었습니다.

 

대부분의 화면 크기(1920, 1366, 1280, 1024, 768…)가
8로 동등하게 나누어졌기 때문입니다.
즉, 여러 해상도에서 안정적으로 적용할 수 있는 숫자가 8px이었기 때문이죠.

 

또한 8px은 너무 크지도 작지도 않아
UI에서 간격을 조절하기 좋은 단위였습니다.

Hard Grid 예시

 

 

4. 꼭 8px만 사용해야 하는 건 아니다

요즘은 Hard Grid(딱딱한 8px 정렬)보다
**Soft Grid(간격 규칙만 사용하는 유연한 방식)**를 더 많이 사용합니다.

그래서 팀과 제품의 특성에 맞게

• 4px
• 5px
• 10px

같은 다른 단위를 사용하는 경우도 많습니다.

더 작은 수를 쓰면 더 세밀하게 간격을 조절할 수 있지만
그만큼 선택지가 많아져 고민할 거리도 늘어난다는 점은 참고해야 합니다.

 

 

 

정리하면

 

간격 규칙은 UI 디자인의 속도와 일관성을 높이는 핵심 원리이며,
많은 팀이 8px을 쓰지만 반드시 8px만 고집할 필요는 없다.