시각적 계층 구조에 대한 최고의 가이드
ㅣ디자인ㅣ조형연구ㅣ
당신의 디자인이 가능한 한 효과적으로 전달되도록 하기 위해서는 무엇이 좋아 보이는지에 대한 직감으로 가는 것보다 전략적으로 디자인에 접근하는 것이 도움이 됩니다.
색상 이론 및 구성과 같은 잊혀진 미술 수업 개념을 다시 생각해보십시오. 이러한 기초는 디자인 도구 상자를 구축하는 데 도움이 됩니다.
시각적 계층 구조는 디자인 도구 상자의 리소스(색상, 대비, 타이포그래피, 간격 및 기타 기본 원칙)를 사용하여 콘텐츠를 구성하고 우선 순위를 지정하는 것입니다. 좋은 소식은 소리보다 훨씬 쉽다는 것입니다. 디자인 젠을 발견하려면 시각적 계층 구조에 대한 가이드를 따르세요.
목차

시각적 계층이란 무엇입니까?
시각적 계층 구조는 인간이 페이지에서 정보를 처리하는 순서입니다. 요소를 쉽게 이해할 수 있도록 우선 순위를 지정하는 시스템입니다. 시각적 계층이나 디자인 구조가 없으면 사용자는 압도당할 수 있으며 결과적으로 아무것도 받아들이지 못할 수 있습니다. 그렇기 때문에 인간의 눈이 이해할 수 있는 방식으로 요소를 구성하는 것이 중요합니다.
인간이 시각 정보를 처리하는 방법
단어를 읽을 때 대부분의 문화권에서는 일반적으로 위에서 버튼으로, 왼쪽에서 오른쪽으로 읽습니다. 물론 예외도 있지만 지금 이 글을 읽고 있다면 밑바닥부터 시작하지 않은 것이 안전할 것입니다.
시각적 정보 읽기는 비슷하지만 약간 다른 방식으로 작동하며 시선 추적 덕분에 이것이 사실임을 압니다. 다음은 시각 정보를 처리하는 두 가지 주요 방법인 패턴입니다.
-
F 패턴.
이는 텍스트가 많은 디자인에서 가장 일반적입니다. 왼쪽 상단에서 시작하여 오른쪽 상단으로 수평으로 이동하는 'F' 모양을 따릅니다. 그런 다음 뷰어는 짧은 헤드라인 또는 부제목을 찾기 위해 페이지의 왼쪽을 아래로 스캔하여 오른쪽으로 빠르게 스캔합니다.
-
Z 패턴.
밀도가 낮은 디자인은 'Z' 모양을 따릅니다. 보는 사람은 왼쪽 상단에서 시작하여 오른쪽 상단까지 가로로 이동한 다음 왼쪽 하단 모서리까지 뒤쪽 대각선 경사면에서 시선을 아래로 향하고 마지막으로 오른쪽 모서리까지 이동합니다.
디자인하는 대상에 따라 이러한 패턴은 가장 중요한 요소를 배치해야 하는 위치를 잘 나타냅니다.
시각적 흐름 설정
웹 디자인에서 로고는 거의 항상 왼쪽 상단에 있습니다. 이것은 브랜드 인지도를 높이고 탐색을 개선하는 것으로 나타났습니다. 인쇄물에서 로고는 일반적으로 시청자가 페이지를 넘기기 전에 수행할 작업을 알려주는 클릭 유도문안과 함께 페이지 하단에 위치합니다.
둘 다 시각적 흐름의 개념을 기반으로 합니다. 디자이너는 흐름을 제어하고 특정 항목에 시선을 끌 수 있는 방식으로 개체를 배치합니다.
디자인할 때 다음 세 가지 질문을 스스로에게 물어보십시오.
-
시청자의 시선은 처음에 어디로 향할까요(초점)?
-
두 번째 시선이 향할 곳은 어디일까?
-
보는 사람의 시선은 결국 어디로 가는 걸까?
흐름의 관점에서 디자인을 생각하는 것은 훌륭한 연습입니다. 3개 이상의 요소가 있는 경우에도 위의 3개에 우선 순위를 지정하면 다른 요소를 배치해야 하는 위치가 표시됩니다. 디자인 주변에서 시선이 튀지 않도록 시각적 흐름을 설정합니다.
디자인에서 시각적 계층 구조를 사용하는 방법
시각적 계층 구조의 가장 중요한 기능 중 하나는 가장 중요한 초점을 설정하여 보는 사람이 디자인 탐색을 시작하고 가장 중요한 정보가 있는 위치를 보여줄 수 있는 진입점을 제공하는 것입니다.
초점과 흐름이 있는 명확한 시각적 계층 구조를 만들기 위해 디자인 요소를 강조할 수 있는 몇 가지 다른 방법을 검토해 보겠습니다.
1. 크기를 사용하여 가시성 향상(또는 감소)
'삐걱거리는 바퀴가 기름을 얻는다'는 말을 들어보셨을 겁니다. 달리 말하면 가장 큰 디자인 요소가 주목을 받습니다. 객체의 크기(치수) 및 배율(다른 객체와 관련된 크기)을 확대하는 것은 객체에 시각적 중요성을 부여하는 가장 쉽고 효과적인 방법 중 하나입니다.
여기서 Erin Lancaster의 업사이즈 디자인 요소(오프 더 페이지 타이포그래피와 대형 사진 모두)는 스프레드의 주제를 즉시 명확하게 만듭니다.
반면 중요하지 않거나 강조하지 않으려는 디자인 요소는 크기를 줄여 눈에 잘 띄지 않게 만들 수 있으므로 시각적 계층 구조에서 더 낮을 수 있습니다.
모든 디자인 원칙과 마찬가지로 균형과 절제가 핵심입니다. 너무 큰 초점으로 디자인을 압도하거나 너무 작은 보조 정보로 사용성을 손상시킬 수 있습니다.
2. 색상 및 대비: 시청자의 주의 유도
특히 중요한 정보나 이미지를 강조하기 위해 전략적으로 사용될 때 색상에 시각적으로 끌립니다. 길가의 교통 표지판이든 동네 커피숍에 걸려 있는 전단 이든, 빨간색이나 노란색과 같은 밝은 색상은 놓치기 어렵습니다 .
그러나 무지개의 모든 색상으로 디자인을 흠뻑 적시면 색상이 시각적 계층 구조를 만드는 데 미칠 수 있는 영향을 무효화합니다. 따라서 색상을 아껴서 목적에 따라 사용하는 것이 핵심 원칙입니다.
그렇지 않으면 다음을 포함하여 보는 사람의 시선을 안내하기 위해 색상과 대비를 디자인에 적용할 수 있는 창의적인 방법이 많이 있습니다.
온도: 색상은 시원함(파란색 및 녹색 등), 따뜻함(빨간색, 주황색 및 노란색 등) 또는 중간색(검정색, 흰색, 회색 및 때때로 갈색/베이지색 등)일 수 있습니다. 혼합 색온도, 특히 대비가 높은 색온도는 많은 시각적 관심을 끌 수 있습니다.
디자인 스튜디오 Zee 의 이 극장 포스터 는 선명하고 따뜻한 주황색과 밝고 시원한 파란색을 결합하여 시각적인 흥미를 유발하고 색온도의 대비를 활용하는 매우 인상적인 색상 팔레트를 만듭니다.
한 가지 온도를 고수하면 디자인이 시각적으로 더 응집력 있게 보이도록 도울 수 있습니다. 예를 들어, Keith Johnson의 전단지와 웹사이트 배너는 디자인을 강조하기보다는 통합하기 위해 유사한 색온도를 사용합니다.
값(명도): 색상의 밝기 또는 어두움을 값이라고 합니다. (명도) 온도와 마찬가지로 값이 다른 색상은 서로 대비되어 극적인 효과를 낼 수 있으며, 비슷한 값의 색상은 시각적 가중치가 더 동일한 경향이 있습니다.
아래 디자인에서 쇼 포스터를 위한 Brad Vetter의 레터프레스 디자인은 배경에 유사한 조명 값의 두 파스텔 색조를 특징으로 합니다. 짙은 남색과 대비되어 헤드라이너 아티스트를 강조합니다.
채도: 가장 순수하고 밝은 형태의 색상은 100% 채도입니다. 회색에 가까울수록 채도가 낮습니다. 밝거나 차분한 색상을 단독으로 또는 함께 사용하면 디자인에서 대비가 높거나 낮은 위치를 만드는 전략적 방법이 될 수 있습니다.
Jason Booher의 책 표지 디자인에서 강렬한 빨간색은 책 제목을 뒷받침하는 시각적 요소를 강조합니다. 배경이 색이 바랜 중성색이라 더욱 눈에 띕니다. 이 작품은 색온도(따뜻함과 중성)의 대비도 특징입니다.
3. 타이포그래피 계층 구조: 3단계로 시작하여 디자인 구성
텍스트가 포함된 모든 디자인(대부분)에서 타이포그래피 계층 구조는 무시할 수 없는 시각적 계층 구조의 구성 요소입니다. 타이포그래피 계층 구조에 대한 기본적인 아이디어를 얻으려면 헤드라인, 부제목 및 본문 카피가 있는 신문이나 잡지 기사를 상상해 보십시오.

