UI/UX 초심자를 위한 웹 그리드시스템 훑어보기

각 잡고 디자인하는 방법

실무를 경험하기 전, 신입 디자이너가 별다른 교육과정 없이 그리드 시스템을 이해하기란 쉽지 않다고 봅니다. 이래저래 적용해보며 또 삽질 비슷한 걸 해가며 이해하려 해도 많은 시간이 소요되겠지요. 또 대응해야 하는 해상도 또한 늘어나서 난이도도 상승했습니다. 생각을 정리하고 작성하는 과정에서도 '이게 글만으로 단시간에 전달 가능한 내용인가?'라는 의구심이 많이 들었습니다.

최대한 쉽게 작성하려 노력했습니다. 핵심 용어를 제외하곤 용어도 풀어서 썼습니다. 그리드 시스템이란 단어 자체가 생소할 수 있으니 말이죠. 며칠 전 자주가던 온라인 카페의 어느 분이 이런 조언을 해주셨습니다.

'이제 막 디자인을 시작하는 초심자는 그리드 시스템 자체를 모를 수 있다'라고...

공감이 많이 되더라고요. 처음 디자인을 시작하던 때를 돌이켜보니 뭘 검색할지도 막막했던게 생각났습니다. 뭐 상관없습니다. 이 글을 읽는 시점. 그 이후부터 조금은 알게 될 테니까요. 그럼 시작합니다. 요이땅!

그리드 시스템의 정의와 장점

그리드(Grid)라는 단어 자체의 뜻은 '격자'라는 의미를 지니고 있습니다. 우리가 익히 알고 있는 바둑판의 눈금이나 모눈종이를 상상하시면 이해에 도움이 될 듯합니다. 그럼 그래픽 디자인 안에서의 그리드에 대한 정의를 인터넷에서 찾아볼까요?

그래픽 디자인에서 격자는 내용을 구성하는 데 사용되는 일련의 교차하는 직선 또는 곡선으로 구성된 구조입니다. 그리드는 디자이너가 그래픽 요소를 합리적이고 흡수하기 쉬운 방식으로 구성할 수 있는 뼈대 또는 프레임 워크 역할을 합니다. - 위키백과

그럼 장점도 알아봅니다. 다양한 관련 글에서 그리고 이미 실무를 지내는 경력자들은 그리드 시스템의 장점을 아래와 같이 정의합니다.  

정렬에 도움을 주고 정돈된 결과물을 얻을 수 있다.

일관적이고 규칙적인 배치로 통일성이나 일관성을 얻을 수 있다.

내부 협업하는 과정에 도움을 주며 기준(Rule)으로 활용한다.(스타일 가이드 포함)

반응형 디자인 설계 시 해상도 대응이 용이해진다.

이같은 장점을 지니며 출판, 인쇄 등의 분야를 거쳐 현대의 그래픽 디자인에 이르기까지 활용되고 있는 그리드. 게다가 그것이 하나의 시스템으로 자리잡기까지, 꽤 많은 시간과 디자이너 각자의 노력이 필요했습니다.

최근 '탈그리드'라는 트렌드와 '포지션의 세분화'로 인해 디자이너가 직접적으로 퍼블리싱에 참여하지 않게 되면서, 알고 있어도 사용하지 않거나 중요하게 생각하지 않는 모습을 자주 접했습니다. 일부 교육기관에서는 '관련 내용을 따로 교육하지 않는다'라는 이야기를 듣고 적잖게 충격도 받았습니다.

실제로 실무 내 협업을 진행하면서도 10년 차 가까운 경력을 쌓은 팀원이 좋지 못한 그리드 시스템을 적용한다거나, 제대로 알지 못한 채로 실무를 지내는 경우를 종종 보아왔습니다. 그 중 대다수가 코딩을 못했습니다. 이런 경우 우리의 다음 프로세스인 퍼블리싱 작업 과정에서 많은 애로사항이 발생했으며, 관련 피드백은 직접적으로 PM에게 전달되거나 선임인 제가 주로 받아 조정해 왔습니다.

