Ch.2 8px 그리드 시스템
왜 8px인가 — 그리드의 원리
왜 하필 8px일까? 4도, 5도, 10도 아니고?
디자이너가 여백을 13px로 잡았습니다. 개발자가 구현하니 어딘가 어긋나 보입니다. 그런데 8px로 바꾸자 마법처럼 정돈됩니다.
숫자 하나 바꿨을 뿐인데 왜 결과가 완전히 달라지는 걸까?
답은 화면의 물리적 구조에 있습니다. 8px은 감이 아니라 수학입니다.
핵심 내용
모든 화면은 픽셀의 격자입니다. 8은 이 격자와 완벽하게 맞아떨어집니다.
주요 화면 해상도를 떠올려 보세요. 360, 375, 390, 768, 1024, 1280, 1440, 1920 — 이 숫자들의 공통점은 모두 8로 나누어 떨어진다는 것입니다.
8의 배수 = 어떤 해상도에서도 픽셀이 쪼개지지 않는다
5px, 7px, 10px 같은 숫자는 많은 해상도에서 나누어 떨어지지 않습니다. 결과적으로 서브픽셀 렌더링이 발생하여 요소가 흐릿하게 보이거나 1px 어긋납니다.
8px 그리드에는 두 가지 적용 방식이 있습니다
8px이 너무 클 때 4px 반 그리드가 등장합니다
아이콘 내부 디테일, 작은 배지와 텍스트 사이 간격, 인라인 요소 패딩 — 이런 미세한 영역에서는 8px 단위가 너무 큽니다.
4px 반 그리드 규칙 • 레이아웃 간격: 8px 단위 (8, 16, 24, 32…) • 컴포넌트 내부 패딩: 4px 단위 허용 (4, 8, 12…) • 아이콘 내부: 2px 단위까지 허용 큰 것은 8px, 작은 것은 4px — 이 이중 스케일이 현대 디자인 시스템의 표준입니다.
Material Design, Apple HIG, Ant Design 모두 8px + 4px 이중 그리드 사용
디자이너가 요소 간 여백을 15px로 설정했습니다. 8px 그리드 원칙에 따르면 어떻게 조정해야 할까요?
하드 그리드에서는 폰트 크기도 반드시 8의 배수여야 한다
핵심 용어
360px
360 ÷ 8 = 45칸 (Android 소형)
375px
375 ÷ 8 ≈ 46.9칸 → 4px 반 그리드로 해결
1440px
1440 ÷ 8 = 180칸 (데스크탑)
1920px
1920 ÷ 8 = 240칸 (Full HD)
비교 정리
| 항목 | 하드 그리드 | 소프트 그리드 |
|---|---|---|
| 규칙 | 모든 치수가 반드시 8의 배수 | 여백·간격은 8의 배수, 요소 크기는 유연 |
| 장점 | 완벽한 정렬, 일관성 극대화 | 실용적, 텍스트 크기 자유도 확보 |
| 단점 | 폰트·아이콘 크기 제약 | 엄밀한 정렬이 깨질 수 있음 |
| 사용처 | 아이콘 시스템, 일러스트 가이드 | 대부분의 제품 UI 디자인 |
실무에서는 소프트 그리드가 표준 — 간격은 8px, 콘텐츠는 자유롭게
핵심 정리
- 18px = 주요 해상도에서 나누어 떨어지는 최소 공배수
- 2하드 그리드: 모든 치수 8의 배수 / 소프트 그리드: 간격만 8의 배수
- 34px 반 그리드로 미세 조정 가능
- 4서브픽셀 렌더링을 방지하여 선명한 UI 구현
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작