topic★★★★★난이도
컬럼 그리드의 원리 — 12칸으로 세상을 나누다
Margin · Gutter · Column으로 구성되는 12컬럼 그리드 시스템의 원리와 반응형 적용.
#12컬럼#margin#gutter#브레이크포인트#반응형
왜 배우는가
웹과 앱 디자인에서 12컬럼 그리드는 사실상 표준이다. 왜 하필 12인지, 각 구성 요소가 어떤 역할을 하는지 이해하면 어떤 해상도에서도 흔들리지 않는 레이아웃을 잡을 수 있다.
그리드 시스템은 신문 편집에서 시작됐다. 1920년대 스위스 타이포그래피 운동에서 체계화된 이 시스템은 디지털 시대에도 여전히 화면 설계의 뼈대로 쓰인다. 핵심 구성 요소는 세 가지다 — Margin(양쪽 여백), Gutter(컬럼 사이 간격), Column(실제 콘텐츠가 놓이는 칸).
| 구성 요소 | 역할 | 일반적 수치 |
|---|---|---|
| Margin | 화면 양쪽 끝의 안전 여백 | 모바일 16px, 데스크톱 24~72px |
| Gutter | 컬럼과 컬럼 사이 간격 | 16px 또는 24px |
| Column | 콘텐츠가 배치되는 실제 칸 | 유동적 (해상도에 따라 변함) |
왜 12컬럼인가? 12는 1, 2, 3, 4, 6, 12로 나눌 수 있는 약수가 가장 많은 작은 수다. 덕분에 2등분, 3등분, 4등분, 6등분 어떤 레이아웃이든 깔끔하게 떨어진다.
| 브레이크포인트 | 해상도 | 컬럼 수 | 대표 디바이스 |
|---|---|---|---|
| xs | 0~599px | 4 | 스마트폰 세로 |
| sm | 600~904px | 8 | 태블릿 세로 |
| md | 905~1239px | 12 | 태블릿 가로 |
| lg | 1240~1439px | 12 | 노트북 |
| xl | 1440px+ | 12 | 데스크톱 |
실전 팁 — Figma에서 그리드를 설정할 때 Stretch 타입을 사용하면 컬럼이 화면 너비에 맞춰 자동으로 늘어난다. Margin과 Gutter만 고정하고 Column은 유동으로 두는 것이 반응형 설계의 기본이다.