BugShot — 한 번에 끝내는 버그 리포트

버그 발견부터 수정, 캡처, 이슈 생성까지 한 번에.

BugShot — 브라우저에서 끝내는 디자인 QA와 버그 리포팅 디자인 리뷰, 버그 제보, 스타일 수정, 이슈 생성까지. 이제 DevTools·스크린샷 툴·이슈 트래커를 오가며 작업하지 마세요. BugShot은 웹 페이지 위에서 직접 요소를 검사하고 스타일을 수정한 뒤, 변경 내역과 로그·스크린샷·녹화 영상을 포함한 완성된 이슈를 Jira, GitHub, Linear 등 7개 이슈 트래커로 바로 전송하거나 Slack 채널·DM으로 공유할 수 있는 크롬 익스텐션입니다. --- BugShot으로 할 수 있는 일 🎨 스타일 수정 — 설명하기 전에 직접 고쳐보세요 - 요소 선택: 페이지의 어떤 DOM 요소든 호버해 하이라이트하고 클릭해 선택하세요. 깊게 중첩된 요소도 잡아냅니다. - CSS 실시간 편집: 레이아웃·여백·크기·색상·타이포그래피·테두리를 구조화된 필드로 수정하고, 결과를 즉시 페이지에 반영해보세요. - 디자인 토큰 인식: var() 체인을 풀어 계산값 대신 토큰 이름(예: --color-primary)으로 보여주므로, 리포트가 디자인 시스템의 언어로 작성됩니다. - 전/후 비교: 모든 변경을 추적해 이슈에 before → after 표로 정리합니다. 여러 요소의 수정도 쌓아뒀다가 한 번에 전송합니다. 📸 캡처 — 화면에 보이는 그대로 담고 마크업하세요 - 요소 캡처: 특정 요소만 잘라 깔끔한 스크린샷으로 만들고, 해당 요소의 DOM 셀렉터를 이슈에 자동 첨부합니다. - 영역 캡처: 화면의 원하는 영역을 드래그해 정확히 잘라냅니다. - 주석: 화살표·텍스트·도형·하이라이트로 스크린샷을 마크업한 뒤 첨부하세요. 🎬 녹화 — 정지 화면으로 부족할 땐 동작을 그대로 - 탭 녹화: 현재 탭을 최대 60초까지 MP4로 녹화합니다. - 화면 녹화: 시스템 선택창으로 특정 창이나 전체 화면을 최대 60초까지 녹화합니다. - 30초 인스턴트 리플레이: 녹화 버튼을 누르지 않아도 직전 30초를 항상 버퍼에 담아 MP4로 저장합니다. 페이지 이동을 넘어 되감으므로 놓친 버그도 잡을 수 있고, 캡처 후 버그 구간만 잘라내면 첨부 로그도 같은 구간으로 좁혀집니다. 📋 로그 — 재현 맥락을 백그라운드에서 자동 수집 - 네트워크·콘솔 로그: 캡처가 활성화된 동안 자동 수집해 이슈에 첨부합니다. WebSocket 프레임과 결제 위젯·임베드 같은 외부 iframe 로그까지 잡아내고, 출처별로 필터링할 수 있습니다. - 액션 로그: 클릭·텍스트 입력·페이지 이동·단축키·드래그 앤 드롭을 재현 단계로 기록합니다. 민감한 입력값은 자동으로 마스킹됩니다. - 로그 뷰어: 영상과 연동되는 타임라인을 갖춘 리포트에서, 콘솔·네트워크·액션 항목을 클릭하면 녹화의 바로 그 순간으로 이동합니다. 🤖 AI — 수집된 정보로 초안과 스타일 수정까지 자동으로 - AI 초안 작성: 재현 단계·예상 동작·실제 동작이 정리된 리포트의 제목과 본문을 캡처(스타일·스크린샷·로그 요약)에서 한 번에 만들어냅니다. - AI 스타일 수정: 원하는 변경을 설명하면 AI가 해당 요소의 CSS 수정안을 제안해 바로 페이지에 적용합니다. - 연결 방식: OpenAI·Anthropic·Gemini 등 내 API 키(BYOK)를 연결하거나, 키가 없으면 크롬 온디바이스 AI를 그대로 사용합니다. 🔗 이슈 트래커로 바로 전송 - 연결된 플랫폼에 리포트와 첨부 파일을 한 번에 생성·전송합니다. DOM·브라우저·화면 해상도 등 환경 정보도 자동으로 채워집니다. --- BugShot은 이런 팀을 위한 도구입니다. QA: - 정확한 버그 전달: 글로 설명하기 어려운 시각적 이슈를 영상과 스크린샷으로 명확하게 공유하세요. - 반복 작업 제거: 스크린샷, 브라우저 정보, 콘솔 로그를 매번 수동으로 정리할 필요가 없습니다. - 재현 가능한 리포트: 재현 단계와 환경 정보가 자동으로 정리돼, 개발자가 바로 재현할 수 있는 이슈를 넘길 수 있습니다. 디자이너: - 실시간 디자인 검증: 라이브 페이지에서 직접 스타일을 조정해 픽셀 단위로 개선점을 제안할 수 있습니다. - 디자인 시스템 언어로 소통: var() 토큰 이름을 그대로 읽어내 원본 값이 아닌 토큰으로 개선점을 전달합니다. - 전/후 한눈에: 수정 전후를 표로 정리해 무엇을 어떻게 바꿔야 하는지 명확하게 보여줍니다. 개발자: - 디버깅 시간 단축: 재현 환경과 콘솔 로그가 정리된 리포트를 받아 바로 원인 분석에 들어갈 수 있습니다. - DevTools 없이 CSS 수정: 직관적인 비주얼 에디터로 빠르게 스타일을 검증하세요. - 정확한 수정 지점: 어떤 속성을 무엇으로 바꿔야 하는지 전/후 표로 받아 그대로 코드에 반영하세요. --- 이슈 트래커와 바로 연결됩니다. 연동 탭에서 사용하는 플랫폼을 연결하세요. 이슈 트래커 7종은 OAuth 또는 API 토큰 방식을 지원하고, Slack은 OAuth로 연결합니다. 여러 플랫폼을 동시에 연결해두고 이슈마다 원하는 대상에 전송하거나 공유할 수 있습니다. 지원 플랫폼 전체 목록과 연동 방법은 사용 가이드에서 확인하세요: https://bugshot.gitbook.io/ko/integrations/platforms --- 이렇게 사용하세요. 1. 확장 프로그램 실행: 브라우저 툴바의 버그샷 아이콘을 클릭하거나 단축키(Cmd/Ctrl+Shift+E)로 사이드 패널을 여세요. 2. 녹화 시작: 버그가 발생하는 순간을 최대 60초까지 녹화하면, 콘솔과 네트워크 로그가 자동으로 함께 수집됩니다. 3. 요소 검사 및 수정: 페이지 위의 어떤 요소든 선택해 스타일과 속성을 확인하고, 비주얼 에디터로 즉시 수정해보세요. 4. AI 리포트 생성: 수집된 정보를 바탕으로 재현 단계와 환경 정보가 정리된 버그 리포트 초안을 자동으로 만듭니다. 5. 공유 및 내보내기: 마크다운, 이슈 트래커 전송 등 원하는 방식으로 동료에게 전달하세요. --- 설치하기 전에 확인하세요. Side Panel API를 지원하는 모든 크로미움 기반 브라우저에서 동작합니다. 온디바이스 AI 기능을 사용하려면 Gemini Nano를 지원하는 최신 버전의 크롬이 필요합니다(또는 직접 API 키를 연결해 사용할 수 있습니다). 설치에 문제가 있을 경우 브라우저를 최신 버전으로 업데이트한 뒤 다시 시도해보세요.