피그마에서 작업 전에 그리드부터 잡고 시작하시나요?
Column 몇 개로 나눌지, Row 간격은 얼마로 할지. 화면엔 아직 아무것도 없는데, 왜 다들 그리드부터 잡아두는 걸까요?
자유롭게 그려도 되는 빈 화면에, 왜 굳이 보이지도 않을 선을 먼저 그어두는 걸까요?
그리드, 보이지 않는 규칙
그리드는 화면을 가로세로로 나눠주는 안내선이에요.
실제로 화면에 찍히는 건 아니고, 디자이너가 요소들을 배치할 때 기준으로 삼는 틀이에요.
건축에 비유하면 쉬워요. 건물을 지을 때 뼈대를 먼저 세우잖아요. 그 뼈대 위에 벽을 세우고, 창문을 내고, 인테리어를 해요. 뼈대는 완공 후엔 눈에 안 보이지만, 그게 없으면 건물 자체가 무너져요.
화면도 마찬가지예요. 텍스트, 이미지, 버튼이 뼈대 없이 각자 흩어져 있으면 보는 사람은 어디를 먼저 봐야 할지 헤매게 돼요.
선을 지웠을 때 벌어지는 일
그리드 없이 요소들을 배치하면 어떻게 될까요?
당장은 자유로워 보여요. 원하는 자리에 원하는 크기로 뭐든 놓을 수 있으니까요.
그런데 이 상태가 이어지면 화면 전체가 불안정해 보이기 시작해요. 여백은 들쭉날쭉하고, 줄은 안 맞고, 어디에 시선을 둬야 할지 알 수 없어요.
브레이킹 그리드
반면 의도적으로 그리드를 깨는 것, 이른바 브레이킹 그리드(breaking grid)는 전혀 다른 이야기예요.
패션 브랜드나 아트 전시 웹사이트에서 사진 하나가 그리드를 뚫고 튀어나오는 걸 본 적 있으실 거예요. 이건 실수가 아니라, 그 요소로 시선을 확실히 끌기 위한 계산된 선택이에요.
나머지 요소들은 그리드 안에 얌전히 정렬돼 있기 때문에, 그 하나가 더 도드라져 보이는 거예요.
그리드를 깨는 것도 결국 그리드가 있다는 전제 위에서만 가능해요. 기준이 없으면 깨는 것도 의미가 없어지니까요.
정렬, 간격, 계층
그리드가 실제로 작동하는 방식은 세 가지로 나눠볼 수 있어요.
정렬
정렬은 요소들의 시작점과 끝점을 맞추는 거예요. 왼쪽 정렬된 텍스트들이 보이지 않는 세로선 위에 나란히 서 있으면, 눈이 그 선을 따라 자연스럽게 움직여요.
간격
간격은 요소 사이의 거리예요. 같은 그룹에 속한 것들은 가깝게, 다른 그룹은 멀게. 이 거리 차이만으로도 사람은 뭐가 하나로 묶이는 정보인지 자동으로 구분해요.
계층
계층은 뭐가 더 중요한지를 정하는 일이에요. 크기, 굵기, 위치로 우선순위를 드러내는 건데, 그리드가 잡혀 있어야 이 계층도 흐트러지지 않고 명확하게 전달돼요.
셋 다 따로 노는 게 아니라, 그리드라는 하나의 틀 안에서 같이 작동해요.
12칼럼
웹디자인에서 가장 많이 쓰이는 그리드는 12칼럼 그리드예요. 화면을 12개의 세로 칸으로 나눠두는 거예요.
12라는 숫자가 좋은 이유가 있어요. 2, 3, 4, 6으로 전부 나눠떨어져요. 그래서 화면을 반으로 쪼개든, 셋으로 쪼개든, 넷으로 쪼개든 항상 딱 맞아떨어지는 구성이 나와요.
그리고 모바일에서는
그런데 이 12칼럼을 모바일 화면에 그대로 옮기면 답답해져요.
화면 자체가 좁으니까요. 그래서 모바일에서는 보통 4칼럼으로 줄여서 써요.
칼럼 수가 줄어드는 대신, 여백은 오히려 넉넉하게 잡는 경우가 많아요. 좁은 화면일수록 정보를 욱여넣기보다 덜어내는 쪽이 읽기 편하기 때문이에요.
같은 콘텐츠라도 화면 크기에 따라 그리드 자체가 다시 짜여요. 반응형 디자인이라고 부르는 게 바로 이 과정이에요.
보이지 않지만, 분명히 느껴지는 것
정리하면, 그리드는 화면에 찍히지 않는 선이에요. 그런데 그 선이 있고 없고에 따라 같은 콘텐츠도 완전히 다르게 느껴져요.
정돈된 화면을 보면서 “그리드가 잘 잡혔네”라고 생각하는 사람은 없어요. 그냥 “보기 편하다”, “안정적이다”라고만 느껴요.
결국 그리드의 역할은 딱 거기까지예요. 스스로를 드러내지 않지만, 없으면 화면 전체가 흔들려요.
그 위에 놓인 모든 걸 편안하게 만들어주는 건, 보이지 않는 이 선이거든요.
written by 디자이너 이솔
