?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

이번 포스팅부터 몇 회에 걸쳐

UX 평가에 매우 유용한 도구인

Click 혹은 Scroll 시각화를

구글 태그 매니저와 구글 애널리틱스를 활용하여

직접 측정하는 방법을 알아보겠습니다.

 

 

웹 사이트의 UI와 관련된 업무를 하다보면

UX에 관한 고민이 시작될 수 밖에 없기 때문입니다.

 

서비스 제공자가 방문 고객들에게

push 하고 싶은 서비스 혹은 컨텐츠와

 

방문 고객들이 선호하는 서비스 혹은 컨텐츠는

다른 경우가 매우 많습니다.

 

서비스 제공자가 push 하고 싶은 서비스 혹은 컨텐츠를

방문 고객들에게 자연스럽게 제시하는 방법을 찾는

유용한 도구 중에 하나가 Heatmap 시각화입니다.

 

히트맵_웹사이트.png

- Heatmap 시각화 도구의 강자 hotjar의 데모 화면

 

Heatmap으로 웹사이트 화면을 시각화하면

UX 관련 여러가지 시사점을 분석할 수 있습니다.

 

특히, 

처음에 결과 보고서를 보면 

기대 이상으로 자동화된 UI 측정 기술에 감탄하기도 합니다.

 

그런데

 

1.

Heatmap을 이용한 시각화 산출물을

반복 분석하다 보면 몇 가지 고민에 빠질 수 있습니다.

 

*. 번거로운 비용 지불 절차

 

흥미로운 결과가 나올 수도 있겠다는 느낌이 들어서

설명력이 충분한 데이터를 얻으려면 비용 결제를 해야 합니다.

 

상용 Heatmap 시각화 서비스를 무료 체험할 때는 간단하지만 

새로운 서비스의 비용을 결제하는 절차는
대부분의 회사에서 번거롭습니다.
 
*. 몇번 반복하면 뻔해지는 결론
 
최초에 Heatmap 시각화를 작동시켜 보면
그 동안 몰랐던 사용자의 마우스 행태를 이해해서
UX를 이전보다 현격히 개선하기도 합니다.
 
그런데
지구 행성에서 한글을 사용하는 사람들의 행동이
생각보다 다양하지 않기 때문에
몇 가지 주요 UX 시사점을 발견하고 이해한 후에는
고만고만한 결과들이 반복되곤 합니다.
 
그래서
비용 지불 절차가 더 번거롭게 느껴지곤 합니다.
 
매우 정교한 두 세번의 테스트로도
충분한 경우가 많기 때문에
아무리 살펴봐도 이해하기 어려운 부가 기능과
수 개월 약정 사용과 관련된 비용 집행을 위한
기안 작성 절차가 더 길고 복잡하게 느껴지곤 합니다.
 
일반 방문자의 사이트 체류 행태는
그 원리가 비슷하기 때문에
 
왠만큼 도전적인 UI가 아니라면
사실, 최초의 Heatmap 시각화를 통해 얻은 시사점으로
사용자 행태를 충분히 짐작하는 경우도 많습니다.
 
*. 다층 레이어나 반응형 Tile에서 애매해지는 결론
 
Heatmap 서비스 제공사들이
부지런히 시각화 기술을 개선하고 있지만
UI 기술의 발전 속도는 훨씬 더 빠릅니다.
 
복잡한 팝업 레이어 구조 혹은
브라우저의 화면 폭에 따라서 움직이는
동적인 Tile 구조의 레이아웃에 대해서
Heatmap이 제시하는 결론은
오히려 더 혼란스러울 뿐입니다.
 

레이어팝업_히트맵_시각화.png

- 모든 페이지에서 레이어 팝업 표시되는 사이트의 Heatmap 시각화 결론은 난해해집니다.

 
그래서
비용 지불 절차가 더 번거로워지곤 합니다.
 
Heatmap을 정확하게 시각화하려면
Heatmap이 잘 작동하는 UI 구조를 잡아야 하는데
 
애초에 Heatmap을 시각화 하려던 이유가
Heatmap이 정확하게 시각화되는 조건 확인이 아니고
현재 UI에서 방문 고객들의
UX를 이해하는 것이라는 역설에 빠지기 때문입니다.
 
