본문 바로가기

디자인 참고자료

레이아웃과 그리드의 디자인 구성요소 (Design components of layouts and grids)

 

그리드에 맞춰서 레이아웃을 잡아봐! 다른 레이아웃 없나? 이런 말 들어보셨나요? 편집, 시각, 웹 등을 디자인할 때 가장 많이 듣는 소리 중 하나인 것 같습니다. 하지만, 정확한 개념에 대해서 물어보면 잘 대답하기가 어려운 것이 사실입니다. 흔히 생각하는 레이아웃은 그리드에 맞춰서 일정한 비율에 맞게 구성하는 것을 생각을 하는데요. 그래서 이번에는 정확한 레이아웃 디자인과 구성요소에 대한 개념을 알아보고자 합니다.

 


 

그리드란 무엇일까요?

그리드는 공간과 정보를 조직화하여 독자들에게 보여주는 하나의 도구이자 전체 작업의 바탕이 되는 도구이고, 질서를 부여하고 유지하는 규칙입니다.

 

우리가 매일 보는 책이나, 신문, 각종 정보지와 보고서, 또한 우리가 많이 찾아보는 웹사이트에도 적용되어 있지요. 예전에는 그리드는 단조롭고 지루한 것으로 인식되었으나, 오늘날 그리드는 많은 신진 디자이너뿐만 아니라 수년 동안 활동한 노련한 전문가들에 의해 디자인의 핵심으로 조명되고 있습니다.

 


 

그리드를 구성하는 요소는 무엇일까요?

대표적으로 마진, 마커, 단, 플로우라인, 스페이셜 존, 모듈이 있습니다.

 

그리드의 구성 요소

 

단(COLUMNS)

글자나 이미지를 담는 수직방향의 면입니다. 내용에 따라서는 단의 너비나 단에 들어갈 개수를 달리할 수도 있습니다.

 

모듈 (MODULES)

일정한 간격으로 구획되는 단위 공간이며 그리드에 반복성과 질서를 부여하는 요소입니다.

이 모듈을 조합하여 수직이나 수평으로 다양한 크기의 단을 구성할수있습니다. 이 모듈과 단을 합쳐 만들어지는 것이 뒤에서 설명할 스페이셜 존입니다.

 

스페이셜 존 (SPATIAL ZONES)

스페이셜 존은 몇 개의 모듈과 단을 합친것이며 글자나 이미지 광고 등을 배치하는 데 쓰이고 있습니다.

 

마진 (MARGINS)

일종의 여유공간이고 판면에 담긴 내용과 재단선 사이의 빈 공간입니다. 양 페이지 사이의 여백도 마진이라고 불리며, 마진에 주석이나 캡션 등의 하위 정보를 배치하기도 하는 공간입니다.

 

  • 여기서 재단선이란 뭘까요? 재단선은 말 그대로 원고를 인쇄 출력 시 자르는 기준이 되는 선이라고 할 수 있습니다. 책을 재단할 때 사용되는 기계는 프레스 형식으로 종이를 절단 위치에 맞춰 눌러서 자르는 형식인데요. 이때 종이가 칼에 눌리고 눌린 종이가 뒤로 밀리면서 원 종이의 흰 배경이 함께 잘려 나오기 때문에 원하는 인쇄물이 나오지 않을 가능성이 높아집니다. 이 흰 선 배경을 방지하고자 기계의 오차범위만큼 선을 늘려서 제작하여 원하는 인쇄 모양을 받아볼 수 있도록 만들어진 것이 바로 재단선이라고 합니다.

 

플로우라인 (FLOWLINES)

판면을 가로로 나누는 정렬선입니다. 실제로 표시되는 선은 아니고, 한 페이지 전체에서 독자의 시선을 유도 할 수 있도록 공간과 요소들을 배치하는 기준선입니다.

 

마커 (MARKERS)

전체 문서에서 해당 페이지의 위치를 알려주는 내비게이션 입니다. 페이지마다 같은 위치에 배치하며, 페이지 번호, 페이지 위아래에 표시하는 표제, 아이콘을 넣습니다.

 


 

1단 그리드

1단 그리드는 설명글, 보고서, 단행본 처럼 연속적인 글에 적용합니다. 텍스트 블록이 페이지의 주요 요소입니다.

다단 그리드보다 위화감이 적고, 조금 더 풍부하게 보입니다. 이 그리드는 미술 서적이나 카탈로그에 적용하기 좋습니다.

1단 그리드

 


 

2단 그리드

텍스트의 양이 많거나 정보의 성격이 다양할 때 단을 나누어 배치합니다. 두 단의 너비가 같을 수도, 다를 수도 있습니다.

비대칭 2단 그리드에서 최상의 비율은 1:2입니다.

 

2단 그리드

 


 

다단그리드

다양한 너비의 단을 조합한 그리드인 다단 그리드는 1단, 2단 그리드보다 활용도가 높은 것이 특징입니다.

주로 잡지나 웹사이트에서 사용합니다.

텍스트가 다소 복합적일 때 사용하며, 한 단을 두 개로 나누면 그리드를 다양하게 응용할 수 있기 때문에 글이나, 영상, 광고 등 광범위한 정보를 동시에 처리하는 데 사용합니다.

 

다단그리드

 


 

모듈 그리드

신문, 달력, 그래프, 목록처럼 다양하고 복잡한 정보를 담아내기에 가장 좋은 그리드입니다.

판면을 수직, 수평으로 구획하여 공간을 작은 덩어리들로 쪼갭니다.

신문과 같이 정보가 여러 구역으로 분할되는 내용에도 사용하기 좋습니다.

 

모듈 그리드

 


 

계층 그리드

한 면을 몇 개의 구역으로 나누는 그리드입니다. 보통 여러 개의 가로 단으로 구성합니다.

계층 그리드가 가장 효과적으로 쓰이는 경우는 내용이 간단한 웹사이트로, 스크롤바를 내려가면서 읽기 편하도록 정보 덩어리를 수평으로 정렬하는 것이 특징입니다.

 

계층 그리드

 


 

레이아웃과 그리드의 디자인 구성요소 (Design components of layouts and grids)에 대해서 알아보았습니다. 처음에는 그리드와 레이아웃이 무엇인지 몰라 헷갈리고 어려울 수 있습니다. 하지만, 알고 보면 어렵지 않고 디자인을 위해 꼭 필요한 요소 중 하나인 것을 알 수 있습니다. 디자인할 때, 필요한 목적에 맞게 알맞은 그리드를 사용하여 더 멋있는 디자인을 해보시기 바랍니다.