Z패턴 시각적 계층: 고객의 시선을 메뉴로 안내하는 법

터키 콘야 메블라나 사당 근처 30석 향토 음식점이 디지털 메뉴를 Z패턴에 정렬한 것만으로 "메뉴 보기→주문" 퍼널을 18% 향상시켰다. 새로운 기술이 아닌, 시선 흐름을 따르는 계층 설계의 결과다.

Z패턴 vs F패턴

Nielsen Norman의 아이트래킹 연구는 두 가지 읽기 패턴을 식별했다. F패턴은 텍스트가 많은 페이지에서 나타난다. Z패턴은 시각적 랜딩과 디지털 메뉴를 지배한다.

Z 경로: 좌상(히어로) → 우상(태그라인) → 대각선으로 좌하(설명) → 우하(CTA "주문하기"). Z의 끝에 트리거를 두면 행동 준비된 시선을 맞이한다.

콘야에서의 구현

카테고리 페이지의 네 Z 앵커:

1) 좌상: 에틀리 에크멕 사진 + "콘야 요리". 2) 우상: 카테고리 칩. 3) 중앙 좌: 2문장 역사 설명. 4) 우하: 스티키 CTA. 주문까지 22초 단축; 전환율 +18%.

세 가지 무료 테스트

눈 가늘게 뜨기 테스트(네 블록 보이나?), 5초 테스트(뭐 기억나?), Microsoft Clarity 히트맵(시선이 정말 Z를 따라가나?). 대각선이 빠지면 중앙의 대비나 크기가 약하다.

자주 묻는 질문

Z패턴이 모바일에서도 작동하나? 덜 작동한다 — 모바일은 수직 스크롤 위주라 F패턴이 더 맞다. Z는 전체 Z가 한 뷰포트에 들어가는 태블릿/데스크톱에 최적.

아랍어 같은 RTL 언어는? Z가 거울처럼 뒤집힌다: 우상에서 시작해 좌하에서 끝난다. thMenu가 dir="rtl"을 자동 적용한다.

CTA를 우하 대신 좌하에? 안 된다 — 사각지대다. 시선이 이미 우상에서 Z를 "닫았기" 때문에 클릭률이 30–40% 떨어진다.

도움이 되셨나요? 공유해 주세요.