*. 마우스 커서와 시선은 같이 움직인다?
 
Heatmap 시각화의 가치는 아래와 같은
학술적인 주장에 근거하는 경우가 많습니다.
 
"카네기 멜론 대학 교수가 2001년에 발표한 논문에 의하면,
마우스와 시선의 움직임은 84~88% 상관관계가 있다고 언급되고 있습니다."
- Source: https://sitest.jp/kr/heatmap/
 
얼핏보면 매우 설득력이 높은 연구 결과를 인용한 것 같습니다.
 
하지만,
위 인용의 근본적인 문제 중 하나는
2022년 기준으로 21년 전인 2001년의
UX 연구라는데 있습니다.
 
당시의 연구 대상이었을 가능성이 높은
Windows 98에 적용된 UI 프레임웍에서
아이트래커를 사용하지 않고
마우스 커서의 움직임을
Heatmap으로 시각화시키기만 해도
사용자 시선 이동 설명력이 높다는 발견은
 
윈도우즈98.png

- 이 화면이 익숙하시다면 X 세대일 가능성이 높습니다.

 
당시에는 매우 의미있는 연구 결과일 수 있습니다.
 
왜냐하면
당시에도 지금과 동일하게
아이트래커를 사용한 UX 평가는 
비용이 매우 비쌌기 때문입니다.
 
하지만
브라우저에서 사용성이 정교하게 검증된
수 많은 오픈 소스 UI 프레임웍이 존재하고
 
마우스를 아예 사용하지 않는 스마트폰 시대에서는
그 소중한 의미가 퇴색되었을 가능성이 있습니다.
 
2.
비용 지급 기안서 작성과 승인이 스크립트 설치보다 어려운 경우도 많습니다.
 
유료 Heatmap 서비스를 이용하면
간단한 스크립트만 삽입하여
렌더링된 웹 사이트 화면 위에
시각적으로 Heatmap을 확인할 수 있어서
훨씬 더 간단하고 직관적이지만
 
새로운 거래처에 비용을 지급하는 과정은
Heatmap 스크립트 설치보다 훨씬 더 복잡한데
 
테스트 상황에 따라 해석이 모호하거나
활용 가치가 빠르게 떨어지는 순간은
생각보다 일찍 찾아오는 경우가 많습니다.
 
저희 싱글뷰는 특히
의뢰하신 클라이언트 회사의 담당분들께서
기안서와 전표를 작성하는 업무에
상당한 시간을 보내시는 경우를 많이 봤습니다.
 
그래서
여러가지 내부 상황을 관리하느라
가뜩이나 머리가 아픈
발주처의 담당자분들께서
 
최첨단의 유명한 유료 Heatmap 솔루션으로
현재 웹사이트의 UX를 평가하는 것보다
훨씬 더 선호하시는 방법은
 
시각적으로 화려하지 않아도
부가 절차를 거치지 않고
비슷한 수준의 UX 평가 지표를
제공해 드리는 것이었습니다.
 
경영진에게 중간 보고할 때
화려한 Heatmap을 사용하면
화룡점정이라는 확신이 든다면
 
그까짓 수십만원의 비용을 
기안 처리하는 것은 전혀 망설여지지 않습니다.
 
이 비용을 왜 써야 하는지
모르는 상태에서 기안 처리를 하면
누구다 망설여질 뿐입니다.
 
3.
DOM + 구글 태그 매니저 + 구글 애널리틱스로 더 정확하게 관찰할 수 있습니다.
 
이러한 현실의 문제를
간단하게 해결하는 방법을 고민하던 중
 
구글 태그 매니저와 구글 애널리틱스를 이용하여
명시적으로 태깅된 모든 DOM 요소의
click 이벤트를 측정하여 보고하는 설정법을 구성했습니다.
 

구글태그매니저.png

 

구글 태그 매니저를 활용하면

Heatmap 시각화에 필요한 로우 데이터가

생각보다 간단하지만 매우 자세하게 추출됩니다.

 

사실,

구글 태그 매니저로 이러한 지표를 추출해야 했던 이유는

구글 애널리틱스 구버전에서 제공하던

In-Page Analytics 기능이

Google Analytics 4에서 중단된 것으로 보이기 때문입니다.

 

인페이지_애널리틱스.png

 

