지난 그리드 글에서 그리드는 보이지 않는 선이라고 했어요.
🔗참고: 디자인은 자유로운데 왜 보이지 않는 선을 만들까요?
화면을 나눠주는 안내선, 12칼럼으로 웹을 나누고 모바일에선 4칼럼으로 줄인다는 얘기까지 했어요.
근데 그 선에도 종류가 있더라고요.
어느 날부터 레퍼런스를 볼 때 습관처럼 보는게 생겼어요.
레퍼런스를 볼 때 ‘이 카드들은 어떤 간격으로 나뉜 걸까’, ‘이 사진은 왜 이렇게 튀어나와 있을까’를 상상하게 된 거예요.
이 레이아웃은 어떤 그리드로 짠 걸까 궁금해하면서요.
Column Grid, 다시 보기
지난번에 다룬 12칼럼 그리드가 바로 이거예요. 화면을 세로로만 나누는 방식이요.
텍스트나 이미지처럼 가로로 흐르는 콘텐츠, 그러니까 웹사이트나 랜딩페이지의 레이아웃을 만들 때 잘 맞아요.
가장 흔하게 쓰이는 만큼, 그리드 하면 제일 먼저 떠오르는 것도 이 방식이에요.
Modular Grid , 카드형 UI와 대시보드
컬럼 그리드가 세로선만 그었다면, 모듈러 그리드는 가로선까지 같이 그어요.
그럼 화면이 세로 칸이 아니라 작은 격자로, 모듈 단위로 쪼개져요.
이 모듈 하나하나가 카드 한 장, 위젯 하나가 돼요.
인스타그램 피드나 관리자 대시보드를 떠올려보세요. 카드마다 크기는 비슷한데 위치는 제각각이면서도 전혀 어수선해 보이지 않아요.
가로세로로 촘촘하게 짜인 레이아웃 위에 놓여 있기 때문이에요.
콘텐츠 양이 매번 달라지는 화면일수록 레이아웃을 잡아주는 이 방식이 필요해요. 이 격자만 있으면 어디에 몇 개를 놓든 자연스럽게 정리할 수 있어요.
Baseline Grid, 글자가 눕는 자리
지금까지는 요소를 어디에 놓을지에 대한 그리드였다면, 이건 조금 달라요. 텍스트가 눕는 자리를 잡아주는 그리드거든요.
노트 필기할 때 밑줄 쳐진 줄 위에 글씨를 쓰면 훨씬 가지런해 보이잖아요.
화면도 똑같아요. 본문, 제목, 캡션이 전부 같은 간격의 보이지 않는 줄 위에 앉아 있으면, 글자 크기가 달라도 리듬이 깨지지 않아요.
편집 디자인이나 긴 본문이 있는 페이지에서 특히 중요해요. 줄 간격이 조금씩 어긋나면 눈이 피곤한데, 그 어긋남을 애초에 안 생기게 막아주는 게 이 그리드예요.
Hierarchical Grid, 자유로워 보이는 질서
이름 그대로 위계, 그러니까 뭐가 더 중요한지에 따라 짜이는 그리드예요.
앞의 두 그리드처럼 칸 크기가 일정하지 않고, 콘텐츠 성격에 따라 칸 크기 자체가 달라져요.
잡지나 포스터, 에디토리얼 웹사이트의 레이아웃에서 자주 보여요.
큰 사진 하나가 화면 절반을 차지하고, 그 옆에 작은 텍스트 블록들이 자유롭게 흩어져 있는 레이아웃이요.
얼핏 보면 규칙이 없어 보이는데, 사실은 이게 가장 중요하다는 판단이 그 크기 차이를 만들어요.
컬럼 그리드나 모듈러 그리드가 균등함을 위한 거라면, 이건 불균등함을 의도적으로 설계하기 위한 그리드인 셈이에요.
Isometric Grid, 평면에 만드는 입체
이건 조금 결이 달라요. 앞의 네 개가 평면 위에 콘텐츠를 배치하는 그리드였다면, 이건 평면에 입체감을 만들기 위한 그리드예요.
30도, 60도로 기울어진 세 방향의 선이 만나는 격자인데, 이 위에 도형을 그리면 원근감 없이도 3D처럼 보여요.
게임 UI나 아이콘, 인포그래픽에서 건물이나 사물을 입체적으로 표현할 때 이 그리드를 기준으로 삼아요.
일상적인 화면 설계보다는 특수한 목적을 위한 그리드에 가까워요. 그래도 원리는 똑같아요. 보이지 않는 선 위에서, 보는 사람이 눈치채지 못하게 착시를 정확하게 계산해서 만드는 거니까요.
결국, 선의 개수만큼 자유로워진다
다섯 개나 되는 그리드 이름을 늘어놓고 보니, 오히려 더 헷갈릴 수도 있겠어요.
그런데 중요한 건 하나예요. 화면마다, 콘텐츠마다 어울리는 그리드가 있어요.
웹사이트엔 컬럼 그리드가, 대시보드엔 모듈러 그리드가, 긴 글에는 베이스라인 그리드가 필요한 것처럼요.
결국 그리드는 화면을 제한하기 위한 선이 아니라, 레이아웃을 설계하기 위한 기준에 가까워요.
어떤 질서가 필요한지 먼저 정해두면, 그 안에서 무엇을 강조하고 어디에 변화를 줄지 오히려 더 자유롭게 선택할 수 있어요.
잘 짜인 레이아웃은 자유를 막는 게 아니라, 자유롭게 움직일 수 있는 기준을 만들어주니까요.
written by 디자이너 이솔
