F-패턴

시선은 F자를 그린다

시선 추적 연구에서 사람들은 긴 웹 글을 처음부터 끝까지 읽지 않았어요. 위쪽을 가로로 한 번 읽고, 조금 아래에서 짧게 한 번 더 읽은 뒤, 왼쪽을 따라 세로로 훑어 내려갔어요. 이 열 지도 모양이 F자를 닮아 F-패턴이라 불려요. 그랭카와 동료들(2004)은 검색 결과에서도 시선이 상위 항목에 몰린다는 것을 보였고, 커트렐과 관(2007)은 요약 문구 길이에 따라 시선 이동과 성과가 달라진다고 했어요. 버셔와 동료들(2009)은 이런 시선 데이터로 페이지에서 주목받는 영역을 예측할 수 있음을 보였어요.

오해와 진실

페르니스(2017)는 F-패턴이 '따라야 할 디자인 원칙'이 아니라 소제목이나 강조가 없어 사용자가 어쩔 수 없이 훑을 때 생기는 '증상'이라고 강조했어요. 이 패턴에서는 오른쪽 아래에 있는 정보가 거의 읽히지 않아요. 모바일에서는 양상이 달라요. 김과 동료들(2015)은 작은 화면에서 시선 분포와 탐색 행동이 큰 화면과 다르다는 것을 보였고, 라군과 동료들(2014)은 모바일에서 주의가 화면 위쪽보다 가운데에 더 몰린다고 보고했어요. 좁은 화면에서는 한 줄이 짧아 F의 가로줄이 줄고 세로로 훑는 비중이 커져요.

훑어 읽기 좋게 쓰는 법

사람들이 훑는다는 사실을 인정하고 구조를 주는 것이 해법이에요. 가장 중요한 결론을 맨 앞에 두는 역피라미드로 쓰고, 소제목은 내용을 요약하는 문장으로 만들고, 단락과 목록 항목은 핵심 단어로 시작하세요. 리드웰과 동료들(2010)이 정리한 시각적 위계처럼 크기·굵기·여백으로 중요도를 구분하면 시선이 길을 잃지 않아요. 이렇게 하면 인지 부하가 줄고, 모바일 퍼스트 디자인의 짧은 화면에서도 핵심이 전달돼요. 명확한 제목 구조는 SEO에도 도움이 돼요.

자주 묻는 질문

F-패턴에 맞춰 디자인해야 하나요?

F-패턴은 목표가 아니라 구조가 약할 때 생기는 현상이에요. 소제목과 핵심어로 구조를 주면 사용자가 필요한 정보를 더 잘 찾아요.

모바일에서도 F-패턴이 나타나나요?

나타나지만 한 줄이 짧아 세로로 훑는 비중이 커지고, 화면 가운데에 주의가 더 몰리는 경향이 있어요.

출처 검토일: 2026-10-27

참고문헌

1. Pernice, K. (2017, November 12). F-shaped pattern of reading on the web: Misunderstood, but still relevant (even on mobile). Nielsen Norman Group. F자 읽기가 설계 목표가 아니라 구조가 약할 때 생기는 현상임을 설명해, 개념을 바로잡을 때 참고하면 도움이 돼요.
2. Buscher, G., Cutrell, E., & Morris, M. R. (2009). What do you see when you're surfing? Using eye tracking to predict salient regions of web pages. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 21–30). ACM. 시선 추적으로 웹 페이지의 주목 영역을 예측한 연구라, 시선이 머무는 위치를 볼 때 참고하면 도움이 돼요.
3. Cutrell, E., & Guan, Z. (2007). What are you looking for? An eye-tracking study of information usage in web search. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 407–416). ACM. 검색 결과 요약 길이에 따라 시선과 성과가 달라진다는 연구라, 목록 문구 길이를 정할 때 참고하면 도움이 돼요.
4. Granka, L. A., Joachims, T., & Gay, G. (2004). Eye-tracking analysis of user behavior in WWW search. In Proceedings of the 27th Annual International ACM SIGIR Conference on Research and Development in Information Retrieval (pp. 478–479). ACM. 상위 결과에 시선이 몰린다는 초기 시선 추적 연구라, 위쪽 배치의 중요성을 볼 때 참고하면 도움이 돼요.
5. Kim, J., Thomas, P., Sankaranarayana, R., Gedeon, T., & Yoon, H.-J. (2015). Eye-tracking analysis of user behavior and performance in web search on large and small screens. Journal of the Association for Information Science and Technology, 66(3), 526–544. 큰 화면과 작은 화면의 읽기 행동을 비교해, 모바일에서 시선 패턴이 어떻게 달라지는지 볼 때 참고하면 도움이 돼요.
6. Lagun, D., Hsieh, C.-H., Webster, D., & Navalpakkam, V. (2014). Towards better measurement of attention and satisfaction in mobile search. In Proceedings of the 37th International ACM SIGIR Conference on Research and Development in Information Retrieval (pp. 113–122). ACM. 모바일에서는 화면 위쪽 절반보다 중앙에 주의가 몰린다는 결과라, 모바일 배치를 정할 때 참고하면 도움이 돼요.
7. Lidwell, W., Holden, K., & Butler, J. (2010). Universal principles of design (Rev. ed.). Rockport. 시각적 위계·정렬 등 레이아웃 원칙을 모아, 훑어 읽기 좋은 구조를 만들 때 참고하면 도움이 돼요.