"버튼 문구를 열 번은 바꿔본 것 같은데, 클릭률이 그대로예요."
인하우스 마케터라면 한 번쯤 겪어본 상황일 거예요. A/B 테스트로 문구를 바꿔봐도, 색을 바꿔봐도 클릭률이 요지부동일 때. 그런데 문제가 카피나 색상이 아니라, 애초에 방문자 시선이 그 버튼까지 닿지 않았던 거라면요.
캠페인 페이지를 열심히 만들었는데 방문자가 CTA를 클릭하지 않고 그냥 나가버리는 이유는 의외로 단순해요. 방문자는 애초에 화면을 처음부터 끝까지 훑어보지 않기 때문이에요.
방문자는 화면을 F자, 혹은 Z자로 훑어요
닐슨 노먼 그룹(Nielsen Norman Group)이 방문자의 눈동자 움직임을 추적해서 밝혀낸 패턴이에요. 글이 많은 페이지에서는 시선이 알파벳 F자처럼, 글이 적은 랜딩페이지에서는 시선이 Z자처럼 움직여요.
패턴 | 이동 경로 |
|---|---|
F패턴 | 상단을 좌→우로 훑고, 아래로 내려가며 왼쪽 위주로 스캔 |
Z패턴 | 좌상단→우상단→대각선→좌하단→우하단 |
이 연구는 2006년 처음 나왔고, 2017년에 다시 검증해봤는데도 같은 결과가 나왔어요. 문제는 이 경로 밖에 놓인 요소는 애초에 시선이 닿지 않는다는 점이에요. 즉, 여러분이 설치한 CTA 버튼이 시선 이동 경로에서 벗어나 있으면, 아무리 카피가 매력적이어도 "안 보여서 안 누르는" 상황이 벌어져요.
시선 경로 안에 있어도, 대비가 받춰주지 않으면 지나치기 쉬워요
시선의 경로 안에 있는 버튼이라도 주변과 비슷한 색이면 방문자는 시선을 건너뛰고 지나갈 가능성이 높아요. 닐슨 노먼 그룹의 UX 연구원 켈리 고든(Kelley Gordon)은, 방문자가 "어디를 봐야 할지 모른다면" 그건 레이아웃에 명확한 시각적 위계(visual hierarchy)가 없다는 신호라고 설명해요.
즉, 시선 경로 안에 버튼을 두는 것'만'으로는 부족해요. 방문자가 페이지를 스캔하는 짧은 순간에 "여기가 눌러야 할 곳"이라는 신호를 줘야 하고, 그 신호를 만드는 가장 직접적인 도구가 대비예요.
요소 | 대비가 약할 때 | 대비가 뚜렷할 때 |
|---|---|---|
색상 | 배경과 버튼이 비슷한 톤 | 배경과 뚜렷이 구분되는 색 |
크기 | 다른 요소와 비슷한 크기 | 주변보다 확실히 큼 |
여백 | 다른 요소에 파묻힘 | 독립된 공간으로 분리 |
세 가지를 다 챙기지 않아도 돼요. 만약 페이지 전체 색이 차분하다면, 버튼 색만 대비가 뚜렷하게 설정해둬도 충분해요.
접근성 기준도 참고할 만해요
웹 콘텐츠 접근성 지침(WCAG)이 권장하는 명도 대비 기준이에요.
요소 | 권장 명도 대비 |
|---|---|
일반 텍스트 | 4.5:1 이상 |
버튼 같은 UI 요소 | 3:1 이상 |
4.5:1: 시력 20/40(한국 기준 약 0.5, 80세 평균 수준)인 사람도 읽을 수 있게 기준을 높인 값
3:1: 일반적인 시력 기준으로 정해진 산업 표준 최소값
이 기준을 지키면 일반 방문자는 버튼의 존재를 더 빨리 알아채고, 저시력이나 색맹 방문자는 아예 못 알아보고 지나치는 상황 자체를 막을 수 있어요. 예를 들어 적록색맹인 사람은 빨강과 초록의 차이를 구분하기 어려운데, 색상 대신 밝기 차이(명도 대비)가 충분하면 색을 구분 못 해도 버튼의 존재는 알아볼 수 있어요.
대비가 세다고 무조건 좋은 건 아니에요
그런데 앞서 말한 "대비가 뚜렷할수록 잘 보이고 신뢰가 간다"는 원리에는 함정이 하나 있어요. 대비를 어디까지 세게 만들어도 되는지에 대한 상한선이에요.
대비를 세게 만들려고 원색을 쓰거나, 번쩍이는 효과를 넣거나, 테두리를 두껍게 감싸다 보면 어느 순간 "광고 배너"처럼 보이기 시작해요. 그러면 방문자는 광고처럼 생긴 이 요소를 패스하게 돼요. 이런 현상을 배너 블라인드니스(Banner Blindness)라고 불러요. 뇌가 광고처럼 보이는 요소를 자동으로 걸러내는 현상이에요.
이미지처럼 보통 광고 배너는 페이지 톤앤매너와 시각적으로 뚜렷이 분리돼 있어요. 배경색도 다르고, 테두리도 있고, 주변 글과 스타일이 안 맞아요. 그래서 사람은 페이지를 읽다가 이질적인 블록을 만나면 "이건 내가 읽어야 할 본문이 아니네" 하고 시선을 두지 않을 가능성이 높아요.
그래서 CTA 버튼의 색이나 크기는 눈에 띄게 하되, 페이지 전체 색감이나 폰트에서 벗어나지 않게 만드는 게 나아요. 배경이나 테두리로 별도 구역을 만들어 광고처럼 분리시키는 것보다, 본문 흐름 속에 자연스럽게 놓인 버튼일수록 방문자가 시선을 두지 않고 지나칠 가능성이 줄어들어요.
3줄 정리
방문자는 화면을 다 보지 않고 예측 가능한 경로만 시선으로 훑어요.
CTA 버튼이 그 경로 안에 있으면서 주변과 뚜렷이 구분돼야 원하는 대로 방문자가 움직여줄 가능성이 높아져요. 다만 그 구분이 너무 광고처럼 보이면 오히려 무시당할 수 있으니, 자연스러운 대비를 목표로 해야 해요.
다음 A/B 테스트를 돌리기 전에, 버튼 문구 대신 위치와 대비부터 한 번 점검해보세요. 카피를 열 번 바꾸는 것보다 빠른 답이 나올 수도 있어요.
이 글은 위픽레터 독자분들을 위해 요약된 아티클이에요. 더 자세한 내용은 큐샵 인사이트 블로그 원문에서 확인하실 수 있어요.