반응형 웹 그리드, 사실 어렵게 생각할 필요 없습니다. 이 글에서는 12컬럼 그리드, 모바일 그리드, CSS Grid의 auto-fit이라는 세 가지 공식을 중심으로, 데스크탑과 태블릿에서 모두 깔끔하게 작동하는 레이아웃을 만드는 방법을 정리했습니다. 이 공식만 익혀도 복잡한 계산 없이 반응형 그리드를 잡을 수 있습니다.
반응형 웹 그리드, 왜 12단이 기본일까
웹사이트 레이아웃을 논할 때 가장 자주 언급되는 숫자가 12입니다. 12컬럼 그리드가 반응형에 최적화되어 있다는 이야기는 업계에서 정설처럼 통용됩니다. 그 이유는 단순한 수학에 있습니다. 12는 2, 3, 4, 6으로 나누어떨어지기 때문에, 어떤 조합으로 구역을 나누어도 모든 칸의 너비가 정수로 떨어집니다. 예를 들어 3단 레이아웃을 만들 때 12를 3으로 나누면 4칸씩 깔끔하게 배정되고, 4단을 만들면 3칸씩, 6단을 만들면 2칸씩 배정됩니다.
실무에서 많이 사용하는 조합은 컨테이너 폭 1200px, 12컬럼, 거터(gutter) 24px입니다. 이 설정의 장점은 계산이 깔끔하다는 데 있습니다. 컬럼 하나의 너비는 (1200 - 24×11) ÷ 12 = 78px이 됩니다. 78×12 + 24×11 = 1200이라는 공식이 딱 맞아떨어지므로, 디자이너와 개발자 모두가 혼동 없이 작업할 수 있습니다.
모바일과 태블릿, 그리드를 어떻게 다르게 써야 할까
데스크탑에서 12컬럼을 그대로 모바일로 가져오면 문제가 생깁니다. 화면 폭이 360-390px인 모바일에서 12칸을 유지하면 각 칸의 너비가 너무 좁아져 텍스트와 이미지의 가독성이 급격히 떨어집니다. 따라서 모바일에서는 컬럼 수를 줄이는 전략이 필요합니다.
모바일 그리드의 대표적인 기준은 360px입니다. 이 폭에서 마진 20px, 컬럼 6개, 거터 16px로 설정하면 모든 값이 정수로 떨어집니다. 계산해보면 (360 - 20×2 - 16×5) ÷ 6 = 40px로, 각 컬럼이 딱 40px이 됩니다. 아이폰의 기본 뷰포트가 390px이므로, 팀 내에서 iOS 비중이 높다면 390px을 기준으로 삼아도 좋습니다. 중요한 것은 팀 내에서 하나의 기준으로 통일하는 것입니다.
태블릿은 보통 768px을 기준점으로 삼습니다. 이 구간에서는 데스크탑의 12컬럼을 유지하되 컨테이너 폭만 줄이거나, 8컬럼이나 6컬럼으로 변경하기도 합니다. 정해진 답은 없지만, 최소한 '데스크탑 12컬럼 → 태블릿 8컬럼 → 모바일 6컬럼' 같은 규칙을 팀 내에서 정해두면 협업이 훨씬 수월해집니다.
CSS Grid로 반응형 레이아웃을 구현하는 핵심 코드
CSS Grid를 사용하면 미디어 쿼리 없이도 반응형 레이아웃을 만들 수 있습니다. 가장 강력한 도구는 repeat(auto-fit, minmax(최소너비, 1fr)) 패턴입니다. 이 코드는 컨테이너의 남은 공간을 자동으로 분할하면서, 각 아이템이 지정한 최소 너비 아래로 떨어지지 않도록 보장합니다.
예를 들어, grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));이라고 설정하면, 화면이 넓을 때는 여러 개의 200px 이상 칸이 나란히 배치되고, 화면이 좁아지면 자동으로 칸 수를 줄여서 2단, 1단으로 전환됩니다. 미디어 쿼리로 일일이 중단점을 지정할 필요가 없어집니다.
태블릿 대응이 필요할 때는 minmax 값만 조정하면 됩니다. 데스크탑에서는 최소 300px, 태블릿에서는 최소 200px, 모바일에서는 최소 150px 같은 식으로 미디어 쿼리 안에서 grid-template-columns 값을 바꾸는 것이 일반적입니다. 또는 minmax 값 자체를 미디어 쿼리 없이도 유연하게 대응할 수 있도록 설계하는 방법도 있습니다.
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 16px;
}
이 코드 하나면 갤러리 형태의 레이아웃이 모든 화면 크기에서 자동으로 조정됩니다.
그리드 설계 시 꼭 알아야 할 '안전 영역'과 '8px 규칙'
아무리 그리드를 잘 짜도 콘텐츠가 브라우저 가장자리에 붙어버리면 가독성이 떨어집니다. 이를 방지하기 위해 안전 영역(Safe Area) 을 설정해야 합니다. 보통 컨테이너의 최대 폭을 1200px로 잡고, 그 안에서만 주요 콘텐츠를 배치합니다. 넓은 모니터에서는 양쪽에 여백이 생기지만, 오히려 안정감 있는 레이아웃을 유지할 수 있습니다.
또 하나의 중요한 원칙은 8px 단위 법칙입니다. 마진, 패딩, 거터 등 모든 간격을 8의 배수로 통일하면 디자인이 훨씬 정돈되어 보입니다. 8px, 16px, 24px, 32px 같은 숫자만 사용하면 개발자와의 소통도 쉬워집니다. 팀에서 4px 베이스를 사용한다면 그 규칙을 따르면 되지만, 핵심은 간격이 일관된 배수로 움직여야 한다는 점입니다.
반응형 기획, 프레임 수를 몇 개로 잡아야 할까
반응형 웹을 기획할 때 흔히 하는 실수는 모든 화면 너비에 대응하는 프레임을 10개 넘게 그리는 것입니다. 하지만 실제로는 대표 사이즈 3개(데스크탑, 태블릿, 모바일) 만 정하고, 나머지는 CSS Grid의 유연한 속성에 맡기는 것이 효율적입니다. 프레임이 많아질수록 기획 단계에서 시간이 낭비되고, 개발자와의 커뮤니케이션도 복잡해집니다.
대표 사이즈를 정할 때는 팀의 표준을 따르는 것이 가장 좋습니다. 표준이 없다면 데스크탑 1440px(또는 1200px 컨테이너), 태블릿 768px, 모바일 360px(또는 390px) 을 기준으로 삼는 것을 추천합니다. 이 세 가지만 확실히 잡아도 대부분의 사용자 환경을 커버할 수 있습니다.
Q. 반드시 12컬럼을 써야 하나요?
꼭 그래야 하는 것은 아닙니다. 12컬럼이 가장 보편적이고 계산이 편리하기 때문에 업계 표준처럼 자리 잡았을 뿐입니다. 팀에서 8컬럼이나 16컬럼에 익숙하다면 그것을 사용해도 전혀 문제없습니다.
Q. 거터 값은 어떻게 정하는 게 좋을까?
보통 16px, 20px, 24px 중에서 선택합니다. 12컬럼 + 1200px 컨테이너 조합에서는 24px이 가장 계산이 깔끔하게 떨어집니다. 모바일에서는 16px 거터를 많이 사용합니다.
Q. CSS Grid와 Flexbox 중 무엇을 써야 하나요?
둘 다 반응형에 유용하지만, 2차원 레이아웃(행과 열을 동시에 제어)이 필요하면 Grid가 적합하고, 1차원 정렬(한 줄로 나열)이면 Flexbox가 더 간단합니다. 실제 프로젝트에서는 두 가지를 혼용하는 경우가 많습니다.