UIUX : 디자인에서 그리드 시스템의 중요성

디자인을 처음 시작할 때 가장 많이 하는 질문이 아래와 같은 그리드 시스템과 관련된 내용일 것이다

• 그리드 시스템은 왜 설정해야 하나요?
• 그리드 시스템은 어떻게 설정해야 하나요?
• PC/Mobile별 그리드 시스템이 다른가요?

이 질문들에 답을 내기 위해서는 먼저 그리드 시스템이란 무엇인지를 한 번 정의해 볼 필요가 있을 것이다.

그리드 시스템이란?
디자인의 가장 기본이 되는 뼈대로 이를 주축으로 텍스트, 이미지, 버튼 등의 요소들의 배치를 돕는 가이드 시스템.

그렇다면 이러한 요소들을 배치하기 위해서는 꼭 그리드 시스템을 설정해야 할까라는 의문이 들 수도 있다. 이러한 의문을 해소하기 위해서, 요소를 배치하는데 그리드 시스템이 얼마나 도움이 되고 중요한지 다시 한번 정의해볼 필요가 있을 것이다.

그리드 시스템을 왜 설정해야 할까?
이 질문에 명확한 답은 요소들 간의 체계를 만들기 위해서라고 할 수 있을 것이다. 우리는 처음 설정해 놓은 그리드 시스템에 맞춰 좌우를 정렬하고 요소들을 배치할 시작점을 지정한다. 또 처음 그리드 시스템에 맞춰 하나의 요소를 배치하는 방법을 정하면, 이를 그다음 요소에도 동일한 방법으로 적용하게 되는데 이는 곧 큰 의미에서 디자인 가이드라인이 되기 때문에 그만큼 그리드 시스템을 설정하고 적용하는 것은 중요하다.
즉 그리드 시스템을 설정하고 적용하는 것은 내 디자인에 룰과 정책을 만드는 작업이라고 할 수 있다.

그리드 시스템을 왜 설정해야 하는지에 대한 정의가 끝나고 나면 다음으로 드는 생각은 그럼 어떻게 설정해야 할까 이다.

그리드 시스템은 어떻게 설정해야 할까?
어떤 요소든 마찬가지이지만 특히 그리드 시스템은 디바이스의 종류나 제작하고자 하는 앱/PC의 목적과 기획의도, 컨셉에 따라 의도적으로 다르게 설정해야 한다. 디바이스별로 그리드 시스템이 달라야 하는 이유는 명확하다. 디바이스별로 화면의 크기가 다르기 때문이다. 각 화면에서 최적의 상태로 콘텐츠와 서비스를 제공하기 위해서는 화면 비율에 맞춘 가이드 적립이 필요하다. 또 서비스나 콘텐츠를 사용자에게 더 명확하게 전달하기 위해서는 사이트나 앱 서비스의 목적과 의도에 맞춰 그리드 시스템을 설정해야 한다.

이렇게 최적화된 그리드 시스템을 설정하기 위해서는 대표적 디바이스인 PC와 모바일의 그리드 시스템을 파악하고, 이를 제작하고자 하는 서비스의 목적과 의도에 맞춰서 선택/적용해야 한다.

---

이 포스팅에서 제안하는 PC와 모바일의 그리드 시스템은 아래와 같다. 디자인에는 정답이 없듯이 그리드 시스템에도 정답은 없지만, 실무에서 쌓은 경험을 바탕으로 가장 보편적인 그리드 시스템을 제안하고자 한다.

PC 그리드 시스템
1. Container 형 : 1440의 기본 컨테이너 안에서 모든 요소를 배치하는 그리드 시스템

Container Grid Stystem

컨테이너형은 사이트를 디자인할 때 가장 많이 사용하는 그리드 시스템일 것이다. 어떤 시스템을 신청하거나 사용자에게 보여주고 싶은 콘텐츠가 많을 때 주로 선택하는 그리드 시스템이다. 컨테이너형은 말 그대로 가운데 컨테이너 사이즈를 1350/1440 등의 기본 사이즈를 정하고 그 안에다가 배치하는 형태인데, 이는 각기 다른 사용자의 화면에 대응할 수 있는 가장 좋은 방법이다. 예전에는 1240 사이즈를 많이 썼으나 현재는 모니터의 크기가 점점 커지는 추세에 맞춰 컨테이너 사이즈도 키우고 있다.

---

2. Fullscreen 형 : 모니터의 전체 스크린에 꽉 차게 요소를 배치하는 그리드 시스템

Fullscreen Grid Stystem

풀스크린형은 보통 비주얼적인 이미지가 중요하거나 컨셉적인 전달을 더 강렬하게 하고 싶을 때 주로 사용하는 그리드 시스템이다. 최근에는 정보전달이나 신청 같은 기능성 사이트보다 브랜드의 아이덴티티를 강조하고 사용자들에게 각인시키는 이미지형 사이트가 늘어나면서 풀스크린형 그리드 시스템의 사용빈도도 더 늘어나고 있다.

---

모바일 그리드 시스템
모바일은 보통 PC처럼 세밀한 그리드 시스템을 설정하지는 않지만 사진과 같이 3/4단 그리드를 설정해서 디자인을 진행한다. 전체 레이아웃을 잡는 용도보다는 바텀 내비게이션, 탭 아이콘 배치 등 주로 하나의 콘텐츠 배치를 위해 설정한다.

---

디자인을 할 때 그리드 시스템은 필수적 요소이지만 늘 그렇듯 디자인에 정답은 없기에 어느 정도 유동적이게 사용할 수 있다. 위에서 소개한 그리드 시스템들을 피그마에서 설정하기 위한 옵션 값과 라이브러리에 등록하는 방법이 궁금하다면 아래 글을 참고해주세요
https://yeon-design.tistory.com/19

피그마(Figma) 꿀팁 : 그리드 설정 방법 및 스타일별 옵션 값 & 라이브러리 스타일로 지정하는 방법

그리드뿐만 아니라 적응형과 반응형 디자인의 차이점에 대해 더 알고 싶다면 아래 포스팅을 참고해주세요
https://yeon-design.tistory.com/m/26

적응형과 반응형 디자인의 차이점과 제작시 고려사항

그리드의 기본 개념과 설정시 고려사항은 아래 포스팅을 참고해주세요

2023.05.21 - [UIUX 디자인] - 웹디자인 기초 : 기본 그리드 설정방법과 개념 및 제작시 고려사항

웹디자인 기초 : 기본 그리드 설정방법과 제작시 고려사항