뉴스 기사나 검색 결과 화면을 열었을 때, 처음 몇 줄은 끝까지 읽다가 곧 줄마다 앞부분만 훑으며 아래로 내려간 경험이 있지 않으신가요? 이렇게 화면 위쪽은 가로로 두 번 읽고, 그 아래는 왼쪽 가장자리만 세로로 훑는 시선의 모양을 ‘F자형 패턴(F-Shaped Pattern)’이라고 부릅니다.

F자형 패턴이란 쉽게 말해 ‘웹의 글을 꼼꼼히 읽지 않고 훑어볼 때 시선이 알파벳 F 모양을 그리는 현상’을 의미합니다. 2006년 사용성 전문가 야콥 닐슨(Jakob Nielsen)이 이끄는 닐슨 노먼 그룹(Nielsen Norman Group)이 사용자 232명의 시선을 추적한 연구에서 이름 붙였습니다.

본 자료에서는 F자형 패턴이 발견된 과정, 그림으로 보는 시선의 세 움직임과 주요 용어, 디자인과 글쓰기에 활용하는 방법, 그리고 이 패턴을 둘러싼 오해와 한계까지 차례로 살펴보겠습니다.

훑어 읽는 눈이 남긴 지도, F자형 패턴

1. F자형 패턴이 발견된 과정

웹이 널리 퍼지면서 사람들이 화면의 글을 어떻게 읽는지는 디자이너와 연구자 모두의 관심사가 되었습니다. 사용자에게 직접 묻는 것보다 더 정확한 답은 눈의 움직임 그 자체에 있었습니다.

(1) 시선 추적 연구
시선 추적(Eyetracking)은 모니터 아래에 둔 장치로 눈동자가 화면의 어디에, 얼마나 오래 머무는지를 기록하는 방법입니다. 닐슨 노먼 그룹은 이 장치로 사용자 232명이 수천 개의 웹 페이지를 보는 모습을 기록했습니다.

(2) 히트맵에 드러난 F
시선이 오래 머문 곳은 빨강, 덜 머문 곳은 노랑과 파랑으로 칠한 히트맵을 겹쳐 보니, 회사 소개 페이지·제품 페이지·검색 결과처럼 성격이 다른 화면에서도 비슷한 F 모양이 나타났습니다. 닐슨은 2006년 4월 칼럼 「F-Shaped Pattern For Reading Web Content」에서 이 결과를 발표했습니다.

(3) 읽지 않고 훑는 사용자
이 연구가 보여 준 핵심은 F라는 모양 자체보다, 사람들이 웹의 글을 한 단어씩 꼼꼼히 읽는 일이 드물다는 사실이었습니다. 사용자는 필요한 정보를 빨리 찾으려고 글의 일부만 골라 보며, F는 그 훑어보기가 남긴 흔적입니다.

2. 그림으로 보는 시선의 세 움직임과 주요 용어

F자형 패턴은 세 번의 시선 움직임으로 이루어집니다. 위쪽에서 가로로 두 번, 왼쪽에서 세로로 한 번 움직인 자취가 합쳐져 F가 됩니다.

• F자형 패턴(F-Shaped Pattern): 위쪽 두 줄은 가로로 읽고 나머지는 왼쪽만 세로로 훑어 시선이 F 모양을 그리는 현상입니다.
• 시선 추적(Eyetracking): 눈동자의 움직임과 머문 시간을 장치로 기록하는 연구 방법입니다.
• 히트맵(Heatmap): 시선이 많이 머문 곳일수록 진한 색으로 칠해 한눈에 보여 주는 그림입니다.
• 훑어 읽기(Scanning): 글 전체를 읽지 않고 눈에 띄는 단어와 문장만 골라 보는 읽기 방식입니다.

(1) 첫 번째 가로줄
사용자는 먼저 내용 영역의 맨 위를 가로로 읽습니다. 제목과 첫 문장이 놓이는 이 구간이 F의 윗줄이 됩니다.

