[사용자 친화 웹] 그리드 시스템

그리드 시스템 (Grid System)

: 그리드 시스템은 화면을 격자구조로 나눈뒤에 콘텐츠를 어떻게 배치할 것인가에 대한 시스템으로 다양한 분야에서 1970년대부터 지금까지 발전되어 사용되고 있습니다.

컬럼 그리드 시스템

: 웹 디자인에서 사용되는 그리드 시스템으로, 화면을 세로로 몇개의 영역으로 나눌 것인지 정합니다. 이 컬럼 그리드 시스템이 가지고 있는 속성은 다음과 같습니다.

• Margin
  CSS속성의 Margin과 같은 개념으로 화면 양쪽의 여백을 정하는 속성입니다.

• Column
  화면을 세로로 나눈 영역입니다. 세로로 나누는 갯수는 표쥰에 의하면 모바일은 4개, 테블릿 8개, PC는 12개로 나눈다고합니다. 물론 임의로 정할 수도 있습니다.

• Gutter
  Column간의 간격을 정하는 속성입니다. Gutter의 간격이 좁을 수록 컨텐츠들의 연관성이 부각되고 멀어질 수록 독립적인 느낌이 부각됩니다.
  양극단을 피하여 적절한 Gutter를 설정해주어야 보다 좋은 UI / UX를 구현할 수 있습니다.
  Gutter의 설정값은 Column의 넓이 이하로 작성하는 것이 좋습니다.

보다 많은 컬럼 그리드 시스템은 여기에서 확인 하실 수 있습니다.