디자인 시스템 만들기-4 그리드 시스템
Foundation - Grid 정하기
들어가며
지난번 디자인 시스템 만들기-3에서 브레이크 포인트를 아래와 같이 설정하였다.
안 보신 분들은 아래 글 먼저 확인!
https://brunch.co.kr/@bommade/22
Mobile 0~599px
Small Tablet 600px ~ 1023px
Large Tablet 1024px ~ 1439px
Desktop 1440px ~ 1920px
이제 이 브레이크 포인트에 따른 최적화된 그리드 시스템을 만들어 보자
1. 먼저 그리드 시스템이란 무엇인가?
그리드 시스템에서 그리드(Grid)는 격자나 바둑판 모양의 눈금을 말한다.
디자이너라면 누구나 알법한 그 그리드가 이 그리드이다. 이 그리드는 디자인 레이아웃에 규칙을 부여하는 수단으로 디자인이 동일한 그리드 규칙을 따르게 된다면 자동으로 일관된 UI를 갖게 된다.
그리드 시스템은 편집 디자인에서부터 시작되어 웹디자인까지 넘어오게 되었다.
그리드 시스템을 통해 균일한 요소와 간격을 사용하면 다양한 환경과 화면 크기에 있어서도 최적화된 일관성 된 화면을 보여주고 그래픽 요소의 체계적인 배열을 할 수 있다. 특히 여러 화면을 대응하는 반응형 페이지 구축에서는 디자이너와 개발자의 커뮤니케이션을 도와주며 디자이너 또한 한결 디자인 대응이 편해진다.
2. 그리드 시스템의 구성요소
그리드 시스템의 구성요소는 칼럼(Column), 거터(Gutter), 마진(Margin) 세 가지이다.
출처 : 머터리얼 디자인 시스템1) 칼럽(Column)
칼럼은 실제로 콘텐츠를 포함하는 부분으로 1개 이상의 칼럼을 조합하여 콘텐츠의 크기를 결정한다. 그리고 칼럼 안에는 반드시 양 옆에 여백을 두어야 한다.
2) 거터(Gutters)
거터는 칼럼과 칼럼 사이의 여백을 말한다. 즉 콘텐츠와 콘텐츠 사이의 간격을 말한다.
3) 마진(Margin)
마진은 화면의 맨 왼쪽 및 오른쪽 가장자리 사이의 공간을 말한다. 칼럼과 칼럼 사이의 공간이 거터라면 칼럼과 화면과의 간격을 마진이라고 할 수 있다.
3. 실제로 그리드 시스템 만들어 보기
그리드 시스템을 만들기 전 브레이크 포인트 별 대표 기기를 선정한다.
대표 기기를 선정해야 화면당 대표가 되는 그리드 시스템 규칙을 만들 수 있다.
--------------
Mobile 0~599px / 대표 기기 360px
Small Tablet 600px ~ 1023px / 대표 기기 768px
Large Tablet 1024px ~ 1439px / 대표 기기 1024px
Desktop 1440px ~ 1920px / 대표 기기 1440px
--------------
대표 기기를 선정한 기준은 사람들이 가장 많이 사용하는 기기와 최소 사이즈를 고려하여 정하였고, 이 대표 기기의 기준에 따라 마진, 거터, 칼럼 값을 설정하였다.
가장 많이 참고한 것은 머터리얼 디자인의 그리드 시스템으로, 기기별 칼럼은 몇 칼럼으로 할지, 마진/거터 값은 어떻게 고정하며 콘텐츠 영역(container)은 stretch로 늘어날지 가운데 정렬로 고정할지 등을 정하였다.
<그리드 시스템 구축 시 정해야 할 사항>
- 기기별 몇 칼럼 규칙을 적용할 것인가?
- 각 브레이크 포인트 대표 기기별 마진, 거터, 칼럼 규칙은 어떻게 정할 것인가?
- 브레이크 포인트 내 화면에서 콘텐츠 구간은 stretch 될 것인가 아니면 고정값으로 가운데에 정렬될 것인가?
* 참고하면 좋을 사이트
http://designbase.co.kr/sketch-4/
https://material.io/design/layout/responsive-layout-grid.html#breakpoints
마진 거터에 따른 칼럼 크기를 정하는 데에는 아래 사이트 도움을 받았다.
자동으로 칼럼의 크기를 계산해준다.
이러한 과정을 통해 우리 팀은 아래와 같이 브레이크 포인트 구간 내에서 어떻게 콘텐츠 영역이 적용될지 정리하여 디자인 시스템을 완성하였다.
그리드 시스템 일부4. 피그마에 적용하기
피그마에 그리드 시스템을 적용하여 사용할 수 있다.
우리 팀은 피그마를 메인 툴로 사용하기 때문에 각 기기별 그리드 스타일을 등록해 두었다.
프레임을 만들면 오른쪽 패널에 Layout grid라는 항목이 보인다.
여기에서 '+' 버튼을 클릭하여 각 기기별 그리드 스타일을 지정하면 된다.
이렇게 스타일을 지정해 두면 디자인을 할 때 일일이 가이드 선을 그리지 않아도 해당 그리드에 맞춰서 작업을 하면 된다. 또한 정해진 규칙 안에서 디자인을 하기 때문에 창의도는 떨어질 수 있으나 일관된 화면을 만들어 안정감을 줄 수 있다.
정리하며
그리드 시스템은 칼럼 단위로 요소를 구성하기 때문에 많은 양의 콘텐츠를 담더라도 정돈된 느낌을 주고 일관되고 통일성 있는 디자인이 가능하다. 특히나 반응형 디자인을 고려하여 디자인이 가능하기 때문에 여러 해상도 대응이 용이하다.
반응형에서는 12 column 그리드 시스템을 많이 사용하는데 이는 12 column 규칙을 세웠을 때 태블릿, 모바일 등으로 화면이 작아질 때 일정한 규칙에 따라 콘텐츠를 배치하기 쉽기 때문이다.
지금 만들고자 하는 서비스가 웹 기반 서비스이거나 앱, 웹 모두를 지원한다면 디자인 시스템을 구축하는 데 있어 그리드 시스템을 정하는 것은 필수적이다.
각자 현재 만들고 있는 프로덕에 맞는 최적화된 대표 대응화면을 설정하고 이에 따른 그리드 시스템을 구축하자.
-끝-
이전 디자인시스템 글 보기