(2) 두 번째 가로줄
조금 아래로 내려와 다시 가로로 읽지만, 이번에는 첫 번째보다 짧은 구간만 읽고 멈춥니다. 이것이 F의 가운데 줄입니다.

(3) 왼쪽 세로줄
마지막으로 내용의 왼쪽 가장자리를 따라 세로로 훑어 내려갑니다. 천천히 꼼꼼하게 훑을 때도 있고 띄엄띄엄 빠르게 지나갈 때도 있으며, 이 움직임이 F의 기둥이 됩니다.

3. 디자인과 글쓰기에 활용하는 방법

F자형 패턴을 안다고 해서 화면을 F 모양으로 꾸미라는 뜻은 아닙니다. 오히려 사용자가 훑어보기만 해도 중요한 내용을 놓치지 않도록 글과 화면을 정리하라는 신호에 가깝습니다.

(1) 중요한 내용은 처음 두 문단에
닐슨은 첫 두 문단에 가장 중요한 정보를 담아야 한다고 조언했습니다. 사용자가 가로로 끝까지 읽는 구간은 위쪽 몇 줄뿐이기 때문입니다. 결론을 먼저 쓰는 신문 기사의 역피라미드 구조와도 통하는 원칙입니다.

(2) 첫 단어에 정보를 싣기
왼쪽을 따라 내려가는 눈은 각 줄의 앞 두세 단어만 보고 지나갑니다. 그래서 소제목과 문단, 목록의 첫머리를 내용이 담긴 단어로 시작하면 훑어보는 사람도 무엇에 관한 내용인지 빨리 알아챌 수 있습니다.

(3) 소제목·굵은 글씨·목록 쓰기
닐슨 노먼 그룹은 소제목이나 굵은 글씨 같은 단서가 거의 없는 긴 글에서 F자형 패턴이 잘 나타난다고 설명합니다. 소제목을 달고 핵심어를 굵게 쓰고 목록으로 나누면 시선이 필요한 곳에 머물 수 있습니다.

4. F자형 패턴을 둘러싼 오해와 한계

F자형 패턴은 널리 알려진 만큼 잘못 이해되기도 합니다. 이 패턴은 사람이 언제나 따르는 법칙이 아니라, 특정한 조건에서 자주 나타나는 읽기 습관입니다.

(1) 좋은 디자인의 목표가 아니다
닐슨 노먼 그룹은 2017년 다시 연구해 F자형 패턴이 휴대 전화 화면에서도 여전히 나타난다고 밝혔습니다. 동시에 이 패턴은 사용자가 오른쪽 내용을 놓치고 있다는 뜻이므로, 디자이너가 일부러 이끌어 낼 목표가 아니라고 강조했습니다.

(2) 다른 훑어보기 패턴
같은 연구는 소제목만 골라 읽는 레이어 케이크 패턴(Layer-Cake Pattern), 숫자나 링크처럼 특정한 것만 찾아 건너뛰는 스팟 패턴(Spotted Pattern), 관심이 커서 거의 모두 읽는 몰입 패턴(Commitment Pattern) 등도 소개했습니다. 글의 구성과 읽는 목적에 따라 시선의 모양이 달라진다는 뜻입니다.

(3) 언어와 화면 구성의 영향
F는 왼쪽에서 오른쪽으로 읽는 언어에서 얻은 결과입니다. 아랍어나 히브리어처럼 오른쪽에서 왼쪽으로 쓰는 언어에서는 좌우가 뒤집힌 모양이 나타날 수 있고, 그림이 많거나 구성이 잘 정리된 화면에서는 F가 뚜렷하지 않을 수 있습니다.

결국 F자형 패턴이 알려 주는 것은 사람들이 화면의 글을 바쁘게 훑는다는 사실입니다. 중요한 말은 위에, 핵심어는 왼쪽 첫머리에 두면 훑어보는 눈도 놓치지 않는다는 단순한 생각, 그것이 F자형 패턴 이해의 첫걸음입니다.