시각적 위계 (Visual Hierarchy)
쉽게 풀면
가장 중요한 내용을 크고 눈에 띄게, 덜 중요한 내용은 작게 배치해서 사람들이 자연스럽게 순서대로 보게 만드는 방법이에요. 그래서 여백을 넓게 두는 것만으로도 특정 요소를 더 중요하게 보이게 할 수 있어요. 그래서 제목을 크게, 설명을 작게 배치해서 뭘 먼저 봐야 할지 알려 주는 거예요.
왜 중요한가
비주얼하이어라키는 크기, 색상, 위치, 대비 등을 조합해 정보의 상대적 중요도를 시각적으로 전달하는 설계 원리로, 사용자가 화면을 훑어볼 때 가장 중요한 정보부터 순서대로 인지하도록 유도하는 UI 및 편집 디자인의 근본 원칙으로 다뤄진다. 헤드라인, 서브헤드, 본문 순의 타입스케일 적용이 대표적인 실현 방식이다. 위계가 명확하면 사용자가 가장 먼저 봐야 할 요소를 빠르게 인지하게 하여 정보 탐색 시간을 줄여 준다.
핵심 정리
- 시각적 위계는 화면이나 지면의 요소를 중요한 순서대로 눈에 들어오게 만드는 구성 원리입니다.
- 쓰이는 수단은 크기, 대비, 색, 위치, 여백, 정렬, 근접성입니다. 요소 하나만 바꾸기보다 여러 수단이 같은 방향의 순서를 가리키게 할수록 위계가 분명해집니다(Lidwell 등, 2003).
- 위계 단계는 보통 몇 개로 단순하게 유지합니다. 모든 것이 강조되면 아무것도 강조되지 않습니다.
예시로 보기
같은 내용을 두 가지로 구성해 비교해 봅시다. (가) 모든 문단이 같은 크기, 같은 굵기, 같은 간격일 때 독자는 어디서 읽을지 정하지 못합니다. (나) 제목을 크고 굵게, 소제목을 한 단계 작게, 본문을 가장 작게 두고 제목 위아래 여백을 넓히면 눈은 제목 → 소제목 → 본문 순서로 움직입니다. 이때 쓰인 수단은 크기, 굵기, 여백 세 가지이고, 모두 같은 순서를 가리키고 있습니다.
디자인 점검 방법으로는 화면을 흐리게 보거나 눈을 가늘게 뜨고 무엇이 먼저 보이는지 확인하는 방법이 널리 쓰입니다. 연구에서는 시선추적 실험으로 실제 주목 순서를 검증하기도 합니다. 시선 이동 같은 지각 특성은 Ware(2004) 등이 정리했습니다.
자주 하는 오해
- “크게 만들면 위계가 생긴다”는 오해: 크기만 키우면 요소가 서로 경쟁합니다. 대비, 여백, 위치와 함께 써야 순서가 읽힙니다.
- “단계가 많을수록 정교하다”는 오해: 단계가 너무 많으면 우선순위가 오히려 흐려집니다.
- 시각적 위계를 정보 구조와 같다고 보는 오해: 정보 구조(무엇이 어디에 속하는가)가 먼저 있고, 시각적 위계는 그것을 눈에 보이게 하는 방법입니다. 대비의 구체적 원리는 시각적 대비에서 다룹니다.
논문에서는 이렇게 쓰입니다
실제 논문에서
이 용어를 직접 쓴 국내 논문 문장을 아직 수집하지 못했습니다. 수집되는 대로 출처와 함께 싣겠습니다.
예시 문장
아래는 용어의 쓰임을 보여 주려고 만든 예시로, 실제 논문에서 가져온 문장이 아닙니다.
크기 대비를 이용해 요소 간 중요도 차이를 시각적으로 드러낸 레이아웃 설계 사례를 설명한다.
논문에서는 시선추적(eye-tracking) 데이터를 근거로 시각적 위계 설계의 효과를 검증하는 사례가 많다.
조금 더 깊게 보면
위계가 지나치게 많은 단계로 세분화되면 오히려 사용자가 우선순위를 파악하기 어려워지므로 소수의 명확한 단계로 단순화하는 것이 실무에서 권장된다. 비주얼콘트라스트, 비주얼웨이트 같은 개별 조형 원리들이 결합해 비주얼하이어라키라는 전체적 정보 구조를 만든다는 점에서 이는 여러 하위 원리를 통합하는 상위 개념이다.
시각적 위계는 크기나 색상 같은 단일 속성이 아니라 여백, 대비, 정렬이 함께 작용해 만들어지며, 눈동자 움직임을 추적하는 시선추적 연구에서 실제 주목 순서를 검증하는 데 활용됩니다. 위계가 지나치게 여러 단계로 세분화되면 오히려 어떤 요소가 가장 중요한지 혼동을 줄 수 있어, 단계 수를 절제하는 것이 실무에서 강조됩니다.
주의할 점
시각적위계가 지나치게 많은 단계로 나뉘면 오히려 어떤 요소가 가장 중요한지 혼란을 줄 수 있어 단계 수를 적절히 제한하는 것이 좋다. 위계가 지나치게 여러 단계로 세분화되면 어떤 요소가 정말 중요한지 오히려 혼동을 줄 수 있다.
헷갈리기 쉬운 용어
디자인 원리 용어는 층위가 서로 다릅니다.
| 용어 | 층위 | 설명 |
|---|---|---|
| 시각적 위계 | 구성 전체의 원리 | 요소의 중요도 순서를 시각적으로 만드는 것 |
| 시각적 대비 | 수단 중 하나 | 차이를 만들어 눈에 띄게 하는 방법 |
| 정렬·근접성 | 수단 중 하나 | 관련 요소를 묶어 구조를 보이게 하는 방법 |
참고 문헌
- Lidwell, W., Holden, K., & Butler, J. (2003). Universal Principles of Design. Rockport Publishers.
- Dondis, D. A. (1973). A Primer of Visual Literacy. MIT Press.
- Ware, C. (2004). Information Visualization: Perception for Design (2nd ed.). Morgan Kaufmann.
표의 기준값은 위 문헌에 근거한 관례이며, 분야·학술지마다 다른 기준을 쓸 수 있습니다.