구글 측에서는

2023년 7월 1일부터 구글 애널리틱스 구버전인

Univeral Analytics는 데이터 수집이

중단될 것이라고 공지했습니다.

 

구글애널리틱스_인사이트_보고서.png

 

Universal Analytics가 무료로 제공하는

위의 Enhanced link attribution 화면을 보면

유료 Click Heatmap 서비스보다 못한 점이 없습니다.

 

오히려

link attribution에 정확히 CTR이 태깅되기 때문에

모호한 색상 강도로 표시되는 heatmap보다

더 정확하게 분석할 수도 있습니다.

 

하지만 안타깝게도

현재의 구글 애널리틱스 4를 살펴보면

유용한데 승계되지 않는 기능들이 꽤 있습니다.

 

더하여,

Universal Analytics는 신규 계정 생성도 중단되었기 때문에

2023년 7월 1일 이전에

구글 애널리틱스 4에 In-Page Analytics 기능이

추가되기만 기다릴 수도 없는 상황입니다.

 

뜻이 있는 곳에 길이 있다고 합니다.

 

Universal Analytics의 In-Page Analytics를

더 이상 사용할 수 없다고 해도

 

구글 태그 매니저로 

Universal Analytics의 In-Page Analytics를
흉내낼 수 있는 원리는

모든 요소 - 클릭 - 트리거를 적절히 활용하면 끝입니다.

 

다음 포스팅에서 하나씩 살펴보겠습니다.

 

다음 포스팅 보러가기

