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

사이드 패널에서 버그를 캡처하고 QA 리포트를 작성하세요. 스크린샷·녹화·콘솔/네트워크 로그와 실시간 CSS 수정, Jira·GitHub·Notion 전송을 지원합니다.

BugShot — 페이지를 떠나지 않고 끝내는 올인원 버그 리포팅 버그를 발견하고도 "이걸 어떻게 설명하지…" 하고 막막했던 적, 한 번쯤 있으시죠. BugShot은 바로 그 순간을 위해 만들었습니다. 버그를 발견하면 필요한 정보를 한 번에 수집하고 이슈 등록까지, 모든 과정이 하나의 사이드 패널에서 끝납니다. DevTools, 스크린샷 도구, 화면 녹화 프로그램, 이슈 트래커를 정신없이 오갈 필요가 없습니다. BugShot은 개발자가 버그를 재현하고 원인을 파악하는 데 필요한 정보를 한 번에 수집합니다. 스크린샷이나 녹화 영상은 물론, 당시 발생한 콘솔·네트워크·사용자 행동 로그까지 자동으로 기록합니다. 시각적인 문제라면 페이지에서 직접 CSS를 수정하고, 수정 전후의 차이까지 비교할 수 있습니다. 수집한 모든 정보는 하나의 완성된 이슈로 묶어 Jira, GitHub, Linear 등 8개 연동 서비스로 바로 전송하거나 Slack 채널과 DM으로 공유할 수 있습니다. 그리고 안심하셔도 됩니다. 캡처한 데이터는 BugShot 서버를 거치지 않습니다. 브라우저에서 선택한 이슈 트래커나 Slack으로 직접 전송되며, AI 요청 역시 사용자가 선택한 LLM 엔드포인트로 직접 전달됩니다. --- 작동 방식 1. 캡처 — 스크린샷을 찍고, 동작을 녹화하거나, 페이지에서 바로 요소의 스타일을 수정합니다. 2. 수집 — 콘솔·네트워크·사용자 행동 로그가 백그라운드에서 자동으로 수집됩니다. 3. 생성 — AI가 수집된 정보를 바탕으로 버그 리포트를 작성하고, 실제 원인이 된 로그를 찾아냅니다. 4. 전송 — 환경 정보까지 자동으로 채운 뒤 Jira, GitHub, Slack 등 8개 연동 서비스로 바로 전송합니다. --- BugShot으로 할 수 있는 일 🎨 실시간 CSS 수정 — 설명하기 전에 직접 고쳐보세요 - 요소 선택: 페이지 위의 요소에 마우스를 올려 위치를 확인하고 클릭 한 번으로 선택할 수 있습니다. 깊게 중첩된 요소나 iframe 내부의 요소도 문제없습니다. - 실시간 편집: 레이아웃, 간격, 크기, 색상, 타이포그래피, 테두리 등을 구조화된 입력 방식으로 수정하거나, 구문 강조를 지원하는 CSS 에디터에서 직접 편집할 수 있습니다. 현재 요소의 스타일이 자동으로 채워지며, 자동완성, 인라인 색상 미리보기, 임의 속성, !important를 지원합니다. 수정 결과는 페이지에 즉시 반영됩니다. - 디자인 토큰 인식: var() 체인을 추적해 계산된 값 대신 --color-primary와 같은 토큰 이름을 보여줍니다. 디자인 시스템의 언어로 변경 사항을 전달할 수 있습니다. - 변경 전후 비교: 모든 수정 사항을 추적해 이슈에 변경 전 → 변경 후 표로 정리합니다. 여러 요소에 대한 수정 사항도 하나의 리포트에 함께 담깁니다. --- 🎬 녹화 — 정적인 화면만으로 부족할 때 동작을 담아보세요 - 30초 즉시 리플레이: 최근 30초를 MP4로 항상 임시 저장합니다. 녹화를 시작하지 않았더라도 버그를 발견한 순간 직전 상황을 바로 캡처할 수 있습니다. 페이지를 이동한 상황도 이어서 담깁니다. - 탭 녹화: 현재 탭의 동작을 최대 60초까지 MP4로 녹화합니다. - 화면 녹화: 시스템 선택기를 사용해 특정 창이나 전체 화면을 최대 60초까지 녹화합니다. - 구간 자르기: 리플레이든 탭 녹화든 화면 녹화든, 녹화가 끝나면 똑같은 자르기 화면이 열립니다. 양쪽 손잡이를 끌어 필요한 순간만 남기면 콘솔·네트워크·액션 로그도 딱 그 구간에 맞춰 좁혀집니다. 손잡이를 끄는 동안 잘려나갈 로그가 흐리게 표시되어, 확정하기 전에 무엇이 빠지는지 미리 확인하실 수 있습니다. 타임라인에 에러와 페이지 이동 지점이 표시되니 문제가 생긴 자리를 찾기도 수월합니다. - 화면에 그리기: 녹화 중 사이드 패널에서 펜을 켜고 화면 위에 직접 그리며 문제 지점을 표시할 수 있습니다. --- 📸 캡처 — 화면에 보이는 그대로 정확하게 남기고 표시하세요 - 요소 캡처: 특정 요소만 깔끔한 스크린샷으로 캡처하고, 해당 DOM selector를 이슈에 자동으로 첨부합니다. - 영역 캡처: 화면에서 원하는 영역을 드래그해 필요한 부분만 정확하게 캡처합니다. - 전체 페이지 캡처: 긴 페이지를 자동으로 스크롤하며 하나의 긴 스크린샷으로 이어 붙입니다. - 주석: 스크린샷에 화살표, 텍스트, 도형, 하이라이트를 추가한 뒤 첨부할 수 있습니다. --- 📋 로그 — 백그라운드에서 자동으로 수집되는 재현 정보 - 네트워크·콘솔 로그: 사이드 패널을 열어둔 동안 자동으로 수집됩니다. 캡처 직전에 발생한 오류도 이미 기록되어 있으니 놓칠 걱정이 없습니다. WebSocket 프레임과 결제 위젯·임베드 콘텐츠 같은 cross-origin iframe의 로그도 포함하며, origin별로 필터링할 수 있습니다. - 사용자 행동 로그: 클릭, 텍스트 입력, 페이지 이동, 키보드 단축키, 드래그 앤 드롭 등의 행동을 재현 단계로 기록합니다. 민감한 입력값은 자동으로 마스킹됩니다. - 로그 뷰어: 녹화 영상과 동기화된 타임라인에서 모든 로그를 확인할 수 있습니다. 콘솔·네트워크·사용자 행동 로그를 클릭하면 녹화 영상의 해당 시점으로 바로 이동합니다. --- 🤖 AI — 이미 수집한 정보로 리포트와 스타일 수정까지 - AI 초안: 스타일 정보, 스크린샷, 콘솔·네트워크·사용자 행동 로그 등 수집한 모든 정보를 바탕으로 제목, 재현 단계, 기대 결과와 실제 결과를 포함한 버그 리포트를 작성합니다. 로그를 분석해 실제 원인이 된 내용을 찾아 관련 로그를 원문 그대로 인용하는데, 겉보기에는 정상적인 200 응답이지만 빈 목록이나 누락된 필드처럼 진짜 원인을 품은 응답까지 짚어냅니다. 로그를 임의로 지어내지 않으니 걱정 마세요. 관련 있는 로그가 없으면 아무것도 붙이지 않는데, 그게 정상 동작입니다. - AI 스타일 수정: 원하는 변경 사항을 설명하면 선택한 요소에 적용할 CSS를 AI가 제안하고 페이지에 즉시 반영합니다. - API 키 직접 연결: OpenAI, Anthropic, Gemini 등 원하는 AI 서비스의 API 키를 직접 연결해 사용할 수 있습니다. 키가 없다면 Chrome의 온디바이스 AI를 그대로 쓰셔도 됩니다. 프롬프트와 컨텍스트는 선택한 엔드포인트로 직접 전달되며 BugShot 서버를 거치지 않습니다. --- 🔗 전송 — 사용하는 이슈 트래커로 바로 보내세요 - 한 번의 작업으로 리포트와 첨부 파일을 연결된 플랫폼에 생성하고 전송합니다. DOM, 브라우저, 화면 해상도 등 환경 정보도 자동으로 채워집니다. --- 이런 팀을 위해 만들었습니다 QA: - 정확한 버그 인계: 설명하기 어려운 시각적 문제도 영상과 스크린샷으로 정확하게 전달할 수 있습니다. - 반복 작업 제거: 스크린샷, 브라우저 정보, 콘솔 로그를 일일이 챙기지 않으셔도 됩니다. - 재현 가능한 리포트: 재현 단계와 환경 정보가 자동으로 정리되고, AI가 원인이 된 로그까지 찾아냅니다. 개발자는 문제를 더 빠르게 재현하고 원인을 파악할 수 있습니다. 디자이너: - 실시간 디자인 검증: 실제 페이지에서 스타일을 직접 수정하며 픽셀 단위의 개선안을 제안할 수 있습니다. - 디자인 시스템의 언어로 소통: 계산된 값이 아닌 var() 토큰 이름을 확인해 디자인 토큰을 기준으로 개선 사항을 전달할 수 있습니다. - 변경 사항을 한눈에: 수정한 내용을 변경 전 → 변경 후 표로 확인해 무엇이 어떻게 바뀌어야 하는지 명확하게 전달합니다. 개발자: - 디버깅 시간 단축: 재현 환경과 콘솔 로그가 정리된 리포트를 받고, 원인이 된 응답도 인라인으로 확인하며 바로 근본 원인을 파악할 수 있습니다. - DevTools 없이 CSS 수정: 직관적인 비주얼 에디터로 스타일을 빠르게 검증합니다. - 정확히 무엇을 바꿔야 하는지: 어떤 속성을 어떤 값으로 바꿔야 하는지 변경 전 → 변경 후 표로 확인할 수 있습니다. --- 이슈 트래커와 바로 연결 연동 탭에서 사용하는 플랫폼을 연결하세요. BugShot은 이슈 트래커와 Slack을 포함해 8개 연동을 지원합니다. 여러 플랫폼을 동시에 연결하고, 원하는 목적지로 각 이슈를 전송하거나 공유할 수 있습니다. 지원 플랫폼 전체 목록과 연결 방법은 가이드에서 확인하실 수 있습니다. https://bug-shot.com/docs/integrations/platforms --- 개인정보 보호를 기본으로 스크린샷, 녹화 영상, 로그, 리포트 내용 등 캡처한 데이터는 BugShot 서버를 거치지 않습니다. 브라우저에서 이슈 트래커나 Slack으로 직접 전송되며, AI 요청도 사용자가 설정한 LLM 엔드포인트로 직접 전달됩니다. BugShot 계정이나 별도의 클라우드 저장소도 필요 없습니다. BugShot 서버는 플랫폼 연결 과정에서 OAuth 토큰을 교환하는 역할만 맡습니다. 그래서 민감한 데이터가 오가는 화면에서도 안심하고 쓰실 수 있습니다. --- 사용 방법 1. 확장 프로그램 실행: 브라우저 툴바에서 BugShot 아이콘을 클릭하거나 Cmd/Ctrl+Shift+E 단축키로 사이드 패널을 엽니다. 2. 버그 캡처: 스크린샷을 찍거나 문제가 발생하는 순간을 최대 60초까지 녹화합니다. 콘솔·네트워크·사용자 행동 로그는 백그라운드에서 이미 수집되고 있습니다. 3. 확인 및 수정: 페이지의 요소를 선택해 스타일과 속성을 확인하고, 비주얼 에디터에서 즉시 수정합니다. 4. AI 초안 생성: 수집된 정보를 바탕으로 재현 단계와 환경 정보가 정리된 버그 리포트 초안을 생성합니다. 5. 공유 및 내보내기: Markdown으로 복사하거나, 이슈 트래커로 전송하거나, Slack으로 공유하는 등 원하는 방식으로 전달할 수 있습니다. --- 설치 전 확인 사항 BugShot은 Side Panel API를 지원하는 Chromium 기반 브라우저에서 사용할 수 있습니다. 온디바이스 AI 기능을 사용하려면 Gemini Nano를 지원하는 최신 버전의 Chrome이 필요합니다. 없더라도 걱정 마세요. 직접 API 키를 연결해 그대로 쓰실 수 있습니다. 설치가 잘 안 되더라도 브라우저를 최신 버전으로 업데이트한 뒤 다시 시도하면 대부분 해결됩니다.