모바일 디자인할 때 그리드 시스템 꼭 사용해야 할까?
author - rustyat, br│UI 디자이너
자료를 찾기 위해 비핸스나 드리블을 둘러보다 보면 모바일에서도 그리드 시스템을 잘 적용하여 디자인한 레퍼런스를 종종 볼 수 있다.
그렇다면 모바일에서 그리드 시스템을 사용하지 않고 디자인을 하고 있다면 잘못된 방식으로 디자인을 하고 있는 걸까? 필드에서 실무를 하는 디자이너들도 그리드 시스템을 효율적으로 사용하고 있을까?
그리드 시스템에 대한 이론적인 이야기가 아닌 우리가 모바일 디자인을 시작할 때 레이아웃을 잡는 방식이나 그리드 시스템을 실제로 사용하고 있는지에 대한 이야기를 해보고자 한다.
디자인할 때 ‘기준’과 ‘규칙’은 중요하다
위 일러스트에서 이야기하고 있듯이 우리는 모바일 디자인을 할 때 그리드 시스템을 잘 사용하지 않는다.
우리가 작업한 L.POINT 앱을 사례로 들어보면, 1x(360*640) 기준으로 좌우 마진 20, 메인에서 사용하고 있는 90, 이 두 가지 기준선을 이용해서 모든 화면을 디자인 했다. (아래 왼쪽 이미지 참고)
그리드 시스템을 사용하기를 권장하는 글을 읽어보면 그리드 시스템의 장점을 아래와 같이 이야기한다.
① 정돈되어 보인다.
② 통일성을 준다.
③ 협업의 목적으로 내부의 기준을 정하는 것에 도움이 된다.
④ 반응형 디자인의 경우 해상도 대응이 쉬워진다.
이와 같이 그리드 시스템의 여러 장점이 있지만 이것이 모바일 디자인을 할 때에도 효율적인지가 문제이다.
사실 그리드 시스템은 편집 디자인에서 레이아웃을 잡기 위해 사용하던 방식으로 가로폭이 넓은 웹을 디자인할 때 활용도가 높다.
우리도 웹을 디자인할 때에는 12 column, 16 column을 기반으로 레이아웃 구성을 하기도 하지만 가로폭이 좁은 모바일 같은 경우에는 면분할에 한계가 있기 때문에 필수적으로 사용하고 있진 않다.
위에서 언급한 그리드 시스템의 장점 중 ①, ②, ③은 그리드 시스템을 쓰지 않아도 규칙만 있다면 충분히 위 3가지 장점을 구현할 수 있다.
하지만 그럼에도 불구하고 최소의 영역으로 그리드 시스템을 모바일에 적용할 수 있는 부분이 어디까지인지를 찾아보고 정리해보려 한다.
그리드 시스템을 잡기 전, 좌우 마진을 정하자
모바일 디자인을 시작하기 위해 아트보드를 생성하고 가장 처음으로 고민하는 것이 좌우 마진(margin)을 어느 정도로 줄지를 결정하는 것이다. 좌우 마진을 뺀 영역이 실질적으로 디자인할 때 사용할 수 있는 공간이고, 좌우 마진을 결정해야 나머지 영역을 쪼개서 그리드를 잡을 수 있기 때문이다.
그래서 우리가 평소에 많이 쓰는 앱들은 어떤 좌우 마진 값을 쓰는지 알아봤다.
1x 기준으로 보통 15/16, 20을 많이 쓰고 넓게는 25, 좁게는 10/12의 마진을 사용하는 것을 확인해볼 수 있었다.
마진은 사실 디자이너의 마음이다
마진은 각 서비스의 특성에 맞게 디자이너가 디자인을 하면서 선택하면 되는 부분이라 ‘꼭 이렇게 해야 한다’라는 정답 같은 건 없다.
보통 5의 배수(10, 15, 20, 25)나 4의 배수(12, 16, 20, 24)로 마진을 많이 쓰고 있고, 우리도 15, 20 등의 마진을 사용하여 디자인을 하고 있다.
Google Material Design Guide에서는 마진뿐만 아니라 버튼 크기, 아이콘 크기 등을 8의 배수로 사용하길 권장하고 있지만 여러 방면의 다양한 서비스를 디자인하는 우리의 입장으로서는 8, 16, 24 단위는 선택의 폭이 제한적이라고 느끼기 때문에 이 권장 사항을 지켜가며 디자인하고 있지는 않다. 만약 우리가 구글 서비스를 디자인해야 한다면 이야기가 달라지겠지만 말이다.
(Google Material Design Guide ‘Layout – Metrics & keylines’ : https://material.io/guidelines/layout/metrics-keylines.html#metrics-keylines-baseline-grids)
스케치(Sketch)가 나오기 전 포토샵(Photoshop)으로 모바일 디자인을 할 때에는 그 당시에 범용적인 해상도(720*1280, 750*1334와 같은)로 주로 디자인을 했다.
이때 각 해상도 대응을 위한 사이즈 베리에이션이 될 것을 미리 고려하여 여백이나 아이콘, 폰트 크기 등을 ‘2의 배수’ 혹은 ‘3의 배수’와 같은 수치로만 디자인을 해야 했다. (개발에서 소수점 대응이 되지 않기 때문에 1/2, 1/3로 나눴을 때 소수점이 나오지 않도록 주의하며 디자인을 해야 한다.)
하지만 스케치로 작업을 하면서 1x(360*640, 375*667)로만 디자인을 하고 이를 프로그램 자체에서 자동으로 확대 추출해주기 때문에 수치에 대한 신경을 쓰지 않아도 된다.
모바일에서 그리드 시스템은
2분할, 3분할을 포함할 수 있는 6 column으로
앞서 말했듯이 모바일은 가로폭이 좁기 때문에 면분할에 한계가 있다.
웹과 같이 8등분, 12등분, 16등분 분할할 수 없기 때문이다.
모바일에서의 그리드는 일반적으로 4 column 또는 6 column을 기준으로 화면을 구성할 수 있는데 우리는 2분할, 3분할 두 가지 모두를 포함할 수 있는 6 column으로 디자인하는 것을 선호한다.
(몇 column으로 디자인할지 역시 디자이너의 선택이다.)
하지만 이 또한 서비스 특성에 따라 활용이 될 때가 있고 그렇지 않을 때가 있다.
좌우 마진이 결정되면 그 값을 고정한 나머지 영역에 gutter를 적절하게 정의하여 그리드를 생성해서 이를 바탕으로 디자인을 진행하면 된다.
반응형인 경우 그리드 시스템을 사용하면
해상도 대응이 쉽다?
위에서 언급한 그리드 시스템의 장점 중 모바일에서 그리드 시스템을 써볼 만한 이유가 되어주는 것이 ‘④ 반응형 디자인의 경우 해상도 대응이 쉬워진다’는 부분인 듯싶다.
여러 디바이스의 화면 사이즈를 고려해 하나로 사용하는 반응형 웹을 디자인할 때 그리드 시스템을 사용하면 도움을 받을 수 있다.
우리는 반응형 웹을 할 경우 720, 1024, 1334, 1600 네 가지 분기 처리(Breakpoint)를 기본으로 하려고 한다.
* Breakpoint
‘중단점’, ‘중지점’이라고 해석되는 이 용어는 480, 600, 840… 과 같이 특정 지점을 기준으로 화면의 레이아웃이 바뀌는 지점을 말한다.
아래 이미지는 모바일에서 사용한 6 column의 2배인 12 column으로 1024, 1366, 1600 해상도를 대응한 예시 화면이다.
모바일에서 했던 것과 마찬가지로 좌우 마진 값을 뺀 영역에 그리드 시스템을 적용시키면 된다.
그리드 시스템의 수치가 딱 떨어지지 않아도 상관없다. 어차피 그리드 시스템은 디자인을 수월하기 위한 수단이지 그것 자체가 목적이 아니기 때문에 너무 얽매일 필요가 없다.
아래 예시 화면도 모든 요소를 그리드 시스템에 맞추지는 않은 모습을 확인할 수 있다.
그리드 시스템은 절대적인 규칙이 아니다
매체를 불문하고 그리드 시스템은 디자인 구성 원리 중 ‘통일성’을 실현시킬 수 있는 수단이다.
큰 틀에서의 통일감을 유지하면서 각 화면이 어떻게 변화와 조화, 균형을 이루게 할 것인지를 고민하는 것은 UI 디자인에서도 마찬가지이다.
하지만 그리드 시스템은 절대적인 규칙이 아니다.
그리고 우리의 방식이 무조건 정답은 아니다.
그리드의 이론적인 기준이나 규칙에 갇혀 자유롭게 디자인을 하지 못하게 만드는 틀이 아닌, 레이아웃을 잡는데 도움을 받는 가이드 수준으로 생각하고 적용하는 것이 중요하다.
사실 우리는 규칙과 가이드를 지키는 것에 엄격한 조직은 아니다.
안정적이고 기존에 있던 것을 따르는 것보다 다른 것, 더 나은 것을 위해서 새로운 시도를 하는 편이다.
하지만 그럼에도 불구하고 여러 직군의 사람들이 함께 하나의 결과물을 만들어가는 분야에서 일을 하고 있기 때문에 규칙과 기준이 될 수 있는 것들을 조금씩 정의하고 정리해 나가려고 한다.
오늘의 이 글이 모바일에서의 그리드 시스템에 관한 막연한 생각들에 조금은 도움이 되었길 바란다.
-
플러스엑스의 다른 글 읽기
시작하면서. 아무것도 모르는 상태에서 시작하면 되는 걸까?
첫 번째 이야기. 나는 무엇을 해야 하는가?
두 번째 이야기. 디자인 영역에 대한 고민
세 번째 이야기. 모바일 디자인할 때 그리드 시스템 꼭 사용해야 할까?
네 번째 이야기. 해상도의 기준이 있어야 UI디자인을 시작할 수 있다
다섯 번째 이야기. 중국 기업 경험기(NetEase Kaola)
