#어쩌다사업자. chatGPT와 협업하여 '와인바 창업 컨설팅'이라는 사업 아이템을 도출하여 뚝딱뚝딱 홈페이지 만들고 개인사업자까지 내는데 단 3시간. 바야흐로 누구나 손가락만 있으면 사장님이 될 수 있는 세상입니다. 언제까지고 컨설팅 문의가 들어오기만을 하염없이 기다릴 수는 없죠. 그래서 #뷰저블 서비스를 이용해서 서비스 웹페이지의 UX/UI를 분석해 보겠습니다.

와인바 컨설팅 웹페이지 : https://www.wineny.xyz/

뷰저블?

뷰저블은 아주아주 간단하게 고객의 서비스 이용 여정(Journey Map)과 UX 히트맵(화면에서 유저의 행동 패턴)을 볼 수 있게 구현해 주는 서비스입니다. 자체 개발하거나 wix, 카페24, 아임웹 등 웹페이지 제작 툴로 만든 웹페이지에 아주 간단하게 트레킹 코드를 붙여서 구현할 수 있어요. 5분 컷? 이면 대기업 UX팀에서 보는 듯한 대시 보드가 짜라란하고 만들어집니다. 단 네이버 스마트스토어나 브런치처럼 스크립트 코드를 설치할 수 없는 경우는 도입이 불가합니다.

트레킹 코드만 심으면 이런 데이터를 볼 수 있습니다!

저는 wix로 만든 웹페이지에 트레킹 코드를 심었습니다. 웹페이지 링크를 등록하면 심을 수 있는 트레킹 코드가 생성되고 이것을 wix 설정 > 사용자 지정코드에 붙여 넣기만 하면 완료! 처음에 트레킹 코드를 심으면 코드가 돌아가고 분석되는데 시간이 조금 소요되는데, 이후에는 거의 실시간으로 바로바로 조회할 수 있습니다.

나에게 부여된 코드

와인바 웹페이지 현황

제가 만든 'winey' 웹페이지에서 약 10일간 동작한 히트맵 데이터를 공개합니다.

클릭 패턴

사이트의 어떤 영역을 가장 많이 클릭했는지 보여주는 지표입니다. 빨간색 - 흰색으로 나타날수록 클릭이 많이 된 영역이고, 녹색 - 파란색 영역은 적게 클릭된 영역이에요.

사이트의 가장 상단 영역입니다. 제일 상단에 about, blogs 메뉴를 가장 많이 클릭했네요. 그리고 중간에 서비스를 소개하는 문구 영역은 사실상 클릭이 되지 않는 부분인데도 사람들이 많이 눌러본 것을 확인할 수 있습니다. 만약 해당 영역에 링크를 걸어서 다른 페이지로 이동할 수 있게 구현했다면 체류 시간이 높아질 수도 있었겠죠?

그 하단에 설명 파트도 클릭이 되지 않는 부분인데 사람들이 눌러본 것을 확인할 수 있습니다.

특히 'See All'이라고 그럴듯하게 표기만 해놓고 실제로 작동하지 않는 텍스트를 다들 열심히 눌러보셨더라고요... 개선이 시급합니다.

제일 하단 영역의 'Read More' 버튼은 실제로 동작되는 버튼인데, 꽤 클릭률이 높았습니다. 웹페이지 주인장이 누군지 다들 궁금해하나 봅니다. 매우 간단한 웹페이지이지만 방문자들이 어떤 부분을 가장 많이 눌러보고, 유효하지 않은 클릭이 어디서 발생했는지 알 수 있죠.

스크롤 패턴

다음은 스크롤 패턴인데요, 유저들이 스크롤을 하면서 - 화면의 어떤 부분에서 이탈했고 어떤 부분에서 오랫동안 머물렀는지를 바로 확인할 수 있습니다.

1. 페이지 내 유저 리텐션

화면 위에 입혀진 색깔과, 우측의 %를 보고 얼마나 많은 유저가 잔존하였는지 알 수 있습니다. 스크롤을 끝까지 내려보는 유저가 있는 반면, 들어오자마자 꺼버리는 유저도 있겠죠? 페이지 최상단은 100%의 유저가 도달을 하고 - 아래로 내려갈수록 유저 도달률이 떨어지게 됩니다.

