시선 흐름 설계: F패턴과 Z패턴

시선 흐름 설계: F패턴과 Z패턴

사람은 화면을 왼쪽 위부터 일정한 패턴으로 훑습니다.

그 경로에 무엇을 놓느냐가 전달력을 결정합니다. 중요한 것은 시선이 지나는 자리에 있어야 합니다.

글이 많은 화면에서는 F 모양으로, 정보가 적은 화면에서는 Z 모양으로 시선이 움직인다는 관찰이 널리 알려져 있습니다.

절대적인 법칙은 아니지만, 배치를 정할 때 참고하면 유용합니다.

시선이 먼저 닿는 곳에 가장 중요한 것을 놓는 것이 원칙입니다. 좌상단은 거의 모든 방문자가 보는 자리입니다.

반대로 우하단은 가장 늦게 보거나 아예 안 보는 자리이므로, 중요한 정보를 놓으면 안 됩니다.

F패턴에서 왼쪽을 훑어 내려갈 때 눈에 들어오는 것은 큰 글씨입니다. 소제목이 내용을 담고 있으면 그것만 읽고도 파악이 됩니다.

반대로 소제목이 라벨에 불과하면 훑는 사람은 아무것도 얻지 못하고 지나갑니다.

화면이 좁아지면 요소가 한 줄로 쌓이므로 F나 Z 패턴이 성립하지 않습니다. 위에서 아래로 순서대로 보게 됩니다.

따라서 모바일에서는 '쌓이는 순서'가 전부입니다. PC에서 우측에 있던 것이 모바일에서 맨 아래로 가면 안 보일 수 있습니다.