그리드시스템

그리드시스템
Grid System

그리드시스템이란 양질의 시각정보 커뮤니케이션의 필수 불가결한 구조틀입니다. 세계적인 디자인 이론가이자 요셉 뮐러 브록크만은 "각각의 다양한 시각적 요소들(제목, 본문내용, 사진 등)은 그리드시스템 내에서 단순화되며 유기적으로 결합된다. 이런 결합은 디자인의 간결한 평면 분할. 보는이로 하여금 쉬운 이해를 하도록 만들며 명확한 느낌을 창출하면서 디자인의 질서를 만들어낸다. 그리고 이러한 질서를 정보에 대한 진실정을 증대시키며 신뢰성을 유발시킨다"(저자의 책 그리드시스템이란 책 내에서)고 말하고 있습니다.

그리드시스템의 철저한 디자인과 타이포그래피가 얼마나 고급스러운지를 보여주는 정형적인 사례입니다. (이미지 참조)

그리고 세계적으로 유명한 건축, 전시물, 잡지, 포스터나 팜플렛 같은 잡지들은 디자이너가 구축한 그리드시스템에 맞춰서 제작되어졌습니다. 본사의 보든 디자인은 철저한 그리드시스템에 의해 디자인을 하게됩니다.

기초 그리드 필드의 설정
Grid System

기초그리드를 결정하는 것은 본문의 라인하이트입니다.
그리고 본문의 라인하이트를 결정하는 것은 본문 폰트의 크기입니다.

예를 들어 렉시테크 홈페이지는 되도록 정보전잘이 쉽고 용이해야 하므로 11pt가 가장 적당할 것이라고 봅니다. 그리고 본문 내에 본문 글자의 크기 조절 장치를 넣어 사용자의 시력 수준에 따라 조절하여 볼 수 있도록 합니다. 본문의 크기가 11pt일 때 글

본문글자의 크기 15px(11pt)
기초그리드 8x8 (px)

줄간의 거리인 라인하이트는 본문 글자크기의 1.6배 정도가 되는 18pt가 적당합니다.
그러므로 렉시테크 홈페이지의 기초그리드는 18x18(pt)가 되며, 이를 화면 픽셀로 환산하면 24x24(px)이 됩니다. 24의 약수인 1,2,3,4,6,8,12,24중 박스와 다양한 시각적 요소들이 결합되는 종합적인 사이트라는 점을 고려했을 때 이를 더욱 정교하게 만들기 위해서는 6,8중 선택될 수 있다. (1~4px은 너무 작고 12,24는 너무 크다) 렉시테크 홈페이지의 경우에는 8px을 기초그리드로 선택하여 만들어졌다.

한글의 경우 본문의 크기가 얼마나 적절하냐 하는 것은, 일반적으로 다음과 같은 컨센서스가 이루어져 있습니다.

• 사전: 7~8pt(1point는 0.3527mm)
• 전문 잡지:9~10pt
• 대학생 전문단행본: 10~10.5pt
• 소설 수필과 같은 단행본: 11pt
• 초등학교용 읽기 책: 12~13pt

그리드 필드와 페이지 길이의 설정
Grid System

그리드필드는 다수의 기초그리드로 이루어지는 정사각형으로 만들어지는데, 최소 그리드필드는 화면에서 사용되어질 표준 사이즈의 사진 크기로 만들어집니다.
웹페이지의 가로 전체 사이즈는 다수의 그리드필드로 이루어지며, 그리드필드와 그리드필드 사이에는 1개의 기초그리드를 넣어 간격을 줍니다. 현재 우리 홈페이지의 경우 2개를 사용하고 있다. 우리나라의 경우는 화면 가로가 1024px로 표현하는 SVGA카드가 99% 사용되고 있으므로 페이지의 가로 크기를 1024px 이하로 정합니다.

기초그리드 8x8(px) 그리드필드 10x10의 80x80(px) 가로페이지 976px

기초그리드가 8px이므로 1024/8=약 128개가 된다. 10개의 그리드필드로 한다고 했을 때. 2개의 그리드필드는 필드 간격을 포함하여 8개의 기초그리드를 가지게 된다. 즉 그리드필드는 필드 간격을 포함하여 8개의 기초그리드를 가지게 된다. 즉 그리드필드는 8x10=80(px)이 되고 10개의 그리드필드는 80x10= 800(px)이 되며 10개의 그리드필드 사이에 두개의 기초그리드필드 간격과 양 끝에 두개의 기초그리드를 가지므로 11x16= 176(px)이 된다. 따라서 웹페이지의 가로 크기는 800+176=976(px)으로 이루어지게 된다.