Ch.7 그리드 시스템과 레이아웃
모듈러 그리드와 대시보드
뉴스 사이트, 대시보드, SNS 피드 — 같은 '그리드'인데 왜 느낌이 다를까?
컬럼 그리드가 '수직 줄'만 제공한다면, 모듈러 그리드는 '격자판'을 제공합니다. 세로줄뿐 아니라 가로줄까지 정의하면 정보를 훨씬 체계적으로 배치할 수 있습니다.
단순 컬럼 그리드로 충분하지 않은 상황은 언제인가?
정보량이 많고 다양한 크기의 콘텐츠가 공존할 때 — 모듈러 그리드가 정보의 밀도와 위계를 동시에 관리합니다.
핵심 내용
컬럼 그리드에 '행(row)'을 더하면 모듈러 그리드가 됩니다
모듈러 그리드(Modular Grid)는 컬럼(수직)과 로우(수평)가 교차하여 만든 격자입니다. 각 격자 칸을 모듈(module)이라 부르며, 콘텐츠는 1개 이상의 모듈을 차지합니다.
모듈 = 정보의 최소 배치 단위. 카드 1개, 위젯 1개, 차트 1개가 각각 모듈을 차지한다
모듈러 그리드 구조
모듈러 그리드의 핵심 장점은 다양한 크기의 콘텐츠를 정돈되게 배치할 수 있다는 것입니다. 큰 히어로 이미지는 4×2 모듈, 작은 통계 위젯은 1×1 모듈 — 크기가 달라도 그리드 위에서 자연스럽게 정렬됩니다.
정보의 양이 그리드의 밀도를 결정합니다 — Sparse vs Dense
Sparse (여유형): • 모듈 사이 넓은 거터
• 카드당 1~2개 정보
• 여백이 시선을 안내
• 용도: 포트폴리오, 제품 소개, 온보딩
Dense (밀집형): • 모듈 사이 좁은 거터
• 카드당 3~5개 정보
• 한 화면에 최대한 많은 데이터
• 용도: 관리자 대시보드, 트레이딩, CMS
대시보드의 카드 패턴 대시보드는 모듈러 그리드의 대표적 활용입니다. 각 카드(위젯)가 모듈을 차지하며, 사용자의 역할에 따라 정보 밀도를 조절합니다.
대시보드 그리드 설계 원칙 1. 가장 중요한 KPI를 좌상단에 배치 (F-패턴의 시작점) 2. 같은 카테고리의 카드는 인접 배치 (근접성의 법칙) 3. 크기로 중요도 표현: 핵심 차트는 넓게, 보조 정보는 좁게 4. 빈 공간도 의도적으로 유지 — 숨 쉴 공간이 없으면 피로
컬럼 그리드와 모듈러 그리드 언제 어떤 것을 선택할까?
모듈러 그리드에서 '모듈(module)'이란?
관리자 대시보드처럼 정보가 많은 UI에는 Sparse(여유형) 그리드가 적합하다
대시보드에서 가장 중요한 KPI 카드는 좌상단에 배치하는 것이 원칙이다
핵심 용어
KPI 카드 (1×1)
핵심 지표 1개 + 변화율. 예: 월 매출 ₩12.5M (+8%)
차트 카드 (2×1)
꺾은선/막대 그래프 + 간단한 범례
테이블 카드 (2×2)
최근 주문, 사용자 목록 등 표형 데이터
맵 카드 (3×2)
지도 기반 데이터 시각화. 지역별 매출, 배송 현황
알림 피드 (1×2)
수직 스크롤 리스트. 최근 활동, 알림 내역
비교 정리
| 항목 | 컬럼 그리드 | 모듈러 그리드 |
|---|---|---|
| 구조 | 수직 컬럼만 정의 (1차원) | 수직 + 수평 행 모두 정의 (2차원) |
| 적합한 콘텐츠 | 텍스트 중심 (블로그, 기사, 문서) | 혼합 콘텐츠 (대시보드, 뉴스, 갤러리) |
| 복잡도 | 단순 — 컬럼 수와 거터만 결정 | 복잡 — 행 높이, 모듈 크기도 결정 |
| 유연성 | 수직 배치만 제어 가능 | 수직+수평 모두 정밀하게 제어 가능 |
텍스트 중심 → 컬럼 그리드, 다양한 위젯 혼합 → 모듈러 그리드
핵심 정리
- 1모듈러 그리드: 컬럼(수직) + 로우(수평) = 2차원 격자
- 2모듈: 행×열의 교차 격자 칸, 콘텐츠 배치의 최소 단위
- 3Sparse(여유형): 넓은 거터, 적은 정보 (포트폴리오, 소개 페이지)
- 4Dense(밀집형): 좁은 거터, 많은 정보 (대시보드, CMS)
- 5대시보드 원칙: 좌상단에 핵심 KPI, 크기로 중요도 표현
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작