그리드 시스템 이해하기

그리드 시스템: 통일성 있는 UI를 위해 동일한 규칙을 만든다!

(브랜드의 통일성과 일관성을 위해)

 

컬럼: 실제 UI컨텐츠가 들어가는 것

거터: 컬럼의 사이 간격

마진: 거터와 컬럼을 감싸는 간격

 

 

 

구글 머티리얼 디자인에서 제공하는 그리드 시스템

*모바일 해상도 360dp기준: 4컬럼, 16거터, 16마진

*태블릿 해상도 기준 600dp: 8컬럼, 24거터, 32마진

 

 

=> 이 두가지 그리드 시스템의 공통점 : 모든 수치 값이 8의 배수라는 점!

>> 왜 8의 배수일까?

 

안드로이드 해상도는 1배수인 mdpi를 기준으로 화면을 5단계로 나누었다.

여기서 가장 큰 배수 4배수의 화면에 4픽셀의 선이 있다고 가정했을 때!!!!! 소숫점인 1.5배수의 화면을 제외하고 모든 수에 대응이 가능함

 

>> 1.5를 정수로 만들어 주기 위해 여기에 각각 2를 곱하면

2,3,4,6,8의 숫자가 나옴.

그래서 이 값을 기준으로, 수치 8은 그 이하의 해상도를 모두 대응할 수 있다! (그래서 구글은 이걸 사용)

 

거기에 0~8사이 값이 너무 커서, 거기에 4를 추가한 8dp grid시스템을 권장하고 있음!

 

 

하지만, 이 그리드 시스템이 적용되지 않는 곳이 있으니 바로 애플의 iOS시스템!!

애플의 iOS해상도는 375*667 홀수 해상도에 맞는 홀수 그리드 시스템을 사용하고 있음!

 

 

=> 그래서 그리드에도 정답은 없다. 우리는 우리팀만의 그리드 시스템을 만들고 개발자들과 함께

만들어 나가면 됨!

 

 

 

Class101팀 내부에서는, 375*812해상도로 짝수인 8배수 그리드 시스템을 사용중!