[마법의 디자인] 레이아웃의 기본 법칙

1. 여백의 설계

기본적으로 여백은 상하 및 좌우를 맞춘다. 페이지가 많은 책이나 잡지의 경우에는 제본되는 쪽의 여백을 넓게 설정할 필요가 있기 때문에 좌우 여백의 폭을 다르게 설정한다. 

 

마음에 드는 잡지, 카탈로그 등 다양한 결과물들의 여백을 연구하면서 아름다운 여백의 비율을 연구해 나가자.

 

2. 그리드 시스템

그리드 시스템은 기본이 되는 사각형의 그리드를 하나의 단위로 설정하고 그 조합에 의해 지면을 구성한다. 최대의 장점은 구성 요소들이 잘 정돈되어 보이고 아름다운 레이아웃을 구현할 수 있다는 것이다. 또한 레이아웃 작업이 쉬워지며, 여러 페이지에 걸친 레이아웃의 경우 전체 통일감을 유지하는 것이 가능하다. 

 

그리드 기본 단위를 크게 설정하면 칸의 폭이 넓어지기 때문에 전체적으로 정돈되어 보이지만 배치 변형에 한계가 있다. 반면 그리드 단위를 너무 작게 설정하면 그리드 수가 지나치게 많아지기 때문에 전체적으로 정돈된 느낌이 떨어지지만, 자유도가 높다. 

 

일반적으로 사용하는 수치는 A4 기준 세로 3~12단, 가로 3~7단 정도다. 여백과 마찬가지로 마음에 드는 디자인 결과물 위에 직접 자를 대보면서 어떤 그리드가 적용되었는지 연구해 보면 좋다.

 

(1) 명함이나 엽서, 포스터처럼 문자 요소가 적은 지면의 경우 : 판면을 결정한 후, 그리드를 설정한다.

(2) 전단지나, 카탈로그 등 문자 요소가 많은 경우 : 판면을 결정한 후 그리드를 설정한다. 다음으로 본문 글자와 행간의 크기를 결정한다. 글자 크기에 따라 그리드 블록의 크기를 결정한다. (그리드 세로 길이 = 행 넘기 * 행수 - 행간) 그다음 블록의 세로 간격을 조절한다. (행간+행간+글자크기=블록의 간격) 

 

3. 그룹화

같은 그룹의 요소나 비슷한 요소끼리 가깝게 배열하고, 반대로 연관성이 없는 요소는 떨어뜨려 배열하는 것이다. 전체에서 가장 눈에 띄게 강조하고 싶은 요소가 있는 경우는 분리시켜 배치하면 효율적이다. 

 

그룹화를 효과적으로 실천하기 위해서 내용을 이해하고 우선순위를 분명하게 설정해야 한다. 

 

(1) 같은 의미나 역할을 하는 요소를 그룹핑한다.

(2) 연관성이 낮은 요소는 서로 연결시키지 않는다. 적절하게 거리를 떨어뜨린다.

(3) 여백을 이용한다. 연관성이 높은 그룹과 낮은 그룹을 배열할 때 명확한 차이를 알 수 있도록 의식적으로 여백을 만든다.

 

4. 정렬

레이아웃할 경우 각 요소끼리 제대로 맞추는 것이 중요하다. 디자인에 안정감이 생기고 정리되어 보이기 때문이다. 아무런 맥락 없이 무조건 맞추면 안 된다. 연관성이 높은 요소끼리 덩어리를 묶어서 맞춰야 한다. 

 

이때 간격을 맞추는 것도 굉장히 중요하다. 요소 블록 사이의 간격을 맞추는 것이 좋다. 

 

5. 대비

강조하고자 하는 내용과 그렇지 않은 내용을 구분할 때 사용한다. 명확한 차이를 주면 지면에 강약이 생기고 정보도 이해하기 쉬워진다. 

 

스스로의 감각을 신뢰할 수 없는 경우 등차, 등비, 수식 등의 기준으로 점프 비율을 설정해도 좋다.

 

문자 크기는 소리 크기에 맞춰서 생각할 수 있다. 자신의 생각을 전달하기 위해 강약을 조절하며 말하는 것처럼 문자의 크기나 굵기, 색, 서체 등 종류에 차이를 두면 된다. 뿐만 아니라 패밀리 서체를 활용하여 서체의 점프 비율을 적절히 사용하는 것도 방법이다. 

 

6. 반복과 나열

같은 그룹 내의 모든 요소에 동일한 디자인 규칙을 적용하는 것이 중요하다. 

 

7. 황금비율과 백은 비율

황금 비율과 백은 비율을 쉽게 측정할 수 있는 사이트 (https://voidism.net/metallicratio/)

 

황금비율은 1:1.618로 표현되는 비율이다. 이 비율은 고대 그리스 시대부터 아름다운 비율로 전해지고 있다. 지금도 휴대전화나 담배 케이스 등 다양한 제품에 응용되고 있다. 

 

백은 비율은 1:1.414로 표현되는 비율이다. A4, B5 등의 일반적인 용지도 같은 비율이다. 황금비율과 비교해서 좀 더 정적인 인상을 받게 된다. 

 

https://voidism.net/metallicratio/ 사이트에서 원하는 길이를 입력하면 각 비율에 맞는 수치값을 쉽게 구할 수 있다. (참고)

 

8. 시선

가로 쓰기의 경우 사람의 시선은 보통 왼쪽 위에서 오른쪽 아래로 Z자형으로 이동한다. 세로 쓰기의 경우 보통 오른쪽에서 왼쪽 쪽 아래로 N자형으로 이동한다. 

 

이 시선의 움직임을 제대로 이용한다면 소비자에게 제작 의도를 보다 확실하게 전달할 수 있다.