Ch.7 그리드 시스템과 레이아웃
비주얼 히어라키와 시선 패턴
사용자는 웹 페이지를 '읽지' 않습니다 — 스캔합니다
NNGroup 연구에 따르면 사용자는 웹 페이지 텍스트의 약 20%만 읽습니다. 나머지는 제목, 굵은 글씨, 이미지를 빠르게 훑으며 '필요한 정보가 있는지' 판단합니다.
사용자가 읽지 않는다면, 어떻게 중요한 정보를 전달할 수 있을까?
답은 시선의 흐름을 예측하고, 그 경로에 핵심 정보를 배치하는 것입니다. 이것이 비주얼 히어라키(Visual Hierarchy)입니다.
핵심 내용
사용자의 시선에는 예측 가능한 패턴이 있습니다
아이트래킹(Eye-tracking) 연구는 사용자의 시선이 페이지 유형에 따라 두 가지 패턴을 따른다는 것을 밝혀냈습니다.
F-패턴: • 텍스트 중심 페이지 (블로그, 기사, 검색 결과)
• 상단 가로 → 좌측 세로로 시선 이동
• 첫 문단을 가장 많이 읽음
• 아래로 갈수록 왼쪽만 훑음
• 핵심 정보를 좌측·상단에 배치
Z-패턴: • 비주얼 중심 페이지 (랜딩, 홈, 광고)
• 좌상단 → 우상단 → 좌하단 → 우하단
• 대각선으로 시선이 이동
• CTA 버튼을 Z의 끝점(우하단)에 배치
• 로고·네비를 Z의 시작점(좌상단)에 배치
F-패턴: 정보를 찾는 사용자 | Z-패턴: 설득당하는 사용자
실무 적용법: • 블로그/기사 → F-패턴: 부제목(H2)을 스캔 포인트로 활용, 핵심 문장을 단락 첫 줄에 배치 • 랜딩페이지 → Z-패턴: 헤드라인(좌상단) → 서브 비주얼(우상단) → 증거/후기(좌하단) → CTA 버튼(우하단)
크기·색상·위치·대비·여백 — 5가지 도구로 위계를 만듭니다
비주얼 히어라키 5도구
스캔 가능성(Scannability) 체크리스트 ✓ 제목(H2)만 읽어도 전체 내용을 파악할 수 있는가? ✓ 중요한 키워드가 굵은 글씨로 강조되어 있는가? ✓ 한 단락이 3~4줄을 넘지 않는가? ✓ 목록(bullet)과 번호로 구조화되어 있는가? ✓ 시각적 앵커(이미지, 아이콘, 차트)가 텍스트 사이에 있는가?
같은 정보를 담아도 배치 방식에 따라 전달력이 달라집니다
텍스트 중심의 블로그 페이지에서 사용자의 시선이 따르는 패턴은?
NNGroup 연구에 따르면 사용자는 웹 페이지 텍스트의 약 80%를 꼼꼼히 읽는다
시각적 위계(Visual Hierarchy)를 만드는 5가지 도구 중, 요소 주변의 빈 공간을 활용하여 중요도를 높이는 방법은?
핵심 용어
크기 (Size)
가장 직관적인 위계 도구. 큰 요소 = 중요한 요소. 제목 > 소제목 > 본문 > 캡션
색상 (Color)
채도 높은 강조색이 시선을 끔. CTA 버튼에 브랜드 컬러를 사용하는 이유
위치 (Position)
좌상단이 가장 높은 위계. F/Z 패턴의 시작점에 핵심 정보 배치
대비 (Contrast)
주변과 다를수록 눈에 띔. 밝은 배경의 어두운 버튼, 텍스트 중 굵은 글씨
여백 (Whitespace)
주변 여백이 넓을수록 중요해 보임. Apple 제품 이미지 주변의 넓은 공백
비교 정리
| 항목 | 스캔 최적화 | 스캔 비최적화 |
|---|---|---|
| 제목 | 명확한 H2/H3 위계 → 구조 즉시 파악 | 제목 없이 긴 텍스트 → 어디가 중요한지 모름 |
| 텍스트 강조 | 핵심 키워드 굵은 글씨 → 스캔 시 눈에 걸림 | 강조 없는 균일한 텍스트 → 전부 같은 중요도 |
| 단락 길이 | 3~4줄 짧은 단락 → 숨 쉴 공간 있음 | 10줄+ 벽면 텍스트 → 읽기 전에 포기 |
| 여백 활용 | 섹션 사이 충분한 여백 → 구획 구분 명확 | 여백 없이 빽빽 → 어디서 끊어야 할지 모름 |
사용자는 80%를 스캔한다 — 스캔해도 이해되는 페이지가 좋은 페이지다
핵심 정리
- 1F-패턴: 텍스트 중심 페이지, 좌측·상단에 핵심 배치
- 2Z-패턴: 비주얼 중심 페이지, CTA를 Z의 끝점(우하단)에 배치
- 3비주얼 히어라키 5도구: 크기, 색상, 위치, 대비, 여백
- 4사용자는 텍스트의 20%만 읽음 → 스캔 가능성이 핵심
- 5체크: H2만 읽어도 내용 파악, 굵은 글씨 강조, 짧은 단락, 충분한 여백
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작