그리드 시스템 없이 디자인된 전단지

그리드 시스템이나 그와 비슷한 최소한의 개념이 없이 디자인을 진행한다면 퍼블리셔가 받아보는 우리의 시안은 마치 위 전단지와 같을 거라 생각합니다. 단은 어떻게 나눠야 할지 혹은 CSS를 absolute로 도배해가며 작업하라는 건지... 참 난감해집니다. 이 같은 상황을 한 문장으로 정의해 '웹에 대한 이해도 부족'이라 칭합니다. 설계와는 거리가 먼 디자인입니다.

"이걸 코딩하라고!? 이런 XX"

그럼 웹 그리드 시스템 그 속을 들여다보겠습니다. 최근 실무 작업엔 반응형 작업이 자주 이뤄지므로 아래부터는 특별한 언급 없이도 '반응형 웹 그리드 시스템'으로 이해해주시기를 바랍니다.

웹 그리드 시스템에 대한 이해

웹사이트에 적용되는(앱에 일부 적용) 그리드 시스템을 이해하려면 먼저 디스플레이의 해상도부터 알고 넘어가야 합니다. 아래 표부터 살펴보겠습니다.

디스플레이 종류에 따른 기본 해상도

꽤 오래전에 작성된 표라서 최근 세분화된 디바이스를 표에 포함되지 않았습니다. 최근 것이 아닌 옛것을 들고 온 이유는 지금의 것을 이해는 것보다 과거의 것. 그러니까 경우가 수가 적고 심플한 상태에서 시작하는 것이 기초 이론을 이해하는데 수월하기 때문입니다. 표에서 숫자로 이루어진 부분을 살펴봅니다. 곱하기 앞쪽만 봐주세요. 학원을 다니고 있거나 현 실무를 하고 계신다면 눈에 들어오는 숫자들이 있습니다.

320, 640, 1024, 1280, 1440, 1920.

네. 반응형 퍼블리싱의 대표적인 분기로 활용되며 우리가 뽑아야 하는 시안의 사이즈들입니다. 물론 저것을 모두 작업하지는 않습니다. 좀 더 추려보죠. 모바일 사이즈 320(360), 태블릿 640(768), 데스크톱 1920(1280). 우리는 이 세 가지만 알면 됩니다. 괄호 안에 수치들은 최근에 주로 작업하는 해상도입니다. 이 세 가지 경우의 수와 관련 그리드 시스템만 이해해도 실무에 많은 도움이 됩니다. 아니 끝입니다. 1920 이상의 해상도가 보편화된다 하더라도 이 세 가지를 이해했다면 응용이 쉬워집니다.

최소 기준 단위 8

디스플레이 해상도와 숫자 8의 상관관계 - http://regularbold.co.kr/

오른쪽 빼곡히 적혀있는 수치에 주목합니다. 네. 모두 숫자 8로 나누어서 떨어지는 해상도입니다. 숫자 8 자체도 2기수로 계속 나누어도 결국 1이 남게 되는 숫자입니다. 8을 기준수로 반응형 작업을 진행하면 대부분의 디스플레이에서 깨지거나 뭉개지는 걸 막을 수 있습니다. 소수점이 나오지 않습니다.

320 그리드 시스템을 8의 기준값으로 적용한 예 - http://regularbold.co.kr/

꽤 많은 디자이너들이 그간 계산하기 용이하다는 이유로 10 단위로 요소를 배치하고 구성했습니다. 예를 들어보죠. 3배수로 시안 작업을 진행했는데 10px을 사용했다 가정합니다. 2배수로 축소했을 때 5px로 출력됩니다. 여기까지는 문제가 없습니다. 중요한 건 1배수로 출력했을 때죠. 2.5px가 나옵니다.

디자인 요소가 소수점으로 제작되었을때 출력 문제

