{3줄 요약}

사람은 화면을 처음부터 끝까지 읽기보다 훑어봅니다. 이 전제가 인터페이스 설계의 출발점입니다.
시선은 무작위가 아니라 F 패턴·Z 패턴처럼 비교적 예측 가능한 경로를 따릅니다.
이 패턴을 알면 중요한 정보를 사용자가 자연스럽게 보는 위치에 둘 수 있습니다.

사람은 화면을 어떻게 보나요

닐슨 노먼 그룹(Nielsen Norman Group)의 아이 트래킹 연구가 보여준 가장 중요한 사실이에요.

사람들은 화면을 처음부터 끝까지 읽지 않아요.
빠르게 훑으면서 "여기에 원하는 게 있나?"를 판단해요.
관심 없으면 다음으로 넘어가거나 나가요.

Steve Krug은 《Don't Make Me Think》에서 웹 사용자를
"빌보드를 보는 운전자"에 비유해요.
빠르게 지나가면서 핵심만 포착한다고요.

이 행동을 스캔(Scanning)이라고 해요.
그리고 스캔에는 패턴이 있어요.

F 패턴

텍스트가 많은 화면에서 가장 자주 나타나는 패턴이에요.

사용자의 시선이 이렇게 움직여요.

  1. 첫 번째 줄을 왼쪽에서 오른쪽으로 읽어요
  2. 조금 아래로 내려와서 다시 왼쪽에서 오른쪽으로 읽어요 (첫 번째보다 짧게)
  3. 그 다음부터는 주로 왼쪽 수직선을 따라 아래로 내려가요

알파벳 F 모양이 만들어져요.

이 패턴이 의미하는 것 - 가장 중요한 정보는 왼쪽 상단과 첫 번째 줄에 있어야 해요. 오른쪽 아래로 갈수록 사용자가 볼 가능성이 낮아져요.

뉴스 기사, 블로그, 검색 결과 페이지에서 이 패턴이 두드러져요.

Z 패턴

텍스트보다 시각 요소가 많거나 콘텐츠가 단순한 화면에서 나타나는 패턴이에요.

시선이 이렇게 움직여요.

  1. 왼쪽 상단 → 오른쪽 상단 (수평 이동)
  2. 왼쪽 하단으로 대각선 이동
  3. 왼쪽 하단 → 오른쪽 하단 (수평 이동)

Z 모양이 만들어져요.

랜딩 페이지, 마케팅 배너, 로그인 화면에서 이 패턴이 많이 나타나요.

이 패턴을 활용하면 - 왼쪽 상단에 로고/브랜드, 오른쪽 상단에 CTA 버튼, 왼쪽 하단에 핵심 메시지, 오른쪽 하단에 최종 행동 버튼을 배치하는 레이아웃이 효과적이에요.

패턴을 활용한 설계 원칙

시선 흐름의 시작점을 설계해요 - 사용자가 화면을 열었을 때 시선이 가장 먼저 어디로 가야 하는지 정해요.
그게 가장 중요한 요소의 위치예요.

중요한 정보는 '뜨거운 영역'에 - F 패턴의 상단, Z 패턴의 대각선 경로에 있는 영역이 사용자가 가장 많이 보는 곳이에요.
이 영역에 핵심 메시지와 행동 유발 요소를 배치해요.

오른쪽 아래 영역은 보조 - F 패턴 기준으로 오른쪽 하단은 시선이 가장 적게 가는 곳이에요.
부가 정보나 법적 문구처럼 덜 중요한 것을 두는 게 자연스러워요.

제목, 키워드, 첫 단어를 강화해요 - 사용자는 텍스트 전체를 읽지 않아요.
제목, 소제목, 각 단락의 첫 단어를 스캔해요.
이 부분에 핵심 메시지가 있어야 해요.

스캔 패턴을 방해하는 것들

스캔을 어렵게 만드는 레이아웃 실수들이에요.

  • 중요한 정보가 페이지 하단 또는 오른쪽에만 있어요
  • 텍스트 블록이 너무 길어서 어디를 봐야 할지 모르겠어요
  • 강조 포인트가 너무 많아서 시선이 분산돼요
  • 가장 중요한 행동 버튼이 스크롤 아래에 있어요

Visual Hierarchy와 스캔 패턴이 어떻게 연결되는지는 Visual Hierarchy를 참고하세요.

관련 아티클

참고 문헌

  • Steve Krug, 《Don't Make Me Think》(2014) - 사용자가 화면을 읽지 않고 스캔한다는 핵심 관찰이에요.
  • Philip B. Meggs, 《Meggs' History of Graphic Design》(1983) - 시각 구성과 시선 흐름의 역사적 맥락이에요.