BugDrop

BugDrop이란?

BugDrop은 무료 오픈소스 웹사이트 피드백 위젯으로, 사이트에서 직접 사용자 보고 이슈를 수집해 GitHub 이슈로 자동 변환합니다. 화면에 떠 있는 “Bug” 버튼을 제공해 사용자가 스크린샷을 캡처하고, 문제점을 주석으로 표시하며, 디버깅 컨텍스트를 제출할 수 있습니다.

위젯은 GitHub App과 스크립트 태그를 통해 GitHub 저장소와 연동됩니다. 피드백이 제출되면 BugDrop은 사용자 스크린샷과 시스템 정보를 포함한 완전 포맷된 GitHub 이슈를 생성합니다.

주요 기능

사이트에 떠 있는 피드백 버튼: 방문자가 페이지 이탈 없이 문제를 쉽게 보고할 수 있습니다.
스크린샷 캡처 (전체 페이지 또는 요소별): 버그와 UI 이슈의 시각적 증거를 보존합니다.
주석 도구 (그리기, 화살표, 사각형): 제출자가 문제 발생 위치를 정확히 강조할 수 있습니다.
자동 GitHub 라벨이 적용된 피드백 카테고리 (Bug, Feature, Question): 제출물을 일관된 태그로 GitHub에 정리합니다.
자동 시스템 정보 캡처: 브라우저, OS, 뷰포트 등 세부 정보를 기록해 트리아지 지원.
데이터 속성을 통한 스타일링 가능한 위젯 UI: 폰트, 색상, 테두리, 그림자, 반경 등 디자인 시스템에 맞게 사용자 지정.
프라이버시 우선 처리: 추적 없음, 쿠키 없음, URL은 마스킹.

BugDrop 사용 방법

GitHub Marketplace에서 저장소에 GitHub App 설치 (“bugdrop-in-app-feedback-to-github-issues”).

사이트에 위젯 스크립트 추가하고 data-repo 속성을 owner/repo로 설정.

예시:

<script src="https://bugdrop.neonwatty.workers.dev/widget.js" data-repo="owner/repo"></script>

위젯 표시 확인 및 사용자 피드백 제출 테스트.
(선택) 문서화된 data-* 속성으로 스타일링과 동작 구성 (테마, 위치, 버튼 텍스트/라벨, 색상, 테두리, 그림자 등).

사용 사례

웹 UI 이슈의 시각적 버그 보고 수집: 전체 페이지 또는 대상 스크린샷 캡처와 정확한 영역 주석.
다양한 제출 유형 트리아지: Bug, Feature, Question으로 분류해 GitHub에 일치하는 라벨로 도착.
사용자 환경 디버깅: 모든 GitHub 이슈에 브라우저/OS/뷰포트 및 시스템 정보 포함으로 재현 속도 향상.
제품 디자인에 위젯 맞춤: 데이터 속성으로 테마와 스타일 토큰 (폰트, 색상, 테두리 반경, 그림자 스타일) 적용.
수동 이슈 생성 대비 마찰 감소: 페이지에서 피드백 제출 시 BugDrop이 스크린샷 포함 GitHub 이슈 자동 생성.

자주 묻는 질문

BugDrop이 GitHub 이슈를 자동 생성하나요?

네. 위젯이 스크린샷과 시스템 정보를 포함한 포맷된 GitHub 이슈로 피드백을 저장소에 전송합니다.

제출 시 BugDrop이 어떤 정보를 포함하나요?

BugDrop은 스크린샷 (전체 페이지 또는 요소별), 주석, 브라우저/OS 등의 시스템 정보와 뷰포트 세부 사항을 캡처합니다.

위젯 모양과 위치를 사용자 지정할 수 있나요?

네. data-* 속성으로 테마 (light/dark/auto), 위치 (bottom-right/bottom-left), 폰트, 색상, 테두리, 반경, 그림자 등 스타일링 옵션 지원.

추적이나 쿠키가 사용되나요?

BugDrop은 프라이버시 우선: 추적 없음, 쿠키 없음, URL 마스킹.

위젯을 저장소에 연결하는 방법은?

저장소에 GitHub App 설치 후, 사이트에 data-repo="owner/repo" 속성이 포함된 스크립트 태그 추가.

대안

티켓/이슈 생성 웹사이트 피드백 위젯: 유사 워크플로 (페이지에서 피드백 수집), 하지만 다른 이슈 트래커나 제출 형식 사용 가능.
수동 스크린샷과 폼에 의존하는 일반 버그 보고 도구: 스크린샷 캡처와 GitHub 이슈 자동 생성 대신 폼 작성 또는 파일 첨부 요구.
GitHub 네이티브 이슈 수집 워크플로 (예: 이슈 템플릿 또는 이슈 폼): GitHub 내 유지하지만 페이지 내장 위젯에서 보고 단계 이동.
고객 지원 티켓팅 위젯: 웹사이트 내장 피드백 제공, 하지만 GitHub 이슈 대신 지원 인박스 라우팅.