반응형 그리드·레이아웃 시스템 — 정렬되는 화면 만들기

디자인이 어딘가 어설퍼 보인다면 대개 정렬과 간격이 들쭉날쭉하기 때문입니다. 그리드 시스템은 화면을 보이지 않는 격자로 나눠 모든 요소를 그 선에 맞추는 것이에요. 한 번 규칙을 정하면 어느 페이지든 깔끔하게 정렬됩니다.

이 글은 레이아웃 구조를 다룹니다. 색·간격 같은 토큰은 디자인 시스템·토큰, 모바일 작성법은 모바일 우선 디자인을 참고하세요.

3가지 기본 개념

💡 12컬럼이 표준인 이유: 2·3·4·6으로 깔끔하게 나눠져서(2단·3단·4단·6단) 어떤 레이아웃에도 유연합니다.

컨테이너 — 콘텐츠를 가두는 폭

화면이 아무리 넓어도 콘텐츠는 일정 폭 안에 둡니다. 안 그러면 와이드 모니터에서 글이 한 줄에 너무 길어져 읽기 힘들어요.

.container {
  max-width: 1200px;
  margin: 0 auto;      /* 가운데 정렬 */
  padding: 0 20px;     /* 모바일 양옆 여백 */
}

• 본문 읽기 영역은 더 좁게 (650~760px) — 한 줄 길이가 길면 가독성↓

breakpoint — 화면 크기 분기

화면 폭에 따라 레이아웃을 바꾸는 기준점입니다. 너무 잘게 나누지 말고 3~4개면 충분해요.

모바일 우선 원칙대로 모바일(1단) 기본 → 넓어지면 단을 늘리는 방향으로 작성합니다.

CSS Grid vs Flexbox — 언제 무엇을

둘 다 레이아웃 도구지만 쓰임이 다릅니다.

CSS Grid 예시 — 카드 그리드

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3단 */
  gap: 24px;
}
@media (max-width: 767px) {
  .cards { grid-template-columns: 1fr; }   /* 모바일 1단 */
}

자동 반응형 그리드 (breakpoint 없이)

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

→ 카드 최소 폭 280px를 유지하며 화면에 맞게 자동으로 칸 수가 바뀝니다. media query 없이도 반응형이에요.

Flexbox 예시 — 가로 정렬

.nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

모바일에서 그리드 무너뜨리기

데스크탑의 여러 단은 모바일에서 세로로 쌓는 게 기본입니다.

[데스크탑]            [모바일]
┌───┬───┬───┐        ┌───────┐
│ A │ B │ C │   →    │   A   │
└───┴───┴───┘        ├───────┤
                     │   B   │
                     ├───────┤
                     │   C   │
                     └───────┘

• 3단 → 1단 (또는 2단)
• 좌우 배치 → 위아래 배치
• 우선순위 높은 콘텐츠가 위로 오게 순서 조정

간격(spacing)도 시스템으로

그리드만큼 중요한 게 일관된 간격입니다. 4px 또는 8px 배수로 통일하세요.

4 · 8 · 12 · 16 · 24 · 32 · 48 · 64

→ 아무 값(13px, 27px)이나 쓰지 말고 이 단계에서만 고르면 자동으로 정돈됩니다. (디자인 토큰 참고)

정렬 점검 체크리스트

• 콘텐츠가 컨테이너 폭 안에 정렬되는가
• 요소들이 같은 좌우 기준선에 맞는가
• 카드·이미지 간격(거터)이 일정한가
• 간격이 4·8 배수로 통일됐는가
• 모바일에서 단이 깔끔히 세로로 쌓이는가
• 본문 한 줄이 너무 길지 않은가 (650~760px)

⚠️ 자주 하는 실수

• 컨테이너 없이 풀폭 콘텐츠: 와이드 모니터에서 글이 한 줄에 너무 김
• 간격 값 제멋대로: 13px·27px·5px 섞임 → 어수선
• Grid·Flexbox 혼동: 1차원엔 Flex, 2차원엔 Grid
• breakpoint 과다: 7~8개로 잘게 나눠 관리 불가
• 모바일에서 좌우 배치 강제: 좁은 화면에 억지 다단 → 깨짐
• 요소마다 기준선 다름: 정렬 안 맞아 어설퍼 보임

❓ FAQ

Q. 12컬럼을 꼭 써야 하나요? A. 강제는 아니지만 표준이라 협업·도구 호환이 좋습니다. 간단한 사이트는 auto-fit 그리드로 컬럼 수를 신경 안 써도 됩니다.

Q. Grid와 Flexbox 중 하나만 배워도 되나요? A. 둘 다 쓰는 게 좋지만, 시작은 Flexbox가 쉽습니다. 카드·갤러리 같은 2차원 배치가 늘어나면 Grid를 익히세요. 한 페이지에서 둘을 섞어 써도 됩니다.

Q. 페이지 빌더(Elementor·아임웹)에도 적용되나요? A. 빌더는 자체 컬럼·섹션 시스템을 제공합니다. 개념(컨테이너·단·간격)은 동일하니, 빌더에서도 간격을 일정하게, 모바일에서 세로로 쌓이게 설정하면 됩니다.

Q. 본문 폭은 왜 좁게 하나요? A. 한 줄이 너무 길면(100자 이상) 눈이 다음 줄을 찾기 어려워 가독성이 떨어집니다. 본문은 650760px, 즉 한 줄 4575자가 읽기 편해요.

관련 가이드

• 디자인 시스템·토큰
• 모바일 우선 디자인
• 웹 접근성 기초
• 컬러·타이포 잡는 법