그리드 시스템, 웹 레이아웃이 정돈되어 보이는 비결

웹 레이아웃이 정돈되어 보이는 비결은 보이지 않는 격자, 곧 그리드 시스템에 맞춰 요소를 배치하는 데 있습니다. 그리드는 화면을 몇 개의 세로 단과 간격으로 나눈 기준선입니다. 모든 요소가 이 기준선에 맞춰 놓이면 따로 맞추지 않아도 줄이 가지런해지고, 화면 크기가 바뀌어도 질서가 유지됩니다.

그리드는 무엇으로 이루어지나요?

그리드는 세 가지 요소로 구성됩니다. 내용이 놓이는 세로 단인 칼럼, 칼럼 사이의 간격인 거터, 화면 가장자리의 여백인 마진입니다. 데스크톱에서는 12개 칼럼을 쓰는 경우가 많습니다. 12는 2, 3, 4, 6으로 나누어떨어져서 두 단, 세 단, 네 단 등 다양한 배치를 만들기 쉽기 때문입니다.

요소	역할
칼럼	내용이 놓이는 세로 단
거터	칼럼 사이의 간격
마진	화면 가장자리 여백

그리드를 쓰면 무엇이 좋아지나요?

요소들이 같은 기준선에 맞춰 정렬되면 눈이 화면을 편하게 따라갑니다. 디자이너가 요소를 하나씩 눈대중으로 맞추지 않아도 되니 작업 속도도 빨라집니다. 여러 디자이너가 함께 작업해도 같은 그리드를 쓰면 페이지마다 일관된 구조가 유지됩니다. 개발자에게도 기준이 분명해져 디자인을 코드로 옮기기 쉬워집니다.

화면 크기가 바뀌면 그리드는 어떻게 되나요?

반응형 웹에서는 화면 크기에 따라 칼럼 수를 바꿉니다. 데스크톱에서 12칼럼이던 그리드가 태블릿에서는 8칼럼, 모바일에서는 4칼럼으로 줄어드는 식입니다. 데스크톱에서 세 단으로 나란히 놓이던 카드가 모바일에서는 한 단으로 쌓입니다. 칼럼 수가 바뀌어도 거터와 마진의 규칙을 유지하면 화면마다 같은 리듬이 느껴집니다.

그리드를 꼭 따라야만 할까요?

그리드는 규칙이지 감옥이 아닙니다. 대부분의 요소를 그리드에 맞추면, 일부러 그리드를 벗어난 요소가 오히려 강하게 눈에 띕니다. 큰 이미지를 화면 끝까지 꽉 채우거나, 제목을 칼럼을 넘어 크게 배치하는 식입니다. 다만 이렇게 벗어나는 것도 의도가 있어야 효과가 있습니다. 기준이 분명할 때 깨는 것이 의미를 갖습니다.

세로 방향의 리듬도 맞춰야 하나요?

가로 칼럼만큼 세로 간격도 중요합니다. 요소 사이의 간격을 8의 배수처럼 정해진 단위로 통일하면 세로 방향에도 일정한 리듬이 생깁니다. 제목과 본문, 단락과 단락 사이 간격이 제각각이면 레이아웃이 어수선해 보입니다. 가로와 세로 모두 정해진 단위를 쓰면 화면 전체가 하나의 체계로 정돈됩니다. 반응형 레이아웃 설계는 에서 더 볼 수 있습니다.

자주 묻는 질문

12칼럼만 써야 하나요?

아닙니다. 내용과 화면에 따라 다른 칼럼 수를 쓸 수 있습니다. 중요한 것은 정한 규칙을 일관되게 지키는 것입니다.

거터는 얼마로 정하나요?

화면 크기와 디자인에 따라 다르지만, 글자를 읽기에 답답하지 않을 만큼 두는 것이 좋습니다.

그리드는 디자이너만 쓰나요?

개발자도 같은 그리드를 쓰면 디자인과 실제 화면의 차이를 줄일 수 있습니다.