세션 리플레이

세션 리플레이는 방문자가 본 화면의 변화와 누른 곳을 다시 재생합니다. 이벤트 순서만으로 알기 어려운 상황을 확인할 때 씁니다. 녹화는 기본으로 꺼져 있고, 프로젝트 설정과 SDK 설정, 방문자의 녹화 동의가 모두 갖춰져야 쌓입니다.

진입 경로Copy Anchor Link

• /dashboard/[orgId]/[projectId]/replays: 사이드바의 세션 리플레이
• 세션 상세의 세션 리플레이 버튼: 그 세션의 녹화만 모아 엽니다
• 에러 이슈 상세 발생 이벤트 탭의 리플레이: 오류가 난 시점에서 엽니다

녹화 켜기Copy Anchor Link

세 가지가 모두 필요합니다.

1. 프로젝트에서 허용: 화면 상단의 녹화 설정에서 세션 녹화 허용을 켭니다. 이 버튼은 조직 관리자 이상에게만 보입니다.
2. SDK에서 활성화: 브라우저 SDK 설정에 sessionReplay: { enabled: true }를 넣습니다.
3. 방문자의 녹화 동의: 동의 UI가 방문자의 결정을 받은 뒤 setConsent("replay", true)를 호출합니다.

import { init } from "@reopt-ai/data-sdk-client";

const client = init({
  writeKey: process.env.NEXT_PUBLIC_REOPT_WRITE_KEY!,
  baseUrl: process.env.NEXT_PUBLIC_REOPT_API_URL!,
  sessionReplay: { enabled: true },
});

// 방문자가 녹화에 동의한 뒤에만 호출하세요
client.setConsent("replay", true);

// 동의를 철회하면 녹화가 멈춥니다
client.setConsent("replay", false);

녹화 동의는 분석 동의와 별개이고, 둘 다 허용돼야 녹화합니다. replay는 호출하기 전까지 거부 상태이므로 기본 허용 카테고리에 넣지 마세요.

녹화 설정Copy Anchor Link

화면 상단에는 수집 중 또는 수집 꺼짐과 현재 사용량(MiB)이 함께 표시됩니다.

녹화되는 것과 가려지는 것Copy Anchor Link

• 녹화하는 것: 화면 구조의 변화, 클릭, 포인터 이동, 스크롤, 입력 상태.
• 입력값과 화면의 텍스트는 가려진 채로 기록됩니다. 레이아웃과 동작만 재현됩니다.
• 비밀번호 입력란, iframe·object·embed, 그리고 data-reopt-replay-block 또는 data-reopt-private 속성이 붙은 영역은 통째로 제외합니다. sessionReplay.blockSelector로 제외할 영역을 더 지정할 수 있습니다.
• 이미지와 폰트는 기본으로 담지 않습니다. 공개해도 되는 정적 이미지·폰트만 sessionReplay.publicAssets로 명시해 포함할 수 있고, 이렇게 넣은 픽셀과 폰트는 가려지지 않습니다.
• canvas, 콘솔·네트워크 본문은 녹화하지 않습니다.
• 재생 화면은 외부 리소스를 불러오지 않는 격리된 프레임에서 그려집니다.

녹화 찾기Copy Anchor Link

녹화 하나는 창(페이지 로드) 하나의 기록입니다. 한 세션에 탭이 여럿이거나 새로고침이 있었다면 녹화도 여러 개입니다.

조회 기간은 바꾸는 즉시 반영되고, 나머지 조건과 정렬은 검색 적용을 눌러야 반영됩니다. 적용된 조건은 URL에 남아 링크로 공유할 수 있습니다.

목록의 각 행에는 시작 시점, 첫 페이지 경로, 녹화 길이, 활동 시간, 클릭·입력 횟수, 환경이 보입니다. 앞의 점은 아직 보지 않은 녹화를, 진행 중은 방금까지 데이터가 들어온 녹화를 나타냅니다. 오류 발생 표시는 방문 경로나 오류가 발생한 녹화만 조건으로 검색했을 때만 붙습니다. 조건이 걸린 검색은 한 번에 일정 범위만 훑습니다. 결과가 비어도 계속 검색이 보이면 더 이전 녹화가 남아 있습니다.

재생하기Copy Anchor Link

• 타임라인 막대: 활동·대기·데이터 없음 구간과 이벤트 마커가 표시됩니다. 오류는 붉은 마커입니다. 막대나 마커를 누르면 그 시점으로 이동합니다.
• 재생 속도: 0.5배부터 16배까지. 기본으로 켜져 있는 대기 건너뛰기는 5초 넘게 아무 조작이 없던 구간을 건너뜁니다.
• 시간 표시: 경과 시간과 실제 시각 사이를 전환합니다.
• 현재 위치 링크 복사: 지금 보고 있는 시점이 ?stream=...&t=...로 담긴 링크를 복사합니다.
• 세부 정보 패널: 이벤트는 녹화 시간의 세션 이벤트입니다. 전체·오류·페이지 이동으로 거르고, 누르면 그 시점으로 이동합니다. 세션은 진입·이탈 경로, 유입, 환경, 위치를, 진단은 활동 시간, 클릭·입력 수, 데이터 크기를 보여줍니다.
• 위쪽 버튼으로 세션 타임라인(세션 상세로 이동)과 이 세션의 다른 녹화를 엽니다. 녹화 삭제는 조직 관리자 이상에게만 보이고, 삭제하면 즉시 재생할 수 없게 됩니다.

주의할 점Copy Anchor Link

• 녹화 1건은 데이터 포인트 10을 씁니다. 녹화를 시작할 때 차감하고, 조직의 수집 한도를 모두 쓰면 새 녹화를 시작하지 않습니다. 저장 공간은 그와 별개로 프로젝트별 저장 한도와 보관 기간으로 관리합니다.
• 녹화는 분석 세션에 붙습니다. 그 세션이 아직 만들어지지 않았으면(첫 이벤트가 처리되기 전이거나, 수집 한도 초과로 이벤트가 거절되는 동안) 녹화도 시작되지 않고 SDK가 다시 시도합니다.
• 녹화 하나는 최대 30분입니다. 같은 창을 더 오래 쓰면 새 녹화로 이어집니다. 60초 동안 조작이 없거나 탭이 가려지면 녹화를 멈추고, 다시 조작하면 새 녹화로 시작합니다.
• 이벤트 패널과 방문 경로·오류 조건은 녹화 시간 안에 그 세션에서 난 이벤트를 기준으로 합니다. 같은 세션의 다른 탭에서 난 이벤트도 섞일 수 있습니다.
• 방문 경로는 대소문자를 구분하고, 쿼리 문자열과 # 이후는 넣을 수 없습니다. 브라우저·운영체제·기기·국가는 녹화 시작 시점의 값과 정확히 일치해야 합니다.
• "아직 보지 않음" 표시는 콘솔 사용자마다 따로 기록됩니다. 녹화를 열면 내 계정에서만 본 것으로 바뀝니다.
• 텍스트가 가려지고 외부 이미지·폰트가 빠지므로 재생 화면은 실제 페이지와 똑같아 보이지 않습니다. 의도된 동작입니다.

다음 단계Copy Anchor Link

• 같은 방문의 이벤트 순서를 보려면 세션 탐색
• 오류가 난 녹화에서 원인을 좁히려면 에러 트래킹
• 브라우저 SDK를 처음 붙인다면 추적 설정
• 데이터 포인트와 보존 기준은 비용과 보존 정책