[웹디자인] 웹디자인의 필수 - 그리드 시스템과 레이아웃

그리드 시스템을 배우는 이유는?

 

다양한 디자인이 나오고 있는 상황에서 웹과 앱을 모두 다룰 줄 알아야 하기 때문에

그리드로 기준을 잡고 제작하면 반응형에 대응하기 쉽고 일정 레이아웃이 나올 수 있기 때문입니다.

 

그리드 시스템이란?

 

1. 컨테이너 > 컨텐츠의 크기

2. 컬럼 > 단의 수 

3. 거터 > 단끼리의 거리

4. 좌우 마진 

 

으로 이루워진 가이드 라인이다.

 

* 컬럼의 크기가 정수로 떨어져야 마음이 편안한 사람이 있지만 사실 소수점으로 떨어져도 된다.

어차피 반응형을 대비해서 가이드를 만들기 때문이다. 

 

웹디자인에 최적화 된 그리드 시스템은?

 

1. 컬럼  > 12단

- 12단이 반응형에 대응하기 가장 좋다.

 

2. 거터 값 .> 30 , 24 , 20

- 커터값은 통일 시켜야 디자인도 일정하고 개발자가 개발 할 때도 편하다

 

3. 좌우 마진값

- 얼마를 주던 디자이너에 따라 다르지만 안주는 경우 반응형에서 레이아웃이 굉장히 답답해 보인다.

 

모바일에서는 어떻게 할까?

 

1. 모바일 크기 설정

모바일 크기는 디자이너나 회사마다 기준이 모두 다르기 때문에 있다면 정해진 기준을 따르지만 없다면 최대한 다 반영 할 수 있는 크기를 따르는 게 좋다. 다만  320px 너무 오래 되었기 때문에 굳이 반영하지는 않는다.

 

2. 요소

- 마진 > 20px

- 커터 > 8/16/20

- 컬럼 > 4~6단

 

*** 그리드 시스템을 이용시 주의점

 

1. 거터값을 포함하지 않는다.

- 거터값을 살짝 침범해도 되지만 아예 포함해서 컨텐츠 크기를 잡지는 않는다.

 

2. 세세한 요소 까지 시스템에 따라 움직이지 않아도 된다.

- 글자 하나하나 시스템에 맞출려고 우겨넣지 않아도 된다. 큰 덩어리는 지키되 작은 요소는 보다 자유롭게 이용해도 된다.

 

3.  그리드 시스템에 벗어났을 시

- 무조건 컬럼 크기에 맞춰 레이아웃을 짤 필요는 없다. 크기를 줄여서 그리드에 벗어나도 상관없다. 줄인 크기에 그리드를 다시 그리거나 일정하게만 디자인 하면 된다.