🧠 큐샵 그로스랩 · 홈페이지 심리학 시리즈 · 1편

방문자가 랜딩페이지를 왜 머물고, 왜 떠나는지를 심리학 연구와 실제 수치로 직접 파고들어 정리하는 큐샵 그로스랩만의 시리즈예요. 큐샵 그로스랩은 홈페이지를 활용해야 하는 모든 팀이 홈페이지를 더 잘 활용할 수 있도록 인사이트를 전합니다.

💬

한 줄 요약
랜딩페이지가 열리는 순간, 카피보다 레이아웃과 색감이 먼저 결정을 내려요. 카피를 아무리 다듬어도 전환이 안 오른다면, 의심해봐야 할 지점이 따로 있어요.

"전환율이 안 나와서 카피를 세 번째 갈아엎는 중이신가요?"

디자이너 없이 혼자 랜딩페이지를 만들고, 문구를 고치고 또 고쳐봐도 숫자가 꿈쩍 안 할 때가 있어요. 그런데 그 원인이 카피가 아니라 방문자가 카피를 읽기도 전에 이미 페이지를 떠나기로 마음먹었기 때문일 수 있다는 생각, 해보신 적이 있으신가요?

방문자 대부분은 카피를 읽기 전에 "머물지 떠날지"를 이미 정해버려요. 이걸 처음 숫자로 증명한 게 캐나다 칼턴대학교 연구진의 2006년 실험이에요. 지금까지도 UX·마케팅 관련 글에서 가장 자주 인용되는 연구예요.

연구 결과부터 볼게요

칼턴대 연구팀은 실험 참가자들에게 웹페이지를 딱 50ms(0.05초)만 보여줬어요. 그리고 그 매력도를 평가하게 했더니, 500ms(0.5초) 동안 본 그룹과 거의 같은 판단을 내렸어요.

노출 시간

결과

50ms (0.05초)

매력도 판단 완료

500ms (0.5초)

50ms 조건과 거의 동일한 판단

사람 눈 깜빡임

100~150ms

즉, 눈 한 번 깜빡이는 시간보다 짧은 순간에 첫인상이 굳어버린다는 뜻이고, 이 결과는 20년 가까이 지난 지금도 뒤집히지 않고 있어요.

2023년 발표된 후속 연구는 이 결과를 한 단계 더 파고들었어요.

화면이 시각적으로 복잡할수록 판단이 오래 걸리고 사람마다 의견도 갈렸지만, 화면이 단순하고 정리되어 있을수록 판단이 빠르고 비슷했어요.

다르게 말하면 복잡한 페이지는 보는 사람에 따라 첫인상이 제각각 갈릴 위험이 크고, 단순한 페이지는 누가 봐도 비슷한 인상을 받을 확률이 높다는 뜻이에요. 그래서 A/B 테스트를 오래 돌려볼 여유가 없는 캠페인 페이지일수록, 요소를 더 넣기보다 덜어내는 쪽이 결과를 예측하기 쉬워요.

왜 이렇게 빨리 정해질까

이유는 단순해요. 뇌는 글자보다 형태·색·배치 같은 시각 정보를 훨씬 빠르게 처리하기 때문이에요.

문장을 읽으려면 글자를 인식하고, 단어를 조합하고, 의미를 이해하는 세 단계를 거쳐야 해요. 하지만 시각 정보는 그런 과정 없이 깔끔한지 복잡한지가 한눈에 들어와요.

앞서 본 것처럼 시각적 판단은 50ms(0.05초) 안에 끝나요. 반면 문장 하나를 읽고 의미를 이해하려면 글자를 인식하고 단어를 조합하는 과정을 거쳐야 해서, 같은 0.05초 안에는 끝나지 않아요. 즉 방문자가 첫 문장을 채 읽기도 전에, 레이아웃에 대한 판단은 이미 끝나 있는 거예요. 그래서 우리가 카피라이팅에 아무리 공을 들여도, 그 카피가 방문자 눈에 들어오는 시점에는 이미 승부가 나 있는 경우가 많아요.

나쁜 첫인상은 좋은 콘텐츠도 의심하게 만들어요

스탠퍼드 대학교의 웹 신뢰도 연구(Stanford Web Credibility Research)에서 확인된 내용이에요.

방문자 피드백 중 실제 콘텐츠(글의 내용)에 대한 언급은 6%에 불과했고, 나머지 94%는 대부분 시각적 매력과 내비게이션에 대한 이야기였어요.

디자인의 특정 부분이 마음에 안 들면, 방문자는 스크롤을 더 내리거나 다른 페이지로 넘어가 보지 않고 그 자리에서 이탈했어요.

