컬럼그리드 (Column Grid)
쉽게 풀면
화면을 세로로 여러 줄로 쪼개서 그 칸에 맞춰 글이나 이미지를 배치하는 방법이다.
왜 중요한가
칼럼 그리드는 지면이나 화면을 세로 열로 나누고 열 사이 간격(거터)을 정해 요소를 배치하는 틀로, 신문·잡지 레이아웃에서 시작해 웹의 12칼럼 그리드로 이어졌습니다. 여러 디자이너가 만든 페이지가 같은 구조를 공유하게 하고, 열 수를 나누는 방식만 바꿔 반응형 재배치를 체계적으로 할 수 있게 합니다. 반응형 웹에서는 화면 폭 구간마다 컬럼 수를 4, 8, 12처럼 다르게 지정하는 것이 표준이며, 이 값들이 서로 배수 관계를 이루도록 설계해야 화면 크기가 바뀌어도 요소 폭이 자연스럽게 재배치된다. 칼럼 그리드는 텍스트 열뿐 아니라 이미지나 카드 컴포넌트의 폭을 정하는 기준으로도 쓰여, 하나의 이미지가 몇 개의 칼럼을 차지하는지로 크기 위계를 표현할 수 있다.
논문에서는 이렇게 쓰입니다
화면 폭에 따라 컬럼 수를 조정해 유연한 레이아웃을 만든 반응형 디자인 사례를 다룬다.
같은 그리드 안에서도 열 결합 방식에 따라 레이아웃이 달라질 수 있음을 보여 준다.
조금 더 깊게 보면
12칼럼이 표준처럼 보이지만 12는 2·3·4·6으로 나뉘어 편리하다는 이유일 뿐 필연은 아니며, 콘텐츠 성격에 따라 5나 7칼럼이 더 적절할 수 있습니다. 칼럼 그리드는 수직 리듬을 다루지 않으므로 베이스라인 그리드나 모듈러 그리드와 함께 써야 완성됩니다. Josef Müller-Brockmann의 『그래픽 디자인의 그리드 시스템』(1981)이 이 방법을 체계화한 고전이며, 그리드를 절대 규칙으로 여기는 것은 그가 의도한 바가 아닙니다. 칼럼 그리드는 열 폭과 함께 거터(열 사이 간격)와 마진(페이지 가장자리 여백)을 함께 정의해야 완성되며, 같은 열 수라도 거터 값을 넓히면 콘텐츠 밀도와 리듬감이 크게 달라진다.
주의할 점
컬럼그리드의 컬럼 수는 콘텐츠 특성과 화면 크기에 따라 달라지며 고정된 정답이 있는 것은 아니다. 반응형 웹에서는 화면 폭 구간(브레이크포인트)마다 컬럼 수를 다르게 설정하는 것이 일반적이라, 하나의 고정된 컬럼그리드 값만으로 전체 화면 범위를 설명할 수 없다.