1. 어원 및 역사적 기원
F 패턴은 이름의 강렬함에 비해 한 명의 연구자가 명명한 공식 이론이 아니다. #106 Z의 법칙과 마찬가지로, 이 용어는 안구 운동 과학의 오랜 계보와 2000년대 웹 UX 실무의 실증 연구가 만나는 지점에서 탄생했다.
과학적 뿌리는 이미 #106에서 다룬 루이 에밀 자발(1879)의 고정·단속운동 관찰과 알프레드 야르부스(1967)의 과제 의존적 시선 연구로 거슬러 올라간다. 하지만 F 패턴이라는 구체적 형태와 이름을 부여한 것은 닐슨 노먼 그룹(Nielsen Norman Group, NNG)이었다.
결정적 연구는 2006년이다. 야콥 닐슨(Jakob Nielsen)이 이끈 NNG는 232명의 사용자가 수천 개의 웹페이지를 보는 방식을 기록한 아이트래킹 연구를 수행했고, 사용자의 주된 읽기 행동이 여러 사이트와 과제에서 상당히 일관되게 나타난다는 사실을 발견했다. 이 지배적인 읽기 패턴은 세 가지 요소로 구성된다: 사용자는 먼저 콘텐츠 영역 상단을 가로로 훑고(F의 윗줄), 이어 약간 아래로 이동해 이전보다 짧은 두 번째 가로 움직임을 보이며(F의 중간줄), 마지막으로 콘텐츠 왼쪽을 세로로 스캔한다(F의 세로줄). 닐슨은 이를 특유의 어조로 "F for fast — 사용자는 당신의 소중한 콘텐츠를 이렇게 빨리 읽는다"고 표현했다.
흥미로운 점은 NNG가 이보다 먼저인 2004년 이미 "레이어케이크 패턴"을 관찰했다는 사실이다. 즉 F 패턴은 진공에서 발견된 것이 아니라, 사용자의 스캔 행동을 유형화하려는 더 큰 연구 프로그램의 한 결과물이었다.
**11년 후의 재검증(2017)**도 이 시리즈에서 짚어야 할 대목이다. 캐런 퍼니스(Karen Pernice)가 이끈 후속 연구는 F 패턴이 사용자와 비즈니스 모두에게 부정적인 패턴이며, 좋은 디자인은 오히려 F자형 스캐닝을 예방할 수 있다는 점을 명확히 했다. 즉 F 패턴은 "따라야 할 모범 사례"가 아니라 "구조가 없을 때 나타나는 기본값"이라는 재정의가 이루어진 것이다. 이 재정의는 이후 실무에서 F 패턴이 오용되는 방식—패턴을 예방하는 대신 그것에 맞춰 디자인하는 관행—에 대한 업계의 반성으로 이어졌다.
2. 심리·신경과학 메커니즘
F 패턴을 이해하는 핵심 열쇠는 "사용자는 웹을 읽지 않는다, 스캔한다"는 명제다. 평균 페이지 방문 시간은 1분 미만이며, 이 시간 동안 사용자는 페이지 텍스트의 약 4분의 1 정도만 읽을 수 있다. 평균적인 웹페이지에서 사람들은 최대 28%, 실제로는 20% 정도의 단어만 읽는다.
이 스캐닝 행동의 배경에는 정보 탐색 이론(Information Foraging Theory)*이 있다. 동물이 먹이를 찾을 때 최소 비용으로 최대 이득을 노리는 것처럼, 사용자는 페이지에서 원하는 정보의 "냄새(information scent)"를 좇아 시선을 이동시키다가, 냄새가 옅어지면(관련성이 낮다고 판단하면) 즉시 이탈하거나 다음 구역으로 건너뛴다. F 패턴은 이 탐색 전략이 좌상단 시작·좌측 우선 문화(#105 구텐베르크의 읽기 중력)와 결합해 나타나는 결과다.
중요한 것은 F 패턴이 사용자가 선호하는 읽기 방식이 아니라, 콘텐츠에 구조·소제목·시각적 진입점이 없을 때 나타나는 기본 대체 행동(fallback behavior)이라는 점이다. 즉 F자형 히트맵이 나온다는 것은 "이 페이지가 잘 설계됐다"는 신호가 아니라 오히려 "이 페이지가 사용자에게 스캔할 단서를 주지 못했다"는 경고 신호에 가깝다.
*각주: 정보 탐색 이론 — 피터 피롤리(Peter Pirolli)와 스튜어트 카드(Stuart Card)가 제안한 이론으로, 인간의 정보 탐색 행동을 동물의 먹이 탐색 행동에 빗대어 설명한다
3. 유형 분류 — F 패턴의 형제들
NNG의 후속 연구들은 F 패턴이 텍스트 스캐닝의 유일한 형태가 아니라, 콘텐츠 구조에 따라 나타나는 여러 스캐닝 패턴 중 하나임을 밝혔다. 효율성이 낮은 순서부터 높은 순서로 4가지 대표 유형을 정리하면 다음과 같다.
- F 패턴: 소제목이나 굵은 글씨 같은 구조적 단서가 전혀 없을 때 나타나는 기본값. 상단만 집중적으로 읽히고 페이지 오른쪽과 하단은 거의 주목받지 못한다.
- 스팟 패턴(Spotted pattern): 큰 텍스트 덩어리를 건너뛰고 링크, 숫자, 특정 단어처럼 눈에 띄는 형태의 요소만 찾아다니는 패턴. 검색하듯 훑는 행동이다.
- 레이어케이크 패턴(Layer-cake pattern): 소제목과 부제목 위주로 시선이 머물고 본문은 건너뛰는 패턴. 히트맵이 케이크 층처럼 가로줄 형태로 나타나며, 완독을 제외하면 정보를 가장 효율적으로 찾아내는 스캐닝 방식이다.
- 커밋먼트 패턴(Commitment pattern): 페이지 거의 모든 단어에 시선이 머무는, 사실상의 정독. 사용자가 주제에 강하게 몰입했을 때만 나타난다.
이 밖에도 NNG는 리스트 항목의 반복 단어를 건너뛰는 바이패싱 패턴, 모바일에서 스크롤 중 시선을 한곳에 고정하는 마킹 패턴, 검색결과 페이지 특유의 핀볼 패턴·론모어 패턴 등 훨씬 세분화된 패턴들을 추가로 문서화했다. 이는 F 패턴이 "법칙"이라기보다 콘텐츠 구조·사용자 동기·과제 유형에 따라 달라지는 스캐닝 스펙트럼의 한 지점임을 보여준다.
4. 글로벌 브랜드 사례
F 패턴은 텍스트 밀도가 높은 페이지에서 반복적으로 관찰되는 만큼, 뉴스·검색·이커머스 등 콘텐츠 중심 서비스에서 사례를 쉽게 찾을 수 있다.
뉴욕타임스와 CNN은 대표적인 F 패턴 활용 사례로 꼽힌다. 방문자의 시선은 좌상단의 가장 큰 헤드라인으로 먼저 향한 뒤, F자 흐름을 따라 아래의 다른 헤드라인과 이미지로 이동한다. 구글 검색결과 페이지(SERP) 역시 페이지 제목이 왼쪽에 정렬되고 메타 설명이 왼쪽에서 시작되며, 사용자가 가장 관련성 높은 결과를 찾기 위해 왼쪽 열을 따라 시선을 내리는 구조로 F 패턴을 구현한다. 아마존의 상품 리스트에서도 상품명·별점·가격이 왼쪽에 정렬되어 빠른 세로 스캔을 가능하게 한다.
다만 이 패턴을 무비판적으로 신봉하는 것에는 주의가 필요하다. 아이트래킹 분석 기업 EyeQuant는 자체적으로 방대한 정량 분석을 수행한 결과, F자형 편향이 존재한다는 증거를 전혀 찾지 못했다고 밝히며 이 연구 결론이 여러 영향력 있는 블로그를 통해 검증 없이 확산됐다고 지적했다. 즉 F 패턴은 "텍스트가 많고 구조가 약한 페이지"라는 특정 조건에서 나타나는 현상이지, 모든 웹페이지에 보편적으로 적용되는 법칙은 아니다.
5. 국내(한국) 시장 사례
한국 포털·뉴스 생태계에서도 F 패턴과 유사한 스캐닝 압력이 뚜렷하게 나타난다. 네이버·다음 등 포털의 뉴스 서비스는 제목이 왼쪽에 정렬되고 썸네일과 요약이 오른쪽으로 확장되는 구조를 취하는 경우가 많아, 사용자가 제목 목록을 세로로 훑어 내려가며 관심 기사만 선택하는 F자형 소비 행태를 유도한다.
특히 흥미로운 지점은 네이버 뉴스 알고리즘이 이 스캐닝 행동을 데이터로 역이용한다는 점이다. 기사 품질 점수는 제목, 본문, 기자, 섹션, 콘텐츠 타입, 사진·영상 개수라는 6가지 요소로 결정되는데, 이 요소들 각각에 과거 클릭 수와 체류시간이 높았던 패턴일수록 더 높은 가중치가 부여된다. 예컨대 사진이 2개인 기사가 과거에 클릭·체류시간이 높았다면, 앞으로도 사진 2개짜리 기사에 높은 품질 점수를 주는 식이다. 이는 F 패턴적 스캐닝 행동(제목·썸네일 위주로 훑고 넘어가는 습관)이 콘텐츠 추천 알고리즘의 학습 데이터로 다시 흡수되는 순환 구조를 보여준다.
국내 디자인 실무 담론에서도 시선의 동선을 고려한 레이아웃의 중요성이 꾸준히 강조된다. 좌에서 우로 읽는 습관이 무의식적으로 익숙하고 편안하게 느껴지며, 시선이 상단에서 큰 볼륨감을 느끼고 하단으로 갈수록 볼륨감이 작아지는 것이 일반적이라는 점에서, 국내 UX·그래픽 디자인 담론도 서구의 F·Z 패턴 연구와 유사한 결론에 독자적으로 도달해 있음을 확인할 수 있다.
6. 채널 전략 매트릭스
| 채널 | F패턴 적합도 | 설계 포인트 |
| 블로그·아티클 | 매우 높음 | 첫 문단에 핵심 요약, 좌측에 소제목 배치 |
| 뉴스 홈페이지 | 매우 높음 | 좌상단 톱기사, 세로 스캔 유도하는 제목 목록 |
| 검색결과(SERP) | 매우 높음 | 제목·설명 좌측 정렬, 핵심 키워드 앞쪽 배치 |
| 이커머스 리스트 | 높음 | 상품명·가격 좌측 정렬로 세로 스캔 지원 |
| 랜딩페이지·단일 CTA | 낮음 | Z패턴(#106)이 더 적합, 텍스트 최소화 권장 |
| 인쇄 광고·포스터 | 매우 낮음 | 구텐베르크(#105)·Z패턴이 더 적합 |
| 영상 광고 | 해당 없음 | 정적 텍스트 스캐닝 패턴이 아닌 모션·얼굴 중심 주의 유도 작동 |
F 패턴은 영상 광고나 인쇄 포스터에는 원칙적으로 적용되지 않는 개념이다. F 패턴의 세 가지 구성요소(상단 가로 스캔·짧아지는 두 번째 스캔·좌측 세로 스캔)는 모두 "정적인 텍스트 덩어리를 눈으로 훑는" 상황을 전제로 한다. 반면 영상 광고는 시간에 따라 화면이 바뀌고, 인간 시선을 끄는 것은 텍스트 레이아웃이 아니라 움직임·얼굴·색채 대비(#010 대비 효과, #007 시선유도 효과)다. 실무에서 "F 패턴을 영상 광고에 적용했다"는 표현을 종종 보게 되지만, 이는 대개 F 패턴 자체가 아니라 정적인 자막·인포그래픽 구간, 혹은 유튜브 썸네일·랜딩페이지처럼 F 패턴이 실제로 작동하는 텍스트 기반 화면을 가리키는 경우가 많다. 이 구분을 명확히 하는 것이 F 패턴을 정확히 이해하는 데 중요하다.
7. 인접 개념 비교표
| 개념 | 공통점 | 차이점 | 관계 |
| Z 패턴 (#106) | 좌상단 시작점 공유 | 텍스트가 적고 위계가 뚜렷할 때의 대각선 흐름 | F와 대칭적인, 텍스트 밀도 반대편 극단 |
| 구텐베르크 다이어그램 (#105) | 읽기 중력 공유, 좌상단 진입 | 균등 텍스트의 4분할 대각선 흐름 | F는 구텐베르크가 텍스트 밀도 증가로 붕괴한 형태 |
| 레이어케이크 패턴 | F와 같은 스캐닝 행동 계열 | 소제목 위주로 효율적으로 훑음 | F보다 한 단계 효율적인 형제 패턴 |
| 시선 유도 효과 (#007) | 시선의 방향성을 설계에 활용 | 인물·화살표 등 국소적 단서로 유도 | F의 진입점(좌상단)에서 미시적으로 작동 |
| 부호화 특수성 원리 (#043) | 정보 처리·기억 과정과 연관 | 학습 시점과 인출 시점의 맥락 일치를 다룸 | F패턴이 만든 얕은 스캐닝이 정보 인출 실패로 이어지는 배경 |
8. 한국어-영어 용어 사전
| 용어 | 원어 | 정의 |
| F 패턴 | F-Pattern | 텍스트 밀도가 높은 콘텐츠에서 나타나는 F자형 반복 스캔 흐름 |
| 스캐닝 | Scanning | 전체를 정독하지 않고 필요한 부분만 훑어보는 읽기 행동 |
| 정보 탐색 이론 | Information Foraging Theory | 정보 탐색을 먹이 탐색에 비유해 설명하는 인지 이론 |
| 정보 냄새 | Information Scent | 다음 클릭이나 스캔이 목표 정보로 이어질 것이라는 단서의 강도 |
| 레이어케이크 패턴 | Layer-Cake Pattern | 소제목 위주로 시선이 머물고 본문은 건너뛰는 스캐닝 패턴 |
| 스팟 패턴 | Spotted Pattern | 링크·숫자 등 특정 형태의 요소만 찾아 훑는 패턴 |
| 커밋먼트 패턴 | Commitment Pattern | 페이지 전체를 정독하는 고관여 스캐닝 패턴 |
| 바이패싱 패턴 | Bypassing Pattern | 리스트 항목의 반복되는 첫 단어를 건너뛰는 패턴 |
| 배너 실명 | Banner Blindness | 광고처럼 보이는 요소를 무의식적으로 무시하는 현상 |
9. 윤리적 고려사항
F 패턴은 서술적 관찰에서 출발했지만, "사용자가 오른쪽과 하단을 거의 보지 않는다"는 사실이 알려지는 순간 이를 역이용하려는 유혹이 생긴다.
의도적 정보 은폐: F 패턴 히트맵에서 가장 어두운(주목받지 못하는) 영역인 우측 하단에, 사용자가 반드시 알아야 할 정보—구독 자동 갱신 고지, 추가 요금, 개인정보 활용 동의 철회 방법—를 배치하는 관행은 이 패턴의 가장 흔한 오남용 사례다. NNG 스스로도 F 패턴이 "사용자와 비즈니스 모두에게 부정적"이라고 명시했음에도, 일부 실무자는 이 패턴을 예방해야 할 문제가 아니라 이용해야 할 도구로 취급한다.
과신의 위험: F 패턴을 "검증된 표준"으로 오인해, 실제 사용자 조사 없이 모든 텍스트 콘텐츠를 기계적으로 F자형으로 배치하는 것도 문제다. 좋은 헤딩과 굵은 키워드로 레이어케이크 패턴을 유도할 수 있음에도, F 패턴에 맞춰 설계하면 오히려 사용자가 콘텐츠의 핵심을 놓칠 가능성을 방치하는 셈이 된다.
바람직한 원칙: F 패턴 연구가 실무자에게 주는 진짜 교훈은 "F자로 디자인하라"가 아니라 "F자가 나타나지 않도록 소제목과 구조를 갖추라"는 것이다. 즉 F 패턴은 채택할 목표가 아니라 피해야 할 증상으로 이해하는 것이 이 이론의 본래 취지에 부합한다.
마무리하며
F 패턴을 조사하면서 가장 인상 깊었던 지점은, 이 이론이 널리 알려진 것과 정반대의 방향으로 재해석되었다는 사실이다. 2006년 처음 발표됐을 때 F 패턴은 "사용자가 이렇게 읽으니 이 구조에 맞춰 디자인하라"는 지침으로 받아들여졌지만, 11년 뒤 원 연구자들이 직접 내놓은 결론은 정확히 반대였다—F 패턴은 나쁜 신호이며, 좋은 디자인의 목표는 이 패턴이 나타나지 않게 만드는 것이다. 연구 결과 자체는 변하지 않았지만, 그 결과를 해석하는 실무 커뮤니티의 시각이 뒤집힌 셈이다.
이는 #106 Z의 법칙에서 확인했던 교훈과도 정확히 맞닿아 있다. Z 패턴이 "낮은 위계의 콘텐츠에서 관찰되는 조건부 휴리스틱"이었다면, F 패턴은 "구조 부재 상태에서 나타나는 경고 신호"다. 두 패턴 모두 "이렇게 배치하면 사용자가 이렇게 볼 것이다"라는 인과가 아니라, "콘텐츠의 텍스트 밀도와 위계가 특정 조건에 놓이면 시선이 이런 형태를 그린다"는 상관 관찰에 가깝다. 좋은 레이아웃 설계자는 이 관찰을 맹신해 청사진으로 쓰는 사람이 아니라, 자신의 콘텐츠가 지금 어떤 패턴을 유발하고 있는지 진단하고 그것이 의도인지 사고인지를 구별하는 사람일 것이다.