그리드의 설정 방법
도판 등을 기준으로 한 그리드 설정
명함이나 엽서, 포스터처럼 문자 요소가 적은 지면을 제작할 때는 다음의 순서에 따라 그리드를 설정한다.
- 판면을 결정한다.
- 판면의 위치를 결정한다.
- 그리드를 설정한다.
- 가로, 세로가 각각 같은 간격을 이루는 격자를 임의로 그려서 완성한다.
본문의 문자 크기를 기준으로 한 그리드 설정
전단지나 회사 안내, 카탈로그 등 문자 요소가 많은 지면을 제작할 때는 다음의 순서에 따라 그리드를 설정한다.
- 판면을 결정하고 판의 그리드를 설정한다.
- 우선 판면의 위치를 적절히 설정하고, 그 판면 위에 그리드를 설정한다. 여기에서는 가로 3등분, 세로 5등분으로 나누어 설정하고 있다.
- 웹 디자인에서는 12컬럼(가로)를 우선적으로 설정하는 경우가 많고, 세로의 경우 페이지의 종류에 따라 달라지는데, 관습적으로 많이 사용되는 정도만 있을 뿐 정해진 규칙이 있는 것 같진 않다.(불확실)
- 본문 글자와 행넘김 크기를 결정한다.
- 다음으로 본문 글자의 크기와 행간이 포함된 행넘김의 크기를 결정해 1에서 설정한 그리드의 한 블록에 텍스트를 흘려 넣어본다.
- 예시에선 글자크기 8px, 행넘김 크기을 14px로 설정했는데, 웹디자인에선 본문 글자크기 14픽셀 이하는 잘 본적이 없다.
- 글자 크기에 따라 그리드 블록의 크기를 결정한다. 가로 길이
- 그리드 블록의 가로 길이는 임의로 정해도 상관없지만, 처음에는 글자 크기의 배수를 기준으로 하는 것이 좋다.
- 예시에선 8pt가 약 3미리 정도 되기 때문에 한 블록의 가로 길이를 54m로 정해준다.
- 웹 디자인에서의 단위는 디지털 단위이거나 단위가 없기때문에 8픽셀 그리드 혹은 4픽셀 그리드를 따르며 짝수로 지정해 주면 배수 걱정은 없는 편이다.
- 예시에선 여백을 포함해 가로로 18자~20자가 포함되게끔 설정 한 듯 하다.
세로 길이
- 사례에서는 블록 하나에 본문이 10줄 들어 갈 수 있게끔 그리드의 세로 길이를 계산하였다.
- 행넘김 X 행의 수 - 행간 = 그리드의 수
- 블록을 복제해서 본문을 흘려 넣는다
- 블록을 복제해서 텍스트를 흘려 넣어보면, 두 번째 이후의 블록과 행의 상단이 일치하지 않는 것을 확인 할 수 있다.
- 블록의 (세로) 간격을 조절한다.
- 행간 + 글자 크기 + 행간 = 블록의 간격
- 블록 사이의 여백 조절
- 블록 사이의 간격을 앞에서 언급한 수치로 조절하고 남는 부분을 상하좌우의 여백으로 조절하면 완성된다.
- 이처럼 그리드를 글자 크기나 행간으로 산출해서 설정해두면 타이틀이나 사진, 도판만이 아니라 본문도 자유롭게 레이아웃 할 수 있게 된다.