Grid System

GUIDE

Grid System이란, 페이지 콘텐츠를 논리적이고 일관성 있는 질서와 구조로 디자인할 수 있도록 돕는 그래픽 시스템입니다.
더하여 반응형 웹을 구축하기 위해 각 해상도별 breakpoint를 지정함으로서 페이지를 더 보기 좋고, 알기 쉽게 제작하는 데 도움이 됩니다.

• 그리드는 컬럼(Column), 거터(Gutter), 마진(Margin) 세 가지 요소로 구성됩니다.

• 해상도마다 다른 값을 사용합니다. (하단 참고)

---

ANATOMY

• Desktop 기준, 컨텐츠를 우선으로 12단(columns)을 기반으로 레이아웃을 나눕니다.

• 장식적 요소 또는 gnb 등(배경, 선, 메뉴바...) 일부를 제외하고 컨테이너에 컨텐츠를 배치합니다.
배치된 컨텐츠는 columns 너비가 변할 때 동일한 비율로 축소/확대 됩니다.

• 요소의 중요도에 따라 화면을 기기 특성에 맞게 좌우 분할하여(2컬럼, 3컬럼 등) 배치할 수도 있습니다.

SIZE

• 각 디바이스 별 breakpoint 마다 디자인이 단순히 늘리고 줄여지는 수준이라면 mobile(360), desktop(1280) 1개씩 시안을 구성합니다.


• 만약 디바이스 별로 UI 구성이 크게 달라질 경우(컴포넌트의 위치, bg 사이즈의 변화 등) 화면 4종 으로 시안을 정리합니다.

  *반응형 작업 시 최소한의 작업 범위 기준은 ‘개발팀에서 디자인에 대한 고민을 안하실 수 있는 정도’ 입니다.