2. 페이지 내 유저 체류 시간

유저들이 스크롤을 하다가 관심 있는 정보가 나오면 스크롤을 멈추고 오랫동안 해당 정보를 보게 됩니다. 등고선을 옆으로 눕혀놓은 것처럼 보이는 그래프가 유저 체류 시간을 의미합니다.

여기까지 75%의 유저가 스크롤을 했고, 최상단 설명 영역에서 45.2초 머물렀네요.

이 쪽은 상대적으로 유저 체류시간이 14초 정도로 짧고 휙휙 넘어간 것으로 보입니다. 그래도 유저의 69%는 아직 페이지를 이탈하지 않고 있네요.

제 소개가 있는 웹페이지 최하단입니다. 50%의 유저는 인내심 있게 마지막까지 스크롤을 해주셨습니다. 감동... 그리고 소개 문구가 있는 영역에서 유저가 31초 정도로 꽤 오래 머무른 것을 알 수 있습니다. 이처럼 유저가 어떤 영역을 집중하여 보았는지 뷰저블 데이터를 통해서 쉽게 확인하면서 - 페이지 구성 비치 및 관심도가 떨어지는 영역을 보완을 고려해 볼 수 있겠죠. 특히 상세 페이지가 긴 쇼핑몰의 경우 제품 설명의 어떤 영역을 유저가 관심도 있게 보는지 - 스크롤은 어디까지 내리는지를 반영하여 다양한 시도가 가능해 보입니다.

Path 패턴

유저의 이동 경로를 살펴볼 수도 있습니다. 최하단까지 내려갔다가 이탈하는 유저도 있고, 다시 최상단으로 올라와서 중요 정보를 확인하는 유저도 있겠죠?

제 웹페이지의 경우 유저가 쭉 하단까지 내려가면서 사이트를 살펴보고 > 제 소개를 살펴본 다음 > 상단으로 올라와서 다른 탭들을 눌러보는 경향이 강했습니다.

유저 별 패턴 비교

또한 뷰저블은 특정 기준 값을 변경하여 각가의 패턴을 비교해서 볼 수 있는 기능도 제공합니다. 아래 그래프는 동일 기간 동안 (좌)신규 방문자, (우)재방문자의 패턴을 보여줍니다. 신규 방문자는 각 영역을 학습하며 하단까지 인내심을 가지고 체류하는 반면 재방문자는 중간 이탈률도 훨씬 높아졌고, 스크롤 내리는 속도도 엄청 빨라졌죠?

신규 방문자의 영역 별 체류시간이 거의 5배 정도나 깁니다. 재방문자는 이미 봤던 페이지라서 관심을 크게 주지 않았을 테고, 무엇보다 컨설팅 상품을 구매할 의지가 없는 분들이 재방문을 했기 때문에 이와 같은 결과가 나오지 않았나 추정됩니다.

아울러 utm을 심지 않아도 유저가 어디에서 유입되었는지 매우 쉽게 볼 수 있어서 - 대부분의 방문자가 저의 브런치 글을 통해서 해당 웹페이지로 들어온 것을 확인했습니다.

이 외에도 뷰저블은 정말 다양한 기능을 가지고 있는데, 아직 저도 다 살펴보진 못했어요. 조만간 제 본업인 아웃도어 플랫폼에도 뷰저블 트래킹 코드를 심어서 다양한 유저 데이터를 볼 수 있길 기대해 봅니다. (두근두근) 이렇게 구멍가게 사장도 대기업처럼 UX/UI 분석을 할 수 있음을 기뻐하며 이번 글을 마무리합니다.

뷰저블 서포터스 1기로 제품을 무료로 제공받아 작성된 솔직한 후기입니다.

#뷰저블 #뷰저블서포터

구멍가게도 대기업처럼 UX/UI 분석하기

구멍가게도 대기업처럼 UX/UI 분석하기