본문으로 건너뛰기

AJAX 히트맵

Asynchronous JavaScript and XML(AJAX)는 비동기 방식으로 데이터를 교환하며 웹 페이지를 업데이트하는 기술입니다. AJAX는 전체 페이지를 다시 로드하지 않고 페이지 일부만 업데이트하는 좀 더 복잡한 웹페이지를 만들 수 있게 해줍니다. 또한 AJAX를 사용하면 웹페이지 일부를 다시 불러들이는 동안에도 코드가 계속 실행되어, 비동기식으로 작업할 수 있습니다.

AJAX는 사용자 경험을 개선하고 서버로의 요청을 줄이는 등의 장점을 가지고 있습니다. 그러나 AJAX는 브라우저에서 실행되는 JavaScript 코드로 구현되기 때문에 다음과 같은 이유에서 모니터링이 필요합니다.

  • AJAX 요청이 제대로 처리되는지 확인해야 합니다.

  • AJAX 요청으로 인한 성능 저하를 파악해야 합니다.

  • 네트워크 지연, 다운로드 시간 등을 포함해 사용자 체감 성능을 파악해야 합니다.

브라우저 모니터링에서 제공하는 AJAX 히트맵 메뉴에서는 시간에 따른 AJAX 이벤트의 응답 시간을 히트맵 차트로 확인할 수 있습니다. 또한 각 이벤트에 대한 상세 정보를 조회할 수 있습니다. 제공하는 정보는 다음과 같습니다.

  • AJAX 이벤트 구간별 세부 시간 정보

  • AJAX 요청 URL 및 호출 페이지 정보 등

  • 에러 메시지 및 상태 코드

기본 화면 안내​

AJAX 히트맵

AJAX Hitmap

시간에 따른 AJAX 이벤트의 응답 시간을 분포도 차트로 표현하는 위젯입니다.

  • 가로축은 AJAX 이벤트의 종료 시간입니다.

  • 세로축은 AJAX 이벤트의 경과 시간입니다.

  • 하늘색 → 파란색 → 남색 순으로 정상 AJAX 이벤트를 표현합니다.

  • 노란색 → 주황색 → 빨간색 순으로 에러 발생 AJAX 이벤트를 표현합니다. 에러 AJAX 이벤트는 상태 코드가 0이거나 400 이상인 경우입니다. 상태 코드가 0이면 브라우저에서 서버 쪽으로 요청이 전달되지 않은 경우입니다.

AJAX 목록​

AJAX Hitmap

AJAX 히트맵 차트의 일부 영역을 드래그하면, 드래그한 영역의 AJAX 이벤트 목록과 상세 정보를 확인할 수 있는 AJAX 분석 창이 나타납니다.

다음은 테이블의 컬럼 항목에 대한 설명입니다.

  • AJAX URL: AJAX 이벤트 URL

  • 시작 시간: AJAX 요청을 시작한 시간

  • 경과 시간: AJAX 이벤트 완료까지의 소요 시간

  • 페이지 URL: AJAX 이벤트를 호출한 페이지의 URL

  • 상태 코드: AJAX 이벤트의 응답 상태 코드

  • 에러 메시지: 상태 코드가 0 또는 400 이상인 경우 AJAX 응답값(statusText)

    노트

    상태 코드가 0 또는 400 이상인 AJAX 이벤트는 목록에서 빨간색으로 표시됩니다.

  • 브라우저: 최종 사용자가 사용한 브라우저의 종류

노트

컬럼 추가 버튼을 이용해 추가할 수 있는 컬럼 항목에 대한 자세한 내용은 다음 문서를 참조하세요.

AJAX 이벤트 상세 정보 확인하기​

AJAX 분석 창에서 각 항목을 선택하면 상세 내용을 조회할 수 있는 AJAX 정보 창이 화면 오른쪽에 나타납니다.

AJAX 이벤트 상세 정보

AJAX 이벤트를 불러오는 과정 중 구간별 소요 시간을 그래프 차트로 제공합니다. 이를 통해 AJAX 로드 과정 중 느린 구간을 파악하고 개선하는 데 활용할 수 있습니다.

에러가 발생한 AJAX 목록만을 확인하려면 AJAX 정보 창의 왼쪽 위에 전체 선택 상자에서 에러를 선택하세요.

AJAX 정보​

AJAX 이벤트의 속성 정보를 확인할 수 있습니다. AJAX 요청 URL, 최종 사용자의 접속 환경, 접속 페이지 정보, 사용자 ID, 세션 ID, 클라이언트 IP 등의 정보를 조회할 수 있습니다.

노트

와탭은 클라이언트와 관련한 정보를 기본 저장합니다.

AJAX 타이밍 정보​

AJAX 이벤트를 불러오는 과정을 다음 단계로 구분하고, 구간별 소요 시간을 파악할 수 있습니다.

  • 리다이렉션 시간: 브라우저가 AJAX 요청 시 리다이렉션에 소요한 시간

  • 캐싱 시간: 브라우저가 캐시된 AJAX 리소스를 검색하는 데 소요한 시간

  • DNS 탐색: 브라우저가 AJAX 요청 도메인을 조회하는데 소요한 시간

  • 연결 시간: AJAX 요청 대상 서버와 TCP 연결을 설정하는데 소요된 시간

  • SSL 시간: SSL/TLS 핸드셰이크를 완료하는 데 소요된 시간

  • 요청 대기 시간: 브라우저의 HTTP 요청 시작 시간부터 서버가 요청을 수신하고 응답을 시작하는 시간까지 소요된 시간으로, 서버 영역의 트랜잭션 처리 시간이 이 구간에 포함됩니다.

  • 다운로드 시간: 브라우저가 서버로부터 AJAX 응답 값을 다운로드하는 데 소요한 시간

