Ch.2 8px 그리드 시스템

모든 화면은 픽셀의 격자입니다. 8은 이 격자와 완벽하게 맞아떨어집니다.

주요 화면 해상도를 떠올려 보세요. 360, 375, 390, 768, 1024, 1280, 1440, 1920 — 이 숫자들의 공통점은 모두 8로 나누어 떨어진다는 것입니다.

8의 배수 = 어떤 해상도에서도 픽셀이 쪼개지지 않는다

제한된 선택지가 일관성을 만듭니다

스페이싱 스케일이란 디자인 시스템에서 사용할 간격 값의 목록입니다. 이 목록에 없는 값은 쓰지 않습니다.

4 → 8 → 12 → 16 → 24 → 32 → 48 → 64 처음엔 4씩, 그 다음엔 8씩, 나중엔 16씩 증가합니다. 작은 간격일수록 섬세하게, 큰 간격일수록 과감하게 — 이것이 비선형 스케일입니다.

줄 높이(line-height)가 수직 세계의 그리드입니다

수평 방향에서 컬럼과 거터가 레이아웃을 잡아주듯, 수직 방향에서는 줄 높이가 리듬을 잡아줍니다. 핵심 규칙은 단순합니다:

font-size 자체는 8의 배수가 아니어도 괜찮습니다(소프트 그리드). 하지만 line-height는 반드시 8의 배수 — 이것이 수직 그리드를 지키는 핵심입니다.