그리드 시스템 (Grid System)

개요·정의

그리드 시스템(Grid System)은 화면이나 지면을 일정한 열과 간격으로 나눠 글과 이미지, 버튼 같은 요소의 위치를 정하는 레이아웃 체계다. 잡지와 포스터 같은 인쇄물뿐 아니라 웹사이트, 앱, 대시보드처럼 화면 크기가 계속 달라지는 디지털 제품에서도 널리 사용한다.

가장 기본적인 구성 요소는 컬럼(Column), 거터(Gutter), 마진(Margin)이다. 컬럼은 콘텐츠가 놓이는 세로 영역이고, 거터는 컬럼 사이의 간격, 마진은 콘텐츠와 화면 가장자리 사이의 여백이다. 여러 요소를 이 기준에 맞추면 크기와 내용이 달라도 서로 정렬된 인상을 만들 수 있다.

그리드는 모든 것을 똑같은 크기로 나누기 위한 틀이 아니다. 제목은 여러 컬럼을 가로질러 크게 놓고, 본문은 좁은 컬럼에 배치하며, 사진은 화면 끝까지 넓힐 수 있다. 중요한 것은 서로 다른 크기의 요소가 하나의 기준선을 공유하도록 만드는 것이다.

특징

인쇄물에서는 정해진 판형 안에서 그리드를 만들지만 디지털 환경에서는 화면 너비가 계속 달라진다. 그래서 현재 웹과 앱에서는 화면 크기에 따라 컬럼 수와 여백이 달라지는 반응형 그리드를 주로 사용한다.

모바일에서는 4개 컬럼, 태블릿에서는 8개, 데스크톱에서는 12개처럼 화면이 넓어질수록 더 세밀한 분할을 사용하는 방식이 대표적이다. 화면이 좁다고 데스크톱 레이아웃을 그대로 축소하지 않고 콘텐츠의 우선순위에 따라 다시 쌓는다.

거터와 마진도 단순한 빈 공간이 아니다. 요소 사이의 거리가 너무 좁으면 서로 다른 정보가 한 묶음처럼 보이고, 지나치게 넓으면 관계가 끊겨 보인다. 일정한 간격을 반복하면 별도의 선을 많이 사용하지 않아도 화면 구조를 구분할 수 있다.

그리드를 의도적으로 벗어나는 것도 가능하다. 중요한 이미지나 문장을 여러 컬럼에 걸쳐 배치하면 주변 요소보다 강하게 보인다. 기준이 있기 때문에 그 기준을 깨는 위치도 더 분명하게 드러난다.

사례

뉴욕주 디자인 시스템

뉴욕주 디자인 시스템(New York State Design System)은 현재 공공 웹서비스를 위한 모바일 우선 12컬럼 그리드를 제공한다. 컨테이너 안에 행과 컬럼을 만들고 화면 크기에 따라 한 요소가 차지하는 컬럼 수를 바꿀 수 있도록 구성했다.

같은 행에 세 개의 정보를 놓더라도 작은 화면에서는 세로로 쌓고 넓은 화면에서는 세 컬럼으로 나눌 수 있다. 다양한 정부기관이 서로 다른 서비스를 만들면서도 페이지의 기본 폭과 정렬을 일정하게 유지하기 위한 그리드의 역할이 분명하게 드러나는 사례다.

비자 프로덕트 디자인 시스템

비자 프로덕트 디자인 시스템(Visa Product Design System)은 결제와 금융 서비스에 사용하는 반응형 그리드를 운영한다. 그리드는 페이지마다 별도로 만드는 장식이 아니라 컴포넌트, 간격, 타이포그래피와 함께 사용하는 기본 설계 규칙으로 다뤄진다.

화면 크기가 바뀌면 요소의 너비와 위치도 함께 조정된다. 카드와 입력창, 결제 정보처럼 정보량이 많은 금융 UI에서 같은 구조를 여러 제품과 기기에 반복 적용하는 방식으로 그리드 시스템의 실무적인 역할을 보여준다.

싱가포르 정부 디자인 시스템

싱가포르 정부 디자인 시스템(SGDS)은 화면 너비에 따라 4컬럼, 8컬럼, 12컬럼으로 바뀌는 반응형 그리드를 사용한다. 작은 모바일 화면에서는 4컬럼과 16px 거터를 사용하고, 넓은 데스크톱에서는 12컬럼과 더 넓은 거터를 적용한다.

컬럼 수만 늘리는 것이 아니라 바깥 여백과 콘텐츠 최대 너비도 함께 조정한다. 수많은 공공서비스가 서로 다른 정보량을 가지면서도 휴대전화부터 큰 모니터까지 일정한 레이아웃 질서를 유지하도록 만든 사례다.