안녕하세요! 여러분, 이번에는 뷰저블의 히트맵 툴을 활용하여 사용자 참여도가 높은 테스트 형태의 참여형 콘텐츠를 만들어 분석하는 목적으로, 추석 기간을 맞아 송편을 만드는 할머니들의 입맛을 맞추는 송편찾기 테스트 콘텐츠를 제작해보았어요.
추석 기간동안 할머니들의 입맛에 맞는 송편을 공략하라는 기획으로 사용자의 참여율이 높은 콘텐츠 유형인 테스트 형태의 콘텐츠를 제작하고 뷰저블의 히트맵 툴로 분석하여 개선해보는 프로젝트를 진행했는데요. 과연 사용자들이 박미자, 김유자, 윤임자 할머니의 입맛을 얼마나 정확하게 예측할 수 있을지 함께 알아보겠습니다!
–
테스트 콘텐츠 제작과 질문지 구성: 입맛 예측의 시작
송편 만들기의 과정은 쌀가루, 송편소, 그리고 곁들여먹을 차 종류 등 다양한 질문으로 구성하여 테스트 질문지를 제작했습니다. 박미자, 김유자, 윤임자 할머니의 입맛을 예측할 수 있는 소개글과 이미지를 활용하여 참여자들의 호기심을 자극했어요.
카드형 컴포넌트 내부에 할머니들의 이미지와 소개글을 바탕으로 각 할머니들의 취향을 예측하여 테스트의 답을 유추할 수 있게끔 힌트가 섞인 문구를 작성하였고, 얼만큼 힌트를 주어야 테스트를 참여하는데 어려움이 없는지 정량적인 데이터를 바탕으로 라이팅 문구를 수정하고자 하였습니다.
–
테스트 콘텐츠 목적과 분석
참여형 테스트 콘텐츠를 분석하고자 하는 목적은 다양하겠지만 호시탐탐이 이번 프로젝트에서 분석하고자 한 목적은 크게 두가지입니다.
첫 째, 테스트의 다소 정성적이고 주관적인 난이도를 정량적인 데이터로 분석하여 테스트 질문지 난이도를 조정하는 것입니다. 또한 정량적인 수치로 사용자들이 테스트를 참여하는 과정에서 어려움이 없는지 질문지의 어려움을 조정하고자 했습니다.
둘 째, 히트맵 툴을 이용하여 콘텐츠 페이지의 가시성을 높이기 위해 테스트 콘텐츠의 구성 방식을 분석하였습니다. 뷰저블을 활용한 웹콘텐츠 작성은 사용자 참여도를 높이는 효과적인 방법 중 하나입니다. 정성적, 정량적 데이터를 통해 개선 사항을 도출하고 성공적인 콘텐츠 배포를 위한 인사이트를 제공해줍니다.
–
뷰저블 히트맵으로 사용자의 행동에 따른 세션 요약
이렇게 만들어진 할미 사이트를 뷰저블을 활용하여 9월 28일부터 10월 1일까지 추석 기간동안 데이터를 수집했습니다. 그럼 지금부터 호시탐탐 팀이 직접 제작한 할미 사이트를 통해 뷰저블 히트맵을 어떻게 활용할 수 있는지 알아보겠습니다!
1. 스크롤 히트맵
뷰저블의 스크롤 히트맵에서 사용자가 제공한 페이지와 콘텐츠에서 얼마나 많은 탐색과 주목을 했는지 파악할 수 있는데요.
📌 Click / Tap Heatmap
가장 먼저 모바일 히트맵 Tap Count Rank부터 살펴볼까요? Tap Count Rank에서는 요소별 Tap 순위를 파악할 수 있는데요, [미자씨 입맛 정복하러 가기] 버튼이 가장 높은 탭 수를 보였고, [유자씨 입맛 정복하러 가기] 버튼, [링크 공유하기] 버튼, [임자씨 입맛 정복하러 가기] 버튼, [카카오톡 문의 링크] 버튼 순서대로 그 뒤를 이었습니다.
상위 4개 버튼에 대한 자세한 통계를 살펴봅시다! 먼저 전반적인 탭 수의 흐름을 보면 할미 사이트 배포 당일이었던 9월 29일에 가장 높은 기록을, 그 이후에는 절반 이상의 탭 수가 줄어든 것을 확인할 수 있어요.
현재 대시보드에서 각 요소마다 확인할 수 있는 정보로는 Tap Rate, Tap PV Rate, Scroll to Tap, Dbl. Tap Rate로, 총 4가지의 정보가 있습니다! 각각의 지표가 무엇을 의미하는지, 그리고 이를 활용해서 분석할 때, 어떤 인사이트를 얻을 수 있는지 알려드릴게요.
| 정의 | 분석 Tip | |
| Tap Rate | Clicks/페이지 내 전체 clicks(%): 전체 페이지 내 클릭(탭) 비중 | 전체 관심 중, 해당 콘텐츠에 대한 비중으로 해석할 수 있음. |
| Tap PV Rate | Click PV(Unique Click)/전체 PV(%): 해당 콘텐츠를 클릭한 PV의 규모 | 도달률/노출률 대비 Click PV Rate를 확인하면, 실제 해당 콘텐츠의 전환 성과로 볼 수 있음. |
| Scroll to Tap | 특정 콘텐츠에 노출된 사용자 중 해당 요소를 클릭한 비중 | 사용자 도달 대비 전환 효율을 살펴볼 수 있음. |
| Double Tap Rate | 전체 더블 클릭 대비 해당 요소에 발생한 더블 클릭 비중 | 100%라면? 해당 요소에만 더블 클릭이 발생했다고 해석 로딩 속도가 느리진 않은지 클릭이 원활하게 이뤄졌는지 점검 필요함. |
이를 토대로 가장 높은 탭 수를 기록한 [미자씨 입맛 정복하러 가기] 버튼에 대해서 살펴봅시다! 먼저 Tap Rate는 약 30%로, 할미 사이트 메인 페이지의 전체 콘텐츠에 대한 관심 중 30% 정도의 비중을 차지한다고 볼 수 있습니다. 그리고 Scroll to Tap 지표는 약 10%로, 이 버튼에 도달한 사용자 대비 전환율이 10%였다는 점을 감안하면, 사용자들이 이 버튼에 크게 매력을 느끼지 못했음을 추측해볼 수 있습니다.
다음으로는 할미 사이트에는 총 세 가지 테스트가 있었고, 각각의 테스트는 [00씨 입맛 정복하러 가기] 버튼을 눌러서 시도해볼 수 있었는데요! 현재 히트맵을 확인해보면 사용자들이 버튼 외에 박미자 영역의 다른 부분도 많이 클릭을 한 것으로 보입니다. 사용자들은 시각적으로 직관적인 이미지와 CTA버튼에 대한 주목도와 클릭율이 높다는 행동패턴을 인사이트를 얻을 수 있었습니다.
–
📌 Attention 그래프
Attention 그래프에서는 각 위치별 정확한 체류시간을 파악하는 것 보다, 스크롤 도달 대비 상대적인 주목성을 비교/파악하는 것을 권장합니다. 예를 들어, 도달률이 낮은 곳인데 주목도가 유독 높은 구간이 있다면 주목해 보세요!
모바일 스크롤 히트맵을 먼저 살펴볼게요. 스크롤 도달률은 페이지 하단으로 갈수록 낮아지는 게 일반적인데요, 할미 사이트에서도 일반적인 흐름을 보여주고 있습니다. [유자씨 입맛 정복하러 가기] 콘텐츠까지 소비한 후 이탈한 사용자가 약 25%, [임자씨 입맛 정복하러 가기] 콘텐츠까지 소비한 후 이탈한 사용자가 약 36%임을 확인할 수 있었습니다.
PC 스크롤 히트맵을 보면 모바일과 달리 [게임 방법] 및 [게임 팁] 콘텐츠에 특히 주목한 것을 확인할 수 있었습니다. [게임 팁] 콘텐츠에서 전체 사용자가 최대 평균 54초 정도의 시간동안 해당 콘텐츠에 주목하였습니다.
–
📌 Fold
Fold에서는 브라우저 기본 높이의 현황과 Fold 상/하단 영역의 분석 결과를 보여줍니다. 사용자가 마우스를 스크롤하지 않아도 볼 수 있는 기본 화면인 Above the Fold 영역과, 스크롤링 해야만 볼 수 있는 Below the Fold 영역의 그래프를 좌우로 제공하는데요!
이는 PC Fold 데이터입니다. 현재 [링크 공유하기] 버튼을 제외한 모든 클리커블 요소들이 Below the Fold 영역에 위치해있기 때문에 Below the Fold 영역에서의 클릭 수가 16으로, Above the Fold보다 높게 나타난 것을 알 수 있습니다. 즉, Below the Fold 영역에서 높은 콘텐츠 소비가 이루어진 것을 검토해 볼 수 있었습니다.
–
📌 Scrolled Heights
Scrolled Heights에서는 페이지 스크롤링에 따른 높이 별 사용자 도달 비율을 표시합니다. 특정 높이에 위치한 높이별로 화면에 노출된 사용자의 규모를 파악할 수 있는데요! 이때 높이별 사용자 비율 그래프의 감소 폭을 통해, 사용자의 스크롤 중단 정도를 쉽게 파악할 수 있습니다. 감소 폭이 클 수록 중단율이 큰 구간으로 해석할 수 있습니다!
Attention 그래프의 연장선 상에서 PC Scrolled Heights를 살펴보면 앞서 Attention 그래프에서 주목도가 높게 나타난대로, 사용자들이 중단이 거의 없이 [게임 방법] 및 [게임 팁] 콘텐츠를 소비한 것으로 검토해볼 수 있었습니다.
–
2. User Analytics
뷰저블의 [Analytics]에서는 등록한 페이지에 사용자가 방문할 경우, 해당 방문에 대한 기본적인 데이터를 확인할 수 있습니다.
📌 UV
UV는 Unique Visitors의 약자로, 설정한 기간동안 해당 페이지에 방문을 한 전체 방문자 중 중복되지 않은 순(Unique) 방문자 지표를 나타냅니다. 신규 및 재방문 사용자의 경우, 등록 URL에 처음으로 접속한 사용자와, 재방문한 사용자의 PV수에 대한 데이터로, 뷰저블 코드가 설치되어 등록 URL에서 데이터를 수집한 시점을 기준으로 신규/재방문이 분류됩니다.
할미 사이트에서 가장 사용자의 방문이 많았던 9/29의 데이터를 살펴봅시다. 신규 방문자가 250명으로 97.3%, 재방문 사용자 7명, 2.7%로, 할미 사이트는 신규 사용자가 주로 방문한다는 것을 알 수 있으며, UV는 257명으로 나타납니다. 즉 이날 방문했던 총 방문자 257명 모두 중복되지 않은 순 방문자라는 것을 확인할 수 있습니다.
–
📌 유입 채널
유입 채널은 동일한 도메인으로 접속한 내부 유입과, 상이한 도메인으로 접속한 외부 유입으로 구분됩니다. 외부 채널의 경우, 세부적으로는 Referral(일반 유입), Social(소셜 미디어 유입), Search(검색 유입), Direct(직접 유입 외 기타)로 분류할수 있습니다. 해당 유입이 어떤 것을 의미하는 지 아래 표로 한 눈에 보여드릴게요!
| 유입 종류 | 설명 |
| Referral(일반 유입) | 사용자가 다른 사이트에 포함된 링크를 통해 해당 페이지로 유입되는 경우 |
| Social(소셜 미디어 유입) | 사용자가 SNS를 통해 유입되는 경우 |
| Search(검색 유입) | 사용자가 검색엔진을 통해 들어오는 경우 |
| Direct(직접 유입 외 기타) | 사용자가 주소창에 직접 해당 URL을 입력하여 방문하는 경우, 브라우저의 기능을 통해 유입되는 경우, 이외에 유입경로를 추적할 수 없는 경우 |
이를 기반으로 할미사이트의 유입 채널 데이터를 보면, 할미 사이트의 경우 외부 유입이 99.3%로, 사용자 대부분이 상이한 도메인에서 접속했다는 것을 알 수 있어요. 또한 외부 유입의 경우, [Direct]가 60.5%로 가장 많은 비중을 차지 했고, [Referral]은 26.9%, [Social] 12.3% 등으로 사용자가 다양한 채널을 통해 유입되었다는 것을 확인할 수 있습니다!
이러한 유입 채널 데이터는 마케팅 계획을 수립하는 데 굉장히 중요한데요, 특히 할미사이트의 경우 주요 마케팅 채널 중 하나로 ‘인스타그램’을 사용했기 때문에, [Social] 에서의 유입 결과는 다소 기대 이하의 수치입니다. Analytics를 통해 이러한 문제점을 발견하고, 다음 마케팅 계획을 수립하는데 중요한 근거를 얻을 수 있습니다.
–
3. 사용자 흐름 분석
다음으로 사용자 흐름 분석에 대해 알아볼까요? 사용자 흐름 분석에서는 등록 페이지에 대한 유입경로와 이동 경로의 순위를 확인할 수 있습니다. 유입 경로의 경우, 사용자가 유입된 URL의 순위를 확인할 수 있습니다. 유입 경로 수가 5개 초과일 경우에는 아래 [etc]에서 나머지 모든 경로를 확인 가능합니다.
이동 경로는 페이지 전환 경로라고도 할 수 있는데요, 전환이란 페이지에 제공된 컨텐츠를 클릭하여 다른 페이지로 이동한 경우를 뜻합니다. 유입 경로와 마찬가지로 페이지에서 전환된 URL의 순위를 확인할 수 있으며, 5개가 넘는 경우에는 [etc]에서 나머지 전환 URL을 볼 수 있습니다.
이제 할미사이트의 사용자 흐름 분석을 살펴봅시다! 유입 경로를 먼저 보면, 할미 사이트는 [Direct]로 60%의 사용자가 유입되었고, ‘에브리타임’을 통해서는 26.7%의 사용자가 유입된 것이 확인됩니다. 또한 인스타그램을 통해서도 12% 이상의 사용자가 들어왔습니다.
다음으로 페이지 전환의 경우, [홈화면], [박미자-성공], [박미자-떼잉쯧] 순으로 전환이 일어났으나 페이지 이탈이 60.8%로 가장 높게 발생했다는 것을 확인할 수 있습니다. 여기에서 주목해야 할 사항은 페이지 이탈인데요, 이탈이 높은 페이지는 사용자에게 유익한 정보나 흥미를 제공하지 못하고 있을 확률이 높습니다. 할미사이트의 경우 다소 어렵게 느껴질 수 있는 ‘테스트’ 형식의 콘텐츠가 이탈율 상승의 주요 원인 중 하나일 것으로 추측할 수 있었습니다.
–
📌 Comparing Referrers
Comparing Referrers에서는 사용자들의 유입경로에 따른 UX 히트맵을 한 눈에 비교할 수 있습니다. 위는 할미사이트의 [Direct], [everytime.kr] 두 가지 유입경로를 통한 사용자의 UX 히트맵을 비교하는 화면입니다. comparing referrers를 이용하여 [링크 공유하기] 버튼의 경우 [Direct]로 유입된 사용자가 35.6%의 tap rate을, [everytime.kr]로 유입된 사용자가 11.3%의 tap rate을 나타냈다는 것을 하나의 화면 안에서 확인할 수 있습니다. 또한 신규/재방문 체크박스를 이용하여 신규 사용자 및 재방문 사용자 간의 수치 비교 또한 가능합니다.
–
📌 Segmenting CTA
Segmenting CTA 기능은 링크/버튼 등의 요소에 대해 사용자 분석할 수 있는 기능인데요, 우측의 tap 순위 Top 10 목록에서 분석하고자 하는 CTA 요소의 Analyze 버튼을 클릭해서 원하는 요소를 선택할 수 있습니다.
Analyze 버튼을 누르면, CTA 버튼을 tap한/하지 않은 사용자의 상세 데이터를 볼 수 있다는 사실! 알고계셨나요? 예시로 [미자씨 입맛 정복하러 가기] 버튼을 한 번 살펴보겠습니다!
먼저 위의 CTA 요소를 tap한 사용자의 상세 데이터를 확인할 수 있는데요, 사용자의 유입경로, PV, UV, 신규-재방문 사용자 비율, 평균 체류 시간 지표가 나타납니다. [미자씨 입맛 정복하러 가기] CTA 버튼의 경우 [everytime.kr]에서 유입된 사용자의 비율이 52.8%로 가장 높았습니다.
그리고 신규-재방문 사용자 비율과 평균 체류 시간 지표를 살펴보면, 신규-재방문 비율의 경우 신규 사용자가 91.4%로 압도적으로 나타났습니다. 또한 전체 사용자에 비해 tapped 사용자의 평균 체류 시간이 약 0.45s 정도 더 높았습니다.
다음으로는 [미자씨 입맛 정복하러 가기] CTA 버튼을 tap하지 않은, Untapped 사용자에 대한 analyze 입니다. tapped 사용자와는 반대로 untapped 사용자의 경우 [Direct]에서의 유입이 51.7%를 차지했습니다.
신규-재방문 사용자 비율의 경우 tapped 사용자보다 더 높은 98.4%라는 높은 신규 방문자 비율이 나타났습니다. 그러나 평균 체류 시간의 경우, tapped 사용자와는 반대로 전체 사용자보다 낮은 1.11s의 평균 체류시간을 보였습니다.
이처럼 Segmenting CTA를 활용하면 CTA 요소에 따른 사용자에 대한 데이터를 분석할 수 있습니다! tapped/untapped 사용자 간의 데이터를 비교할 수도 있어서 목적에 맞는 결과가 도출되었는지를 확인하고, 전략을 다시 수립할 수도 있습니다.
–
히트맵 툴을 이용해 얻은 인사이트와 개선사항 도출
1. 콘텐츠 구성 방식이 적절한가요?
주목도가 높은 할머니는 누구이며, 그 이유는 할미의 매력 때문인지 아니면 세로 정렬 방식의 문제인지에 대한 분석을 진행하였습니다.
히트맵 분석 결과를 토대로 콘텐츠의 구성 방식을 개선하여 주목도 차이를 해결하기 위해 Average fold 영역 밑으로 가려져 보이지 않는 테스트 질문지 컴포넌트를 세로 정렬형식이 아닌 가로 정렬 방식으로 보완하자는 UI 개선사항을 도출하였습니다. 또한, 이탈율이 떨어지는 박미자 할머니 테스트의 할머니 소개 설명을 더 보충하여 작성하여 박미자 할머니의 취향을 보다 쉽게 유추할 수 있도록 개선 할 것입니다.
2. 구성된 테스트의 난이도는 적합했나요?
박미자 할머니 테스트에서 [박미자-성공], [박미자-떼잉쯧] 순으로 전환이 일어났으나 페이지 이탈이 60.8%로 가장 높게 발생했다는 것을 발견할 수 있었는데요. 이 이탈율의 원인은 테스트의 어려운 난이도 때문인 것으로 판단됩니다.
다음 테스트 콘텐츠에서는 사용자들이 더욱 쉽게 참여할 수 있도록 난이도를 조절할 필요가 있습니다. 이탈율이 높은 페이지의 난이도를 낮추고, 사용자들에게 더 친숙한 언어와 설명을 제공하는 방향으로 개선할 수 있을 것입니다.
뷰저블을 활용한 웹콘텐츠 작성은 사용자 참여도를 높이는 효과적인 방법 중 하나입니다. 정성적, 정량적 데이터를 통해 테스트 콘텐츠를 최적화하고, 히트맵 툴을 활용하여 가시성이 높은 웹페이지를 제작하는 것이 중요합니다. 이러한 과정을 거쳐 콘텐츠의 효과를 극대화할 수 있습니다.
히트맵 툴은 사용자의 시선을 시각적으로 확인할 수 있어 웹페이지의 가시성을 향상시키기 위해 사용됩니다. 콘텐츠 페이지의 구성을 보다 사용자 중심으로 개선하고, 히트맵 분석을 통해 참여자들의 주목을 끌 수 있는 요소를 더욱 강조할 것입니다.
–
히트맵 툴을 이용한 웹콘텐츠 분석 및 개선사항 도출 소감
저희는 뷰저블의 히트맵 툴을 사용하여 데이터 시각화된 사용자의 시선을 직관적으로 확인할 수 있어 웹페이지의 가시성을 향상시키기 위해 유용하게 사용될 수 있다고 생각했어요. 콘텐츠 페이지의 구성을 보다 사용자 중심으로 개선하고, 히트맵 분석을 통해 참여자들의 주목을 끌 수 있는 요소를 더욱 강조하고자 한다면 뷰저블의 히트맵 기능을 사용하여 웹콘텐츠 분석과 개선사항 도출을 해보세요!
🌟팀원 소감
🐈⬛세은
처음으로 데이터 기반 의사결정을 하여 UI/UX 개선사항을 도출하는 경험을 해보았습니다. 기획 과정에서는 알아차리지 못했던 사용자 행동 패턴을 인사이트를 얻을 수 있었으며, 데이터 기반 수치를 바탕으로 개선사항의 우선순위를 정하고 반영하는 과정이 매우 효율적이고 확실한 성과를 낼 수 있는 방법이라고 느껴졌어요!
🐨하은
노코드툴로 직접 웹 사이트를 기획, 디자인하여 이를 뷰저블을 활용해 분석해보았습니다. 뷰저블로 타 사이트를 제 임의대로 분석해볼 수 없기 때문에, 항상 예시로만 공부를 하다가 이번에 직접 제작한 웹사이트를 분석해볼 수 있었는데요! 어떠한 의도로 기획한 내용이 어떠한 원인으로 사용자들의 주목을 이끌어내지 못했는지 원인을 파악하는 과정이 매우 유의미하고 흥미로웠던 것 같습니다:)
🐥은비
지난 번에는 Segmenting CTA까지는 살펴보지 못했었는데, 이번 기회에 해당 부분에 대한 데이터를 분석해볼 수 있어서 좋았습니다! 또 분석을 위한 사이트를 직접 만들고, 이것을 배포까지 해서 많은 사람들의 유입을 이끌어냈다는 점이 가장 뿌듯했습니다. 이번 경험을 통해서 앞으로도 뷰저블을 이용한 사이트 분석을 원활하게 할 수 있는 기반이 다져진 것 같습니다! 마지막으로 팀원 언니들 다 모두 고생하셨습니다❤️👍
🐰은정
UI에서 그치는 것이 아닌 웹 사이트를 개설해 직접 분석할 수 있는 점이 좋았습니다! 또 추석 연휴동안 링크를 뿌려 다수의 유저에게서 데이터를 뽑아낼 수 있었던 점이 굉장히 재미있었습니다. 뷰저블로 데이터를 어떻게 분석하면 좋을지 알아갈 수 있었는데요! 이후에는 사용자가 더 다양한 인터랙션이 가능한 웹사이트를 제작해 뷰저블로 데이터를 분석해보고 싶습니다. 마지막으로 함께 프로젝트를 진행한 세은언니, 하은, 은비 너무너무 수고하셨습니다💙
산학 협력 과제 진행을 위해 제품을 무료로 제공받아 작성되었습니다.
