Ch.2 8px 그리드 시스템
베이스라인 그리드와 수직 리듬
수평은 맞췄는데 수직이 어긋난다면?
제목은 24px, 본문은 16px, 캡션은 12px — 크기가 다른 텍스트가 나란히 놓이면 기준선이 어긋나고 시선이 불안정해집니다.
서로 다른 크기의 텍스트를 어떻게 하나의 리듬으로 엮을 수 있을까?
답은 베이스라인 그리드 — 모든 텍스트의 줄 높이를 8의 배수로 맞추면 수직 리듬이 살아납니다.
핵심 내용
줄 높이(line-height)가 수직 세계의 그리드입니다
수평 방향에서 컬럼과 거터가 레이아웃을 잡아주듯, 수직 방향에서는 줄 높이가 리듬을 잡아줍니다. 핵심 규칙은 단순합니다:
베이스라인 그리드 공식 line-height = 8의 배수로 설정 • 본문 16px → line-height 24px (1.5배) • 제목 24px → line-height 32px (1.33배) • 캡션 12px → line-height 16px (1.33배) • 대제목 32px → line-height 40px (1.25배)
font-size 자체는 8의 배수가 아니어도 괜찮습니다(소프트 그리드). 하지만 line-height는 반드시 8의 배수 — 이것이 수직 그리드를 지키는 핵심입니다.
font-size는 자유, line-height는 8의 배수 — 이것이 소프트 그리드의 수직 적용
음악에 박자가 있듯 화면에는 수직 리듬이 있습니다
수직 리듬(Vertical Rhythm)이란 페이지를 위에서 아래로 스크롤할 때 느끼는 시각적 박자입니다. 텍스트 줄 사이, 요소 사이 간격이 규칙적이면 시선이 자연스럽게 흐릅니다.
수직 리듬의 3요소
세 가지 모두 8px 그리드 위에 놓이면 → 자연스럽게 줄이 맞는 수직 리듬 완성
같은 콘텐츠라도 수직 리듬의 유무가 가독성을 결정합니다
본문 font-size가 16px일 때, 8px 베이스라인 그리드에 맞는 line-height는?
베이스라인 그리드에서 font-size도 반드시 8의 배수여야 한다
핵심 용어
버튼 높이
32px 또는 40px (8의 배수)
인풋 높이
40px (padding 8px + line-height 24px)
단락 간 간격
16px 또는 24px
섹션 간 간격
48px 또는 64px
비교 정리
| 항목 | 수직 리듬 O | 수직 리듬 X |
|---|---|---|
| line-height | 16px→24px, 24px→32px (8배수) | 16px→22px, 24px→30px (임의값) |
| 요소 정렬 | 제목·본문·이미지 기준선 정렬 | 요소마다 기준선 어긋남 |
| 시선 흐름 | 위→아래 자연스러운 스캔 | 시선이 불규칙하게 점프 |
수직 리듬 = 게슈탈트 연속성 원칙의 수직 적용 — 시선이 끊기지 않고 흐른다
핵심 정리
- 18px 그리드: 주요 해상도와 나누어 떨어지는 수학적 기반
- 2소프트 그리드: 간격은 8px 단위, 콘텐츠 크기는 자유
- 3스페이싱 스케일: 4-8-12-16-24-32-48-64로 선택지 제한
- 4베이스라인 그리드: line-height를 8의 배수로 → 수직 리듬 완성
- 5다음 주제: 비율과 타이포그래피 스케일
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작