?

  1. 31
    Jul 2023
    10:47

    [NCP] cloud search 기본 설정 방법

    프로젝트의 필요에 의해서 PHP기반인 Xpress Engine의 사이트 전체 검색 성능을 강화하기 위해 네이버 클라우드 서치를 검토했습니다. https://www.ncloud.com/product/analytics/cloudSearch 이번 포스팅에서는 네이버 클라우드 서치의 매력적인 성능을 PHP ...
    Bysingleview.co.kr Views714
    Read More
  2. 29
    May 2022
    07:45

    Google Analytics 4에서 self-referral을 처리하는 방식

    지난 포스팅에서는 구글 애널리틱스 4에서 List Unwanted Referrals 항목을 설정하여 특정 도메인을 source = referral에서 제외하는 방법을 알아봤습니다. 지난 포스팅 보러가기 이번 포스팅에서는 밀접하게 연관되 주제인 Google Analytics 4의 self-referra...
    Bysingleview.co.kr Views2531
    Read More
  3. 22
    May 2022
    11:18

    Google Analytics 4의 Referral에서 특정 도메인 제외하는 방법

    구글 애널리틱스 4의 [획득=Acquisition] 보고서를 살펴보면 referral이라는 단어가 자주 보입니다. referral 트래픽을 분석하다 보면 가끔씩 특정 도메인 주소가 referral로 분류되지 않아야 분석 업무가 더 수월해 지는 경우가 있습니다. 유입 트래픽 분석 ...
    Bysingleview.co.kr Views2442
    Read More
  4. 08
    May 2022
    17:57

    구글 태그 매니저로 웹 사이트 히트맵을 추출하는 법 - 6

    지난 포스팅에서는 모바일 페이지에서 불필요해 보이는 섹션을 제거하고 원본 페이지와 AB split test를 시행해보니 예상과 달리, 회원 가입 전환율이 오히려 하락한 상황까지 살펴봤습니다. 지난 포스팅 보러가기 1. UX 테스트는 하는 것이 하지 않는 것보다 ...
    Bysingleview.co.kr Views1833
    Read More
  5. 01
    May 2022
    11:32

    구글 태그 매니저로 웹 사이트 히트맵을 추출하는 법 - 5

    온라인으로 컨텐츠 서비스를 확장 중이지만 재무 성과가 기대에 미치지 못해서 고민에 빠진 전통 잡지사의 현황을 측정하기 위해 Click Heatmap과 Scroll Depth %라는 측정 도구를 적용하기로 결정한 의사 결정 과정을 지난 포스팅에서 간단히 알아봤습니다. ...
    Bysingleview.co.kr Views1938
    Read More
  6. 23
    Apr 2022
    13:49

    구글 태그 매니저로 웹 사이트 히트맵을 추출하는 법 - 4

    구글 태그 매니저를 이용해서 Click Heatmap과 Scroll depth %의 로우 데이터를 직접 더 정교하게 수집하는 방법을 지난 포스팅에서 자세히 알아보았습니다. 지난 포스팅 보러가기 이제 수집된 로우 데이터를 분석해서 시행 방안을 개선해야할 차례입니다. 이 ...
    Bysingleview.co.kr Views963
    Read More
  7. 17
    Apr 2022
    17:32

    구글 태그 매니저로 웹 사이트 히트맵을 추출하는 법 - 3

    지난 포스팅에서는 유료 솔루션을 사용하지 않고 Click Heatmap의 로우 데이터를 직접 더 정교하게 수집하는 방법 중에서 저수준 자바스크립트 API로 구글 애널리틱스에 직접 전송하는 방식을 자세히 알아봤습니다. 이전 포스팅 보러가기 이번 포스팅에서는 구...
    Bysingleview.co.kr Views902
    Read More
  8. 10
    Apr 2022
    13:48

    구글 태그 매니저로 웹 사이트 히트맵을 추출하는 법 - 2

    지난 포스팅에서는 현재 웹사이트의 UX 평가 과정에서 Click Heatmap이 매우 유용한 도구이지만 몇 가지 분명한 한계 때문에 체험판을 넘어서는 기능을 이용하기 위해 비용을 지불하는 절차가 매우 번거롭게 느껴질 수 있는 이유를 간략히 알아봤습니다. 이전 ...
    Bysingleview.co.kr Views762
    Read More
  9. 03
    Apr 2022
    14:07

    구글 태그 매니저로 웹 사이트 히트맵을 추출하는 법 - 1

    이번 포스팅부터 몇 회에 걸쳐 UX 평가에 매우 유용한 도구인 Click 혹은 Scroll 시각화를 구글 태그 매니저와 구글 애널리틱스를 활용하여 직접 측정하는 방법을 알아보겠습니다. 웹 사이트의 UI와 관련된 업무를 하다보면 UX에 관한 고민이 시작될 수 밖에 ...
    Bysingleview.co.kr Views871
    Read More
  10. 27
    Mar 2022
    17:02

    Xpress Engine 1.11.6을 PHP 8.0으로 마이그레이션 완료

    프로젝트의 필요에 의해서 우연히 Xpress Engine 1.11.6을 PHP 8.0으로 마이그레이션하게 되었습니다. 아래의 페이지에서 PHP 8.0에 포팅된 Xpress Engine 1.11.6을 살펴보시고 다운로드하실 수 있습니다. http://singleview.co.kr/appstore/20011 정확히는 저...
    Bysingleview.co.kr Views484
    Read More
  11. 13
    Nov 2021
    15:30

    구글 데이터 스튜디오를 이용해서 애널리틱스 4의 구매 전환율 확인하는 방법

    신버전인 구글 애널리틱스 4는 구버전인 유니서벌 애널리틱스에 비해서 데이터 모델을 근본적으로 혁신해서 더 강력하고 유연한 기능을 제공하지만 구버전인 유니버설 애널리틱스에 비해서 의외의 약점이 있습니다. 이번 포스팅에서는 신버전인 구글 애널리틱...
    Bysingleview.co.kr Views1270
    Read More
  12. 06
    Nov 2021
    11:26

    구글 애널리틱스 4의 구매 전환 FUNNEL 보고서 활용법 - 마지막

    이번 포스팅에서는 Explorer 화면으로 접근하실 수 있는 FUNNEL 보고서를 활용하는 사례를 살펴보겠습니다. 지난 포스팅에서는 구글 애널리틱스 4의 Explorer 화면 중 Tab Settings 탭을 자세히 알아봤습니다. Explorer 화면 중 Tab Settings 탭 알아보기 그런...
    Bysingleview.co.kr Views904
    Read More
  13. 30
    Oct 2021
    15:01

    구글 애널리틱스 4의 구매 전환 FUNNEL 보고서 활용법 - 2

    지난 포스팅에서는 구글 애널리틱스 4의 Explorer 화면 중 Variables 탭을 자세히 알아봤습니다. Explorer 화면 중 Variables 탭 알아보기 이번 포스팅에서는 Explorer 화면 중 Tab Settings 탭을 살펴보겠습니다. 1. Tab Settings 탭의 속성 이해하기 이 탭은...
    Bysingleview.co.kr Views951
    Read More
  14. 24
    Oct 2021
    06:34

    구글 애널리틱스 4의 구매 전환 FUNNEL 보고서 활용법 - 1

    오늘은 구글 애널리틱스 4의 구매 전환 FUNNEL 보고서를 생성하는 방법을 살펴 보겠습니다. 지금까지 gaectk.js와 구글 태그 매니저를 이용해서 구글 애널리틱스 4(=신버전), 유니버설 애널리특스(=구버전)의 이커머스 데이터를 통합하여 수집하는 설정 방법을...
    Bysingleview.co.kr Views887
    Read More
  15. 16
    Oct 2021
    09:44

    구글 애널리틱스 4의 전자상거래 측정 방식을 알아보세요. - Google Analytics 4 + GTM + gaectk.js

    이번 포스팅에서는 구글 태그 매니저를 이용해서 구글 애널리틱스 4(=신버전)의 이커머스 데이터 수집 설정 방법을 살펴보겠습니다. 동일한 상황에서 유니버설 애널리틱스(=구버전)의 이커머스 데이터 수집 설정 방법이 궁금하시다면 전 포스팅을 확인해 주세...
    Bysingleview.co.kr Views976
    Read More
  16. 05
    Oct 2021
    11:28

    구글 애널리틱스 4의 전자상거래 측정 방식을 알아보세요. - Universal Analytics + GTM + gaectk.js

    지금까지 구글 애널리틱스의 이커머스 데이터 수집 방식에서 유니버설 애널리틱스와 구글 애널리틱스 4 구글 태그 매니저의 복잡한 상호 관계에 대해서 정확히 이해하기 위해 상당히 많은 시간을 할애했습니다. 이제 구글 태그 매니저를 이용해서 유니버설 애...
    Bysingleview.co.kr Views623
    Read More
  17. 26
    Sep 2021
    20:01

    구글 애널리틱스 4의 전자상거래 측정 방식을 알아보세요. - 2

    이전 포스팅에서는 이커머스 데이터 수집 기능과 관련된 유니버설 애널리틱스와 구글 애널리틱스 4의 같은 점과 다른 점을 개략적으로 살펴봤습니다. 이전 포스팅 보러 가기 더하여, 유니버설 애널리틱스와 구글 애널리틱스 4의 이벤트 데이터 모델을 충분히 ...
    Bysingleview.co.kr Views500
    Read More
  18. 22
    Sep 2021
    12:59

    구글 애널리틱스 4의 전자상거래 측정 방식을 알아보세요. - 1

    지금까지 유니버설 애널리틱스와 구글 애널리틱스 4의 이벤트 데이터 모델을 자세히 살펴 본 이유는 결국 이커머스 데이터를 수집하고 분석하기 위한 기초 지식이었다고 해도 과언이 아닙니다. 구글 애널리틱스의 버전과 무관하게 이커머스 데이터도 이벤트를 ...
    Bysingleview.co.kr Views995
    Read More
  19. 12
    Sep 2021
    09:34

    구글 애널리틱스 4의 이벤트 측정 방식을 알아보세요. - 5

    이제 Google Analytics 4의 Custom event를 살펴볼 차례입니다. 만약 Recommended Events의 개념을 머리속으로 정확히 떠올리실 수 없다면 이전 포스팅을 확인하셔야 합니다. 이전 포스팅 보러 가기 Universal Analytics에 익숙한 개발자라면 Google Analytics...
    Bysingleview.co.kr Views821
    Read More
  20. 04
    Sep 2021
    20:44

    구글 애널리틱스 4의 이벤트 측정 방식을 알아보세요. - 4

    Universal Analytics는 session base의 Analytics였습니다. 하지만 Google Analytics 4는 event base의 Analytics로 변신했습니다. 그래서 Google Analytics 4를 이해하는 노력은 Google Analytics 4가 제공하는 다양한 기본 혹은 사용자 정의 이벤트를 이해하...
    Bysingleview.co.kr Views961
    Read More
Board Pagination Prev 1 2 3 Next
/ 3
SEARCH