topic★★★★★난이도
모듈러 그리드와 대시보드 — 카드가 춤추는 레이아웃
모듈 단위 반복으로 만드는 카드 그리드, Pinterest 레이아웃, 대시보드 설계.
#모듈러그리드#카드#Pinterest#Masonry#대시보드
왜 배우는가
컬럼 그리드가 '가로 분할'이라면 모듈러 그리드는 '가로+세로 분할'이다. 대시보드, 갤러리, 카드 UI처럼 2차원으로 콘텐츠를 배치해야 할 때 모듈러 그리드가 빛을 발한다.
모듈러 그리드(Modular Grid)는 컬럼 그리드에 수평 기준선(Row)을 추가한 것이다. 컬럼과 Row가 만나 생기는 직사각형 영역을 모듈(Module)이라 하고, 여러 모듈을 합친 것을 리전(Region)이라 한다. 대시보드의 위젯 하나하나가 리전인 셈이다.
| 레이아웃 패턴 | 특징 | 대표 사례 |
|---|---|---|
| 균등 카드 그리드 | 모든 카드 크기 동일, 행·열 정렬 | Netflix 홈, App Store |
| Pinterest (Masonry) | 카드 높이가 다름, 빈 공간 최소화 | Pinterest, Unsplash |
| 대시보드 그리드 | 위젯 크기가 1×1, 2×1, 2×2 등 다양 | Google Analytics, Notion |
Pinterest 레이아웃의 비밀 — 컬럼 너비는 고정하되 높이는 콘텐츠에 맞춘다. CSS의 `columns` 속성이나 Masonry Layout으로 구현하며, 빈 공간을 최소화해 시각적 밀도를 높인다.
카드 그리드를 설계할 때 가장 흔한 실수는 카드 안의 콘텐츠 정렬을 무시하는 것이다. 카드 외부는 그리드로 정렬되지만, 카드 내부도 일관된 패딩과 타이포 계층을 가져야 한다. 카드 하나를 미니 레이아웃으로 취급하라.
CSS Grid vs Flexbox — 1차원(한 줄 배치)은 Flexbox, 2차원(행+열 배치)은 CSS Grid가 적합하다. 대시보드처럼 위젯 크기가 다양한 경우 `grid-template-areas`로 영역을 선언하면 코드 가독성이 크게 좋아진다.