사용자 액션 히트맵
기능 개편 안내
기존 페이지 로드 분석 기능이 사용자 액션 분석으로 개편되었습니다. 페이지 로드 이벤트뿐만 아니라 클릭, 터치 등 다양한 사용자 상호작용을 통합적으로 분석할 수 있도록 기능이 확장되었습니다.
홈 화면 > 프로젝트 선택 > 분석 > 사용자 액션 히트맵
사용자 액션 이벤트는 웹 애플리케이션을 방문한 최종 사용자가 페이지 로드를 완료하거나 클릭, 터치 등의 상호작용을 할 때 발생합니다. 이 이벤트는 히트맵 차트로 제공하고, 각 이벤트의 상세 정보는 타임라인 형식으로 확인할 수 있습니다. 이를 통해 웹 페이지의 성능 문제와 사용자 경험을 저해하는 요소를 파악할 수 있으며, 다음과 같은 정보를 포함합니다.
-
페이지 로드 이벤트
- 페이지 로드 이벤트 구간별 세부 시간 정보
- 로드한 리소스의 세부 정보
- 브라우저 에러 데이터
-
클릭/터치 이벤트
- 클릭 반응 시간
- 클릭 시 발생한 로드된 리소스 정보
- 클릭 시 발생한 에러 정보
사용자 액션 이벤트 목록 확인
단일 사용자 액션 이벤트를 분석할 수 있습니다. 사용자 액션 성능을 분석하기 위해 히트맵과 다양한 지표를 제공합니다.
-
사용자 액션 히트맵 위젯의 차트 영역을 드래그하세요.
-
드래그한 영역의 이벤트 목록은 사용자 액션 히트맵 아래에 사용자 액션 목록으로 나타나고, 페이지 그룹별로 화면 오른쪽의 페이지 그룹 목록에서 확인할 수 있습니다.
- 사용자 액션 목록의 페이지 URL에서 원하는 페이지 목록을 검색할 수 있습니다.
사용자 액션 히트맵
사용자 액션 히트맵 위젯은 시간에 따른 사용자 액션의 응답 시간을 분포도 차트로 표현합니다. 위젯의 차트 영역을 드래그하세요. 드래그한 영역의 사용자 액션 목록을 화면 아래에 표시합니다.
-
가로축은 사용자 액션 이벤트의 종료 시간입니다.
-
세로축은 사용자 액션 이벤트의 경과 시간(응답 시간)입니다.
-
하늘색 → 파란색 → 남색 순으로 정상 사용자 액션 이벤트 밀도를 표현합니다.
-
노란색 → 주황색 → 빨간색 순으로 에러 발생 사용자 액션 이벤트 밀도를 표현합니다. 에러 사용자 액션 이벤트는 이벤트 처리 중 브라우저 에러가 발생한 경우입니다.
사용자 액션 목록
사용자 액션 히트맵에서 드래그한 영역의 사용자 액션 이벤트들이 사용자 액션 목록에 나타납니다. 목록에서 각 항목의 가장 왼쪽에 
아이콘을 클릭하면, 사용자 액션 분석 상세 창이 나타납니다.
사용자 액션 목록은 다음 기본 정보를 포함합니다.
-
시작 시간: 사용자 액션 이벤트의 시작 시간
-
경과 시간: 사용자 액션 이벤트 완료까지 소요 시간
-
페이지 URL: 사용자 액션이 발생한 페이지 URL 경로
-
브라우저: 최종 사용자가 사용한 브라우저 종류
-
디바이스: 최종 사용자가 사용한 기기 종류
-
운영체제: 최종 사용자가 사용한 기기의 운영체제 종류
-
클라이언트 IP: 최종 사용자가 사용한 기기의 IP 주소
와탭은 클라이언트와 관련한 정보를 기본 저장합니다.
컬럼 정보 추가 및 수정
테이블에 다른 정보 컬럼을 추가하거나, 추가한 컬럼을 숨길 수도 있습니다. 사용자 액션 목록의 오른쪽 위의 
컬럼 설정 버튼을 클릭하세요.
사용자 액션 목록 필터링하기
사용자 액션 목록을 대상으로 검색어를 입력하고 일치하는 대상을 필터링할 수 있습니다. 조회를 원하는 항목을 선택한 후, 검색어를 입력하고 엔터키를 입력하거나 
을 클릭하세요.
- 페이지 URL
- 브라우저
- 디바이스
- 운영체제
- 클라이언트 IP
- 사용자 ID
페이지 그룹 목록 필터링하기
페이지 그룹 목록을 대상으로 필터링할 수 있습니다. 원하는 페이지 그룹 목록을 선택하세요.
사용자 액션 이벤트 상세 정보
사용자 액션 목록에서 각 항목 왼쪽의 아이콘을 클릭하면 사용자 액션 분석 상세 창이 나타납니다. 상세 창은 왼쪽의 이벤트 목록과 오른쪽의 상세 정보로 구성되어 있습니다. 사용자 액션의 성능을 분석하기 위해 다양한 지표를 제공하고, 성능에 영향을 주는 요소를 파악할 수 있습니다.
이벤트 목록
사용자 액션 분석 상세 창의 오른쪽에 선택한 시간 범위의 사용자 액션 이벤트가 목록으로 표시되며, 경과 시간 순으로 정렬됩니다. 목록에서 특정 이벤트를 클릭하면 오른쪽 패널에 해당 이벤트의 상세 정보가 표시됩니다.
-
응답 시간: 사용자 액션의 응답 시간 (ms)
-
페이지 URL: 사용자 액션이 발생한 페이지 URL
-
브라우저: 사용자가 사용한 브라우저 종류
-
디바이스: 사용자가 사용한 기기 종류
-
운영체제: 사용자가 사용한 운영체제
상세 정보
사용자 액션 분석 상세 창의 왼쪽에 선택한 이벤트의 상세 정보는 개요, 사용자 세션 분석, 세션 리플레이 탭을 클릭해 확인할 수 있습니다. 정보는 다음과 같이 구성됩니다.
기본 정보
-
페이지 URL: 이벤트가 발생한 페이지의 전체 URL
-
페이지 타이틀: 웹 페이지의 제목
-
사용자 에이전트: 브라우저와 운영체제의 상세 정보
-
브라우저/버전: 브라우저 종류와 버전
-
운영체제/버전: 운영체제 종류와 버전
-
디바이스: 사용 기기 종류 (desktop, mobile 등)
-
도시: 사용자의 접속 위치
-
세션 ID: 사용자 세션 식별자
-
클라이언트 IP: 사용자의 IP 주소
-
유효 연결 유형: 네트워크 연결 타입 (3g, 4g, wifi 등)
-
유효 대역폭: 네트워크 대역폭 정보
-
RTT: Round Trip Time (왕복 시간)
시간 정보
이벤트의 전체 경과 시간, 시작 시간, 종료 시간을 확인할 수 있습니다.
구간별 소요 시간 (타임라인 차트)
페이지 로드 이벤트는 구간별 소요 시간을 시각적으로 확인할 수 있습니다.
-
리다이렉트 시간: 페이지 리디렉션에 소요된 시간
-
요청 대기 시간: 서버 응답 대기 시간
-
다운로드 시간: 리소스 다운로드 시간
-
Time to first byte: 첫 바이트 수신 시간
-
Dom Interactive: DOM 상호작용 가능 시점
-
Dom Content Loaded: DOM 콘텐츠 로드 시간
-
Dom Complete: DOM 완료 시간
-
OnLoad 이벤트 시간: 페이지 로드 완료 시간
-
캐싱 시간: 캐시된 리소스 검색 시간
-
DNS 탐색: 도메인 조회 시간
-
TCP 연결 시간: TCP 연결 수립 시간
리소스 목록
이벤트 처리 과정에서 로드된 리소스들의 상세 정보를 제공합니다. 각 리소스는 타임라인 형태로 표시되어 로딩 순서와 소요 시간을 한눈에 파악할 수 있습니다.
-
이름: 리소스 파일명 또는 URL
-
경과 시간: 각 리소스의 로딩 시간
리소스 상세 정보
리소스 목록에서 특정 리소스를 클릭하면 해당 리소스의 상세 정보를 툴팁으로 확인할 수 있습니다. 리소스 상세 정보를 통해 성능 병목 구간을 정확히 파악하고, 최적화가 필요한 리소스를 식별할 수 있습니다.
-
리소스 타이밍 정보
-
캐싱 시간: 캐시된 리소스 검색 시간
-
DNS 탐색: 도메인 조회에 소요된 시간
-
연결 시간: 서버와의 연결 수립에 소요된 시간
-
요청 대기 시간: 서버 응답을 기다리는 시간 (TTFB)
-
다운로드 시간: 리소스 다운로드에 소요된 시간
-
경과 시간: 전체 리소스 로딩에 소요된 총 시간
-
-
리소스 정보
-
타입: 리소스 유형 (css, js, image 등)
-
크기: 리소스 파일 크기
-
Delivery Type: 전송 방식 (캐시 로드 등)
-
브라우저 에러 확인하기
브라우저 에러 데이터를 포함하고 있는 페이지 로드 이벤트의 경우 빨간색으로 표시됩니다. 리소스 목록에서 에러가 발생한 스텝을 확인할 수 있습니다.
사용자 세션 분석
사용자 세션을 기준으로 웹 페이지와 상호 작용하면서 발생시킨 이벤트 및 에러 등을 시간순으로 확인할 수 있습니다. 사용자 세션 분석에 대한 자세한 내용은 다음 문서를 참조하세요.
세션 리플레이
사용자가 웹 사이트에서 수행하는 모든 이벤트를 기록하고 재생할 수 있는 기능을 제공합니다. 세션 리플레이 기능을 통해 클릭, 스크롤, 입력, 페이지 전환 등의 사용자 행동을 재현할 수 있습니다. 이를 통해 사용자는 실제로 웹사이트와 어떻게 상호 작용하는지 정확히 파악할 수 있습니다.
-
타임라인 조작이 가능하므로, 이벤트를 클릭하면 세션 리플레이 플레이어의 타임라인이 해당 이벤트 시점으로 이동합니다.
-
상세 아이콘을 클릭하면 우측 드로워를 통해 이벤트 상세정보가 표시됩니다.
