기기별 그리드 시스템 만드는 방법

기기별로 그리드 시스템을 만드는 기준, 그리드 시스템을 만드는 방법에 대해 정리합니다.

 

웹이나 앱을 디자인 할 때 모바일, 태블릿, 데스크탑 등의 기준으로 그리드를 나눠 관리하면 시각적으로도 일관적이며 반응형 설계에도 효과적입니다.

 

그리드는 레이아웃의 토대가 되는 화면 구성의 기본 중의 기본이니, 그리드를 이해하고 만드는 방법을 꼭 이해하셨으면 좋겠습니다.

 

이 글에서는 먼저 그리드 시스템이 무엇인지 이해하고, 기기별 구체적인 그리드 설정 기준과 만드는 방법에 대해 알아보겠습니다.

0. 그리드 시스템이란?

그리드는 디자인 영역을 구획하는 것을 의미합니다.

 

이러한 그리드 시스템을 사용하면 이미지, 문자, 여백 등이 어떻게 배치되느냐에 따른 효과를 고려해서 디자인을 할 수 있습니다.

 
배치에 질서와 구조를 줌으로서, 일관성을 부여할 수 있습니다.

 

그리드 시스템을 설정하려면, 그리드 간의 간격을 띄우는 기준선이 있어야 합니다.

 

간격은 비율, 컨테이너 기준선, 터치 대상에 영향을 줄 수 있는 기준선, 그리드 패딩, 증분 간격 등을 사용합니다.

 

기본적으로 모바일, 태블릿, 데스크탑의 모든 구성 요소는 8dp의 기본 그리드에 맞춰서 정렬합니다. 

 

 

dp가 무엇인지 궁금하다면, 해상도와 밀도에 대해 정리한 글이 있으니 참고하시면 되겠습니다.

 

안드로이드 iOS 모바일 해상도 기준

이는 0.5픽셀이라는 게 없기 때문에, 대응하지 못하는 수가 없도록 계산한 결과입니다. (경우에 따라 버튼, 리스트 항목의 가운데에 타이포그라피가 있을 때는 4dp 그리드에 맞출 수도 있습니다.)

1. 기기에 따른 그리드의 기준

기기마다 기본적인 그리드 컬럼의 기본은 다음과 같습니다.

 

• 모바일 360dp기준 : 4컬럼
• 태블릿에서는 600dp기준 : 8컬럼
• 데스크톱은 1280dp기준 : 12컬럼

 

참고로 머티리얼 디자인 가이드에서 권장하는 컬럼의 모바일 컬럼의 갯수는 4컬럼이지만, 실제로는 6컬럼을 많이 사용합니다.

 

6컬럼을 사용하면 2분할과 3분할이 모두 가능하기 때문입니다.

※ 또한 그리드를 설정하고 디자인을 할 때는, 레이아웃 전체의 일관성을 유지하는 반응형 레이아웃을 고려하는 것이 좋습니다.

 

 

반응형 레이아웃을 이해하고, 설계하기 위해 참고할만한 사이트들을 모은 글이 있으니 확인해보세요.

 

반응형 웹사이트를 제작한다면 꼭 봐야할 사이트 모음

 

 

2. 그리드 만들기

 

그리드 구성 요소

 

그리드 시스템의 구성 요소는 마진, 거터, 컬럼입니다.

 

• 가장 왼쪽과 오른쪽의 여백은 거터가 아니라 마진이라고 합니다. (콘텐츠 바깥쪽 여백)
• 거터는 컬럼과 컬럼 사이의 영역을 말합니다. (콘텐츠 안쪽 여백)
• 컬럼은 콘텐츠가 포함된 영역입니다. (콘텐츠 영역)

그리드를 만드는 순서

 

그리드 시스템을 만들 때는 다음과 같은 순서로 진행합니다.

 

1. 마진을 지정합니다.
2. 거터를 지정합니다.
3. 마진과 거터를 뺀 나머지 값을 나눠서 컬럼을 지정합니다.

 

구글 머티리얼 디자인 가이드는 마진의 기본값으로 16dp를 권장하지만, 꼭 16dp가 아니어도 시각적으로 보았을 때 균형이 있어 보이면 됩니다. 

 

※ 초보라면 디자인을 통일성 있게 정돈하기 위해서 머티리얼 디자인 가이드를 지키는 것도 좋겠습니다.

 

이러한 그리드 영역의 마진, 거터, 컬럼의 수치 계산을 쉽게 하려면 gridcalculator라는 그리드 계산 사이트를 이용할 수 있습니다.

 

 

 

이 밖에도 모바일 운영체제별 해상도 기준에 대해 정리한 글이 있으니 참고해보세요.

 

안드로이드 iOS 모바일 해상도 기준

 

 

이상으로 기기별로 그리드 시스템을 만드는 기준과 그리드 시스템 만드는 방법에 대해 정리해보았습니다. 읽어주셔서 감사합니다.