이 기본적인 3단계 접근 방식은 자신만의 명함 만들기 에서 웹사이트에 이르기까지 모든 유형의 디자인에 적용할 수 있습니다. 레벨과 일반적으로 사용되는 용도를 분석해 보겠습니다.
-
레벨 1: 일반적으로 레벨 1 타이포그래피가 가장 중요한 콘텐츠입니다. 이것은 디자인에서 가장 즉시 눈에 띄는 타이포그래피 요소여야 합니다.
-
레벨 2: 레벨 2 요소는 일반적으로 디자인을 섹션으로 구성하거나 관련 정보를 그룹화하는 데 도움이 됩니다. 레벨 1 유형만큼 눈에 띄어서는 안 되지만 보는 사람이 디자인의 다른 부분을 명확하게 안내하고 쉽게 탐색할 수 있도록 도와야 합니다.
-
레벨 3: 텍스트가 많은 레이아웃의 경우 레벨 3 타이포그래피는 일반적으로 디자인의 전체 메시지, 목적 또는 세부 정보입니다. 길거나 짧을 수 있습니다(전체 기사, 짧은 메모, 간략한 설명). 하지만 이 수준의 주요 관심사는 글꼴 크기가 다소 작기 때문에 가독성이 높다는 것입니다.
타이포그래피 계층 구조에 대한 더 자세한 가이드는 Why Every Design Needs Three Levels of Typographic Hierarchy 기사 를 확인하십시오 .
4. 글꼴: 서체 카테고리 및 스타일을 신중하게 선택하세요.
타이포그래피 계층 구조는 조판하는 동안 고려해야 할 유일한 측면이 아닙니다. 글꼴 자체의 모양(카테고리(산세리프, 세리프, 스크립트 또는 장식) 및 스타일(굵게, 기울임꼴, 작은 대문자 등))은 디자인을 만들거나 깨뜨릴 수 있습니다.
서체를 성격 유형으로 생각하십시오. 시끄럽고 화려한 것, 조용하지만 흥미로운 것, 누구와 함께 있느냐에 따라 유연하고 적응하는 것 등이 있습니다.
이러한 품질을 적절하게(프로젝트의 맥락에 맞는 방식으로) 전략적으로 사용하여 설계를 향상시킵니다. 타이포그래피 계층 구조는 디자인을 구성하고 탐색하기 쉽게 만드는 반면 스타일 선택은 디자인의 전반적인 분위기에 기여하고 강조를 만드는 자연스러운 방법입니다.
예를 들어, Duane Smith 는 명함에 다양한 서체(세리프, 산세리프 및 상단의 약간의 스크립트)를 포함하고 크기, 색상 및 굵기를 사용하여 특정 요소(예: 이름 및 전화번호)를 지원합니다. )
글꼴 선택이 서로를 보완하기 때문에 작동합니다. 충돌하지 않으며 명확한 계층 구조 덕분에 관심을 끌기 위해 싸우지 않습니다. 또한 대문자 텍스트는 명함과 같은 작은 크기의 디자인에 대한 가시성을 향상시키는 데 도움이 됩니다.
Atomicdust의 책 표지는 동시성보다는 대조를 위해 서로 다른 서체를 결합합니다. 하나의 손으로 그린 스타일은 책의 제목을 시각적으로 설명하고 명확한 초점을 만드는 방식으로 다른 하나의 전통적인 세리프 디자인과 의도적으로 모순됩니다.
5. 간격: 레이아웃에 균형, 흐름 및 초점 제공
일반적으로 흰색(또는 공백) 공간과 간격은 가장 간과되는 디자인 원칙 중 하나입니다. 그러나 그것은 또한 가장 중요한 것 중 하나입니다.
가능한 한 많은 정보를 포함하려는 노력의 일환으로 레이아웃의 일부 빈 공간을 계획하지 못하면 혼란스럽고 혼란스러운 디자인으로 끝날 위험이 있습니다. 여백은 디자인 요소를 분리 및 구성하고 질서 있고 균형 있게 보이도록 하는 데 필수적이기 때문입니다.
아마 이전에 본 적이 있을 것입니다. 정보, 텍스트, 이미지가 너무 꽉 차서 어디서부터 봐야 할지 모를 정도의 웹사이트나 전단지 디자인 입니다. 탐색이 불가능하기 때문에 방문자를 외면하는 디자인 중 하나를 만들지 마십시오.
항상 사용하지 않는 공간을 계획하십시오. 다음과 같은 경우에 필수적입니다.
-
보는 사람의 눈에 휴식처와 디자인을 통해 여행할 수 있는 길을 제공
-
레이아웃을 섹션으로 분리(이것의 반대 측면은 근접성입니다. 관련 항목을 더 가깝게 배치하기 위한 공간을 줄임 - 좋은 간격의 측면이기도 합니다.)
David Salgado 와 Mariana Perfeito의 편집 디자인은 위의 두 가지를 모두 수행하여 레이아웃의 각 섹션 사이와 주변에 많은 공백을 남기고 관련 항목을 함께 그룹화합니다. 결과는 깨끗하고 균형 잡힌 디자인입니다.
-
초점 분리
Design Womb 의 이 패키징 은 제품의 브랜드 이름을 여백으로 둘러싸서 사용자의 시선을 집중시키고 다채로운 패턴의 배경에서 잘 보이도록 합니다.
6. 구성: 디자인 구조 제공
이미 논의한 몇 가지 기술을 사용하여 레이아웃을 통해 시청자를 안내할 수 있지만 대부분의 디자인은 전체 구조 또는 구성 원칙(구성이라고 함)의 이점을 얻을 수 있습니다.
예술가들은 수세기 동안 작곡 기법에 의존해 왔으며, 그 중 많은 기법이 오늘날에도 여전히 사용되고 있습니다. 가장 일반적인 몇 가지를 살펴보겠습니다.
3등분 법칙: 3등분 법칙을 따르는 것은 초점이 예상대로 중앙에 배치되지 않는 동적 구성을 만드는 한 가지 방법입니다. 대신 이 규칙은 레이아웃을 그리드(3개의 동일한 간격의 수평선과 3개의 수직선)로 나누고 선 중 하나 또는 이상적으로는 선이 교차하는 4개의 지점 중 하나에 초점을 배치합니다.
확률의 규칙 : 확률 의 규칙에는 종종 3도 포함됩니다. 이것의 이면에 있는 아이디어는 홀수 개의 개체(아마도 두 개의 다른 항목으로 둘러싸인 초점 또는 아래와 같이 4개)가 항상 짝수보다 더 흥미롭고 눈을 즐겁게 한다는 것입니다.

