통합 요약노트
Ch.7 그리드 시스템과 레이아웃
12컬럼 그리드, 모듈러 그리드, 비주얼 히어라키
이 챕터의 내용
컬럼 그리드의 원리
그리드는 디자인의 뼈대입니다. 보이지 않지만 모든 요소의 위치와 크기를 결정하는 보이지 않는 질서를 만듭니다.
12라는 숫자에는 숨겨진 힘이 있습니다
12컬럼이 표준인 이유는 단순합니다. 12는 2, 3, 4, 6으로 나눌 수 있기 때문입니다. 이 약수의 풍부함이 레이아웃의 유연성을 극대화합니다.
12 ÷ 2 = 6칸씩 2등분 | 12 ÷ 3 = 4칸씩 3등분 | 12 ÷ 4 = 3칸씩 4등분 | 12 ÷ 6 = 2칸씩 6등분
- 12컬럼: 약수가 풍부해 레이아웃 조합 최다 (2,3,4,6등분)
- 3요소: Column(콘텐츠 영역), Gutter(컬럼 간격), Margin(바깥 여백)
- 반응형: 모바일 4col → 태블릿 8col → 데스크톱 12col
- 핵심 원칙: 컬럼 수를 줄이되, 컬럼 폭은 충분히 유지
- 거터·마진 모두 8px 배수가 표준
모듈러 그리드와 대시보드
정보량이 많고 다양한 크기의 콘텐츠가 공존할 때 — 모듈러 그리드가 정보의 밀도와 위계를 동시에 관리합니다.
컬럼 그리드에 '행(row)'을 더하면 모듈러 그리드가 됩니다
모듈러 그리드(Modular Grid)는 컬럼(수직)과 로우(수평)가 교차하여 만든 격자입니다. 각 격자 칸을 모듈(module)이라 부르며, 콘텐츠는 1개 이상의 모듈을 차지합니다.
모듈 = 정보의 최소 배치 단위. 카드 1개, 위젯 1개, 차트 1개가 각각 모듈을 차지한다
- 모듈러 그리드: 컬럼(수직) + 로우(수평) = 2차원 격자
- 모듈: 행×열의 교차 격자 칸, 콘텐츠 배치의 최소 단위
- Sparse(여유형): 넓은 거터, 적은 정보 (포트폴리오, 소개 페이지)
- Dense(밀집형): 좁은 거터, 많은 정보 (대시보드, CMS)
- 대시보드 원칙: 좌상단에 핵심 KPI, 크기로 중요도 표현
비주얼 히어라키와 시선 패턴
답은 시선의 흐름을 예측하고, 그 경로에 핵심 정보를 배치하는 것입니다. 이것이 비주얼 히어라키(Visual Hierarchy)입니다.
사용자의 시선에는 예측 가능한 패턴이 있습니다
아이트래킹(Eye-tracking) 연구는 사용자의 시선이 페이지 유형에 따라 두 가지 패턴을 따른다는 것을 밝혀냈습니다.
F-패턴: 정보를 찾는 사용자 | Z-패턴: 설득당하는 사용자
- F-패턴: 텍스트 중심 페이지, 좌측·상단에 핵심 배치
- Z-패턴: 비주얼 중심 페이지, CTA를 Z의 끝점(우하단)에 배치
- 비주얼 히어라키 5도구: 크기, 색상, 위치, 대비, 여백
- 사용자는 텍스트의 20%만 읽음 → 스캔 가능성이 핵심
- 체크: H2만 읽어도 내용 파악, 굵은 글씨 강조, 짧은 단락, 충분한 여백
핵심 용어 모음
6 + 6
2등분 — 텍스트 + 이미지 나란히 배치
4 + 4 + 4
3등분 — 카드 3개 그리드, 가격 플랜
3 + 3 + 3 + 3
4등분 — 아이콘 피처 블록, 갤러리
8 + 4
비대칭 — 메인 콘텐츠 + 사이드바
3 + 6 + 3
센터 포커스 — 네비게이션·콘텐츠·위젯
2 + 8 + 2
와이드 센터 — 블로그 본문 레이아웃
KPI 카드 (1×1)
핵심 지표 1개 + 변화율. 예: 월 매출 ₩12.5M (+8%)
차트 카드 (2×1)
꺾은선/막대 그래프 + 간단한 범례
테이블 카드 (2×2)
최근 주문, 사용자 목록 등 표형 데이터
맵 카드 (3×2)
지도 기반 데이터 시각화. 지역별 매출, 배송 현황
알림 피드 (1×2)
수직 스크롤 리스트. 최근 활동, 알림 내역
크기 (Size)
가장 직관적인 위계 도구. 큰 요소 = 중요한 요소. 제목 > 소제목 > 본문 > 캡션
비교 정리
| 항목 | 반응형 그리드 | 고정 그리드 |
|---|---|---|
| 모바일 (< 768px) | 4컬럼 → 카드 1개가 전체 폭 차지 | 12컬럼 유지 → 컬럼이 너무 좁아 내용 안 보임 |
| 태블릿 (768~1024px) | 8컬럼 → 카드 2개씩 배치 가능 | 12컬럼 유지 → 거터가 과도하게 좁아짐 |
| 데스크톱 (1024px+) | 12컬럼 → 다양한 레이아웃 조합 활용 | 12컬럼 동일 — 이 구간에서는 문제없음 |
| 콘텐츠 재배치 | 3열 → 2열 → 1열로 자연스럽게 스택 | 모든 요소가 축소되어 읽기 불가능 |
| 항목 | 컬럼 그리드 | 모듈러 그리드 |
|---|---|---|
| 구조 | 수직 컬럼만 정의 (1차원) | 수직 + 수평 행 모두 정의 (2차원) |
| 적합한 콘텐츠 | 텍스트 중심 (블로그, 기사, 문서) | 혼합 콘텐츠 (대시보드, 뉴스, 갤러리) |
| 복잡도 | 단순 — 컬럼 수와 거터만 결정 | 복잡 — 행 높이, 모듈 크기도 결정 |
| 유연성 | 수직 배치만 제어 가능 | 수직+수평 모두 정밀하게 제어 가능 |
| 항목 | 스캔 최적화 | 스캔 비최적화 |
|---|---|---|
| 제목 | 명확한 H2/H3 위계 → 구조 즉시 파악 | 제목 없이 긴 텍스트 → 어디가 중요한지 모름 |
| 텍스트 강조 | 핵심 키워드 굵은 글씨 → 스캔 시 눈에 걸림 | 강조 없는 균일한 텍스트 → 전부 같은 중요도 |
| 단락 길이 | 3~4줄 짧은 단락 → 숨 쉴 공간 있음 | 10줄+ 벽면 텍스트 → 읽기 전에 포기 |
| 여백 활용 | 섹션 사이 충분한 여백 → 구획 구분 명확 | 여백 없이 빽빽 → 어디서 끊어야 할지 모름 |
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 코스 시작하기