새 페이지를 열었을 때, 우리는 그 안의 글자를 다 읽지 않아요.
눈은 화면을 보다가, 어딘가에서 멈추고, 다시 움직여요. 그런데 그 눈은 대체 어디서 시작해서, 어디로 이동하는 걸까요?
왼쪽 위일까요, 가운데일까요? 그 움직임에는 우리가 의식하지 못하는 패턴이 있어요.
1. F자로 읽는 사람들
닐슨 노먼 그룹의 UX 리서치 기관이 예전에 사용자들의 시선 움직임을 눈동자 추적 장비로 관찰한 적이 있어요.
결과는 흥미로웠어요. 대부분의 사람들이 텍스트가 많은 페이지를 F자 모양으로 읽는다는 거예요.
첫 줄은 왼쪽에서 오른쪽 끝까지 쭉 읽어요. 그다음 줄은 조금 짧게, 다시 왼쪽에서 오른쪽으로. 그리고 나머지는 왼쪽 라인을 따라 아래로 훑기만 해요. 알파벳 F를 그리듯이요.
이게 왜 중요하냐면, 사람들이 왼쪽 정렬을 편하게 느끼는 이유가 바로 여기 있거든요.
정렬에 관한 글에서 정렬 기준이 흔들리면 시선이 불안정해진다고 했었는데, 그 기준이 왜 하필 왼쪽에서 자주 시작되는지의 대한 답이 이 F 패턴인 거죠. 왼쪽 라인이 고정되어 있어야, 눈이 그 줄을 기준점 삼아 아래로 내려갈 수 있는 거예요.
그래서 텍스트가 많은 페이지인 블로그, 기사, 상세 설명 페이지는 왼쪽 정렬이 기본값처럼 쓰여요. 왼쪽이 흔들리면, 눈이 다음 줄을 찾아 내려갈 기준점을 잃어버리니까요.
2. 정보가 적을 땐, Z로
그런데 모든 페이지에서 눈이 F자로 움직이는 건 아니에요.
텍스트가 적고, 이미지나 핵심 메시지 위주로 구성된 페이지인 랜딩페이지나 광고 배너 같은 곳에서는 시선이 다르게 움직여요.
왼쪽 위에서 시작해서 오른쪽 위로, 다시 대각선으로 왼쪽 아래로, 그리고 오른쪽 아래로. 알파벳 Z를 그리는 모양이에요.
이 흐름이 왜 생기냐면, 읽을 게 많지 않으니까 눈이 페이지를 촘촘하게 훑을 필요가 없어서예요. 대신 페이지 안에서 중요해 보이는 지점들을 크게 확인하는 거죠.
그래서 랜딩페이지를 설계할 때 로고는 왼쪽 위, 회원가입이나 구매 버튼은 종종 오른쪽 위나 오른쪽 아래에 배치되는 거예요. 시선이 자연스럽게 도착하는 자리에 원하는 요소를 놓아두는 거죠.
🔗 함께 읽으면 좋은 글 | 왜 헤더는 항상 위에 있을까
3. F와 Z, 그 사이의 패턴들
F패턴과 Z패턴이 가장 널리 알려져 있지만, 사람들이 화면을 훑는 방식은 사실 더 다양해요.
레이어케이크 패턴(Layer cake pattern)은 소제목만 따라 내려가면서 본문은 건너뛰는 방식이에요. 케이크와 크림이 층층이 쌓인 것처럼, 시선이 소제목에서 소제목으로만 이동하는 거죠. 소제목이 내용을 정확히 요약하고 있다면, 이게 오히려 가장 효율적인 읽기 방법이에요.
스팟티드 패턴(Spotted pattern)은 특정 단어나 링크, 숫자 같은 걸 찾을 때 나타나요. 전화번호나 가격, 날짜처럼 생김새가 뚜렷한 정보를 찾을 때 눈이 화면 여기저기를 점처럼 훑고 지나가요.
바이패싱 패턴(Bypassing pattern)은 목록의 각 줄이 같은 단어로 시작할 때 생겨요. 위 이미지처럼 반복되면, 사람들은 그 첫 부분을 건너뛰고 뒷부분만 훑어요. 이미 아는 정보는 다시 읽지 않으려는 거예요.
커밋먼트 패턴(Commitment pattern)은 스캐닝이 아니라 진짜 정독이에요. 사용자가 콘텐츠에 이미 관심이 있거나, 꼭 필요한 정보(설명서, 계약서, 관심 있는 기사)를 읽을 때 나타나요. 이땐 오히려 촘촘하고 정확한 정보 전달이 중요해져요.
결국 이 패턴들이 말해주는 건 하나예요. 사람은 콘텐츠 성격에 따라 각기 다른 방식으로 화면을 읽어요. 그렇다면 디자이너는, 이 중 어떤 패턴을 고를 수 있을까요?
4. 패턴 앞에서, 디자이너의 역할
사실 F냐 Z냐를 디자이너가 마음대로 고르는 게 아니예요. 어떤 패턴이 나타날지는 콘텐츠가 먼저 결정해요.
읽을 정보가 많으면 사람은 자연스럽게 F자로 훑고, 정보가 적고 핵심만 남아 있으면 Z자로 건너뛰어요.
그러니까 디자이너가 할 일은 패턴을 만드는 것이 아니라, 콘텐츠가 만들어낸 시선의 흐름을 먼저 예측하고, 그 길 위에 가장 중요한 정보를 배치해요.
F패턴 페이지에서 핵심 정보를 오른쪽 하단에 숨겨두면, 그건 시선이 잘 닿지 않는 곳에 가장 중요한 걸 던져놓은 셈이에요.
반대로 Z패턴 페이지에서 로고를 가운데 아래 놓으면, 사용자의 시선이 도착하기도 전에 이미 다른 곳으로 넘어간 뒤예요.
결국 시선의 길을 먼저 읽고, 그 길 위에 원하는 것을 놓는 게 순서예요.
5. 정렬과 간격 위에 완성되는 흐름
F패턴도 Z패턴도 그 자체로 완성되는 게 아니에요. 앞서 다뤘던 여백과 정렬, 간격이 다 같이 받쳐줘야 흐름이 살아나요.
왼쪽 정렬 기준이 흔들리면 F패턴의 왼쪽 기준점이 무너지고, 요소 간 간격이 뒤죽박죽이면 Z패턴에서 시선이 건너뛰어야 할 지점을 못 찾아요.
시선의 흐름, 정렬의 기준, 간격의 관계 이 세 가지는 사실 하나의 패턴이 완성되기 위한 서로 다른 조건이에요. 사람의 눈이 어떻게 움직이는지를 이해하고, 그 움직임을 방해하지 않는 거예요.
우리는 그 패턴을 읽는 법을 배울 수 있어요. 디자인은 거기서 시작돼요.
written by 디자이너 이솔
