과연 사용자들은 별똥별에 소원을 보냈을까? 뷰저블로 노코드 이벤트 웹페이지의 사용자 여정부터 페이지까지 분석해보자!

 

---

 

 

안녕하세요, UXO학회 2조, UX.O2 팀 입니다. 오늘 소개해 볼 내용은 바로 ‘노코드 툴로 이벤트 웹페이지 만들고 데이터를 분석하여 서비스 개선점 찾기’ 입니다!

“회사 제품을 소개하는 랜딩 페이지를 만들었는데 유저들이 잘 사용하는지 확인할 방법이 없을까?”
“회사 상품을 소개하는 랜딩페이지를 만들었는데 목적에 맞게 잘 사용되고 있는건가?”
“내 사이트에서 사용자들이 어떤 부분을 가장 주목하고 있을까?”

 

포트폴리오, 웹페이지… 다양한 형식의 랜딩 페이지! 멋들어지게 만들었지만 내가 강조하고 싶은 부분을 사용자들이 잘 보고 있는지, 혹은 사용자들이 내가 의도한 목적에 맞게 사용하고 있는지 파악하지 못하고 있지는 않나요? 랜딩페이지를 배포하고 나서 객관적인 정보 파악이 어려워 감에 의존해 랜딩페이지를 관리하는 분들을 위해, UX.O2팀에서 직접 웹페이지를 만들고 데이터 툴을 연동해 개선안을 발굴해내는 과정까지 모두 담았습니다!

 

먼저 피그마를 통해 랜딩페이지를 디자인해줍니다. 저희는 연말을 맞이해 2023년을 정리하고 2024년, 새로운 소원을 빌 수 있는 ‘별똥별에 소원빌기’ 페이지를 기획했습니다!

총 4개의 페이지로 이루어진 랜딩페이지로, 기본 구성은 헤더/메인콘텐츠/푸터로 구성했습니다. 메인 페이지에서는 별똥별에 소원을 빌 수 있는 CTA버튼과 하단에 소원을 비는 방법을 넣었습니다. 메인 페이지에서 유저들이 웹 페이지 기획에 대한 설명을 읽고 소원을 비는 과정까지 훑어보고자 했습니다.

 

다음으로 디자인 된 페이지를 노코드 툴을 이용해 제작해주었습니다! 

(*노코드 툴 : 코드를 작성하지 않고도 웹 또는 모바일 앱을 디자인/빌드/실행할 수 있는 소프트웨어)

 