우리 눈으로 픽셀 식별이 불가능한 고밀도 디스플레이가 등장하고, SVG 이미지 포맷이라는 대안. 그리고 안티앨리어싱이란 기술적 부분까지 감안한다 하더라도 소수점은 디자이너가 무조건 피해야 할 수치입니다. 어제까지 기준 수치를 10 단위로 작업했다면 이 글을 보는 지금부터 기준수를 8로 바꿔보시기를 권합니다.

이처럼 그리드 시스템을 설명하는데 숫자 8을 언급한 이유는 요소의 간격과 사이즈를 정하는 기준이 되는 그리드를, 나눠서 떨어지지 않는 수로 정했을 때 높은 확률로 소수점이 등장하기 때문입니다. 우리에게 익숙한 아이콘 쪽도 살짝 살펴볼까요?

안드로이드 앱 아이콘 규격

우리가 자주 보아오던 앱 아이콘입니다. 앱 제작 시 반드시 전달해야 하는 산출물이며, 처음 앱 프로젝트를 진행할 때 가장 궁금해지는 요소중 하나입니다. 수치를 볼까요? 이 역시 모두 8로 나누어 떨어지며, 심지어 대부분이 8의 배수입니다. 하여 보통 이러한 아이콘을 작업할 때 제일 큰 놈을 작업하고 축소하면서 규격을 맞춰가도 자연스레 픽셀 매칭이 됩니다. 깨지지 않습니다.

그럼 위에서 얻었던 이론들을 기반으로 각 해상도에 따른 그리드 시스템을 찾아볼까요?

해상도에 따른 그리드 시스템

320을 4컬럼으로 구성한 그리드 시스템

먼저 용어적 혼선부터 해결합니다. 많은 디자이너와 인터넷 강의를 하는 자들이 유닛과 컬럼을 혼동합니다. 붉은색으로 처리한 부분이 유닛이며 유닛과 거터를 포함 세트 단위가 컬럼입니다. 이 역시 기준 단위를 8로 만들었습니다. 최소 단위의 디스플레이라 축소할 일은 없지만 혹 축소해도 정수로 떨어지며 깨지지 않습니다. 물론 거터 값이 작다 느껴지면 8로 설정되어 있는 거터를 16으로 바꿔 설정해도 됩니다. 요즘 모바일은 360에 4컬럼 또는 6컬럼 작업 많이 합니다. 특별한 경우를 제외하고 가능하다면 그리드 시스템이 익숙해지는 시점까지 기본기 유지를 위해 320으로 세팅한 후 양 사이드 마진을 조절해가며 360에 대응할 것을 권장합니다. 1~2번만 실무에 적용해보면 감이 옵니다. 회사에서 360으로 해야한다하면 그리하세요. 단 숫자 8을 잊으면 안 됩니다.

640을 8컬럼으로 구성한 그리드 시스템

태블릿의 최소 분기로 자주 활용하는 640입니다. 요즘은 모바일 해상도가 커져서 640까지도 모바일로 분류하고 768을 초과하는 경우만 태블릿으로 분기 처리하는데요. 640을 예시로 잡은 이유는 이론을 보다 쉽게 설명하기 위함이니 양해를 바랍니다. 유닛, 거터 값에는 변화가 없습니다. 모바일 320에서 640으로 2배 증가했으니 컬럼을 2배로 늘려준 게 다입니다. 320모바일에서 작업한 요소들을 그대로 가져와 재배치만 해도 태블릿 시안이 완성됩니다.

960을 12컬럼으로 구성한 그리드 시스템

디자인을 시작한 지 몇 년 되지 않는 분들에겐 생소한 수치입니다. 과거 1024 해상도에 대응하기 위해 탄생한 320 해상도의 3 배수인 960입니다. 이걸 설명하는 이유는 바로 960(980)을 통해 우리가 지금까지 쓰고 있는 12컬럼 그리드 시스템이 대중화되었기 때문입니다. 디자인을 오래 하셨다면 기억이 나실 겁니다. '960 Grid system' 국내외 많은 디자이너들이 웹 그리드 시스템을 알게 된 계기이며, 이때를 전후로 실무에 깊숙하게 전파되었습니다. 여기서 탄생한 12컬럼이 지금까지도 이어져 웹페이지의 단을 나누는 기준이 되었습니다.

