그리드시스템 의미와 디자인 레이아웃에서의 활용

그리드시스템 의미와 디자인 레이아웃에서의 활용에 대한 내용들을 간략하게 정리하였습니다. 디자인요소드를 정렬하고 배치하는데 사용되는 가이드라인으로 그리드시스템에 대해서 이해하고 적용을 살펴볼 수 있습니다

1. 그리드시스템

그리드시스템 (Grid System) 이라는 것은 시각적인 정렬을 유지하고 콘텐츠를 구조화하는데 사용되는 레이아웃 방식을 말합니다. Grid 라는 단어는 격자무늬, 격자판등으로 번역되는 단어이며 이러한 패턴은 건축부터 디자인까지 다양한곳에서 활용며 이러한 시스템을 바탕으로 구조화하는 레이아웃을 우리는 다양하게 살펴볼 수 있는데요. 

디자인적인 부분에서 디자인 레이아웃을 체계적으로 정렬하기 위한 가이드라인으로 그리드시스템은 웹디자인 및 그래픽디자인에서 수직 및 수평선을 활용하여 콘텐츠배치의 일관성과 가독성을 높이는 방식으로 많이 활용되고 있는것을 살펴볼 수 있습니다. 

그리드시스템 예시 (티스토리 플러그인 페이지)

그리드시스템을 활용하면 시각적인 요소들이 정렬되고 디자인이 더 깔끔하고 체계적으로 보일 수 있는데요. 텍스트와 이미지가 명확하게 구분되고 사용자 경험이 좋아지며 가독성을 높이는 효과를 낼 수 있습니다. 

또한 그리드시스템을 바탕으로 디자이너는 그리드를 통해 빠르게 레이아웃을 수정하고 설계할 수 있으며 여러 요소들에 따라서 명확한 구분이 가능한 디자인을 만들어낼 수 있습니다. 

2. 그리드시스템 종류

그리드시스템은 다음과 같은 종류들이 있으며 다음과 같이 살펴볼 수 있습니다.

1) 다단 그리드

다단그리드는 1단 2단 3단으로 나누어서 나누는 그리드를 말합니다. 기본적으로 모든 화면은 단일컬럼그리드 라고 하여 1단의 단순한 레이아웃으로 되어 있지만 이것에 단을 추가하여 다중컬럼그리드로 만들면 여러 단에 레이아웃을 나누어 표현할 수 있는것입니다. 

예를들어 한글이나 워드등 다양한 프로그램에서 단이 나누어져 있지 않은 1단부터 2단 3단등 다양한 방식으로 단을 나누어 그리드를 형성할 수 있는데요. 

단이 하나씩 늘어나면서 여러형태로 나누어진 모습을 볼 수 있으며 잡지 및 카탈로그등 다양한 부분에서 단사이의 여백으로 인하여 2단 3단을 많이 활용하여 보기 편하게 만드는 그리드시스템을 만들 수 있습니다. 

2) 모듈 그리드

모듈 그리드는 고정된 높이 및 너비의 셀로 구성된 그리드를 말합니다. 면을 수평과 주식으로 일정하게 쪼개서 사용하는 그리드로 위 예시처럼 보았던 일정한 높이과 너비의 셀로 구성된 그리드로 주로 복잡한 레이아웃 그리고 복잡한 이미지를 통일성있게 정리하는데 활용되는 그리드입니다. 

달력, 그래프, 앨범등등 다양한 형태로 모듈 그리드를 구성할 수 있으며, 위 예시처럼 꼭 정사각형 또는 직사각형이 아니더라도 여러 형태로 모듈을 정리하여 레이아웃을 구성하고 깔끔하고 정돈된 느낌들을 만들어낼 수 있습니다. 

3) 계층 그리드 

계층그리드는 한면을 각각 기능에 맞게 계층으로 나누어 분할되어 있는 그리드를 말합니다. 책의 목차와 같은 부분에서 살펴보면 이런 계층그리드를 살펴볼 수 있는데요. 이외에도 웹디자인에서 대메뉴, 서브메뉴등등 하나의 면을 분할해서 활용하는 방식 계층으로 나눠놓은 그리드시스템을 말합니다. 

현재 보시고 계시는 포스팅도 제목 소제목 단락이렇게 여러 형태의 계층으로 나누어진 글을 작성하는데 활용되기도 하며, 텍스트의 기준선을 맞추기 위해 사용되는 바질라인그리드로 표현하기도 합니다. 

3. 그리드시스템 디자인 레이아웃 활용

그리드시스템은 레아아웃을 적용하여 웹사이트 및 잡지등 다양한 디자인을 깔끔하게 정리하고 가독성을 높이고 완성하는데 활용됩니다. 

이러한 그리드 시스템은 콘텐츠를 정렬하는 수직섹션인 컬럼 (Columns), 그리고 컬럼간 간격을 조절하는 거터 (Gutter), 페이지 가장자리 여백인 마진 (Margins) 을 다양한 형태로 여러 종류에 맞춘 그리드시스템을 활용하는것으로 활용될 수 있는데요. 

하나의 웹페이지를 디자인함에 있어서 적절한 컬럼을 선택하여 콘텐츠의 양과 복잡도에 맞추고 사용자 경험을 높이도록 설계해야 하며, 너무 좁지 않고 또 너무 넓지 않도록 거터와 마진의 비율을 조정하며, 페이지내 요소들이 동일한 그리드 시스템 안에 레이아웃으로 존재하도록 일관성을 유지하는 것이 필요합니다. 

이렇게 만들어진 그리드시스템이 적용된 레이아웃은 시각적 질서 그리고 일관성을 제공할 것이며 사용자들은 더 높은 가독성과 정렬감으로 좋은 경험을 하게 될 것인데요. 적재적소에 활용해 디자인의 품질을 높이는데 도움이 될 수 있습니다. 

또한 웹디자인에서는 그리드시스템을 활용하여야 반응형 그리드에서 다양한 화면의 크기에 맞게 콘텐츠가 유연하게 배치될 수 있도록 하므로 미디어쿼리를 활용하여 컬럼수와 배치가 조정될 수 있도록 레이아웃을 정렬하는것이 꼭 필요하기도 합니다. 

이와 같은 내용으로 그리드시스템에 대한 기본적인 내용들을 간략하게 정리해봤습니다. 실제로 사용되는 수많은 콘텐츠에서 적용되고 있고 성공적인 그리드 레이아웃을 적용한 웹사이트 잡지등등 다양한 사례들을 살펴보시고 디자인을 다양하게 살펴보시는 재미가 있을 것입니다. 감사합니다.