묵시적 움직임: 이것은 중요한 정보를 가리키고 디자인을 통해 명확한 경로를 제공할 때 매우 효과적인 기술이 될 수 있습니다. 이러한 유형의 움직임을 만드는 방법은 무엇입니까? 리딩 라인. 선행 라인은 실제 라인일 필요는 없습니다(실제 라인일 수 있음). 그것들은 또한 물체나 모양, 반복되는 디자인 요소, 양수 공간과 음수 공간의 상호 작용 또는 방향 이동 감각을 생성하는 모든 것이 될 수 있습니다. 가장 일반적인 변형 중 일부는 수평, 수직 및 대각선 선도선과 s-곡선 및 z-모양입니다. z 모양 형식은 왼쪽에서 오른쪽으로 읽는 패턴을 활용하며 웹 사이트 레이아웃의 인기 있는 기반입니다.
아래에서 몇 가지 암시적인 움직임과 실행 중인 선행 라인을 볼 수 있습니다.
디자인에 탁월한 흐름을 제공하는 역동적인 구성을 만드는 방법에 대한 자세한 내용은 디자인 원칙: 구성 흐름 및 리듬 마스터하기를 참조하십시오.
시각적 계층 구조의 효율성을 테스트하는 방법
이 가이드가 디자인 프로젝트에서 명확한 시각적 계층 구조를 설정하는 것의 중요성을 보여주었기를 바랍니다.
여기에서 다룬 많은 기술은 디자인의 일부를 선택하여 강조할 수 있는 훌륭한 도구입니다. 그러나 주의 사항: 너무 강조하는 것은 시각적 계층 구조를 무너뜨리는 가장 쉬운 방법입니다.
너무 많은 디자인 요소에 시각적 중요성을 적용할 수 없습니다. 그렇지 않으면 모든 것이 동일해집니다. 모든 것이 눈에 띄면 아무것도 눈에 띄지 않습니다. 계층 구조의 기본 토대는 일부 요소는 강조되어야 하고 다른 요소는 물러나야 한다는 것입니다.
그러나 시각적 계층 구조가 의도한 대로 작동하는지 확신이 서지 않는다면 어떻게 해야 할까요? 특별한 도구가 필요 없이 언제든지 수행할 수 있는 효과를 쉽게 테스트할 수 있는 방법이 있습니다. 신뢰할 수 있는 "스퀸트 테스트"입니다.
컴퓨터 화면에서 조금 뒤로 물러나서 디자인을 곁눈질하면 모든 세부 사항이 흐려지고 일반적인 모양만 보입니다. 여전히 눈에 띄는 것은 무엇입니까? 시청자들이 가장 먼저 봤으면 하는 것이 무엇인가요? 그렇다면 상태가 좋은 것입니다. 그렇지 않다면 돌아가서 다른 것을 시도해야 할 때일 수 있습니다.
이제 효과적인 시각적 계층 구조를 만들기 시작하는 몇 가지 도구와 기술이 있습니다. 잘 활용하고 언제나처럼 즐거운 디자인 되세요!
- 출처:https://www.canva.com/learn/visual-hierarchy/
[🌰인사이트]
●시각적 계층구조 왜 필요한데?
인간이 페이지에서 정보를 처리하는 순서에 따라 우선순위를 정하는 시스템이다. 우선순위의 메세지를 배치하여 자연스럽게 원하는 정보를 전달 할수 있게한다.
계층구조를 배치할때 가장 고려되는 요소로 인간의 눈이 이해할 수 있는 방식으로 구성해야 한다.
●인간이 시각정보를 처리하는 방법은?
대부분의 문화권에서 일반적으로 위에서 버튼으로, 왼쪽에서 오른쪽으로 읽는다. 시각 정보를 처리하는 두 가지 패턴
- F패턴: 텍스트가 많은 디자인에서 가장 일반적으로 쓰인다.
왼쪽 상단에서 시작하여 오른쪽 상단으로 수평으로 이동하는 'F' 모양을 따름 →페이지 왼쪽 아래로 스캔 → 오른쪽으로 빠르게 스캔
- Z패턴: 밀도가 낮은 디자인은 Z 모양을 따름 왼쪽 상단 시작→오른쪽 상단 (가로로이동) → 왼쪽 하단 모서리(뒤쪽 대각선 경사면에서 시선을 아애로 향함)→ 오른쪽 모서리 이동
●시각적 흐름
디자이너는 흐름을 제어하고 특정 항목에 시선을 끌 수있는 방식으로 개체를 배치해야 한다.
다음 세가지 질문을 염두하고 설계해야 한다.
1. 시청자의 시선은 처음에 어디로 향할까요? (초점 설정)
2. 두 번째 시선이 향할 곳은 어디일까?
3. 보는 사람의 시선은 결국 어디로 가는 걸까? *흐름의 관점에서 디자인을 생각해야 한다.
●시각적 계층구조를 사용하는 방법
가장 중요한 기능 중 하나가 중요한 초점을 설정하여 보는 사람이 디자인 탐색을 시작하고 가장 중요한 정보가 있는 위치를 보여줄 수 있는 진입점을 제공하는 것이다.
방법1) 크기 대조 가장 큰 디자인 요소가 주목받는다 객체의 크기(치수) 및 매율(다른객체와 관련된 크기)을 확대하는 것은 객체에 시각적 중요성을 부여한다.
*주의: 모든 디자인 원칙과 마찬가지로 균형과 절제가 핵심. 너무 큰 초점으로 디자인을 압도하거나 너무 작은 보조 정보로 사용성을 손상 시킬 수 있다.
방벙2) 색상 및 대비: 주의 유도 중요한 정보나 이미지를 강조하기 위해 전략적으로 사용될 때 색상에 시각적으로 끌린다. *주의: 무지개의 모든 색을 쓸 경우 시각적 계층 구조를 만드는 데 미칠 수 있는 영향을 무효함. 색상을 아껴서 목적에 따라 사용하는 것이 핵심 원칙이다.
a. 온도(색상): 시원함/ 따뜻함/ 중간색 에 속하는 색을 혼합하여 사용 시 특히 대비가 높은 색온도 끼리의 배치는 시각적 관심을 끌 수있다. (강조) 한 가지 온도를 고수 할 경우 시각적으로 더 응집력 있게 보이도록 도울 수있다. 유사한 색온도 사용으로 통합적으로 보인다.
b. 값(명도): 색상의 밝기, 어두움. 온도와 마찬가지로 값이 다른 색상은 서로 대비되어 극적인 효과를 낼 수있고, 비슷한 값의 색상은 시각적 가중치가 더 동일한 경향이 있다. c. 채도: 순색이 높을 수록 채도가 높다. 밝거나 차분한 색상을 단독으로 혹은 함께 사용하면 디자인에서 대비가 높거나 낮은 위치를 만드는 전략적 방법이 될 수있다.
방법3) 타이포그래피 계층구조 : 3단계로 시작하여 디자인 구성
a. 레벨1 : 대 제목) 일반적으로 타이포 그래피가 가장 중요한 콘텐츠. 가장 즉시 눈에 띄는 타이포그래피 요소
b. 레벨2 : 중 제목) 일반적으로 디자인을 섹션으로 구성하거나 관련 정보를 그룹화 하는데 쓰인다. 보는 사람이 디자인의 다른 부분을 명확하게 안내하고 쉽게 탐색할 수 있도록 도와야 한다.
c. 레벨3: 본문) 디자인의 전체메세지, 목적, 세부정보. 길거나 짧을 수 있다. (전체기사, 짧은 메모, 간략한 설명) 가독성이 높아야 한다.
방법4) 글꼴 서체를 성격유형으로 생각하라 타이포 계층 구조는 디자인을 구성하고 탐색하기 쉽게 만드는 반면, 스타일 선택은 디자인의 전반적인 분위기에 기여하고 강조를 만드는 자연스러운 방법이다.
방법5) 간격 : 레이아웃에 균형, 흐름 및 초점 제공 공간 계획은 필수적이다. - 보는 사람의 눈에 휴식처와 디자인을 통해 여행할 수있는 길을 제공 - 레이아웃을 섹션으로 분리 (관련 항목 끼리 가까이 배치하여 공간을 줄여 공통점을 부각한다.)
방법6) 초점분리 강조 하고 싶은 부분과 아닌 부분을 분리 하여 디자인 (ex공백/패턴)
● 시각적 계층 구조의 효율성을 테스트 하는 방법
계층구조의 기본 토대는 일부 요소는 강조되고 다른 요소는 물러나야 한다.
컴퓨터 화면에서 조금 뒤로 물러나서 디자인을 곁눈질하면 모든 세부 사항이 흐려지고 일반적인 모양만 보인다. 여전히 눈에 띄지 않는것은 무엇인지 시청자들이 가장 먼저봤으면 하는 것이 무엇인지 체크하라
[🥜 추가조사]
[🌞 생각 정리]
▶ 기본이 중요하다
▶ 어느날 사람이 눈이 세개가 되고 손이 10개가 되지 않는 한 인간에 가장 최적화된 고전적 방법을 따르는 것이 좋은것 같다.