반응형 그리드 시스템을 알아야 가능한 설계

여기까지만 보면 쉽습니다. 해상도가 증가할수록 4개의 컬럼만 추가해주면 됩니다. 게다가 컬럼 값에 변화가 없어 미디어 쿼리를 사용하지 않아도 반응형을 제작할 수 있었습니다. CSS의 float:left와 display:block 등을 활용해서 말이죠. 배치만 다시 해주면 되는 비교적 간단한 작업이었습니다. CSS 코드의 길이도 늘어나지 않아 글로벌 사이트 등 네트워크 환경이 취약한 환경에서도 최적화가 가능했습니다. 이 무렵 국내에서 자주 보이던 디자인 형태가 바로.

메트로 디자인 - 윈도우8의 기본 UI로부터 시작되었다

메트로 디자인입니다. 대부분의 디자이너나 개발자들이 비교적 빠르게 미디어 쿼리에 적응해 그리 오래가지는 못했지만, 퍼블리싱에 익숙하지 않은 디자이너가 반응형 디자인을 이해하는데 있어, 또 작업하는데 있어 많은 도움을 주었습니다. 단, 구성이 너무 단조롭다는 단점이 있었지요.

그럼 다시 본론으로 돌아와 1280 이상의 그리드는 어떻게 단을 구성해야 할까요? 또다시 4개의 컬럼을 추가할까요? 이때부터 실무 디자이너들이 고민에 빠집니다. 바로 이전 해상도인 1024에서 얼마 차이 나지 않는 수치로 해상도가 증가했거든요. 고작 200이 조금 넘는 수치입니다. 스크롤바 영역을 제외하면 차이는 더 줄어들죠. 늘어난 해상도에 맞춰 컬럼을 추가해 16 또는 24컬럼으로 단을 맞출 것인가? 아니면 12컬럼을 유지하며 콘텐츠나 일정 레이아웃을 유지할 것인가?

결국 많은 디자이너들이 후자를 택했습니다. 더 이상의 단 나누기는 의미가 없었거든요. 그렇게 12컬럼의 그리드 시스템이 지금까지 이어져왔고, 아직까지도 1280 해상도를 쓰는 사용자가 남아 있다는 이유로 우리가 작업하는 컨테이너 사이즈는 1200에 머물러 있습니다. 4K를 넘어 8K까지 등장한 시대에 말이죠. 심지어 접히는 디스플레이까지 등장해 반응형 작업이 더욱더 섬세하고 정밀하게 되어야 하는 명분까지 생겨났습니다. 위의 설명한 것이 대충 이해가 되셨다면 반응형을 설계하기 이전에 왜 그리드 시스템을 알아햐 하는지 알게 되었을 겁니다. 모르고 지나가다간 언젠가 도태되겠구나 하는 일종의 걱정거리도 함께 찾아왔겠지요.

웹 그리드 시스템에 대한 단서를 어느 정도 드렸으니 위에 언급되지 않은 360, 768, 1920등의 그리드도 찾아보시기 바랍니다. 선배들이 멘땅에 헤딩해가며 습득한 기술이나 이론들. 그것을 '별다른 시행착오 없이 빠르게 습득할 수 있다'라는게 후배라는 사람이 가질 수 있는 '최고의 베네핏' 아닌가 생각해 봅니다. 아직 끝나지 않았습니다. 이번엔 8포인트 그리드 시스템을 알아봅니다.

디테일의 기준, 8포인트 그리드

8-Point Grid

8포인트 그리드는 그다지 어렵지 않습니다. 해상도에 크게 영향을 받지 않고 그냥 8이라는 기준 단위로 요소를 정렬하고 배치하고 만들면 됩니다. 앞서 설명드린 8이라는 숫자가 지닌 장점을 적극 활용하는 이론입니다. 딱히 이론이라고 말하기도 뭐합니다. 그냥 방법이라고 하죠. 반응형 웹 그리드 시스템이 해상도를 기준으로 한 가로 정렬의 잣대로 활용되었다면, 이건 큰 범위에서 세로 정렬 그리고 좀 더 디테일한 부분에 활용됩니다.

