앞서 디자인의 기본 구성요소는 컬러, 그림, 글자로 구성되어 있고 이러한 디자인 요소들을 “어떻게 배치하느냐?”, “어떻게 정렬하느냐?”, “어떻게 구성하는가?“가 바로 레이아웃(Layout)이라고 얘기했습니다.
(참조: 디자인은 컬러, 그림, 문자를 구성하는 레이아웃이다.)
이번에도 비전공자와 디자인 초보자를 위해 디자인 시 좋은 레이아웃을 할 수 있는 간단한 팁을 먼저 알아보도록 하겠습니다.
여기에서는 일반적인 문서작성 시 도움이 될 기본적인 레이아웃 방법에 대해서 알아보고, 추후 레이아웃에 대한 원리와 법칙을 자세히 알아보는 과정을 진행하도록 하겠습니다.
차례
- 글의 구성과 구성 요소의 역할
- 중요한 요소를 레이아웃하는 방법
1) 중요한 요소는 처음에 위치!
2) 중요한 요소는 크게!
3) 중요한 요소는 컬러를 사용해서 튀게! - 마무리(Beyond Basics)
1. 글의 구성과 구성 요소의 역할
문서작성 초기에는 ❶번과 같이 작업을 시작할 것입니다. 작업을 진행하면서 글자의 위치와 크기/컬러 등의 속성을 조정하여 ❷번과 같이 문서를 완성할 것입니다.
일반적으로 문서를 작성할 때 글의 구성은 제목, 소제목, 본문 등으로 이루어집니다. 여러분들도 보통 제목은 가장 크고 처음에 위치시키고, 소제목은 제목보다는 작고 본문보다는 크게 할 것입니다.
레이아웃을 어렵게 생각하지 마세요! 이처럼 구성요소의 역할에 맞춰 위치를 구성하고 크기를 조정하는 것이 바로 레이아웃입니다.
2. 중요한 요소를 레이아웃하는 방법
1) 중요한 요소는 처음에 위치!
구성요소에 따라 중요한 역할을 하는 요소가 있고, 보통의 역할을 하는 요소가 있습니다. 제목은 가장 중요한 역할을 맡고, 소제목과 본문은 제목을 설명하는 역할을 하고 있습니다.
제목은 가장 중요한 역할을 맡기 때문에 제일 처음에 위치시키는 것입니다. 제일 처음에 위치하면 사용자에게 가장 먼저 보이고 그래서 가장 잘 보이기 때문입니다.
이는 행군할 때 리더가 가장 앞에 위치하는 것과 같습니다. 그래서 제목을 영어로는 “Headline“, 즉 글에서 행(Line)의 맨 윗부분(Head)에 위치한다는 의미입니다.
그다음으로 중요한 소제목이 제목 아래에 그리고 본문은 역할에 맡게 위치하는 것입니다. 제목이 머리와 같은 중요한 역할이라면, 머리를 지탱하는 몸체와 같은 역할이 본문이라고 할 수 있습니다. 그래서 본문을 영어로 “Body”라고 명칭 합니다.
2) 중요한 요소는 크게!
구성요소의 역할에 맡게 크기를 고려하는 것도 레이아웃에 있어서 중요한 원리입니다. 제일 중요한 요소는 크기를 가장 크게! 반대로 중요하지 않은 것은 작게 하는 것입니다.
문서상, 글에서 제목을 크게 하는 이유는 제목이 중요한 역할을 맡고 있기 때문입니다. 사용자에게 크기가 가장 큰 요소가 먼저 보이게 됩니다. 사이즈도 크고, 위치도 처음에 있는 요소는 당연히 잘 보일 것입니다.
그래서 중요한 글자를 두껍게, 즉 Bold 폰트를 사용하는 이유가 위와 같이 크기를 키우는 것과 관계가 있습니다.
제목의 위치와 크기가 중요하지만, 제목을 두껍게 해주면 더 크게 보이기 때문입니다. 본문에서 키워드의 경우에도 크기를 키우기만 하는 것보다 크게 하고 Bold 폰트를 사용해주면 가독성이 좋아지는 것을 알 수 있습니다.
3) 중요한 요소는 컬러를 사용해서 튀게!
레이아웃에서 중요한 요소를 컬러를 사용해 강조하는 작업입니다. 이 과정에서는 이전 “비전공자를 위한 디자인 TIP! 01. 컬러와 폰트는 1~2개만 사용하자!“를 참고하여 주요 색상 1~2개만을 사용하고, 5~10%만 적용하는 것이 중요합니다.
문서에 컬러를 적용하는 과정에서 제목은 주제색인 파란색, 키워드는 강조색인 빨간색을 사용하였습니다. 컬러에 자신이 없는 경우는 주제색 하나만 사용해도 괜찮습니다.
이처럼 제목의 경우, 맨 처음에 위치하고 사이즈도 크고 주제색도 사용하면 더욱 잘 보이게 됩니다. 키워드의 경우, 본문에 파묻혀 있으므로 두꺼운 폰트에 컬러를 적용하면 더욱 강조됩니다.
결국, 디자인 작업 시 구성요소를 레이아웃 하는 과정에서 중요한 요소의 위치, 크기, 컬러의 속성을 조절해서 구성하는 것은 가독성(Legibility & Readability)을 높이고 좋게 하는 과정인 것입니다.
3. 마무리(Beyond Basics)
제목의 경우만 폰트를 다르게 적용한 레이아웃입니다. 처음에는 모든 글자에 “나눔고딕” 타이프페이스, 즉 “나눔고딕 (Regular)” 폰트와 “나눔고딕 Bold” 폰트를 사용했습니다. 마지막에는 제목에만 “나눔스퀘어 Bold” 폰트를 적용한 예입니다.
제목을 강조하고 차별화해주기 위해서 다른 폰트를 사용하는 경우가 많습니다. 주의할 것은 비전공자와 초보자의 경우 같은 계열(고딕체는 고딕체, 명조체는 명조체)의 비슷한 서체를 적용해서 일관성을 유지해야 한다는 것입니다.
잊지 마세요!
모르겠으면 타이프페이스 하나만, 한 종류의 폰트 세트만 사용하면 됩니다!
(참조: 비전공자를 위한 디자인 TIP! 01. 컬러와 폰트는 1~2개만 사용하자!)
참조
- Material Design, The type system