그리드

정의

그리드는 화면이라는 빈 공간을 균등한 여러 칸으로 미리 나눠 두고, 그 칸에 맞춰 요소를 올려 놓는 배치의 틀입니다. 가장 중요한 값은 몇 개의 칼럼(columns)으로 나눌지와 칸 사이의 간격(gap)을 얼마로 둘지입니다. 눈에 보이는 선을 실제로 그리지는 않지만, 모든 요소가 같은 칸 규칙을 따르기 때문에 화면 전체에 보이지 않는 질서가 생깁니다. 종이 위에 모눈을 깔고 그림을 그리는 것과 비슷해서, 한번 틀을 정해 두면 요소를 어디에 둘지 매번 고민하지 않아도 되고 화면 사이의 일관성도 저절로 유지됩니다.

왜 중요한가

그리드가 없으면 요소의 위치를 매번 감으로 정하게 되고, 페이지가 늘어날수록 서로 조금씩 어긋나 통일감이 무너집니다. 공통의 칸 규칙을 세워 두면 제목·본문·이미지·버튼이 같은 칼럼선을 공유해, 서로 다른 화면조차 한 제품에서 나온 것처럼 느껴집니다. 그리드는 또한 반응형 설계의 뼈대이기도 합니다. 화면이 좁아질 때 칼럼 수를 줄이는 규칙만 정해 두면 요소가 자연스럽게 아래로 재배치되어, 모바일에서도 무너지지 않는 레이아웃을 얻습니다. 웹에서 12칼럼 그리드가 사실상 표준처럼 쓰이는 이유도 여기에 있습니다. 12는 2·3·4·6으로 깔끔하게 나뉘어, 2단·3단·4단 배치를 하나의 틀 안에서 모두 소화할 수 있기 때문입니다. 처음에는 12칼럼이 과해 보일 수 있지만, 익숙해지면 대부분의 화면을 이 하나의 틀로 설명할 수 있어 오히려 결정이 단순해집니다.

흔한 실수

• 그리드를 정해 놓고도 몇몇 요소만 칸을 무시하고 임의 위치에 두는 것입니다. 하나가 규칙을 벗어나는 순간 보이지 않던 그리드가 눈에 띄기 시작하고, 애써 만든 질서가 오히려 어색해 보입니다.
• 칸 사이 간격(gap)을 요소마다 다르게 주는 것입니다. gap이 일정하지 않으면 같은 그리드 위에 있어도 칸의 크기가 달라 보여, 정렬이 어긋난 듯한 인상을 줍니다.
• 데스크톱 칼럼 수를 모바일에 그대로 밀어 넣는 것입니다. 좁은 화면에서 칼럼을 줄이지 않으면 각 칸이 지나치게 좁아져 내용이 뭉개지고 읽기 어려워집니다.

실무 팁

• 먼저 칼럼 수와 gap이라는 두 값을 정하고, 개별 요소는 그 안에서 몇 칸을 차지할지만 결정하세요. 위치를 매번 새로 고민하지 않게 되어 작업 속도가 크게 빨라집니다.
• 반응형은 '몇 칼럼에서 몇 칼럼으로 줄일지'를 미리 정해 두는 일입니다. 예를 들어 넓은 화면 3칼럼을 모바일에서 1칼럼으로 접는 규칙 하나면 대부분의 목록이 깔끔하게 재배치됩니다.
• 그리드는 정렬·여백과 한 몸으로 움직입니다. 칸이 요소의 기준선을 만들어 주고, 칸 사이 간격이 여백 스케일과 맞아떨어질 때 화면은 가장 정돈되어 보입니다.

관련 개념