Ch.7 그리드 시스템과 레이아웃
컬럼 그리드의 원리
왜 거의 모든 웹사이트가 12컬럼 그리드를 사용할까?
Bootstrap, Material Design, Tailwind — 모든 주요 프레임워크가 12컬럼을 기본으로 제공합니다. 10도 아니고 16도 아닌 '12'에는 수학적 이유가 있습니다.
그리드 없이 요소를 자유롭게 배치하면 안 되는 걸까?
그리드는 디자인의 뼈대입니다. 보이지 않지만 모든 요소의 위치와 크기를 결정하는 보이지 않는 질서를 만듭니다.
핵심 내용
12라는 숫자에는 숨겨진 힘이 있습니다
12컬럼이 표준인 이유는 단순합니다. 12는 2, 3, 4, 6으로 나눌 수 있기 때문입니다. 이 약수의 풍부함이 레이아웃의 유연성을 극대화합니다.
12 ÷ 2 = 6칸씩 2등분 | 12 ÷ 3 = 4칸씩 3등분 | 12 ÷ 4 = 3칸씩 4등분 | 12 ÷ 6 = 2칸씩 6등분
반면 10컬럼은 2, 5로만 나뉘고 3등분이 불가능합니다. 16컬럼은 너무 세밀해서 복잡성만 증가합니다. 12는 유연성과 단순성의 최적 균형점입니다.
그리드는 세 요소로 구성됩니다 — Column, Gutter, Margin
그리드 3요소
Column — 실제 콘텐츠가 놓이는 영역입니다. 요소는 항상 1개 이상의 컬럼을 차지합니다. '이 카드는 4컬럼을 차지한다'는 식으로 폭을 지정합니다.
Gutter — 컬럼 사이의 간격으로, 요소들이 서로 붙지 않게 합니다. 보통 16px~32px이며, 8px 그리드의 배수를 사용합니다. 거터가 너무 좁으면 요소가 답답하고, 너무 넓으면 연결감이 사라집니다.
Margin — 그리드 전체의 좌우 바깥 여백입니다. 콘텐츠가 화면 끝에 붙지 않게 하는 안전 영역입니다. 데스크톱에서는 고정값, 모바일에서는 16~24px가 일반적입니다.
화면 크기가 바뀌면 컬럼 수도 바뀌어야 합니다
실무 브레이크포인트 표준 (Tailwind CSS 기준) • sm: 640px — 모바일 큰 화면 • md: 768px — 태블릿 세로 • lg: 1024px — 태블릿 가로 / 소형 데스크톱 • xl: 1280px — 데스크톱 • 2xl: 1536px — 대형 모니터
12컬럼 그리드가 표준인 가장 큰 이유는?
모바일에서도 데스크톱과 동일하게 12컬럼을 유지해야 한다
Gutter(거터)는 컬럼 사이의 간격으로, 요소가 서로 붙지 않게 하는 역할을 한다
핵심 용어
6 + 6
2등분 — 텍스트 + 이미지 나란히 배치
4 + 4 + 4
3등분 — 카드 3개 그리드, 가격 플랜
3 + 3 + 3 + 3
4등분 — 아이콘 피처 블록, 갤러리
8 + 4
비대칭 — 메인 콘텐츠 + 사이드바
3 + 6 + 3
센터 포커스 — 네비게이션·콘텐츠·위젯
2 + 8 + 2
와이드 센터 — 블로그 본문 레이아웃
비교 정리
| 항목 | 반응형 그리드 | 고정 그리드 |
|---|---|---|
| 모바일 (< 768px) | 4컬럼 → 카드 1개가 전체 폭 차지 | 12컬럼 유지 → 컬럼이 너무 좁아 내용 안 보임 |
| 태블릿 (768~1024px) | 8컬럼 → 카드 2개씩 배치 가능 | 12컬럼 유지 → 거터가 과도하게 좁아짐 |
| 데스크톱 (1024px+) | 12컬럼 → 다양한 레이아웃 조합 활용 | 12컬럼 동일 — 이 구간에서는 문제없음 |
| 콘텐츠 재배치 | 3열 → 2열 → 1열로 자연스럽게 스택 | 모든 요소가 축소되어 읽기 불가능 |
반응형 그리드의 핵심: 컬럼 수를 줄이되, 컬럼 폭은 충분히 유지하는 것
핵심 정리
- 112컬럼: 약수가 풍부해 레이아웃 조합 최다 (2,3,4,6등분)
- 23요소: Column(콘텐츠 영역), Gutter(컬럼 간격), Margin(바깥 여백)
- 3반응형: 모바일 4col → 태블릿 8col → 데스크톱 12col
- 4핵심 원칙: 컬럼 수를 줄이되, 컬럼 폭은 충분히 유지
- 5거터·마진 모두 8px 배수가 표준
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작