디자인 그리드 마스터하기
‘그리드 시스템을 활용한 디지털 디자인’ 벼락치기 특강
원문 바로가기
본 포스팅은 해외 디자인 아티클을 번역하며, 추가 정보와 링크를 덧붙인 글입니다.
원 게시글(영문 원본) 아래 링크에서 이 스케치 파일을 다운받을 수 있습니다.몇 해 전부터 여기 토론토의 제너럴 어셈블리에서 UX와 프로덕트 디자인을 가르치고 있다. 나 또한 많은 걸 배웠고, 학생들은 하루하루 프로덕트와 서비스를 만들어가는 데에 대한 흥미와 학습 욕구, 열정으로 가득 차 있었다. 하지만 그들의 얼굴에서 흥미, 학습 욕구, 열정이 사라지고, 절망에 빠지는 걸 여러 번 보았다. 그 이유는 바로 만능 그리드 때문이다.
막 UX/UI 디자인을 시작한 이들이 그리드를 둘러싼 이 좌절감과 혼란스러움을 극복하고, 그리드의 고민에 휘둘리지 않고 당신의 세상을 바꾸는 아이디어를 즉각 시행할 수 있도록 유용하고 가벼운 특강을 구성해보았다. 아래 몇 가지 주제들을 다룰 것이다.
1. 그리드의 모든 것 파헤치기 — 그리드는 무엇으로 구성되었나?
2. 그리드 상에서 디자인하기 — 그리드에 각종 요소들 얹는 법
3. 창의적인 응용법 — 원하는 대로 그리드 조절하는 법
4. 기준선 — 수직적 리듬에 관한 그리드 시스템
알림 — 이 가이드는 반응형 웹디자인에 초점을 맞췄으며, 유동적인 12단 그리드를 중심으로 다룹니다. 하지만 그리드 원리는 어떤 디지털 작업에나 모두 적용되니, 시작해보죠.
그리드의 모든 것 파헤치기
그리드는 두 개의 주요 요소인 ‘단’(*‘열’이라고 표현하기도 함)과 그 사이의 ‘간격’으로 구성된다. 그들은 화면에서 함께 가로 너비를 구성하는데, 여기서 몇 가지 알아야 할 규칙이 있다.
가장 중요한 것은 ‘단’은 디자인 요소들이 시작부터 끝까지 적절하게 놓이는 장소이고, ‘간격’은 당신이 애써 외면하고 싶은 위험한 골짜기일 것이다. 간단하지 않은가?
이제 우리는 실제로 디자인할 때 그리드를 적절하게 구성할 수 있는 기본을 알아보자.
그리드 상에서 디자인하기
단과 간격으로 이루어진 수평의 “그리드에 배열”하기 위해서는 기본 구조 안에서의 오브젝트와 타이포그래피가 언제나 단 가장자리에서 시작하고 끝나야 한다. 첫 번째 이미지에서, 이런 사각형들은 정말 아무것도 모르고 배열한 것처럼 보인다.
이건… 그냥 직사각형들 같아 보인다.하지만 이 스케치 파일의 그리드를 오버레이 해보면, 달라 보일 것이다. 우리의 이 작은 직사각형은 그리드 위에 올라가 있지 않다. 위에서 보았듯이, 작은 사각형의 좌우 가장자리가 단 간격에 걸쳐 있는 반면, 큰 사각형의 가장자리는 단과 단 사이에 걸쳐져 있다. 사각형 본인들은 무슨 일인지 알 것이다.
어떻게 감히.창의적인 응용법
그리드란 아주 엄격한 규칙을 갖고 있다고 생각하는 사람들이 있을 것이다. 물론 그리드에는 규칙이 있다. 하지만 그 규칙은 또한 어느 정도는 변화시킬 수 있고, 그 변화는 아주 자유로울 수 있다. 나의 고등학교 연극 교사였던 Vivona 여사의 말씀 중에 내가 좋아하는 구절이 있다.
대사를 알기 전까지 연기할 수 없다.
선생님은 우리가 대사를 있는 그대로만 배운다면, 진짜 배우가 될 수 없을 거라 말씀하셨다. 만약 우리가 다음 대사를 생각하는 데 급급하다면, 과연 우리가 창의적으로 연극 속 캐릭터를 소화할 수 있을까?
이 말은 즉, 그리드에서도 그 규칙과 제약을 배우기 전까지는 실험하거나, 규칙의 울타리를 부수거나, 디자인에 당신만의 스타일을 적용할 수 없다는 뜻이다. 그러니 디자인 작업에서 하고 싶은 걸 마음껏 펼치되, 규칙은 명심해야 한다.
원래 있는 그리드 규칙을 변형하고 싶은데, 이것을 기억하라. 당신이 설정해놓은 기본 구조가 그리드 상에 있는 한, 다른 요소들은 그 안에서 유동적으로 배치될 수 있다. 내가 말하고 싶은 게 바로 이것이다:
어떤가? 위 예시처럼 디자인 요소들이 그리드 위에 있다. 텍스트는 수평 그리드에서 벗어나 있지만, 그 상위 구조라 할 수 있는 (텍스트가 있는) 박스는 그리드 상에 올라가 있다.
기준선 격자(그리드)
단과 간격으로 만들 수 있는 이 수평 리듬은 당신이 기본 그리드를 사용해 만들 수 있는 수직 정렬이자 리듬이다.
기준선 그리드는 가로 너비를 일단 설정해놓고 높이는 계속 늘릴 수 있는, 오브젝트와 타이포그래피를 배치할 수 있는 기준을 말한다. 디자인 스튜디오 Filament에서 우리는 7px의 기준선을 사용하는데, 왜냐하면 28px이 우리에게 가장 익숙하고, 16pt의 기본 폰트를 읽기 적합하기 때문이다. 다른 사람들은 그들의 선호 또는 디자인하는 플랫폼에 따라 8px 또는 5px를 기준으로 설정하기도 한다. 우리 경험으로는 7px나 8px가 작업에 적합했다.
이미지나 박스 같은 디자인 요소들을 미리 설정해놓은 기준선에 배치한다는 것은, 그 기준선 값을 곱한다는 것이다. 타이포그래피에서 글자 행간을 기준선을 기준선 값의 배수로 정한다. 우리의 경우 7px 기준이므로 행간은 7, 14, 21, 28, 35px 등이 될 것이다. 이때 폰트 크기는 기준선 배수가 아니고, 단지 행간만 배수를 적용해야 한다는 점에 유의하자.
이제 디자인해보자
그리드 때문에 겁먹을 필요 없다. 사실 그리드의 기본만 이해하면, 놀라울 정도로 그리드를 잘 활용해서 작업할 수 있고, 원하는 대로 변형할 수도 있을 것이다. 이 글을 읽고 이제 그 원리를 알게 되었으니, 앞으로 그리드를 잘 활용해서 당신의 콘텐츠를 성공적으로 디자인하길 바란다.
번역 후기
그리드 시스템은 마치 '이메일 쓰는 법' 같다. 이메일을 누구나 쓸 수 있고, 기본 구성도 '인사말-본문-요청-끝인사' 정도로 단순하다. 하지만 "이메일을 잘 써보자!"라고 생각하면 한없이 어렵게 느껴진다.
그리드 시스템 역시 '단과 간격은 어떻게 설정해야 한다', '몇 단 그리드가 좋다', '그리드에 맞춰 디자인 요소를 배치해야 한다' 같은 이론은 여러 번 들어 알고 있지만, "그리드를 잘 짜 보자"라고 생각하면 1px을 더할지 말지 같은 문제로 골머리를 앓기 일쑤다.
이 글은 그리드 시스템의 기본을 이야기하며, 원문 저자의 회사에서는 어떤 식으로 기준선 격자를 설정하는지 예를 들어 설명한다. 글에서도 밝혔듯 "몇 개의 단과 간격을, 몇 픽셀로 설정할 것인가"는 개인의 선호도와 디자인하는 플랫폼에 따라 달라진다.
결국 그리드를 자유자재로 다루기 위해서 그리드 이론을 완벽히 숙지하되, 많은 연습이 필요하다.
번역하며 유의했던 단어
crash course 단기 특강, 벼락치기 집중 강좌
drain from ~에서 사라지다
get cracking 즉시[서둘러] 일을 시작하다 (=get going)
guts ('내장'이라는 뜻인데 이 글에서는 '파헤치기'로 의역) *참고 영상: gut vs guts
caveat (특정 절차를 따르라는) 경고
parent container '기본(상위) 구조'로 의역