저희는 Readymag라는 툴을 사용해주었는데요, 매우 직관적인 툴로 모바일부터 데스크탑 반응형까지 간단하고 손쉽게 제작할 수 있습니다. 이미지/도형/텍스트/레이어를 적절하게 사용해 앞서 디자인한 랜딩페이지와 동일하게 제작한 후, Project Setting > Code를 눌러 Before</Body>에 아래와 같이 뷰저블 코드를 넣어줍니다! (뷰저블에 트래킹 코드를 넣는 방법은 해당 링크를 참고하면 더 자세하게 알 수 있습니다! : https://www.beusable.net/blog/?p=1906)

 

트래킹 코드를 넣고, 설치 확인을 한 후, 활성화까지 기다려주면 아래와 같이 대시보드에 페이지들이 뜨게 되고, 창을 클릭해주면 클릭 히트맵과 라이브 히트맵 등 해당 페이지의 데이터를 볼 수 있게 됩니다.

 

연결이 되었다면, 바로 배포까지 완료하면 이벤트 웹 페이지 생성 완료! 입니다.

 

---

뷰저블 퍼널 기능으로 분석하기

이렇게 만들어진 웹 페이지를 가지고 12월 4일부터 12일의 기간 동안 데이터를 수집해 사용자가 어떻게 저희의 웹 페이지를 사용하는 지 분석해보았습니다. 먼저 퍼널을 통해 페이지 도달부터 소원 보내기 완료까지 어떻게 여정을 거치는 지 분석해보았는데요, 이를 위해서 저희는 뷰저블 UX Heatmap의 기능 중 하나인 ‘Funnel’ 기능을 사용했습니다. 

 

Funnel 기능이 무엇인지 궁금하신가요?

Funnel이란 단계별 사용자의 잔존 및 이탈 정도를 분석한 리포트입니다. 전체 페이지의 여정을 볼 수있는 Journey Map과 다르게 Funnel에서는 원하는 페이지를 단계별 여정으로 설정이 가능합니다. 때문에 사용자 행동 흐름 시나리오를 설계해서 사용자의 탐색 여정을 최적할 수 있다는 장점이 있습니다. Funnel은 크게 3가지 메인 기능을 가지고 있는데요, 이를 중심으로 UX.O2조의 별똥별 웹 페이지를 분석해보았습니다.

 

먼저, 설정한 단계별 사용자 행동흐름 분석이 가능한 기능입니다.

UX.O2조는 과연 사용자가 웹 페이지 도달 부터 시작해 별똥별 종류를 고르고 소원을 작성하고 소원을 별똥별에 보내는 마지막 과정까지 완료하고 있는지 궁금하였습니다. 때문에 해당 과정의 페이지를 퍼널의 단계로 설정하였고 다음과 같은 결과를 확인할 수 있었습니다.

- 첫 번째 페이지인 Main 페이지의 이탈률은 54%이다.
- Main에서 Send까지 완료한 세션은 총 28.6%로 10개 중 약 3개의 세션은 별똥별에 소원을 성공적으로 전달했다.

 

퍼널의 두번째 메인 기능은 사용자 유형 별 흐름 비교 분석이 가능하다는 것인데요, 이번에는 전체 흐름이 아닌 신규 사용자와 재방문 사용자의 흐름을 비교 분석해보겠습니다.

 

[상단 - 신규 사용자 / 하단 - 재방문 사용자]

신규 사용자와 재방문 사용자를 비교분석했을 때, 더 큰 차이를 확인해볼 수 있었습니다.

 

먼저 첫 번째 페이지에서의 이탈율을 비교하면 신규 사용자는 78.6%, 재방문 사용자는 34.3%로 44.3%p의 차이가 나고 있음을 확인했습니다. 또한 마지막 최종 전환율 또한 신규 사용자보다 재방문자가 32.2% 더 높은 수치를 보이고 있었습니다. 

이를 통해서 재방문 사용자가 신규 사용자보다 웹 사이트의 콘텐츠를 더 많이 소비하고 있음을 알 수 있었습니다. 
 

퍼널의 마지막 메인 기능은 세부 단계별 사용자의 잔존 및 이탈현황입니다. 각각의 단계에서 사용자가 어디로 잔존하는 지 혹은 이탈하는 지를 현황 그래프로 나타내 변화의 정도를 한 눈에 파악할 수 있다는 장점이 있습니다. 이를 통해서 어느 단계를 먼저 개선해야 하는지, 혹은 어느 단계가 가장 안정적인 전환율을 가지고 있는지 확인해볼 수 있습니다.

---

뷰저블 라이브 히트맵 기능으로 분석하기

다음으로는 뷰저블 UX Heatmap의 핵심 기능이라고 할 수 있는 라이브 히트맵 기능을 이용해볼까요?

 

우선 히트맵이 무엇인지 알아야 라이브 히트맵도 이해할 수 있겠죠!

히트맵이란, 사용자가 사이트를 이용한 데이터를 시각화된 정보로 보여주는 분석 툴입니다. 클릭, 포커스, 호버, 스크롤 등 사용자의 다양한 이벤트들을 모두 데이터에 포함합니다. 사이트에 접속했을 때 사용자들이 어떤 식으로 행동하는지 한 번에 확인할 수 있기 때문에, 사이트를 개선하는 데에 많은 도움을 주는 기능입니다.

 

그렇다면 라이브 히트맵이란?
‘라이브’라는 이름에서 알 수 있듯이 뷰저블 히트맵을 실제 작동하는 웹사이트 위에 올려서 보여주는 기능입니다.

 

백문이 불여일견이라고, 직접 함께 보시죠! 이렇게 뷰저블의 UX Heatmap 기능에서 분석하고 싶은 페이지를 클릭하고, 오른쪽 상단의 ‘Live Heatmap’ 버튼을 클릭하면 라이브 히트맵 기능을 이용할 수 있습니다.

이렇게 라이브 히트맵 기능을 통해 실제 작동하는 uxo22.com 사이트와 뷰저블에서 제공하는 히트맵 데이터를 함께 볼 수 있었습니다! 신규 방문자인지, 어느 기기로 접속했는지, 사용자가 어떤 이벤트를 발생시켰는지 등등 다양한 방면으로 데이터를 분석이 가능했습니다. 또, 빨간색이 사람들이 많이 이용한 부분이라는 것을 한 번에 시각적으로 이해할 수 있어서 편리했네요!

라이브 히트맵에서는 클릭/무브/노출/관심 등 사용자의 다양한 이벤트들을 확인할 수 있는데요. 오늘은 그 중 클릭과 무브 중심으로 보려고 합니다. 클릭은 사용자가 클릭한 지점, 무브는 사용자가 마우스 커서를 움직인 지점을 히트맵으로 보여줍니다. 그럼 이제 클릭/무브 라이브 히트맵을 이용하여 각 페이지를 분석해보겠습니다.

 

[메인 페이지 - 클릭 히트맵]

UX.O2조는 홈 페이지에서 오로지 ‘소원 빌러가기’ 버튼에만 링크 기능을 넣었었는데, 사람들이 버튼 외에 다른 곳을 많이 클릭할지가 궁금했습니다. 클릭 히트맵을 분석한 결과는 다음과 같았습니다.

- 사용자들은 버튼 외에도 제목과 배경을 많이 클릭한다.

 

버튼 외의 다른 부분에는 링크 기능이 없는데도 사용자들이 많이 클릭하고 있음을 알 수 있었습니다! 

 

[선택 페이지 - 무브 히트맵]

직접 제작한 uxo22.com 사이트에서는 꿈, 사랑, 행운, 돈 중 원하는 별똥별을 선택해서 소원을 빌 수 있었는데요. 사용자들이 과연 어떤 종류의 소원에 가장 관심을 많이 보일지 궁금했습니다. 그럴 때는 사용자들이 어떤 콘텐츠를 제일 많이 응시했는지 간접적으로 파악할 수 있는 무브 히트맵을 확인해보면 되겠죠! 다음과 같은 분석을 할 수 있었습니다.

- 돈 별똥별에 비해 꿈, 사랑, 행운 별똥별에 관심을 가지는 사람이 많았다.

 

[소원 빌기 페이지 상단 - 클릭 히트맵]

 

[소원 빌기 페이지 하단 - 클릭 히트맵]

소원 빌기 페이지의 경우에도 홈 페이지와 같이 예상치 못한 부분을 사람들이 클릭하는지 궁금했습니다. 하지만 클릭 히트맵을 확인한 결과 의도한대로 행동하는 사용자 데이터를 확인할 수 있었습니다.

- 클릭을 유도하지 않은 상단의 제목, 별똥별 이미지 등은 사용자들이 클릭하지 않았다.
- 클릭을 유도한 하단의 소원 입력 창, 소원 보내기 버튼을 다수의 사용자들이 클릭했다. 

 

[공유하기 페이지 - 무브 히트맵]

클릭/무브 히트맵에서는 이렇게 버튼 하나를 자세하게 분석할 수 있는 기능도 있었는데요. <button> 태그를 쓰는 HTML element의 경우 이렇게 자세한 데이터를 확인해볼 수 있다고 합니다. 공유하기 페이지의 ‘링크 공유하기' 버튼의 경우에도 이에 해당되었습니다. 버튼에 마우스를 올리면 뜨는 파란색 말풍선 데이터를 통해 다음과 같이 분석할 수 있었습니다.

- 82의 호버, 13의 클릭 수를 보였다.
- 관심도는 65.2%이다.

‘링크 공유하기' 기능은 한마디로 사용자 참여율이 높은 콘텐츠라고 정리할 수 있었습니다.

 

---

정리 및 개선방향

저희 UX.O2조는 앞서 설명드린 분석 내용에 따라 ‘별똥별에 소원빌기’ 페이지의 현황을 이렇게 정리해보았습니다!

 

[웹 페이지의 여정 분석] 

전체적인 여정을 분석해보았을 때, 재방문 사용자가 신규 사용자보다 웹 사이트의 콘텐츠를 더 많이 소비하고 있었습니다. 또한 마지막 페이지까지의 전환율은 총 28.6%였습니다. 때문에 최종 전환율을 높이기 위해서 다음과 같은 개선방향을 생각해볼 수 있었습니다. 

신규 사용자의 이탈율이 가장 높았던 메인페이지에서 이벤트에 대한 설명과 기능을 Average Fold 상단으로 배치해 이탈율 방지하자.

다음에는 해당 개선안을 차용해 최종 전환율을 28.6%에서 32%로 상승시키는 것을 목표로 해볼 예정입니다!

 

[메인페이지]

메인페이지에서는 CTA 클릭보다 다른 영역에 무효클릭이 많이 발생했는데요, 따라서 다음과 같은 개선 방향을 생각해볼 수 있었습니다.

‘소원 빌러가기' 버튼 뿐만 아니라 제목이 들어있는 별똥별 배경에도 링크를 넣어서 다음 페이지로의 전환율을 높인다.

또한 “공유하기” 페이지에서 관심도가 가장 높았던 ‘링크 공유하기’ 버튼을 더 강조하는 방식으로 페이지를 개선해 신규 방문자의 유입을 늘려볼 수 있을 것 입니다!

이렇게 노코드 툴을 이용해 이벤트 웹 페이지를 만들고 퍼널과 라이브히트맵을 통해서 쉽게 분석해 볼 수 있었는데요, 사용자가 기대여정을 어떻게 소비하고있는지 볼 수 있다는 점에서 아주 유용한 기능이라고 생각합니다. 이벤트 페이지나 웹콘텐츠를 분석해보고 싶다면 뷰저블 ux heatmap을 사용해보는것은 어떤가요? 😊

 

---

 

[분석 소감]

😸수연

이전에는 웹 사이트 UI만 제작하고 끝났다면 이제는 노코드 툴로 실제 운영할 수 있는 웹 사이트를 만들어볼 수 있었던 것이 굉장히 기억에 남는 활동이였습니다! 뷰저블 코드가 실행될 수 있도록 도메인을 구매 후 수집 기간동안 데이터가 누적되는 것을 지켜보는 게 굉장히 재미있었습니다. 또 이를 통해 유의미한 분석 인사이트와 개선방향을 얻을 수 있어서 뷰저블의 유용성을 한 번 더 확인할 수 있는 좋은 기회였습니다.

 

🥹 혜경

사용자들이 실제 현장에서 어떤 식으로 웹 사이트를 사용하는지 한 명 한 명 직접 화면 녹화를 하거나 인터뷰를 한 적은 있어도, 이렇게 뷰저블이라는 사이트를 통해 한 번에 여러 명의 사용자 데이터를 확인할 수 있는 경험은 많지 않아서 신기했습니다. 앞으로도 이런 기능을 사용한다면 서비스 개선에 많은 도움을 줄 수 있을 것 같다는 생각이 들었습니다.

 

🤩성현

직접 웹페이지를 기획하고 제작, 배포하고 데이터를 분석해 개선안까지 찾는 플로우를 경험해볼 수 있어서 유익했습니다. 뷰저블 툴 사용 방법이 굉장히 쉽기도 하고, 실시간으로 데이터를 확인하고 분석할 수 있었던 점이 좋았습니다!

 

💎 태희

실제로 웹페이지를 구성하고 디자인, 노코드툴을 활용하여 개발 및 배포까지 새로운 경험을 할 수 있어서 좋았습니다! 또한, 실제 사용자의 데이터를 수합하고 분석해보며 뷰저블 툴의 유용성도 직접 느끼고 배울 수 있었습니다. 앞으로도 뷰저블 툴을 근거 있는 서비스를 기획하고 디자인하는 데에 활용하고 싶습니다!

 

 

산학 협력 과제 진행을 위해 제품을 무료로 제공받아 작성되었습니다.