사람 눈은 정해진 길로만 움직인다 — Z·F 시선 동선 설계법
아이트래킹 연구가 밝힌 Z패턴(배너)과 F패턴(상세페이지) 시선 동선. 가격·CTA·핵심 카피를 화면 어느 좌표에 놓아야 클릭이 오르는지 단계별로 정리했다.
당신의 배너에서 CTA 버튼을 왼쪽 하단에 놓았다면, 그 버튼은 거의 안 보이는 자리에 있다. 1940년대 아이트래킹 연구부터 닐슨 노먼 그룹의 시선 추적 실험까지, 수십 년 데이터가 한 가지를 반복해서 말한다 — 사람 눈은 화면을 자유롭게 훑지 않는다. 정해진 길로만 움직인다. 가로형 배너는 Z자, 텍스트가 많은 상세페이지는 F자. 이 두 길 위에 핵심 요소를 정확히 올려놓느냐, 길 바깥 사각지대에 버리느냐가 같은 디자인의 클릭률을 통째로 가른다. 좌표 단위로 짚어보자.
왜 눈은 Z와 F로만 움직이나
이유는 단순하다. 한국어·영어 모두 왼쪽 위에서 오른쪽 아래로 읽기 때문이다. 시선의 출발점은 거의 항상 좌상단이고, 거기서 콘텐츠 밀도에 따라 두 갈래로 갈린다.
- 정보가 적고 시각 요소 중심(배너·히어로·포스터) → Z패턴. 좌상단에서 우상단으로 가로지른 뒤, 대각선으로 좌하단을 거쳐 우하단에서 멈춘다.
- 텍스트가 빽빽한 콘텐츠(상세페이지·블로그·검색결과) → F패턴. 첫 줄은 끝까지 읽고, 아래로 갈수록 왼쪽만 훑으며 가로 스캔이 짧아진다. 결과적으로 F 모양의 발열 지도가 찍힌다.
핵심은 이것이다. 사람은 "다 본다"고 착각하지만 실제로는 길 위만 본다. 길 바깥에 놓인 정보는 물리적으로 존재해도 인지되지 않는다.
Z패턴: 배너·히어로 좌표 설계
가로형 광고, 메인 비주얼, 팝업처럼 한눈에 들어오는 화면은 Z의 네 꼭짓점에 역할을 분배한다.
| 좌표 | 시선 순서 | 놓을 것 |
|---|---|---|
| 좌상단 (시작점) | 1번 | 로고 또는 가장 강한 헤드라인 한 줄 |
| 우상단 | 2번 | 보조 카피·혜택 요약(예: "오늘만 30%") |
| 중앙 대각선 | 3번 | 제품 이미지·핵심 비주얼(시선을 아래로 끌어내림) |
| 우하단 (종착점) | 4번 | CTA 버튼 — 시선이 마지막에 머무는 자리 |
가장 흔한 실수가 CTA를 좌하단에 두는 것이다. 좌하단은 Z 동선에서 스쳐 지나가는 통로일 뿐 멈추는 자리가 아니다. 버튼은 우하단, 시선의 종착점에 놓아야 한다. 헤드라인(좌상단) → 제품(중앙) → 버튼(우하단)으로 시선이 한 번에 흐르면, 읽는 사람은 자기도 모르게 클릭 직전 상태에 도달한다.
F패턴: 상세페이지·긴 글 좌표 설계
스마트스토어 상세페이지나 랜딩페이지처럼 세로로 긴 콘텐츠는 다르게 움직인다. 사용자는 첫 두세 줄만 끝까지 읽고, 아래로 갈수록 왼쪽 첫 단어들만 훑는다. 그래서 F자 모양이 된다. 설계 원칙은 이렇다.
- 첫 화면(스크롤 0)에 결론을 박아라. "이 제품이 뭐고 왜 사야 하는지"를 위쪽 가로줄에서 끝내야 한다. 스크롤해야 나오는 핵심 메시지는 70% 이상이 못 본다.
- 소제목과 핵심어를 왼쪽 정렬·맨 앞에 배치하라. "방수 3년 보장 — 어떤 환경에서도..."처럼 키워드를 문장 머리에 놓는다. F의 세로 줄기를 따라 왼쪽만 훑어도 메시지가 읽히도록.
- 긴 문단을 쪼개라. 한 덩어리 글은 첫 줄만 읽히고 버려진다. 짧은 단락·불릿·소제목으로 끊어 진입점을 여러 개 만든다.
- 중요 정보를 가운데·오른쪽에 숨기지 마라. F패턴에서 오른쪽 영역은 아래로 갈수록 거의 안 읽힌다. 가격·혜택·구매 버튼은 왼쪽 또는 전폭(full-width)으로.
좌표를 정하기 전, 시선 무게중심부터 잡아라
Z든 F든 그 위에 모든 걸 똑같은 크기로 올리면 길 자체가 사라진다. 시선은 결국 대비가 가장 큰 한 점에 먼저 꽂히기 때문이다. 동선은 "순서"를 만들고, 무게중심은 "출발"을 만든다.
- 한 화면에 강조 요소는 하나. 헤드라인·버튼·할인 배지를 다 키우면 셋 다 안 보인다. 우선순위 1개만 가장 크고 진하게.
- 여백이 화살표다. 요소 주변을 비워두면 시선이 그쪽으로 빨려든다. CTA 주위 여백은 인색하게 굴지 마라.
- 색은 한 번만 튀게. 버튼 색을 페이지에서 가장 눈에 띄는 단 하나의 색으로 쓰면, 시선이 동선 끝에서 정확히 그 색을 찾아간다.
바로 쓰는 점검 체크리스트
- 가장 중요한 한 문장이 좌상단에 있는가?
- 배너라면 CTA가 우하단(Z 종착점)에 있는가? (좌하단 금지)
- 상세페이지라면 핵심 메시지가 스크롤 없이 첫 화면에서 끝나는가?
- 소제목·키워드가 문장 맨 앞·왼쪽 정렬인가?
- 강조 요소가 화면당 하나로 절제됐는가?
- CTA 주위에 시선을 모으는 여백이 충분한가?
여섯 개 중 하나라도 "아니오"라면, 디자인을 새로 그릴 필요 없다. 같은 요소를 좌표만 옮겨도 읽히는 양이 달라진다. 가장 싸고 빠른 개선이다.
지금 운영 중인 배너 하나를 열어, CTA가 Z의 우하단에 있는지부터 확인해 보세요. 그 1cm 이동이 클릭률을 바꿉니다.