그리드 시스템이란?

그리드 시스템이란?

그리드 시스템(Grid System)이란 페이지의 정보를 논리적이고 일관성 있는 질서와 구조로 디자인할 수 있도록 돕는 그래픽 디자인 시스템을 말합니다.

그리드 시스템은 컴퓨터가 개발되기 이전부터 건축, 책, 신문과 같은 곳에 이미 사용되어 왔습니다. 인터넷 보급 후에는 기술의 발전에 따라 웹 디자인에도 그리드 시스템이 사용되기 시작했으며, 이에 따라 디자이너들은 더 쉽고 빠르게, 게다가 아름답게 웹 디자인을 할 수 있게 됩니다.

위 예시는 아임웹에서도 채택하고 있는 12 그리드 시스템을 적용한 사이트입니다. 언뜻 복잡해질 수 있는 구조로 이미지와 텍스트가 배치되었지만 어수선한 느낌은 들지 않습니다. 그 이유는 그리드 시스템을 적용했기 때문입니다.

레이아웃의 큰 축을 이루는 텍스트들은 12단계의 그리드에 포함된 것을 확인할 수 있습니다. 앞서 말씀드렸듯 아임웹에서도 12단계의 그리드 시스템을 따르고 있기 때문에 각 요소(위젯)는 1/12칸 단위로만 움직임을 제어할 수 있습니다.

언뜻 보면 움직임의 제약이 많아 보이지만, 오히려 이러한 제약이 일관되고 안정된 디자인을 하는 데 도움이 됩니다. 틀을 잡아주는 그리드 시스템은 디자인 과정을 더 간단하고 명료하게 해주며, 디자인 작업을 빠르고 편리하게 도와줍니다.

그리드 시스템의 역할과 장점
  • 그리드 시스템으로 더 좋은 정보 전달 및 디자인 구조를 만들 수 있다.
  • 디자인 위치에 대해 적절한 지침을 내려준다.
  • 가독성과 주목성을 더 향상시킬 수 있다.




실제 적용 사례

다음 그림은 실제 아임웹으로 제작된 사이트에 적용된 12 그리드입니다. 텍스트와 이미지, 가로선, 버튼이 12 그리드에 맞춰 배치된 걸 확인할 수 있습니다.
참고: 아래 오른쪽 그림은 이해를 돕기 위한 그림입니다. 실제 그리드는 디자인 모드에서 보이지 않습니다.

사용자는 위젯들을 추가할 수 있습니다. 처음 추가한 위젯은 12 그리드로 배치되고, 이후 원하는 위치로 이동한 다음 차지하는 그리드 수를 조절할 수 있습니다.
참고: 점선 안에 아무 콘텐츠도 없는 경우 해당 공간은 여백 위젯이 삽입된 영역입니다.

위 그림에 따르면 처음 4개 위젯은 12개의 그리드를 모두 차지하고 있는 걸 볼 수 있으며, HISTORY 텍스트 위젯은 4칸, 이미지는 총 8개를 차지하고 있는 걸 확인할 수 있습니다. 버튼은 HISTORY 텍스트 위젯 아래 배치되어, HISTORY 텍스트 위젯과 같은 4개의 그리드를 차지하게 됩니다.

같은 구조로 위젯들을 점차 아래로 쌓아간다고 생각해주시면 조금 더 편하게 페이지를 디자인할 수 있습니다.




그리드 시스템 활용

그리드 시스템은 방문자에게 페이지가 포함하는 정보를 최적의 형태로 보여주고, 전달하기 위한 도구입니다. 그리드 시스템에 따라 페이지를 디자인하면 많은 양의 정보도 정돈되고 안정된 구조로 만들어주며, 가독성 및 심미성도 더해집니다.

다음은 12 그리드를 활용한 정보 배치의 예제입니다.

위 예제와 같은 레이아웃은 각 메뉴(또는 메뉴군)가 포함하는 정보의 종류에 따라 달라집니다. 예를 들어 방문자에게 제품 갤러리를 보여주고자 한다면 위 그림에서 왼쪽 상단 레이아웃이 최적일 것입니다.

만약 여러분이 비영리단체를 운영하고 있고, 그 단체의 소개와 함께 버튼 클릭 시 상세한 활동내역을 보여주고자 한다면, 아래 그림에서 오른쪽 하단 레이아웃이 최적일 수도 있습니다.

이처럼 그리드 시스템은 아름다운 페이지를 디자인 하는 데 도움을 주며, 사이트의 정보를 최적의 형태로 전달하는 데 도움을 줍니다.

다음은 아임웹에서 제공하는 12 그리드 PDF 파일로 사용자는 이 파일을 다운로드하여 프린트 한 다음, 본인의 사이트 메뉴에 맞는 레이아웃을 그려볼 수 있습니다.

파일 다운로드
  • 파일명 : Template_12Grid.pdf (다운로드)
  • 파일 크기 및 압축 형식 : 756Kbyte, ZIP 파일

아임웹 디자인 모드에 익숙해지는 경우 별도의 필기도구 및 소프트웨어(파워포인트, Sketch 등)를 사용하지 않아도, 디자인 모드에서 간편하게 메뉴를 추가하고, 위젯을 사용해 빠르게 페이지 레이아웃을 잡아볼 수 있습니다.




위젯 배치 및 그리드 연습하기

아임웹 12 그리드 시스템에 따라 위젯을 배치하고, 그리드를 조절하는 방법에 대해 더 상세하게 배워보세요. 총 7가지 배치 방법 및 레이아웃에 대해 실습 형식으로 제공됩니다.

위젯 배치 및 그리드 연습하기

목록으로

아임웹 디자이너가 되어주세요!

개인 디자이너, 1인 기업을 위한 아임웹 디자이너 프로그램

리셀러/디자이너 신청

한 번 이용하면 팬이 됩니다.

아임웹에서 당신의 생각을 표현해보세요.

218.7K

누적 사이트 이용 수
이미 수만 명이 아임웹 팬이 되어
각자의 생각을 표현하고 있습니다.

315

일 평균 사이트 개설 수
지금 이 순간에도 매일
새로운 브랜드가 소개되고 있습니다.

2.1K

전국 파트너/리셀러 수

아임웹 공식제휴사

아임웹은 페이팔, KG이니시스, 네이버, KCP, 나이스페이, 엑심베이 공식파트너입니다.