스크린샷

enableScreenshot: true를 설정하면, 클라이언트가 전송 버튼을 누를 때 위젯이 각 주석 주변 영역의 JPEG를 캡처합니다. 이렇게 하면 트리아지 화면에서 클라이언트가 실제로 본 화면을 그대로 확인할 수 있습니다 — 열려 있는 드롭다운이나 호버 스타일처럼, 나중에 다시 방문해서는 재현할 수 없는 일시적인 상태까지 포함해서요.

initInstaFix({
  endpoint: "/api/instafix",
  projectName: "my-project",
  enableScreenshot: true,
});

캡처되는 내용

• 그려진 사각형과 그 주변의 넉넉한 컨텍스트(가로 최대 약 280px, 세로 약 220px)를 함께 캡처하여, 스크린샷이 우표만 한 크기가 아니라 알아볼 수 있는 크기가 되도록 합니다.
• 기기의 픽셀 비율로 렌더링되고 JPEG(품질 0.85)로 인코딩되며, 출력 너비가 1200픽셀을 넘으면 축소됩니다 — 2배 디스플레이 기준으로 약 600 CSS 픽셀의 페이지 너비에 해당합니다.
• 이미지 안에서 주석의 위치를 비율로 나타낸 screenshotRegion이 함께 전달되므로, 대시보드에서 스크린샷 위에 사각형을 다시 그릴 수 있습니다.
• 제출당 한 번만 캡처되며, 재시도 시에도 재사용됩니다.

프라이버시 마스킹

스크린샷에 절대 나타나서는 안 되는 요소에는 data-instafix-ignore="true"를 추가하세요. 해당 요소와 그 하위 요소 전체가 렌더링에서 제외됩니다:

<div data-instafix-ignore="true">
  <CreditCardForm />
</div>

값은 정확히 "true"여야 합니다 — 속성만 있거나 "false"인 경우에는 마스킹되지 않습니다. 위젯 자체의 UI도 동일한 방식으로 제외되므로, 스크린샷에 InstaFix의 UI 요소가 포함되는 일은 없습니다.

요소를 마스킹하면 툴바의 자동 타게팅 피커에서도 해당 요소가 함께 제외됩니다 — 위젯은 data-instafix-ignore를 "손대면 안 되는 요소"로 취급합니다.

실패해도 항상 안전합니다

스크린샷 캡처는 설계상 최선을 다하는(best-effort) 방식입니다: 렌더링 엔진 로드에 실패하거나 캡처 중 예외가 발생해도 피드백은 여전히 제출됩니다 — 다만 이미지가 없을 뿐입니다. 스크린샷 문제로 클라이언트의 댓글이 유실되는 일은 없습니다.

이미지가 저장되는 위치

기본적으로 JPEG는 인라인으로 전달되며(data: URL, 최대 1.5MB), 어댑터에 그대로 저장됩니다. 시작 단계에서는 이 방식으로 충분합니다. 프로덕션 트래픽 규모에서는 서버 어댑터에 screenshotStorage를 설정해 이미지를 S3/R2/GCS에 업로드하고 URL만 저장하도록 하세요.