brunch

라이킷 1,284 댓글 18

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 플러스엑스 Apr 23. 2018

모바일 디자인할 때 그리드 시스템 꼭 사용해야 할까?

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)로만 디자인을 하고 이를 프로그램 자체에서 자동으로 확대 추출해주기 때문에 수치에 대한 신경을 쓰지 않아도 된다.