topic★★★★★난이도
비주얼 히어라키와 시선 패턴 — 눈은 어디를 먼저 보는가
F-패턴 · Z-패턴으로 읽히는 시선의 법칙과, 크기·색·위치로 만드는 정보 우선순위.
#F패턴#Z패턴#비주얼히어라키#시선#스퀸트테스트
왜 배우는가
사용자의 시선은 무작위로 움직이지 않는다. 예측 가능한 패턴을 따른다. 이 패턴을 이해하면 중요한 정보를 먼저 보게 만들고, 덜 중요한 정보를 자연스럽게 뒤로 밀 수 있다.
비주얼 히어라키(Visual Hierarchy)란 시각 요소들 사이에 '무엇이 먼저 보여야 하는가'라는 우선순위를 만드는 것이다. 인간의 눈은 자동으로 크고, 굵고, 대비가 강한 요소를 먼저 인식한다. 디자이너는 이 본능을 이용해 정보 전달 순서를 통제한다.
| 시선 패턴 | 적용 상황 | 동작 방식 |
|---|---|---|
| F-패턴 | 텍스트 중심 페이지 (블로그, 뉴스) | 첫 줄 전체 읽기 → 아래로 내려가며 왼쪽만 훑기 |
| Z-패턴 | 이미지 중심 페이지 (랜딩, 광고) | 좌상→우상→좌하→우하 대각선 이동 |
| 거트베르크 다이어그램 | 균일한 정보 밀도 | 4개 영역(주시·강여백·약여백·종착)으로 분할 |
F-패턴의 핵심 교훈 — 사용자는 페이지의 처음 두 줄에 가장 많은 시간을 쓴다. 가장 중요한 메시지는 반드시 상단 2줄 안에 배치하라. 그 아래는 왼쪽 정렬된 키워드만 훑는다.
| 히어라키 도구 | 효과 | 예시 |
|---|---|---|
| 크기(Scale) | 큰 것이 먼저 보인다 | 헤드라인 32px vs 본문 16px |
| 색상(Color) | 고채도·보색이 눈에 띈다 | 빨간 '삭제' 버튼 vs 회색 '취소' |
| 굵기(Weight) | 굵은 텍스트가 가벼운 것보다 우선 | Bold 제목 vs Regular 본문 |
| 여백(Space) | 넓은 여백이 요소를 고립시켜 강조 | Hero 섹션의 넉넉한 패딩 |
| 위치(Position) | 상단·좌측이 우선 | 로고=좌상, CTA=우상 |
스퀸트 테스트(Squint Test) — 디자인을 검증하는 가장 간단한 방법. 눈을 가늘게 뜨고 화면을 보라. 세부 사항이 흐려진 상태에서도 3가지 요소(제목, CTA, 핵심 이미지)가 먼저 보이면 히어라키가 성공한 것이다.