topic★★★★★난이도 · 약 12분
왜 8px인가
화면 해상도와 나눗셈의 마법 — 4px vs 8px 논쟁, 그리고 Material Design의 선택.
#8px#4px#Material Design#해상도
왜 배우는가
8px가 디자인 시스템의 사실상 표준이 된 이유를 이해하면, 왜 버튼 높이가 40px이고 아이콘이 24px인지 모든 수치의 근거를 설명할 수 있다.
디자인에서 8px 그리드란, UI의 모든 크기와 간격을 8의 배수(8, 16, 24, 32, 40, 48...)로 맞추는 규칙이다. 이 단순한 제약 하나가 디자인 시스템 전체의 일관성을 보장한다.
왜 하필 8인가? — 8은 2, 4로 나눠도 정수이고, 대부분의 화면 해상도(360, 720, 1080, 1440, 1920)가 8의 배수다. 즉, 8px 단위로 디자인하면 어떤 해상도에서든 픽셀이 깨지지 않는다. 반면 5px나 7px은 2로 나누면 소수점이 나와 서브픽셀 렌더링(흐릿함)이 발생한다.
| 기준 단위 | 장점 | 단점 |
|---|---|---|
| 4px | 더 세밀한 조정 가능. 작은 아이콘·텍스트 간격에 유리 | 선택지가 너무 많아 일관성 유지가 어렵다 |
| 8px | 해상도 호환성 최고. 선택지가 적어 결정이 빠르다 | 매우 작은 요소(4px 간격)가 필요할 때 유연성 부족 |
| 10px | 10진법에 친숙하다 | 2로 나누면 5px — 서브픽셀 문제 발생 |
Material Design은 2014년 출시부터 8px 그리드를 핵심 원칙으로 채택했다. 단, 아이콘 내부와 타이포그래피에는 4px 하프 그리드를 허용한다. 이것이 현재 업계 표준이 된 '8px 기본 + 4px 허용' 모델이다. Apple의 Human Interface Guidelines도 사실상 같은 구조를 따른다.
실전 규칙 — ① 컴포넌트 크기(버튼, 입력 필드, 카드)는 반드시 8의 배수 ② 패딩·마진은 8의 배수 우선, 미세 조정이 필요하면 4px ③ 아이콘은 24px 또는 20px(4의 배수) ④ 절대로 홀수 픽셀(3, 5, 7, 9...)을 쓰지 않는다