사용자 세션 분석​

사용자 세션 분석

사용자 세션을 기준으로 웹 페이지와 상호 작용하면서 발생시킨 이벤트 및 에러 등을 시간순으로 확인할 수 있습니다. 사용자 세션 분석에 대한 자세한 내용은 다음 문서를 참조하세요.

세션 리플레이​

사용자가 웹 사이트에서 수행하는 모든 이벤트를 기록하고 재생할 수 있는 기능을 제공합니다. 세션 리플레이 기능을 통해 클릭, 스크롤, 입력, 페이지 전환 등의 사용자 행동을 재현할 수 있습니다. 이를 통해 사용자는 실제로 웹사이트와 어떻게 상호 작용하는지 정확히 파악할 수 있습니다.

  • 타임라인 조작이 가능하므로, 이벤트를 클릭하면 세션 리플레이 플레이어의 타임라인이 해당 이벤트 시점으로 이동합니다.

  • 상세 아이콘 상세 아이콘을 클릭하면 우측 드로워를 통해 이벤트 상세정보가 표시됩니다.

세션 리플레이

노트

참고 문서

  • 에이전트 옵션을 통해 세션 리플레이 기능을 적용하는 방법은 다음 문서를 참고하세요.

  • 세션 리플레이 기능 사용에 대한 자세한 내용은 다음 문서를 참고하세요.

AJAX 목록 필터링하기​

AJAX 목록을 대상으로 검색어를 입력하고 일치하는 대상을 필터링할 수 있습니다. 원하는 조회 기준을 선택한 다음 검색어를 입력하세요. 엔터키를 누르거나 검색 아이콘 버튼을 선택하면 필터링된 결과를 확인할 수 있습니다.

목록 필터링하기

필터링을 위해 선택할 수 있는 조회 기준은 다음과 같습니다.

  • AJAX URL
  • 페이지 URL
  • 브라우저
  • 운영체제
  • 디바이스
  • 클라이언트 IP
  • 사용자 ID

테이블 컬럼 설정하기​

AJAX 목록에서 테이블 헤더 컬럼을 감추거나 원하는 항목을 추가할 수 있습니다. 컬럼 순서를 변경할 수도 있습니다. 컬럼 설정 버튼을 선택하세요.

컬럼 설정

노트

  • 설정을 완료한 다음에는 확인 버튼을 선택해야 설정 사항이 테이블에 반영됩니다.

  • 숫자 3 검색란에 텍스트를 입력해 원하는 컬럼 항목을 검색할 수 있습니다. 입력한 텍스트와 매칭되는 컬럼 항목만 표시됩니다.

컬럼 추가하기​

숫자 1 목록에서 테이블 헤더 컬럼으로 추가할 항목을 선택하세요. 모든 항목을 추가하려면 전체 선택을 선택하세요. 추가할 수 있는 컬럼 항목은 다음과 같습니다.

컬럼 이름설명
클라이언트 IP최종 사용자가 사용한 기기의 IP 주소
AJAX 중단브라우저 레벨에서 AJAX 요청을 중단한 경우 true로 표시
유저 에이전트브라우저 에이전트가 수집한 최종 사용자의 유저 에이전트 문자열
크기AJAX 응답값에 대한 용량, 압축이 해제된 실제 용량을 의미
국가최종 사용자가 위치한 국가 코드
도시최종 사용자가 위치한 도시 이름
다운로드 시간브라우저가 서버로부터 AJAX 응답 값을 다운로드하는 데 소요한 시간
디바이스최종 사용자가 사용한 기기의 종류
리다이렉션 시간브라우저가 AJAX 요청 시 리다이렉션에 소요한 시간
사용자 ID임의로 부여한 최종 사용자의 ID
세션 ID최종 사용자의 세션 ID
연결 시간AJAX 요청 대상 서버와 TCP 연결을 설정하는데 소요된 시간
요청 대기 시간브라우저의 HTTP 요청 시작 시간부터 서버가 요청을 수신하고 응답을 시작하는 시간까지 소요된 시간
브라우저최종 사용자가 사용한 브라우저의 종류
운영체제최종 사용자가 사용한 기기의 운영체제 종류
종료 시간AJAX 이벤트 종료 시간
캐싱 시간브라우저가 캐시된 AJAX 리소스를 검색하는 데 소요한 시간
페이지 타이틀브라우저로 접속한 HTML 페이지의 제목(title)
DNS 탐색브라우저가 AJAX 요청 도메인을 조회하는데 소요한 시간
SSL 시간SSL/TLS 핸드셰이크를 완료하는 데 소요된 시간
유효 연결 유형브라우저가 페이지를 접속한 후에 측정한 네트워크 성능
유효 대역폭Mbps 단위의 다운링크(downlink) 속도로, 초당 25킬로비트 단위로 반올림한 값
Delivery Type리소스가 전달되는 방법(예, cache 또는 navigational-prefetch)
RTT왕복 시간(RTT)으로 네트워크 요청을 시작한 다음 응답을 받는데 걸리는 시간(밀리초 단위)
노트

와탭은 클라이언트와 관련한 정보를 기본 저장합니다.

컬럼 삭제하기​

숫자 1 목록에서 삭제할 컬럼 항목의 체크 박스를 선택 해제하세요. 또는 숫자 2 목록에서 삭제할 항목의 오른쪽에 삭제 아이콘 버튼을 선택하세요.

컬럼 순서 변경하기​

숫자 2 목록에 순서를 변경할 항목을 드래그해서 원하는 위치로 이동할 수 있습니다.

설정 사항 초기화하기​

변경 사항을 모두 취소하고 초기화하려면 초기화 아이콘 초기화 버튼을 선택하세요.

최종 수정: