6가지비주얼체계규칙
색상, 크기, 서체, 여백, 배열, 명암 대조를 활용하여 비주얼 체계(Visual Hierarchy)를 구축하는 6가지 규칙을 알아봅니다
코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.
구문
디자인을 향상하는 데 도움이 되는 6가지 비주얼 체계 규칙
1. 색상으로 초점 맞추기
디자인 구성의 모든 요소처럼 색상 선택은 독자에게 전반적인 디자인이 전달되는 방식에 아주 큰 영향력을 미칩니다. 색상을 의도적으로 사용하여 독자들이 처음으로 볼 초점을 만들 수 있습니다.
색상이 전략적으로 적용되면 헤드라인, 타이틀, 이름, 다른 중요한 디테일이 강조됩니다. 이 요소들이 독자가 처음으로 확인해야 할 내용이며 행사 장소, 연락처 같은 더 작은 세부사항은 일반적으로 헤드라인 다음으로 읽힙니다.
위의 Petr Kudlacek가 디자인한 전시회 간판은 레드의 파워와 어두운 배경에 밝은 색을 적용하여 전달하는 법을 강조했습니다. 농도 짙은 색상이 보는 사람의 관심을 바로 끌어 구성 전체로 안내합니다.
하지만 왜 상단의 디자인처럼 레드 같은 강렬한 색상을 사용하는 걸까요? 레드는 주목을 끄는 색상으로 알려져 정지 신호, 세일 배너, 전화기 알림에 사용됩니다. 어두운 배경과 대조적으로 사용되었을 때, 레드와 다른 따뜻한 색상은 즉시 눈에 띄는 반면 차가운 색상은 공간으로 묻힙니다.
이를 명암 대조라 합니다. 색상이 배경에 흡수되나요, 아니면 주목을 끄나요? 디자인에 사용되는 색상을 전략적으로 생각하여 보는 사람이 혼란스럽지 않게 하세요. 다양한 색상 팔레트를 시도하여 색상이 디자인 내에서 분위기, 톤, 가독성에 어떻게 영향을 미치는지 확인하세요.
2. 크기와 규모로 중요도 표시하기
크기는 정말 중요합니다. 그래픽 디자인에서는 넓은 영역을 차지하는 구성 요소가 먼저 나타납니다. 이 원칙은 모든 인쇄 및 디지털 미디어에서 헤드라인 및 다른 중요한 세부사항이 일반적으로 바디 텍스트보다 큰 이유를 알려줍니다. 하지만 크기 및 규모가 중요한 것은 비단 타이포그래피뿐만이 아니며 이미지, 삽화, 상징, 모형에도 역시 이 테크닉이 적용될 수 있습니다.
상단의 음악 포스터를 봤을 때 처음으로 눈에 들어오는 것을 확인해보세요. HUSH라는 단어가 눈에 확 들어옵니다. 헤드라인의 크기 자체도 크지만 주변의 아주 작은 규모의 텍스트와 비교했을 때 HUSH가 큰 영향력을 가진 이유를 알 수 있습니다.
크기 및 규모에 의지하여 체계를 전달할 때는 초점과 디자인의 다른 요소 사이에 확실한 차이를 주는 게 가장 좋습니다. **"모 아니면 도"**가 여기에도 적용됩니다. 헤드라인이나 다른 이미지를 다른 구성 요소보다 약간 크게 한다면 보는 사람들은 디자인을 바라볼 때 혼란을 경험할 수 있습니다.
3. 서체를 선택하여 체계 구축하기
성공적인 구성의 또 다른 중요한 요소는 효과적인 서체를 함께 사용하여 체계를 만드는 것입니다. 얼마나 많은 서체가 사용되었는지와 상관없이 모든 디자인에서 어울리는 폰트를 선택하는 일은 독자에게 정보를 전달하는 데 아주 중요합니다. 세리프(Serif), 산세리프(Sans-serif), 심지어 스크립트(Script)체를 사용하든 각 스타일은 디자인과 어울려야 합니다.
예를 들어 전문적인 금융업 배너에 스크립트체를 사용하면 서체와 디자인 내용이 잘 연결되지 않습니다. 이런 불일치를 피하려면 각 폰트의 특성을 분석하세요. 폰트끼리 잘 어울리나요? 폰트가 너무 비슷하지는 않나요? 아니면 폰트끼리 어울리지 않고 서로 대조되나요?
메뉴나 초대장처럼 서체가 디자인에서 큰 부분을 차지하는 경우에는 정보를 알아볼 수 있고 읽을 수 있도록 서체에 체계를 주는 게 핵심입니다. 독자는 전체 문서를 여러 번 읽지 않고서도 세부사항을 쉽게 확인할 수 있어야 합니다.
세 가지 서체를 사용하든 한 가지 서체를 사용하든 어떤 단어를 첫 번째로(1단계 텍스트), 두 번째로(2단계 텍스트), 세 번째로(3단계 텍스트) 읽어야 하는지에 대한 명확한 암시가 있어야 합니다. 제목, 헤드라인, 이름 같은 중요한 정보는 일반적으로 먼저 읽히고 부수적인 정보는 다음으로 읽힙니다.
Tip: 전체 디자인에서 똑같은 서체와 스타일을 사용한다면 폰트의 두께와 크기 변형을 많이 활용하세요. 많은 폰트들이 세 가지 또는 그 이상의 두께 변형을 적용하고 있어 체계를 유지하면서도 디자인에 일관성을 유지할 수 있습니다.
4. 네거티브 스페이스 허용하기
네거티브 스페이스(Negative Space) 또는 여백은 제목이든 이미지든 삽화든 특정 피사체 주위의 공간을 의미합니다. 이 열린 공간은 디자인에 숨 쉴 수 있는 공간을 주고 독자를 디자인으로 안내하므로 디자인에서 피사체만큼 중요합니다. 네거티브 스페이스는 가지각색의 요소를 분리하는 데 도움이 될 뿐만 아니라 체계와 구조를 구축하는 데도 도움이 됩니다.
Info: 디자인의 특정 요소를 강조하려면 피사체 주변의 네거티브 스페이스를 늘리세요. 이렇게 하면 핵심 요소를 분리하여 독자가 초점이 되는 부분을 바로 볼 수 있습니다.
5. 배열로 정보 조직하기
한 면에 많은 양의 정보를 전달해야 한다면 디자인은 텍스트에 쉽게 압도될 수 있습니다. 디자인을 구성하는 좋은 방법은 텍스트 정렬과 네거티브 스페이스를 활용하는 것입니다. 텍스트를 다양한 단계(주제, 부제, 본문)로 구분하고 필요에 따라 정렬하면 독자는 페이지에서 훨씬 더 쉽게 정보를 확인할 수 있습니다.
- 1단계 텍스트 : 헤드라인 같은 텍스트는 디자인에서 일반적으로 큰 크기가 적용됩니다. 헤드라인을 페이지의 중앙에 정렬하여 중요도를 확실히 보여주세요.
- 2단계 텍스트 : 부제는 긴 편이지만 가운데 정렬을 적용할 수 있습니다.
- 3단계 텍스트 : 본문은 왼쪽 정렬이 가장 좋습니다. 큰 덩어리의 텍스트를 왼쪽 정렬하면 독자가 쉽게 구성을 확인하고 정보를 읽을 수 있습니다.
Tip: 일반적으로 정렬은 타이포그래피에 적용되지만 이 원칙을 패턴, 선, 다른 삽화에도 적용할 수 있습니다. 디자인에 격자를 활용하면 전체적으로 조직감을 유지할 수 있습니다.
6. 명암 차이의 예술 활용하기
성공적인 디자인은 명암 대조를 활용하여 시각적인 흥미로움을 불러일으킵니다. 명암 대조는 색상 선택, 서체 스타일, 패턴, 온도, 채도, 값처럼 다양한 형태로 이뤄질 수 있습니다. 또한 명암 대조로 디자인을 단조롭고 평면적이지 않게 할 수 있습니다.
명암 대조로 비주얼 체계를 구축하려면 디자인의 다른 부분과 외관을 대조하여 초점을 돋보이게 하세요.
- 세리프체를 디자인 전체에 사용한다면 굵은 산세리프체를 사용하여 스포트라이트를 주세요.
- 이미지를 차가운 분위기로 유지하는 대신 따뜻한 색상을 시도해보세요.
- 디자인이 배경 이미지에 잠식된 것처럼 보인다면 단조로운 색상으로 상쇄하세요.
Info: 명암 대조의 예술을 마스터하면 어떤 단순한 디자인이든 개선시킬 수 있습니다.