그리드 시스템이란?
그리드 시스템(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가지 배치 방법 및 레이아웃에 대해 실습 형식으로 제공됩니다.
위젯 배치 및 그리드 연습하기
그리드 시스템이란?
그리드 시스템(Grid System)이란 페이지의 정보를 논리적이고 일관성 있는 질서와 구조로 디자인할 수 있도록 돕는 그래픽 디자인 시스템을 말합니다.
그리드 시스템은 컴퓨터가 개발되기 이전부터 건축, 책, 신문과 같은 곳에 이미 사용되어 왔습니다. 인터넷 보급 후에는 기술의 발전에 따라 웹 디자인에도 그리드 시스템이 사용되기 시작했으며, 이에 따라 디자이너들은 더 쉽고 빠르게, 게다가 아름답게 웹 디자인을 할 수 있게 됩니다.
위 예시는 12 그리드 시스템을 적용한 사이트입니다. 언뜻 복잡해질 수 있는 구조로 이미지와 텍스트가 배치되었지만 어수선한 느낌은 들지 않습니다. 그 이유는 그리드 시스템을 적용했기 때문입니다.
레이아웃의 큰 축을 이루는 텍스트들은 12단계의 그리드에 포함된 것을 확인할 수 있습니다. 앞서 말씀드렸듯 12단계의 그리드 시스템을 따르고 있기 때문에 각 요소(위젯)는 1/12칸 단위로만 움직임을 제어할 수 있습니다.
언뜻 보면 움직임의 제약이 많아 보이지만, 오히려 이러한 제약이 일관되고 안정된 디자인을 하는 데 도움이 됩니다. 틀을 잡아주는 그리드 시스템은 디자인 과정을 더 간단하고 명료하게 해주며, 디자인 작업을 빠르고 편리하게 도와줍니다.
그리드 시스템의 역할과 장점
실제 적용 사례
다음 그림은 실제 제작된 사이트에 적용된 12 그리드입니다. 텍스트와 이미지, 가로선, 버튼이 12 그리드에 맞춰 배치된 걸 확인할 수 있습니다.
참고: 아래 오른쪽 그림은 이해를 돕기 위한 그림입니다. 실제 그리드는 디자인 모드에서 보이지 않습니다.
사용자는 위젯들을 추가할 수 있습니다. 처음 추가한 위젯은 12 그리드로 배치되고, 이후 원하는 위치로 이동한 다음 차지하는 그리드 수를 조절할 수 있습니다.
참고: 점선 안에 아무 콘텐츠도 없는 경우 해당 공간은 여백 위젯이 삽입된 영역입니다.
위 그림에 따르면 처음 4개 위젯은 12개의 그리드를 모두 차지하고 있는 걸 볼 수 있으며, HISTORY 텍스트 위젯은 4칸, 이미지는 총 8개를 차지하고 있는 걸 확인할 수 있습니다. 버튼은 HISTORY 텍스트 위젯 아래 배치되어, HISTORY 텍스트 위젯과 같은 4개의 그리드를 차지하게 됩니다.
같은 구조로 위젯들을 점차 아래로 쌓아간다고 생각해주시면 조금 더 편하게 페이지를 디자인할 수 있습니다.
그리드 시스템 활용
그리드 시스템은 방문자에게 페이지가 포함하는 정보를 최적의 형태로 보여주고, 전달하기 위한 도구입니다. 그리드 시스템에 따라 페이지를 디자인하면 많은 양의 정보도 정돈되고 안정된 구조로 만들어주며, 가독성 및 심미성도 더해집니다.
다음은 12 그리드를 활용한 정보 배치의 예제입니다.
위 예제와 같은 레이아웃은 각 메뉴(또는 메뉴군)가 포함하는 정보의 종류에 따라 달라집니다. 예를 들어 방문자에게 제품 갤러리를 보여주고자 한다면 위 그림에서 왼쪽 상단 레이아웃이 최적일 것입니다.
만약 여러분이 비영리단체를 운영하고 있고, 그 단체의 소개와 함께 버튼 클릭 시 상세한 활동내역을 보여주고자 한다면, 아래 그림에서 오른쪽 하단 레이아웃이 최적일 수도 있습니다.
이처럼 그리드 시스템은 아름다운 페이지를 디자인 하는 데 도움을 주며, 사이트의 정보를 최적의 형태로 전달하는 데 도움을 줍니다.
다음은 12 그리드 PDF 파일로 사용자는 이 파일을 다운로드하여 프린트 한 다음, 본인의 사이트 메뉴에 맞는 레이아웃을 그려볼 수 있습니다.
파일 다운로드
디자인 모드에 익숙해지는 경우 별도의 필기도구 및 소프트웨어(파워포인트, Sketch 등)를 사용하지 않아도, 디자인 모드에서 간편하게 메뉴를 추가하고, 위젯을 사용해 빠르게 페이지 레이아웃을 잡아볼 수 있습니다.
위젯 배치 및 그리드 연습하기
12 그리드 시스템에 따라 위젯을 배치하고, 그리드를 조절하는 방법에 대해 더 상세하게 배워보세요. 총 7가지 배치 방법 및 레이아웃에 대해 실습 형식으로 제공됩니다.
위젯 배치 및 그리드 연습하기