사용자 액션 히트맵
기능 개편 안내
기존 페이지 로드 분석 기능이 사용자 액션 분석으로 개편되었습니다. 페이지 로드 이벤트뿐만 아니라 클릭, 터치 등 다양한 사용자 상호작용을 통합적으로 분석할 수 있도록 기능이 확장되었습니다.
홈 화면 > 프로젝트 선택 > 분석 > 사용자 액션 히트맵
사용자 액션 이벤트는 웹 애플리케이션을 방문한 최종 사용자가 페이지 로드를 완료하거나 클릭, 터치 등의 상호작용을 할 때 발생합니다. 이 이벤트는 히트맵 차트로 제공하고, 각 이벤트의 상세 정보는 타임라인 형식으로 확인할 수 있습니다. 이를 통해 웹 페이지의 성능 문제와 사용자 경험을 저해하는 요소를 파악할 수 있으며, 다음과 같은 정보를 포함합니다.
-
페이지 로드 이벤트
- 페이지 로드 이벤트 구간별 세부 시간 정보
- 로드한 리소스의 세부 정보
- 브라우저 에러 데이터
-
클릭/터치 이벤트
- 클릭 반응 시간
- 클릭 시 발생한 로드된 리소스 정보
- 클릭 시 발생한 에러 정보
사용자 액션 이벤트 목록 확인
단일 사용자 액션 이벤트를 분석할 수 있습니다. 사용자 액션 성능을 분석하기 위해 히트맵과 다양한 지표를 제공합니다.
-
사용자 액션 히트맵 위젯의 차트 영역을 드래그하세요.
-
드래그한 영역의 이벤트 목록은 사용자 액션 히트맵 아래에 사용자 액션 목록으로 나타나고, 페이지 그룹별로 화면 오른쪽의 페이지 그룹 목록에서 확인할 수 있습니다.
- 사용자 액션 목록의 페이지 URL에서 원하는 페이지 목록을 검색할 수 있습니다.
사용자 액션 히트맵
사용자 액션 히트맵 위젯은 시간에 따른 사용자 액션의 응답 시간을 분포도 차트로 표현합니다. 위젯의 차트 영역을 드래그하세요. 드래그한 영역의 사용자 액션 목록을 화면 아래에 표시합니다.
-
가로축은 사용자 액션 이벤트의 종료 시간입니다.
-
세로축은 사용자 액션 이벤트의 경과 시간(응답 시간)입니다.
-
하늘색 → 파란색 → 남색 순으로 정상 사용자 액션 이벤트 밀도를 표현합니다.
-
노란색 → 주황색 → 빨간색 순으로 에러 발생 사용자 액션 이벤트 밀도를 표현합니다. 에러 사용자 액션 이벤트는 이벤트 처리 중 브라우저 에러가 발생한 경우입니다.
히트맵 AI 분석
옵션바의 AI 분석 버튼을 클릭하면 히트맵의 분포를 WhaTap AI가 읽고 분석 결과를 알려 줍니다. 버튼은 아이콘만 표시되며 마우스를 올리면 이름을 툴팁으로 확인할 수 있습니다. 선택 영역이 있는지에 따라 분석 방식이 달라집니다.
-
영역을 선택하지 않은 경우: 조회한 구간의 히트맵 전체를 읽고 확인이 필요한 시간대와 응답 시간 구간을 제안합니다.
-
영역을 드래그한 경우: 선택한 영역에 포함된 이벤트를 분석해 느려진 원인 후보를 제시합니다. 선택 영역은 버튼 왼쪽에 표시되며, 표시된 항목의 X 아이콘을 클릭하면 선택을 해제할 수 있습니다.
영역을 드래그하면 기존과 같이 사용자 액션 목록이 함께 표시됩니다. AI 분석은 이 동작을 바꾸지 않습니다.
버튼이 비활성 상태이면 마우스를 올려 사유를 확인하세요.
| Message | Description |
|---|---|
| 데이터 로딩 중 | 히트맵 조회가 진행 중. 조회가 끝나면 활성 |
| 선택한 기간에 데이터가 없습니다. | 조회 구간에 이벤트가 없는 상태. 시간 범위를 넓혀 다시 조회 |
AI 분석의 공통 동작과 분석에 사용하는 데이터 범위는 다음 문서를 참고하세요.
사용자 액션 목록
사용자 액션 히트맵에서 드래그한 영역의 사용자 액션 이벤트들이 사용자 액션 목록에 나타납니다. 목록에서 각 항목의 가장 왼쪽에 
아이콘을 클릭하면, 사용자 액션 분석 상세 창이 나타납니다.
사용자 액션 목록은 다음 기본 정보를 포함합니다.
-
시작 시간: 사용자 액션 이벤트의 시작 시간
-
경과 시간: 사용자 액션 이벤트 완료까지 소요 시간
-
페이지 URL: 사용자 액션이 발생한 페이지 URL 경로
-
브라우저: 최종 사용자가 사용한 브라우저 종류
-
디바이스: 최종 사용자가 사용한 기기 종류
-
운영체제: 최종 사용자가 사용한 기기의 운영체제 종류
-
클라이언트 IP: 최종 사용자가 사용한 기기의 IP 주소
와탭은 클라이언트와 관련한 정보를 기본 저장합니다.
컬럼 정보 추가 및 수정
테이블에 다른 정보 컬럼을 추가하거나, 추가한 컬럼을 숨길 수도 있습니다. 사용자 액션 목록의 오른쪽 위의 
컬럼 설정 버튼을 클릭하세요.
사용자 액션 목록 필터링하기
사용자 액션 목록을 대상으로 검색어를 입력하고 일치하는 대상을 필터링할 수 있습니다. 조회를 원하는 항목을 선택한 후, 검색어를 입력하고 엔터키를 입력하거나 
을 클릭하세요.
- 페이지 URL
- 브라우저
- 디바이스
- 운영체제
- 클라이언트 IP
- 사용자 ID
페이지 그룹 목록 필터링하기
페이지 그룹 목록을 대상으로 필터링할 수 있습니다. 원하는 페이지 그룹 목록을 선택하세요.
목록에서 조사 순서 추천받기
사용자 액션 목록 위쪽의 AI 분석 버튼을 클릭하면 목록에 조회된 이벤트 가운데 먼저 확인할 항목을 WhaTap AI가 추천합니다. 느린 항목과 에러가 발생한 항목을 함께 고려한 표본을 사용하므로, 목록을 정렬해 위에서부터 훑는 것보다 원인 후보를 빠르게 좁힐 수 있습니다.
-
히트맵에서 영역을 드래그해 사용자 액션 목록을 표시하세요.
-
목록 위쪽의 AI 분석 버튼을 클릭하세요.
-
화면 오른쪽에 AI 분석 드로어가 열리고 추천 항목과 근거가 표시됩니다.
-
추천 항목을 클릭하면 해당 이벤트의 사용자 액션 분석 상세 창이 열립니다.
-
추천은 목록의 정렬 순서나 적용한 필터를 바꾸지 않습니다.
-
URL의 쿼리스트링 값과 사용자 ID는 가린 상태로 분석에 사용됩니다.
버튼이 비활성 상태이면 마우스를 올려 사유를 확인하세요.
| Message | Description |
|---|---|
| 데이터 로딩 중 | 목록 조회가 진행 중. 조회가 끝나면 활성 |
| 수집된 로그가 없습니다. | 드래그한 영역에 이벤트가 없는 상태. 다른 영역을 선택해 다시 조회 |
AI 분석의 공통 동작과 분석에 사용하는 데이터 범위는 다음 문서를 참고하세요.
사용자 액션 이벤트 상세 정보
사용자 액션 목록에서 각 항목 왼쪽의 아이콘을 클릭하면 사용자 액션 분석 상세 창이 나타납니다. 상세 창은 왼쪽의 이벤트 목록과 오른쪽의 상세 정보로 구성되어 있습니다. 사용자 액션의 성능을 분석하기 위해 다양한 지표를 제공하고, 성능에 영향을 주는 요소를 파악할 수 있습니다.
이벤트 목록
사용자 액션 분석 상세 창의 오른쪽에 선택한 시간 범위의 사용자 액션 이벤트가 목록으로 표시되며, 경과 시간 순으로 정렬됩니다. 목록에서 특정 이벤트를 클릭하면 오른쪽 패널에 해당 이벤트의 상세 정보가 표시됩니다.
-
응답 시간: 사용자 액션의 응답 시간 (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 연결 수립 시간
개요 AI 분석
개요 영역 오른쪽 위의 AI 분석 버튼을 클릭 하면 선택한 이벤트의 구간별 소요 시간과 리소스 목록을 WhaTap AI가 읽고 어느 구간이 전체 응답 시간을 끌어올렸는지 알려 줍니다.
-
분석에는 화면에 이미 표시된 정보만 사용하므로 추가 조회가 발생하지 않습니다.
-
리소스는 소요 시간이 긴 항목을 우선해 일부만 전달하며, 전달한 건수와 전체 건수를 함께 표시합니다.
-
APM 연계 트랜잭션이 있는 경우 연계 여부를 함께 고려합니다.
-
목록에서 다른 이벤트를 선택하면 이전 이벤트의 분석 결과는 지웁니다.
AI 분석의 공통 동작과 분석에 사용하는 데이터 범위는 다음 문서를 참고하세요.
리소스 목록
이벤트 처리 과정에서 로드된 리소스들 의 상세 정보를 제공합니다. 각 리소스는 타임라인 형태로 표시되어 로딩 순서와 소요 시간을 한눈에 파악할 수 있습니다.
-
이름: 리소스 파일명 또는 URL
-
경과 시간: 각 리소스의 로딩 시간
리소스 상세 정보
리소스 목록에서 특정 리소스를 클릭하면 해당 리소스의 상세 정보를 툴팁으로 확인할 수 있습니다. 리소스 상세 정보를 통해 성능 병목 구간을 정확히 파악하고, 최적화가 필요한 리소스를 식별할 수 있습니다.
-
리소스 타이밍 정보
-
캐싱 시간: 캐시된 리소스 검색 시간
-
DNS 탐색: 도메인 조회에 소요된 시간
-
연결 시간: 서버와의 연결 수립에 소요된 시간
-
요청 대기 시간: 서버 응답을 기다리는 시간 (TTFB)
-
다운로드 시간: 리소스 다운로드에 소요된 시간
-
경과 시간: 전체 리소스 로딩에 소요된 총 시간
-
-
리소스 정보
-
타입: 리소스 유형 (css, js, image 등)
-
크기: 리소스 파일 크기
-
Delivery Type: 전송 방식 (캐시 로드 등)
-
브라우저 에러 확인하기
브라우저 에러 데이터를 포함하고 있는 페이지 로드 이벤트의 경우 빨간색으로 표시됩니다. 리소스 목록에서 에러가 발생한 스텝을 확인할 수 있습니다.
사용자 세션 분석
사용자 세션을 기준으로 웹 페이지와 상호 작용하면서 발생시킨 이벤트 및 에러 등을 시간순으로 확인할 수 있습니다. 사용자 세션 분석에 대한 자세한 내용은 다음 문서를 참조하세요.
세션 리플레이
사용자가 웹 사이트에서 수행하는 모든 이벤트를 기록하고 재생할 수 있는 기능을 제공합니다. 세션 리플레이 기능을 통해 클릭, 스크롤, 입력, 페이지 전환 등의 사용자 행동을 재현할 수 있습니다. 이를 통해 사용자 는 실제로 웹사이트와 어떻게 상호 작용하는지 정확히 파악할 수 있습니다.
-
타임라인 조작이 가능하므로, 이벤트를 클릭하면 세션 리플레이 플레이어의 타임라인이 해당 이벤트 시점으로 이동합니다.
-
상세 아이콘을 클릭하면 우측 드로워를 통해 이벤트 상세정보가 표시됩니다.