이 통계가 시사하는 바가 있어요. 방문자가 스스로 언급하는 불만의 대부분은 홈페이지에 적힌 콘텐츠가 아니라 레이아웃과 색감을 향하고 있어요. 즉 카피 A/B 테스트로 손볼 수 있는 부분은 방문자가 실제로 반응하는 문제의 일부에 불과할 수 있고, 레이아웃에서 이미 나쁜 인상이 박혔다면 카피를 아무리 정교하게 다듬어도 그 인상은 그대로 남아 있을 가능성이 높다는 뜻이에요

한 번 "이 페이지 좀 허술한데"라는 인상이 박히면, 그 다음에 나오는 좋은 내용도 의심하며 보게 돼요. 심리학에서는 이걸 역후광 효과(Horn Effect)라고 불러요.

심리학자 에드워드 손다이크가 1920년 처음 제시한 개념인 후광효과는 좋은 인상이 다른 것까지 좋게 보이게 만들어주는 현상이에요. 반대로 나쁜 인상이 다른 것까지 나쁘게 보이게 만드는 게 역후광 효과예요. 뇌는 모든 걸 하나하나 따로 판단하기보다, "디자인이 별로니까 콘텐츠도 별로겠지"처럼 하나로 퉁쳐서 빠르게 판단하려는 경향이 있어요.

정리하면

캠페인 전환율이 카피 A/B 테스트만으로는 안 오를 때는 카피가 다루는 6%가 아니라, 첫 화면의 레이아웃과 색감이 만드는 94%의 영역을 점검해봐야해요.

첫인상을 결정하는 시각 위계 3요소

지금까지 "왜 빠르게 판단하는지", "그 판단이 왜 중요한지"를 봤어요.

그런데 첫인상은 화면을 한 그룹으로 보고 즉흥적으로 내리는 판단이 아니에요. 정렬·대비·타이포그래피 같은 요소들이 방문자의 시선을 어디로 이끌지, 뭘 먼저 보게 할지를 설계해두면, 그 설계가 곧 방문자가 0.05초 안에 받는 첫인상의 재료가 돼요. 즉 시각 위계를 잡아두는 이유는, 방문자가 무의식중에 내리는 그 첫 판단을 의도한 방향으로 유도하기 위해서예요.

그럼 방문자는 정확히 뭘 보고 0.05초 만에 판단을 내리는 걸까요?

UX 디자인에서는 방문자의 시선이 어디로 먼저 가고 뭘 중요하게 여기는지를 "시각 위계(Visual Hierarchy)"라고 불러요. 이 위계를 만드는 핵심 요소는 세 가지예요.

요소

왜 중요할까요

공백과 정렬

요소가 빽빽하면 "복잡하고 피곤한 곳"이라는 인상을 줘요.
적절한 여백시선이 쉴 자리를 만들고, 정렬"관리가 잘 되는 곳"이라는 신뢰로 이어져요.

색상 대비

배경과 텍스트, 버튼과 주변 요소의 명도 대비가 뚜렷할수록 뇌는 정보를 더 적은 노력으로 처리해요.
처리가 쉬운 화면은 그 자체로 신뢰가는 화면으로 인식돼요.

타이포그래피 계층

제목·부제·본문의 크기와 굵기 차이가 분명하면, 방문자는 어디부터 봐야 할지 무의식적으로 안내받을 수 있어요.
반대로 모든 텍스트가 비슷한 크기면, 스스로 판단해야 해서 피로감을 느끼고 결국 아무것도 제대로 읽지 않고 이탈하기 쉬워져요.

캠페인 페이지나 랜딩페이지를 검토할 때, 카피를 고치기 전에 이 세 가지를 체크해보는 게 순서상 더 빠른 개선일 수 있어요.

3줄 정리

방문자는 카피를 읽기 전, 처음 0.05초 만에 홈페이지에 더 머물지 말지를 정해요.

그 판단을 좌우하는 건 여백·대비·타이포그래피 같은 시각 요소고, 여기서 나쁜 인상을 받으면 그 뒤에 아무리 좋은 카피와 오퍼를 배치해도 읽히지 않을 확률이 높아져요.

디자인 리소스가 없어서 카피로만 승부를 봐야 하는 상황이라면 더더욱, 카피를 붙잡고 있는 시간의 일부를 여백과 대비를 점검하는 데 써보는 게 더 빠른 개선일 수 있어요.

다음 콘텐츠 · 홈페이지 심리학 2편

[홈페이지 심리학] CTA 버튼 클릭률이 안 오르는 이유, 카피가 아닐 수도 있어요

큐샵 그로스랩의 다양한 인사이트

큐샵 블로그와 유튜브에서 더 자세히 볼 수 있어요

홈페이지 심리학 홈페이지 GEO 홈페이지 기획/운영

이 글은 위픽레터 독자분들을 위해 요약된 아티클이에요. 더 자세한 내용은 큐샵 인사이트 블로그 원문에서 확인하실 수 있어요.