닐슨노먼그룹(NN/g)의 아이트래킹 연구에서 사람들은 웹페이지를 F자 형태로 훑어 읽는 경향이 확인됐다
F패턴은 콘텐츠와 텍스트가 많은 페이지에서, Z패턴은 목적이 단순한 페이지에서 더 잘 나타난다
두 패턴을 문화권 차이로만 설명하는 것은 단순화된 설명이며, 실제로는 콘텐츠 성격이 더 큰 변수다
랜딩페이지처럼 목적이 하나인 페이지는 대체로 Z패턴에 가까운 흐름으로 정보를 배치하는 편이 유리하다
중요한 정보일수록 시선이 자연스럽게 지나가는 경로 위에 놓아야 방문자가 놓치지 않는다
왜 시선의 흐름을 먼저 설계해야 하나
방문자는 랜딩페이지를 처음부터 끝까지 꼼꼼히 읽지 않습니다. 짧은 시간 안에 화면을 훑으면서 자신에게 필요한 정보가 있는지 없는지를 먼저 판단합니다. 이때 눈이 움직이는 경로는 무작위가 아니라 어느 정도 예측 가능한 패턴을 따르는 것으로 알려져 있는데, 대표적인 것이 F패턴과 Z패턴입니다.
디자인을 시작할 때 이 흐름을 고려하지 않으면, 정작 중요한 정보를 방문자의 시선이 지나가지 않는 구석에 배치하는 실수를 하기 쉽습니다. 반대로 시선이 자연스럽게 머무는 자리를 먼저 파악하고 그 위에 핵심 카피와 CTA를 올리면, 별도의 강조 장치 없이도 정보 전달력이 올라갑니다.
F패턴이란 무엇인가
F패턴은 닐슨노먼그룹이 2006년 아이트래킹 연구를 통해 처음 발표한 읽기 패턴입니다. 사용자는 화면 상단을 가로로 한 번 훑고, 그보다 짧은 폭으로 두 번째 가로 훑기를 한 뒤, 마지막으로 화면 왼쪽을 세로로 훑어 내려가는 식으로 시선을 움직입니다. 이 궤적을 그려보면 알파벳 F자와 비슷한 모양이 나온다고 해서 F패턴이라 불립니다.
이 패턴은 특히 기사, 블로그, 검색 결과처럼 텍스트 정보량이 많고 목적이 여러 개인 페이지에서 자주 관찰됩니다. 사람들이 모든 문장을 정독하지 않고 왼쪽 상단부터 훑으며 필요한 부분만 골라 읽기 때문에, 이런 유형의 페이지에서는 핵심 정보를 문단 왼쪽, 첫 줄에 배치하는 것이 유리합니다.
Z패턴이란 무엇인가
Z패턴은 F패턴의 자매격 패턴으로, 화면을 좌상단에서 우상단으로, 다시 대각선으로 좌하단까지, 마지막으로 우하단까지 훑는 지그재그 흐름을 말합니다. 이 패턴은 콘텐츠가 복잡하지 않고 하나의 명확한 목적(예: 하나의 제품, 하나의 신청)만 가진 페이지에서 더 자연스럽게 나타나는 경향이 있습니다.
Z패턴이 유리한 이유는 이 경로가 로고(좌상단) → 보조 메뉴나 신뢰 요소(우상단) → 핵심 카피(대각선 중앙) → CTA 버튼(우하단)으로 이어지는 자연스러운 스토리텔링 순서와 잘 맞아떨어지기 때문입니다. 즉 Z패턴은 단순히 눈이 그렇게 움직인다는 관찰을 넘어, 정보를 배치하는 순서 가이드로도 활용됩니다.
'서양식 F패턴, 동양식 Z패턴'이라는 설명은 어디까지 맞을까
두 패턴을 서양식·동양식 읽기 습관 차이로 설명하는 콘텐츠를 종종 볼 수 있습니다. 다만 닐슨노먼그룹의 원 연구는 이 차이를 문화권이나 언어 방향보다는 콘텐츠의 성격(정보량이 많은 페이지인지, 단일 목적 페이지인지)에서 찾습니다. 텍스트와 정보가 빽빽한 페이지는 언어권과 무관하게 F패턴이, 시각적 위계가 뚜렷하고 목적이 단순한 페이지는 Z패턴이 나타나는 경향이 더 일관되게 관찰된다는 것입니다.
그러니 '우리 서비스는 동양권 이용자가 많으니 무조건 Z패턴'이라고 단정하기보다는, 지금 만들고 있는 페이지가 정보량이 많은 콘텐츠형인지, 목적이 하나뿐인 단일 페이지인지를 먼저 구분하는 것이 더 정확한 접근입니다. 랜딩페이지는 대체로 후자에 가깝기 때문에 Z패턴 배치가 잘 맞는 경우가 많습니다.
랜딩페이지 정보 우선순위, 실제로 어떻게 배치하나
Z패턴을 기준으로 랜딩페이지를 설계한다면, 좌상단에는 브랜드 로고나 페이지 성격을 알리는 요소를, 우상단에는 신뢰를 뒷받침하는 보조 정보(문의처, 간단한 배지 등)를 배치합니다. 화면 중앙을 가로지르는 대각선 경로에는 메인 카피와 핵심 비주얼을 놓아 방문자의 시선이 자연스럽게 그 위를 지나가게 하고, 마지막 우하단에는 CTA 버튼을 놓아 시선이 도착하는 지점에서 바로 행동으로 이어지게 만듭니다.
페이지 안에 정보량이 늘어나 콘텐츠형에 가까워지는 구간(상세 설명, FAQ 등)에서는 F패턴 방식으로 전환해, 각 문단의 첫 줄에 핵심 문장을 배치하고 나머지는 뒷받침 설명으로 두는 식으로 구성을 바꿔주는 것도 방법입니다. 한 페이지 안에서도 상단은 Z패턴, 하단 상세 영역은 F패턴으로 섞어 쓰는 구성이 실무에서 흔히 쓰입니다.
패턴을 무시하면 어떤 문제가 생기나
시선 흐름을 고려하지 않고 디자인을 예쁘게 꾸미는 데만 집중하면, 정작 핵심 정보가 시선이 잘 지나가지 않는 자리(예: 화면 정중앙 아래쪽 여백, 우측 사이드바 하단)에 놓이는 일이 생깁니다. 방문자는 그 자리를 아예 보지 못한 채 페이지를 떠나버리고, 담당자는 "정보를 분명히 넣었는데 왜 반응이 없지"라며 원인을 다른 곳에서 찾게 됩니다.
특히 이벤트 배너나 프로모션 안내처럼 임팩트가 커야 할 요소를 시선 경로 바깥에 배치하는 실수가 흔합니다. 새로운 요소를 페이지에 추가할 때는 "이 요소가 예쁜가"보다 "이 요소가 방문자의 시선 경로 위에 있는가"를 먼저 점검하는 습관이 필요합니다.
확신이 서지 않을 때 검증하는 법
전문 아이트래킹 장비가 없어도 어느 정도는 검증이 가능합니다. 동료나 팀원에게 랜딩페이지를 3초만 보여주고 화면을 끈 뒤, 무엇을 봤는지 기억나는 대로 말해달라고 요청해보는 방법이 대표적입니다. 이때 핵심 카피나 CTA가 기억에 남지 않는다면, 그 요소가 시선 경로에서 벗어나 있다는 신호로 볼 수 있습니다.
여러 명에게 반복해서 같은 테스트를 해보면 공통적으로 기억하는 요소와 그렇지 못한 요소가 갈립니다. 이 결과를 바탕으로 기억에 남지 않은 요소를 시선 경로 위(예: 대각선 중앙이나 문단 왼쪽 첫 줄)로 옮기는 식으로 배치를 조정하면, 정식 아이트래킹 조사 없이도 실무에서 쓸 만한 개선 방향을 잡을 수 있습니다.
다음 행동
지금 운영 중인 랜딩페이지를 열어 눈으로 훑을 때 시선이 실제로 어디를 지나가는지 스스로 따라가 보고, 그 경로 위에 핵심 카피와 CTA가 놓여 있는지 확인해보세요.
← 이전 글 · 레슨 02 랜딩페이지 최상단(Above the Fold) 필수 레이아웃: 메인 카피, 핵심 비주얼, 명확한 CTA 버튼의 황금 배치
CHALLENGE
배운 걸 실전 문제로 확인
카테고리별 Level Test로 실무 레벨을 점검해보세요.