디자인 시스템에서 간격, 폰트 크기를 짝수(특히 8의 배수)로 설정하는 이유

디자인 시스템에서는 UI 구성 요소의 간격, 여백, 폰트 크기 등을 **짝수 단위, 특히 8의 배수(예: 8px, 16px, 24px)**로 설정하는 것이 일반적입니다. 이는 단순한 규칙이 아니라 해상도 대응, 일관성, 효율성, 시각적 안정성 등 다양한 관점에서 실질적인 이점을 제공합니다.

1. 다양한 해상도에서의 안정적인 렌더링

문제 상황

모바일이나 태블릿 등 다양한 디바이스는 해상도와 픽셀 밀도가 제각각입니다. 동일한 1px이라도 고해상도 디바이스(Retina 등)에서는 2px 이상으로 표시됩니다. 이때 기준이 되는 단위가 소수점으로 변환되면 UI가 뭉개지거나 번질 수 있습니다.

해결 방법

8, 4, 2 등 짝수 단위는 배율 변환 시 정수 단위로 변환되므로 UI가 선명하게 표시됩니다. 소수점 없이 정밀하게 계산되어 픽셀 단위의 오차 없이 안정적인 렌더링이 가능합니다.

예시

8px × 2배 해상도 = 16px → 선명하게 렌더링
5px × 1.5배 해상도 = 7.5px → 소수점 발생 → 흐릿하거나 뭉개질 수 있음

2. 디자인의 일관성과 협업 효율성

시스템화된 설계

디자인 시스템에서 간격과 폰트 크기를 8의 배수로 규칙화하면 모든 구성 요소가 일관된 레이아웃 기준을 따르게 되어 시각적 안정감과 예측 가능성이 확보됩니다.

협업 시 이점

디자이너는 공통된 기준을 활용해 컴포넌트를 설계하고, 개발자는 CSS 또는 디자인 토큰에서 동일한 수치를 활용함으로써 핸드오프 시 커뮤니케이션 비용을 줄일 수 있습니다.

예시

카드 컴포넌트의 내부 여백: padding: 16px
버튼 간의 간격: margin-right: 8px
텍스트 섹션 사이 간격: margin: 24px 0

3. 시각적 균형 및 가독성 향상

정돈된 인상

8pt 그리드를 기반으로 한 레이아웃은 불필요한 격차나 불균형 없이 정돈된 느낌을 줍니다. 사용자는 시각적으로 더 빠르게 구조를 파악할 수 있습니다.

타이포그래피의 안정성

폰트 크기, 행간(line-height), 단락 간 여백 등을 8의 배수로 맞추면 텍스트 블록 간의 거리나 높이가 균형감 있게 정렬되어 가독성이 좋아집니다.

예시

본문 폰트 크기: 16px
행간(line-height): 24px
섹션 사이 여백: 32px

4. 업계 표준과의 정합성

Google Material Design, Apple Human Interface Guidelines 등 주요 디자인 시스템들은 모두 4pt 또는 8pt 그리드 시스템을 채택하고 있습니다. 이러한 기준을 따를 경우 다른 서비스 또는 브랜드 간의 UI 정합성과 사용자 경험 연계에도 유리합니다.

예시

Material Design: 기본 spacing 단위로 4pt 또는 8pt 사용
iOS Human Interface Guidelines: 기본 padding 단위로 16pt 사용

요약

항목

설명

해상도 대응

다양한 디바이스에서 소수점 없이 깔끔하게 렌더링

일관성 및 협업

컴포넌트 간 구조 예측 가능, 디자이너-개발자 간 커뮤니케이션 용이

시각적 안정성

균형 잡힌 UI 구성으로 사용자 피로도 감소

업계 표준 부합

글로벌 시스템과의 호환성과 확장성 확보