작동 원리: 기술, 해상도 및 한계

1. 영상 녹화를 사용하지 않는 이유

시각적 분석 도구가 방문자 화면을 MP4나 WebM 같은 표준 영상 파일로 녹화한다는 오해가 있습니다. 그러면 막대한 대역폭을 소비하고 웹사이트를 크게 느리게 하며 텍스트가 흐려져 읽기 어려워집니다.

대신 MousePlayer는 DOM 스냅샷 텔레메트리라는 경량 기술을 사용합니다. 기본적인 작동 방식은 다음과 같습니다:

설계도 스냅샷

방문자가 페이지를 열면 스크립트가 HTML 및 스타일 구조의 텍스트 기반 “설계도”를 만듭니다. 페이지의 이미지나 영상 파일을 복사하지 않고 요소 위치를 기록합니다. 플레이어는 재생 시 원래 주소에서 이미지를 로드합니다. 예외는 내용이 이미지로 전송되는 canvas 요소입니다(아래 참조).

좌표 텔레메트리

사용자 상호작용에 따라 마우스 위치, 스크롤 깊이, 클릭 대상 및 브라우저 크기 변경과 페이지 자체 변경을 이벤트 스트림으로 기록합니다. 설정에 따라 콘솔 메시지, 실패하거나 느린 요청 및 로딩 시간 측정값(Web Vitals)도 기록합니다. 움직임과 클릭 데이터는 작지만 페이지 스냅샷과 변경 데이터는 페이지에 따라 훨씬 클 수 있어 압축하여 전송합니다.

극장 재생

대시보드에서 세션을 보면 플레이어가 기록된 설계도로 페이지를 재구성하고 그 위의 가상 포인터를 실시간으로 움직여 텍스트를 선명하게 유지합니다.

가볍게 동작하도록 설계: 스크립트는 비동기로 로드되며 영상 대신 작은 숫자 데이터 포인트를 전송하여 자체 부하를 줄입니다. Core Web Vitals에 미치는 영향은 페이지, 호스팅 및 방문자 네트워크에 따라 다르므로 당사 수치를 그대로 믿기보다 자체 사이트에서 측정하세요. 특정 로딩 속도는 보장하지 않습니다 – 다음 문서의 제20조를 확인하세요: 서비스 이용약관.

2. 화면 해상도 & 모바일 기기 대응

사용자는 작은 스마트폰부터 초광폭 4K 데스크톱 모니터까지 다양한 기기를 사용합니다. 웹사이트는 화면 너비에 맞게 레이아웃을 자동으로 이동, 접기 및 재배열하며 이를 반응형 웹 디자인이라고 합니다.

방문자의 정확한 뷰포트를 맞추는 방법

재생이 왜곡되지 않도록 MousePlayer는 정확한 뷰포트 크기를 기록합니다. 예를 들어 390x844 크기의 스마트폰이나 1920x1080 크기의 데스크톱 모니터입니다. 극장 플레이어를 열면 엔진이 방문자 원래 화면 비율을 정확하게 반영한 축소 샌드박스를 만듭니다.

데스크톱 & 노트북 화면

일반 컴퓨터에서는 같은 브라우저 세션의 연속된 마우스 움직임과 탭 간 탐색을 수집합니다. 마우스를 올려 메뉴가 열릴 때 문서가 변경되면 재생에 나타납니다. 순수 CSS 호버 효과는 문서에서 보이지 않아 재생하지 않습니다.

스마트폰 & 태블릿

터치스크린에는 떠 있는 마우스 포인터가 없습니다. MousePlayer는 터치 제스처, 스와이프 스크롤 및 화면 방향 변경(세로/가로)을 기록하도록 자동 적응합니다.

세션 도중 크기 변경의 과제

방문자가 세션 도중 태블릿을 회전하거나 데스크톱 브라우저 창 크기를 바꾸면 웹사이트 레이아웃이 동적으로 변경됩니다. MousePlayer는 창 크기 변경 이벤트를 수집하고 재생 캔버스를 즉시 매끄럽게 조정하여 상호작용의 맥락을 보존합니다.

3. 시스템 한계 & 기술적 경계

사용자 개인정보를 존중하고 브라우저 보안 및 빠른 데이터 처리를 유지하기 위해 MousePlayer는 정해진 기술적 경계 안에서 작동합니다:

시스템 경계	MousePlayer의 처리 방식
iFrame	페이지와 출처가 같은 iframe은 내용 및 내부 상호작용과 함께 녹화합니다. 다른 출처의 삽입 콘텐츠(예: YouTube 플레이어, Stripe 결제 양식)는 브라우저 보안 정책(동일 출처 정책) 때문에 내부를 녹화할 수 없습니다. 재생에서는 자리표시자로 표시하며 로드하지 않습니다.
민감한 입력 필드(PII)	비밀번호와 결제 필드는 모든 마스킹 수준에서 방문자 기기에서 마스킹하며, 모든 양식 입력의 전체 마스킹이 각 속성의 기본값입니다. 입력했다는 사실만 보이고 내용은 보이지 않습니다. 두 가지 한계가 있습니다. 약한 두 마스킹 수준은 당사의 서면 승인이 있어야 활성화되며, 사이트 자체가 문서에 출력하는 내용은 마스킹하지 못합니다 – 주소가 표시된 확인 페이지는 스냅샷에 포함됩니다. 두 사항은 다음 문서에 명시되어 있습니다: 데이터 처리 계약.
Canvas & WebGL 요소	canvas 내용은 페이지 스냅샷과 함께 한 번, 이후 변경될 때마다 이미지로 녹화하며 최대 약 1초에 한 번이고 크기 제한이 있습니다. 따라서 부드러운 애니메이션도 일련의 프레임으로 표시됩니다. 마스킹 영역이나 다른 출처의 이미지가 포함된 canvas에서는 이미지를 전송하지 않으며 WebGL 내용은 비어 있을 수 있습니다.
웹 컴포넌트(Shadow DOM)	열린 섀도 루트는 내용과 함께 녹화합니다. 닫힌 섀도 루트는 스크립트가 접근할 수 없어 내용이 재생에서 빠집니다.
전송 & 브라우저 저장소	데이터는 암호화된 WebSocket 연결(HTTPS/WSS)로 보냅니다. 프록시 등으로 연결할 수 없으면 암호화된 HTTP 경로를 사용하며 매우 큰 페이지 스냅샷은 HTTPS로 별도 업로드합니다. MousePlayer는 쿠키를 설정하지 않고 사이트의 브라우저 로컬 및 세션 저장소를 사용합니다.
AFK 유휴 시간	방문자가 탭을 열어 둔 채 20분 동안 자리를 비우면 비활동을 자동 감지하고 재생에서 유휴 구간을 압축하여 정지 화면을 보느라 시간을 낭비하지 않게 합니다.

무엇을 도와드릴까요?