8포인트 그리드를 적용한 카드 디자인 예시

명칭이 8포인트라 조금 헷갈릴 수도 있는데요. 우리가 웹 작업하는 72 dpi에선 8pt가 곧 8px입니다. 1:1로 봐주세요. 위 이미지를 살펴보면 별다른 규칙없이 작업한 것보다 더 일관성 있고 정렬된 결과물을 얻어낼 수 있다는걸 알수있습니다. 초심자, 신입이라면 이러한 것들을 먼저 습득하고 여기에 자기 것을 조금씩 타가며 변형을 주는 게 좋은 공부 방법이 될 수 있다 생각합니다. 8pt 그리드를 적극적으로 활용한 대표적 디자인이 구글의 머티리얼 디자인입니다.

구글의 머티리얼 디자인 가이드, 대부분의 수치값이 8을 기준으로 한다.

시간 나실 때 공부해 보시거나 실무에 적용해보세요. 좋은 경험이 될 거라 생각합니다. 포토샵에서 적용하는 방법도 생각보다 쉽습니다. Preferences > Grid관련 메뉴로 진입해 해당 수치 값을 아래와 같이 바꿔준 후, Ctrl + '(따옴표)를 눌러 그리드를 켜고 작업하면 됩니다. 8이 최소 단위로 크다 생각되면 4를 최소 단위로 사용해도 됩니다. 4도 결국 정수로 나눠지니까요.

마치며...

요즘 유튜브나 각종 인터넷 강의에 '그리드 거터나 컬럼 수치 자유롭게 하세요' 라고 말하는 사람들 많이 보입니다. 사실 화가 많이 납니다. 가짜라는 생각이 듭니다. 누구를 교육할 자격이 없는 사람들이라 생각됩니다. 그들의 입에서 '요즘 그리드 누가 써요? 탈그리드 가세요!'라는 말이 나오는 것 또한 짜증이 납니다. 함께 하는 팀원이었다면 귀싸대기를 한방 날려줬을 겁니다. 디자인 헛배웠습니다.

그간 이론이고 기술이고를 모르면서도 단지 내가 만든 시안, 브라우저 상에 깨지지 않게 보이고자 의견 공유하며 노력해오던 선배들의 얼굴에 침을 뱉는 자들입니다. 선배들의 노력을 헛되게 만들지 말아 주세요. 꽤 많은 사람들이 제게 묻습니다.

'너는 기술을 하겠다는 거냐? 예술을 하겠다는 거냐?'

이해합니다. 누가 보아도 설득력 있고 좋은 디자인은 이따위 수치에 연연하지 않아도 나옵니다. 그런 부류의 사람들에겐 뺏고 싶을 정도의 감각이란 게 있습니다. 저는 아닙니다. 설령 과거에 비슷한 게 제게 있었다 하더라도 지금의 저는 아닙니다. 왕년에 날리던 축구선수가 감독이 되어 선수들에게 이론을 전파합니다. 경험을 알려줍니다. 문제는 감독의 체력은 현 선수들에는 미치지 못합니다. 몸소 보여줄 게 없습니다.

제가 선택한 생존법이라 생각합니다. 그 때문에 아직까지 실무에 남아 있는 거고, 노력하면 감각도 나아질 수 있다 생각합니다. 물론 그전에 제 디자이너로서의 수명이 다할 수도 있겠지요. 그래도 그냥 해보렵니다. 언젠가 제 자식 놈들 초등학교에 입학해 언젠가 학교 참여 수업 같은 걸 해볼 수 있다면

"안녕하세요. 여러분! 준휘 아빠 최성우입니다. 디자이너로 일하고 있어요!"라고 첫인사 건네고 싶습니다.

오늘도 길고 복잡한 글 읽어주셔서 감사합니다. 항상 으라차차 하세요!

나는 예술을 하고 있다