그리드 시스템이란?

그리드 시스템(Grid System)을 활용하면 초심자도 아름답고 질서있는 구조의 웹사이트를 더 쉽고 빠르게 제작할 수 있습니다. 이 도움말에서는 그리드 시스템이 무엇인지 알아보고, 아임웹에서는 그리드 시스템이 어떻게 적용되는지 알아보겠습니다.

그리드 시스템이란?

그리드 시스템(Grid System)이란, 페이지 콘텐츠를 논리적이고 일관성 있는 질서와 구조로 디자인할 수 있도록 돕는 그래픽 시스템을 말합니다. 여기서 그리드(Grid)는 사전적 의미로 '격자무늬' 또는 '격자판'을 의미하며, 디자이너는 아래 그림과 같이 격자 선에 맞춰 디자인에 규칙을 부여하여 페이지를 더 보기 좋고, 알기 쉽게 제작하는 데 도움이 됩니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/1abe3157-eaf2-47df-b3d1-2dafdc311585/GridSystem.gif

그리드 시스템은 1970년대 중반부터 건축, 일러스트레이션, 책, 신문과 같은 다양한 분야에 사용되어 왔는데, 인터넷 보급 후 기술의 발전에 따라 웹 디자인에도 사용되기 시작했습니다.

웹 디자인에서 그리드 시스템은 페이지의 디자인 영역을 나누고, 각 영역에 디자인 요소를 배치하는 데 사용됩니다. 그리드 시스템은 웹 디자인에 있어 아래와 같은 긍정적인 역할을 합니다.

  • 컬럼 단위로 요소를 구성하므로 많은 양의 콘텐츠도 정돈된 느낌을 준다.
  • 격자 형식에 따르므로 블록을 쌓듯 디자인이 편리하다.
  • 일관되고 통일성 있는 아름다운 웹 디자인이 가능하다.

아임웹 12-그리드 시스템

아임웹은 초보자도 쉽고, 간편하게, 아름다운 웹 디자인이 가능하도록 그리드 시스템을 제공합니다. 그리드 시스템은 8개, 12개, 16개 등 그 형식이 다양하지만, 아임웹은 반응형 웹 디자인에 최적화된 12-그리드 시스템을 채용하고 있습니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/023289e0-254a-41a5-91f8-c2515cb3c17b/0798a9a3ce372.jpg

12-그리드 시스템에서는 페이지에 12개의 컬럼(열)을 제공합니다. 사용자는 페이지에 텍스트, 이미지, 버튼과 같은 요소를 추가한 다음, 각 요소를 1/12칸 단위로 제어할 수 있습니다.

언뜻 보면 제약이 많아 보이지만, 오히려 이러한 제약이 일관되고 안정된 디자인을 하는 데 도움이 됩니다. 틀을 잡아주는 그리드 시스템은 디자인 과정을 간단하고 명료하게 해주며, 방대한 양의 콘텐츠도 컬럼 단위로 묶어 정돈해 표현할 수 있기 때문입니다.

그리드 시스템 활용하기

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

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d228e585-1b57-47d6-8cef-f9be9e251044/3dc8aee7cdab4.png

레이아웃은 페이지가 포함하는 정보의 양, 종류에 따라 달라집니다. 예를 들어, 방문자에게 제품 갤러리를 보여주고자 한다면 위 그림에서 왼쪽 상단의 레이아웃이 적합할 수 있습니다. 또한, 만약 여러분이 비영리단체를 운영하고 있고, 단체를 소개하면서 버튼 클릭 시 상세한 활동내역을 보여주고자 한다면 위 그림에서 오른쪽 하단의 레이아웃이 적합할 수 있습니다.

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

나만의 그리드 시스템

12-그리드 PDF 파일을 내려받아 프린트한 다음, 필기도구를 사용해 페이지별 레이아웃을 그려볼 수 있습니다. 아임웹 디자인 모드에 익숙해지면 별도의 필기도구 및 소프트웨어(파워포인트, Sketch 등)를 사용하지 않아도, 디자인 모드에서 간편하게 메뉴를 추가하고, 위젯을 사용해 빠르게 페이지 레이아웃을 잡을 수 있게 됩니다.

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

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

실습을 통해 아임웹 12-그리드 시스템에 따라 위젯을 배치하고, 그리드를 조절하는 방법에 관해 배워보세요.

위젯 배치 및 그리드 실습

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/405aa1ac-d51e-4ee8-a620-900dc3769891/d72e8b5b121cb.png


목록으로

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

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

리셀러/디자이너 신청

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

아임웹에서 당신의 생각을 표현해보세요.
324.9K
누적 사이트 이용 수
이미 수만 명이 아임웹 팬이 되어
각자의 생각을 표현하고 있습니다.
315
일 평균 사이트 개설 수
지금 이 순간에도 매일
새로운 브랜드가 소개되고 있습니다.
2.7K
전국 파트너/리셀러 수

아임웹 공식제휴사

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