
"버튼 문구를 열 번은 바꿔본 것 같은데, 클릭률이 그대로예요."
인하우스 마케터라면 한 번쯤 겪어본 상황일 거예요. A/B 테스트로 문구를 바꿔봐도, 색을 바꿔봐도 클릭률이 요지부동일 때. 그런데 문제가 카피나 색상이 아니라, 애초에 방문자 시선이 그 버튼까지 닿지 않았던 거라면요.
캠페인 페이지를 열심히 만들었는데 방문자가 CTA를 클릭하지 않고 그냥 나가버리는 이유는 의외로 단순해요. 방문자는 애초에 화면을 처음부터 끝까지 훑어보지 않기 때문이에요.
방문자는 화면을 F자, 혹은 Z자로 훑어요

닐슨 노먼 그룹(Nielsen Norman Group)이 방문자의 눈동자 움직임을 추적해서 밝혀낸 패턴이에요. 글이 많은 페이지에서는 시선이 알파벳 F자처럼, 글이 적은 랜딩페이지에서는 시선이 Z자처럼 움직여요.
패턴 | 이동 경로 |
|---|---|
F패턴 | 상단을 좌→우로 훑고, 아래로 내려가며 왼쪽 위주로 스캔 |
Z패턴 | 좌상단→우상단→대각선→좌하단→우하단 |
이 연구는 2006년 처음 나왔고, 2017년에 다시 검증해봤는데도 같은 결과가 나왔어요. 문제는 이 경로 밖에 놓인 요소는 애초에 시선이 닿지 않는다는 점이에요. 즉, 여러분이 설치한 CTA 버튼이 시선 이동 경로에서 벗어나 있으면, 아무리 카피가 매력적이어도 "안 보여서 안 누르는" 상황이 벌어져요.
시선 경로 안에 있어도, 대비가 받춰주지 않으면 지나치기 쉬워요

시선의 경로 안에 있는 버튼이라도 주변과 비슷한 색이면 방문자는 시선을 건너뛰고 지나갈 가능성이 높아요. 닐슨 노먼 그룹의 UX 연구원 켈리 고든(Kelley Gordon)은, 방문자가 "어디를 봐야 할지 모른다면" 그건 레이아웃에 명확한 시각적 위계(visual hierarchy)가 없다는 신호라고 설명해요.
즉, 시선 경로 안에 버튼을 두는 것'만'으로는 부족해요. 방문자가 페이지를 스캔하는 짧은 순간에 "여기가 눌러야 할 곳"이라는 신호를 줘야 하고, 그 신호를 만드는 가장 직접적인 도구가 대비예요.
요소 | 대비가 약할 때 | 대비가 뚜렷할 때 |
|---|---|---|
색상 | 배경과 버튼이 비슷한 톤 | 배경과 뚜렷이 구분되는 색 |
크기 | 다른 요소와 비슷한 크기 | 주변보다 확실히 큼 |
여백 | 다른 요소에 파묻힘 | 독립된 공간으로 분리 |
세 가지를 다 챙기지 않아도 돼요. 만약 페이지 전체 색이 차분하다면, 버튼 색만 대비가 뚜렷하게 설정해둬도 충분해요.

