F자형 시선 패턴: 사용자는 화면을 이렇게 읽는다F-Pattern Eye Scanning: How Users Actually Read Screens
아이트래킹 연구로 밝혀진 F자형 읽기 패턴과 이를 활용한 콘텐츠 배치 전략을 다룹니다.Eye-tracking research revealed the F-shaped reading pattern — here's how to structure content placement around how people really scan.
- F패턴이 의미하는 것
- F패턴에 대응하는 글쓰기와 배치
- F패턴이 적용되지 않는 경우
- F패턴을 데이터로 확인하기
- 레이어드 케이크 패턴이라는 대안
- What the F-pattern means
- Writing and layout strategies
- When F-pattern doesn't apply
사용자는 웹 페이지를 책처럼 정독하지 않습니다. 닐슨 노먼 그룹의 아이트래킹 연구가 보여준 것처럼, 텍스트가 많은 페이지에서 시선은 알파벳 F자 형태로 움직입니다. 상단을 가로로 길게 훑고, 조금 내려와 다시 짧게 가로로 훑은 뒤, 왼쪽 가장자리를 따라 세로로 빠르게 스캔하는 패턴입니다.
F패턴이 의미하는 것
이 패턴의 함의는 명확합니다. 첫째, 페이지 상단 첫 두 줄이 사실상 승부처입니다. 핵심 메시지와 키워드는 반드시 첫 문단에 배치해야 합니다. 둘째, 왼쪽 가장자리는 시선의 고속도로입니다. 문단의 첫 단어, 소제목, 리스트의 시작점이 왼쪽 라인에 정렬되어 있으면 스캔 효율이 올라갑니다. 셋째, 오른쪽 하단으로 갈수록 시선이 도달할 확률이 급격히 떨어집니다. 중요한 정보를 본문 깊숙한 곳에 묻어두면 대부분의 사용자는 그것을 보지 못합니다.
F패턴에 대응하는 글쓰기와 배치
소제목을 자주 끊어 주세요. 소제목은 세로 스캔 중에 시선을 붙잡는 갈고리 역할을 합니다. 문단의 첫 문장에 그 문단의 결론을 담는 두괄식 구성도 효과적입니다. 핵심 키워드는 문장 앞쪽에 배치하고, 굵은 글씨는 한 문단에 한 번 정도로 절제해서 사용해야 강조가 살아남습니다.
F패턴이 적용되지 않는 경우
F패턴은 텍스트 위주 페이지의 이야기입니다. 이미지가 큰 랜딩 페이지에서는 시선이 Z자형으로 움직이고, 카드 그리드에서는 각 카드를 도장 찍듯 옮겨 다닙니다. 또한 F패턴은 '사용자가 대충 읽는다'는 현상의 결과이지 목표가 아닙니다. 좋은 위계와 명확한 소제목으로 콘텐츠를 구조화하면 사용자는 F패턴을 벗어나 필요한 곳으로 직행합니다. F패턴은 따라야 할 규칙이 아니라, 게으른 레이아웃이 어떻게 읽히는지를 보여주는 경고에 가깝습니다.
결국 디자이너의 일은 스캔하는 사용자를 비난하는 것이 아니라, 스캔만으로도 핵심이 전달되는 화면을 만드는 것입니다. 첫 두 줄과 왼쪽 라인, 이 두 곳에 가장 중요한 정보를 두세요.
F패턴을 데이터로 확인하기
내 사이트에서 F패턴이 실제로 나타나는지 확인하려면 히트맵 도구(핫자, 뷰저블, MS 클래리티 등)를 붙여 보세요. 클릭 히트맵과 스크롤 도달률을 보면 사용자의 시선이 어디서 멈추고 어디를 건너뛰는지 드러납니다. 특히 스크롤 50% 지점 아래에 둔 핵심 CTA의 노출률이 의외로 낮다는 사실을 확인하면, 상단 배치의 중요성을 데이터로 설득할 수 있습니다.
레이어드 케이크 패턴이라는 대안
닐슨 노먼 그룹은 F패턴 외에도 '레이어드 케이크 패턴'을 보고했습니다. 소제목이 잘 설계된 페이지에서 사용자는 소제목들만 가로로 훑으며 케이크의 층처럼 읽어 내려가다가, 관심 있는 층에서만 본문을 정독합니다. 이것이 디자이너가 유도해야 할 이상적인 스캔 형태입니다. 소제목만 읽어도 글의 뼈대가 전달되도록 작성하고, 각 소제목 아래 첫 문장에 그 섹션의 결론을 두세요. F패턴은 막을 수 없지만, 더 나은 패턴으로 업그레이드할 수는 있습니다.
덧붙여 모바일에서는 화면 폭이 좁아 F의 가로획이 짧아지고 세로 스캔이 더 지배적이 됩니다. 모바일 콘텐츠일수록 문단을 짧게 끊고 소제목 밀도를 높이는 것이 스캔 효율을 지키는 길입니다.
Users don't read web pages like books. As Nielsen Norman Group's eye-tracking research shows, on text-heavy pages the gaze moves in an F shape: a long horizontal sweep across the top, a shorter sweep a bit lower, then a quick vertical scan down the left edge.
What the F-pattern means
The implications are clear. First, the top two lines of any page are the battleground — critical messages and keywords must appear in the first paragraph. Second, the left edge is a visual highway — paragraph-opening words, subheadings, and list starters aligned to the left increase scan efficiency. Third, the bottom-right of any page has the lowest probability of being seen. Important information buried deep in body copy won't reach most users.
Writing and layout strategies
Use subheadings frequently — they act as hooks that catch the eye during a vertical scan. Lead each paragraph with its conclusion (inverted pyramid). Front-load key keywords within sentences, and use bold text sparingly — no more than once per paragraph — so emphasis retains meaning.
When F-pattern doesn't apply
The F-pattern describes text-heavy pages. On image-dominated landing pages, the gaze follows a Z-pattern; in card grids, it hops between cards. More importantly, F-pattern is a symptom of poor layout, not a goal. Good hierarchy and clear subheadings pull users off the F and guide them directly to relevant content. Think of it as a warning about lazy design, not a pattern to design for.
The designer's job is not to blame scanning users, but to create screens where scanning alone is enough to grasp the message. Put your most important content at the top two lines and the left edge.