피드백 위젯

피드백 위젯이란?

피드백 위젯은 웹사이트에 스크립트 한 줄로 삽입할 수 있는 버그 리포팅 도구입니다. 방문자나 외부 테스터가 별도 로그인 없이 스크린샷과 함께 버그를 제보할 수 있습니다. 수집된 리포트는 QA Note 대시보드에 이슈로 자동 등록됩니다.

설치

프로젝트 설정 → 위젯 탭에서 위젯 토큰을 확인하고, 임베드 코드를 복사합니다.

<script
  src="https://app.qanote.app/widget.js"
  data-token="YOUR_WIDGET_TOKEN"
  data-theme="auto"
  data-position="bottom-right"
></script>

위젯은 Shadow DOM 안에서 렌더링되어 호스트 페이지의 스타일에 영향을 주지 않습니다.

설정 옵션

사용자 경험

1. 페이지 우하단(또는 좌하단)에 피드백 버튼이 표시됩니다.
2. 버튼을 클릭하면 피드백 폼이 열립니다.
3. 이름(선택), 이메일(필수), 설명(필수)을 입력합니다.
4. 스크린샷 캡처 버튼으로 현재 화면을 캡처할 수 있습니다.
5. 캡처된 이미지에 펜, 화살표, 사각형 도구로 어노테이션을 추가합니다.
6. 등록 버튼을 클릭하면 제출 완료됩니다.

게스트 정보(이름, 이메일)는 브라우저 localStorage에 저장되어 재방문 시 자동으로 입력됩니다.

자동 수집 정보

위젯은 제출 시 다음 메타데이터를 자동으로 첨부합니다.

• 현재 페이지 URL
• 브라우저 종류 (Chrome, Firefox, Edge, Safari)
• 운영 체제 (Windows, macOS, Linux, Android, iOS)
• 뷰포트 크기
• 디바이스 픽셀 비율

QA Fence

프로젝트 설정에서 QA Fence를 활성화하면, 위젯이 설치된 페이지에 비밀번호 입력 화면이 표시됩니다. 올바른 비밀번호를 입력해야 페이지에 접근할 수 있습니다.

• QA Note Extension 사용자는 자동으로 우회됩니다.
• 비밀번호는 브라우저 세션 동안 유지됩니다.

개발 중인 사이트를 외부에 노출하지 않으면서 QA 테스트를 진행할 때 유용합니다.

위젯 토큰 관리

• 프로젝트 설정에서 위젯 토큰을 확인하고 복사할 수 있습니다.
• 토큰 재생성 시 기존 토큰은 즉시 무효화됩니다. 임베드 코드를 새 토큰으로 교체해야 합니다.

플랜별 제한