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

Tracking since Apr 29, 2026.

Changelog

• Jun 13, 2026
  description

  BugShot — 브라우저에서 끝내는 디자인 QA와 버그 리포팅
  
  디자인 리뷰, 버그 제보, 스타일 수정, 이슈 생성까지.
  이제 DevTools·스크린샷 툴·이슈 트래커를 오가며 작업하지 마세요.
  
  BugShot은 웹 페이지 위에서 직접 요소를 검사하고 스타일을 수정한 뒤, 변경 내역과 로그·스크린샷·녹화 영상을 포함한 완성된 이슈를 Jira·GitHub·Linear·Notion으로 바로 전송할 수 있는 크롬 익스텐션입니다.
  
  ---
  
  BugShot으로 할 수 있는 일
  
  - 요소 검사 — 확장 프로그램을 활성화하고 페이지의 어떤 요소든 클릭해 적용된 스타일과 속성을 확인하세요.
  - CSS 실시간 수정 — 시각적 에디터에서 스타일을 변경하고 결과를 즉시 페이지에 반영해보세요.
  - 60초 화면 녹화 — 버그가 발생하는 순간을 그대로 녹화해 재현 영상을 만드세요.
  - 30초 인스턴트 리플레이 — 녹화 버튼을 누르지 않아도 직전 30초를 자동으로 되감아 MP4로 저장합니다. 놓친 버그도 잡을 수 있습니다.
  - 자동 재현 단계 기록 — 클릭, 입력, 페이지 이동을 자동으로 추적해 사람이 읽을 수 있는 재현 단계를 만들어줍니다. 민감한 입력값은 자동으로 마스킹됩니다.
  - 콘솔과 네트워크 로그 수집 — 페이지 이동을 넘어 세션 전체의 로그를 자동으로 수집하고, 영상과 타임라인이 연동되는 인터랙티브 로그 뷰어로 확인할 수 있습니다.
  - DOM과 환경 정보 자동 수집 — 브라우저, 화면 해상도, 선택한 요소의 DOM 정보를 자동으로 첨부합니다.
  - AI 버그 리포트 생성 — 수집된 정보를 바탕으로 재현 단계, 예상 동작, 실제 동작이 정리된 리포트를 자동 생성합니다.
  - 이슈 트래커로 바로 전송 — Jira, GitHub, Linear, Notion에 리포트와 첨부 파일을 한 번에 생성·전송할 수 있습니다.
  
  ---
  
  BugShot은 이런 팀을 위한 도구입니다.
  
  디자이너, QA:
  - 정확한 버그 전달: 글로 설명하기 어려운 시각적 이슈를 영상과 스크린샷으로 명확하게 공유하세요.
  - 실시간 디자인 검증: 라이브 페이지에서 직접 스타일을 조정해 픽셀 단위로 개선점을 제안할 수 있습니다.
  - 반복 작업 제거: 스크린샷, 브라우저 정보, 콘솔 로그를 매번 수동으로 정리할 필요가 없습니다.
  
  개발자:
  - 디버깅 시간 단축: 재현 환경과 콘솔 로그가 정리된 리포트를 받아 바로 원인 분석에 들어갈 수 있습니다.
  - DevTools 없이 CSS 수정: 직관적인 비주얼 에디터로 빠르게 스타일을 검증하세요.
  - 코드로 바로 복사: 수정 결과를 CSS로 추출해 그대로 프로젝트에 반영할 수 있습니다.
  
  ---
  
  이슈 트래커와 바로 연결됩니다.
  
  - Jira — OAuth 또는 API Token
  - GitHub — OAuth 또는 Personal Access Token
  - Linear — OAuth 또는 API Key
  - Notion — OAuth 또는 Internal Integration Token
  
  여러 플랫폼을 동시에 연결해두고 이슈마다 원하는 대상에 전송할 수 있습니다.
  
  ---
  
  이렇게 사용하세요.
  
  1. 확장 프로그램 실행: 브라우저 툴바의 버그샷 아이콘을 클릭하거나 단축키로 사이드 패널을 여세요.
  2. 녹화 시작: 버그가 발생하는 순간을 최대 60초까지 녹화하면, 콘솔과 네트워크 로그가 자동으로 함께 수집됩니다.
  3. 요소 검사 및 수정: 페이지 위의 어떤 요소든 선택해 스타일과 속성을 확인하고, 비주얼 에디터로 즉시 수정해보세요.
  4. AI 리포트 생성: 수집된 정보를 바탕으로 재현 단계와 환경 정보가 정리된 버그 리포트 초안을 자동으로 만듭니다.
  5. 공유 및 내보내기: 마크다운, 이슈 트래커 전송 등 원하는 방식으로 동료에게 전달하세요.
  
  ---
  
  설치하기 전에 확인하세요.
  
  Side Panel API를 지원하는 모든 크로미움 기반 브라우저에서 동작합니다. 온디바이스 AI 기능을 사용하려면 Gemini Nano를 지원하는 최신 버전의 크롬이 필요합니다. 설치에 문제가 있을 경우 브라우저를 최신 버전으로 업데이트한 뒤 다시 시도해보세요.

  BugShot — 브라우저에서 끝내는 디자인 QA와 버그 리포팅
  
  디자인 리뷰, 버그 제보, 스타일 수정, 이슈 생성까지.
  이제 DevTools·스크린샷 툴·이슈 트래커를 오가며 작업하지 마세요.
  
  BugShot은 웹 페이지 위에서 직접 요소를 검사하고 스타일을 수정한 뒤, 변경 내역과 로그·스크린샷·녹화 영상을 포함한 완성된 이슈를 Jira, GitHub, Linear 등 6개 이슈 트래커로 바로 전송할 수 있는 크롬 익스텐션입니다.
  
  ---
  
  BugShot으로 할 수 있는 일
  
  - 요소 검사 — 확장 프로그램을 활성화하고 페이지의 어떤 요소든 클릭해 적용된 스타일과 속성을 확인하세요.
  - CSS 실시간 수정 — 시각적 에디터에서 스타일을 변경하고 결과를 즉시 페이지에 반영해보세요.
  - 60초 화면 녹화 — 버그가 발생하는 순간을 그대로 녹화해 재현 영상을 만드세요.
  - 30초 인스턴트 리플레이 — 녹화 버튼을 누르지 않아도 직전 30초를 자동으로 되감아 MP4로 저장합니다. 놓친 버그도 잡을 수 있습니다.
  - 자동 재현 단계 기록 — 클릭, 입력, 페이지 이동을 자동으로 추적해 사람이 읽을 수 있는 재현 단계를 만들어줍니다. 민감한 입력값은 자동으로 마스킹됩니다.
  - 콘솔과 네트워크 로그 수집 — 페이지 이동을 넘어 세션 전체의 로그를 자동으로 수집합니다. 결제 위젯·임베드 같은 외부 iframe의 로그까지 잡아내고, 출처별로 필터링해 영상·타임라인과 연동되는 인터랙티브 뷰어에서 확인할 수 있습니다.
  - DOM과 환경 정보 자동 수집 — 브라우저, 화면 해상도, 선택한 요소의 DOM 정보를 자동으로 첨부합니다.
  - AI 버그 리포트 생성 — 수집된 정보를 바탕으로 재현 단계, 예상 동작, 실제 동작이 정리된 리포트를 자동 생성합니다. 내 API 키(BYOK)를 연결하거나 크롬 온디바이스 AI를 그대로 사용할 수 있습니다.
  - 변경 내역 — 페이지에서 수정한 모든 요소를 한곳에서 다시 확인하세요.
  - 이슈 트래커로 바로 전송 — 연결된 플랫폼에 리포트와 첨부 파일을 한 번에 생성·전송할 수 있습니다.
  
  ---
  
  BugShot은 이런 팀을 위한 도구입니다.
  
  디자이너, QA:
  - 정확한 버그 전달: 글로 설명하기 어려운 시각적 이슈를 영상과 스크린샷으로 명확하게 공유하세요.
  - 실시간 디자인 검증: 라이브 페이지에서 직접 스타일을 조정해 픽셀 단위로 개선점을 제안할 수 있습니다.
  - 반복 작업 제거: 스크린샷, 브라우저 정보, 콘솔 로그를 매번 수동으로 정리할 필요가 없습니다.
  
  개발자:
  - 디버깅 시간 단축: 재현 환경과 콘솔 로그가 정리된 리포트를 받아 바로 원인 분석에 들어갈 수 있습니다.
  - DevTools 없이 CSS 수정: 직관적인 비주얼 에디터로 빠르게 스타일을 검증하세요.
  - 코드로 바로 복사: 수정 결과를 CSS로 추출해 그대로 프로젝트에 반영할 수 있습니다.
  
  ---
  
  이슈 트래커와 바로 연결됩니다.
  
  연동 탭에서 사용하는 플랫폼을 연결하세요. 모든 플랫폼이 OAuth 또는 API 토큰 방식을 지원하며, 여러 플랫폼을 동시에 연결해두고 이슈마다 원하는 대상에 전송할 수 있습니다.
  
  지원 플랫폼 전체 목록과 연동 방법은 사용 가이드에서 확인하세요:
  https://bugshot.gitbook.io/ko/integrations/platforms
  
  ---
  
  이렇게 사용하세요.
  
  1. 확장 프로그램 실행: 브라우저 툴바의 버그샷 아이콘을 클릭하거나 단축키로 사이드 패널을 여세요.
  2. 녹화 시작: 버그가 발생하는 순간을 최대 60초까지 녹화하면, 콘솔과 네트워크 로그가 자동으로 함께 수집됩니다.
  3. 요소 검사 및 수정: 페이지 위의 어떤 요소든 선택해 스타일과 속성을 확인하고, 비주얼 에디터로 즉시 수정해보세요.
  4. AI 리포트 생성: 수집된 정보를 바탕으로 재현 단계와 환경 정보가 정리된 버그 리포트 초안을 자동으로 만듭니다.
  5. 공유 및 내보내기: 마크다운, 이슈 트래커 전송 등 원하는 방식으로 동료에게 전달하세요.
  
  ---
  
  설치하기 전에 확인하세요.
  
  Side Panel API를 지원하는 모든 크로미움 기반 브라우저에서 동작합니다. 온디바이스 AI 기능을 사용하려면 Gemini Nano를 지원하는 최신 버전의 크롬이 필요합니다(또는 직접 API 키를 연결해 사용할 수 있습니다). 설치에 문제가 있을 경우 브라우저를 최신 버전으로 업데이트한 뒤 다시 시도해보세요.

• Jun 5, 2026
  host_permissions

  https://*.atlassian.net/*, https://api.atlassian.com/*, https://auth.atlassian.com/*, https://api.github.com/*, https://github.com/*, https://uploads.github.com/*, https://api.linear.app/*, https://api.notion.com/*, https://bugshot-oauth.ox501501.workers.dev/*

  https://*.atlassian.net/*, https://api.atlassian.com/*, https://auth.atlassian.com/*, https://api.github.com/*, https://github.com/*, https://uploads.github.com/*, https://api.linear.app/*, https://api.notion.com/*, https://gitlab.com/*, https://app.asana.com/*, https://bugshot-oauth.ox501501.workers.dev/*

• Jun 5, 2026
  permissions

  sidePanel, activeTab, scripting, storage, commands, contextMenus, identity, tabCapture

  sidePanel, activeTab, scripting, storage, commands, contextMenus, identity, tabCapture, webNavigation

• Jun 5, 2026
  description

  BugShot — 브라우저에서 끝내는 디자인 QA와 버그 리포팅
  
  디자인 리뷰, 버그 제보, 스타일 수정, 이슈 생성까지.
  이제 DevTools·스크린샷 툴·이슈 트래커를 오가며 작업하지 마세요.
  
  BugShot은 웹 페이지 위에서 직접 요소를 검사하고 스타일을 수정한 뒤, 변경 내역과 로그·스크린샷·녹화 영상을 포함한 완성된 이슈를 Jira·GitHub·Linear·Notion으로 바로 전송할 수 있는 크롬 익스텐션입니다.
  
  ---
  
  BugShot으로 할 수 있는 일
  
  - 요소 검사 — 확장 프로그램을 활성화하고 페이지의 어떤 요소든 클릭해 적용된 스타일과 속성을 확인하세요.
  - CSS 실시간 수정 — 시각적 에디터에서 스타일을 변경하고 결과를 즉시 페이지에 반영해보세요.
  - 60초 화면 녹화 — 버그가 발생하는 순간을 그대로 녹화해 재현 영상을 만드세요.
  - 콘솔과 네트워크 로그 수집 — 녹화 구간 동안 발생한 로그를 자동으로 수집하고, 중요한 신호만 골라 정리합니다.
  - DOM과 환경 정보 자동 수집 — 브라우저, 화면 해상도, 선택한 요소의 DOM 정보를 자동으로 첨부합니다.
  - AI 버그 리포트 생성 — 수집된 정보를 바탕으로 재현 단계, 예상 동작, 실제 동작이 정리된 리포트를 자동 생성합니다.
  - 변경 이력 확인 — 페이지에서 수정한 모든 요소를 한곳에서 확인할 수 있습니다.
  - 이슈 트래커로 바로 전송 — Jira, GitHub, Linear, Notion에 리포트와 첨부 파일을 한 번에 생성·전송할 수 있습니다.
  
  ---
  
  BugShot은 이런 팀을 위한 도구입니다.
  
  디자이너, QA:
  - 정확한 버그 전달: 글로 설명하기 어려운 시각적 이슈를 영상과 스크린샷으로 명확하게 공유하세요.
  - 실시간 디자인 검증: 라이브 페이지에서 직접 스타일을 조정해 픽셀 단위로 개선점을 제안할 수 있습니다.
  - 반복 작업 제거: 스크린샷, 브라우저 정보, 콘솔 로그를 매번 수동으로 정리할 필요가 없습니다.
  
  개발자:
  - 디버깅 시간 단축: 재현 환경과 콘솔 로그가 정리된 리포트를 받아 바로 원인 분석에 들어갈 수 있습니다.
  - DevTools 없이 CSS 수정: 직관적인 비주얼 에디터로 빠르게 스타일을 검증하세요.
  - 코드로 바로 복사: 수정 결과를 CSS로 추출해 그대로 프로젝트에 반영할 수 있습니다.
  
  ---
  
  이슈 트래커와 바로 연결됩니다.
  
  - Jira — OAuth 또는 API Token
  - GitHub — OAuth 또는 Personal Access Token
  - Linear — OAuth 또는 API Key
  - Notion — OAuth 또는 Internal Integration Token
  
  여러 플랫폼을 동시에 연결해두고 이슈마다 원하는 대상에 전송할 수 있습니다.
  
  ---
  
  이렇게 사용하세요.
  
  1. 확장 프로그램 실행: 브라우저 툴바의 버그샷 아이콘을 클릭하거나 단축키로 사이드 패널을 여세요.
  2. 녹화 시작: 버그가 발생하는 순간을 최대 60초까지 녹화하면, 콘솔과 네트워크 로그가 자동으로 함께 수집됩니다.
  3. 요소 검사 및 수정: 페이지 위의 어떤 요소든 선택해 스타일과 속성을 확인하고, 비주얼 에디터로 즉시 수정해보세요.
  4. AI 리포트 생성: 수집된 정보를 바탕으로 재현 단계와 환경 정보가 정리된 버그 리포트 초안을 자동으로 만듭니다.
  5. 공유 및 내보내기: 마크다운, 이슈 트래커 전송 등 원하는 방식으로 동료에게 전달하세요.
  
  ---
  
  설치하기 전에 확인하세요.
  
  Side Panel API를 지원하는 모든 크로미움 기반 브라우저에서 동작합니다. 온디바이스 AI 기능을 사용하려면 Gemini Nano를 지원하는 최신 버전의 크롬이 필요합니다. 설치에 문제가 있을 경우 브라우저를 최신 버전으로 업데이트한 뒤 다시 시도해보세요.

  BugShot — 브라우저에서 끝내는 디자인 QA와 버그 리포팅
  
  디자인 리뷰, 버그 제보, 스타일 수정, 이슈 생성까지.
  이제 DevTools·스크린샷 툴·이슈 트래커를 오가며 작업하지 마세요.
  
  BugShot은 웹 페이지 위에서 직접 요소를 검사하고 스타일을 수정한 뒤, 변경 내역과 로그·스크린샷·녹화 영상을 포함한 완성된 이슈를 Jira·GitHub·Linear·Notion으로 바로 전송할 수 있는 크롬 익스텐션입니다.
  
  ---
  
  BugShot으로 할 수 있는 일
  
  - 요소 검사 — 확장 프로그램을 활성화하고 페이지의 어떤 요소든 클릭해 적용된 스타일과 속성을 확인하세요.
  - CSS 실시간 수정 — 시각적 에디터에서 스타일을 변경하고 결과를 즉시 페이지에 반영해보세요.
  - 60초 화면 녹화 — 버그가 발생하는 순간을 그대로 녹화해 재현 영상을 만드세요.
  - 30초 인스턴트 리플레이 — 녹화 버튼을 누르지 않아도 직전 30초를 자동으로 되감아 MP4로 저장합니다. 놓친 버그도 잡을 수 있습니다.
  - 자동 재현 단계 기록 — 클릭, 입력, 페이지 이동을 자동으로 추적해 사람이 읽을 수 있는 재현 단계를 만들어줍니다. 민감한 입력값은 자동으로 마스킹됩니다.
  - 콘솔과 네트워크 로그 수집 — 페이지 이동을 넘어 세션 전체의 로그를 자동으로 수집하고, 영상과 타임라인이 연동되는 인터랙티브 로그 뷰어로 확인할 수 있습니다.
  - DOM과 환경 정보 자동 수집 — 브라우저, 화면 해상도, 선택한 요소의 DOM 정보를 자동으로 첨부합니다.
  - AI 버그 리포트 생성 — 수집된 정보를 바탕으로 재현 단계, 예상 동작, 실제 동작이 정리된 리포트를 자동 생성합니다.
  - 이슈 트래커로 바로 전송 — Jira, GitHub, Linear, Notion에 리포트와 첨부 파일을 한 번에 생성·전송할 수 있습니다.
  
  ---
  
  BugShot은 이런 팀을 위한 도구입니다.
  
  디자이너, QA:
  - 정확한 버그 전달: 글로 설명하기 어려운 시각적 이슈를 영상과 스크린샷으로 명확하게 공유하세요.
  - 실시간 디자인 검증: 라이브 페이지에서 직접 스타일을 조정해 픽셀 단위로 개선점을 제안할 수 있습니다.
  - 반복 작업 제거: 스크린샷, 브라우저 정보, 콘솔 로그를 매번 수동으로 정리할 필요가 없습니다.
  
  개발자:
  - 디버깅 시간 단축: 재현 환경과 콘솔 로그가 정리된 리포트를 받아 바로 원인 분석에 들어갈 수 있습니다.
  - DevTools 없이 CSS 수정: 직관적인 비주얼 에디터로 빠르게 스타일을 검증하세요.
  - 코드로 바로 복사: 수정 결과를 CSS로 추출해 그대로 프로젝트에 반영할 수 있습니다.
  
  ---
  
  이슈 트래커와 바로 연결됩니다.
  
  - Jira — OAuth 또는 API Token
  - GitHub — OAuth 또는 Personal Access Token
  - Linear — OAuth 또는 API Key
  - Notion — OAuth 또는 Internal Integration Token
  
  여러 플랫폼을 동시에 연결해두고 이슈마다 원하는 대상에 전송할 수 있습니다.
  
  ---
  
  이렇게 사용하세요.
  
  1. 확장 프로그램 실행: 브라우저 툴바의 버그샷 아이콘을 클릭하거나 단축키로 사이드 패널을 여세요.
  2. 녹화 시작: 버그가 발생하는 순간을 최대 60초까지 녹화하면, 콘솔과 네트워크 로그가 자동으로 함께 수집됩니다.
  3. 요소 검사 및 수정: 페이지 위의 어떤 요소든 선택해 스타일과 속성을 확인하고, 비주얼 에디터로 즉시 수정해보세요.
  4. AI 리포트 생성: 수집된 정보를 바탕으로 재현 단계와 환경 정보가 정리된 버그 리포트 초안을 자동으로 만듭니다.
  5. 공유 및 내보내기: 마크다운, 이슈 트래커 전송 등 원하는 방식으로 동료에게 전달하세요.
  
  ---
  
  설치하기 전에 확인하세요.
  
  Side Panel API를 지원하는 모든 크로미움 기반 브라우저에서 동작합니다. 온디바이스 AI 기능을 사용하려면 Gemini Nano를 지원하는 최신 버전의 크롬이 필요합니다. 설치에 문제가 있을 경우 브라우저를 최신 버전으로 업데이트한 뒤 다시 시도해보세요.

• May 30, 2026
  description

  BugShot — 브라우저에서 끝내는 디자인 QA & 버그 리포팅
  
  디자인 리뷰, 버그 제보, 스타일 수정, 이슈 생성까지.
  이제 DevTools·스크린샷 툴·이슈 트래커를 오가며 작업하지 마세요.
  
  BugShot은 웹 페이지 위에서 직접 요소를 검사하고 스타일을 수정한 뒤, 변경 내역과 로그·스크린샷·녹화 영상을 포함한 완성된 이슈를 Jira·GitHub·Linear·Notion으로 바로 전송할 수 있는 크롬 익스텐션입니다.
  
  ---
  
  주요 기능
  
  실시간 요소 검사 및 스타일 수정
   ● 페이지 위 아무 요소나 클릭해 CSS 속성을 확인하고 즉시 수정
   ● 변경 사항 실시간 반영
   ● Hover / Active 상태 확인
   ● Computed Style 및 레이아웃 디버깅 지원
  
  디자인 토큰 인식
   ● var(--spacing-14) 같은 CSS 변수를 토큰 이름 기준으로 해석
   ● var() 체인 추적 지원
   ● Raw value 대신 semantic token 중심 표시
   ● 디자인 시스템 정합성 유지
  
  Before & After Diff 자동 생성
   ● 수정 전후 스타일 차이 자동 비교
   ● CSS 속성 변경 내역 자동 추적
   ● 토큰 단위 diff 지원
   ● Before / After 비교 테이블 생성
  
  스크린샷 & 화면 녹화
   ● 드래그 영역 캡처
   ● Annotation(주석) 추가
   ● 최대 60초 화면 녹화
   ● 인터랙션 버그 기록 지원
  
  네트워크 · 콘솔 로그 자동 수집
    ● API 요청 및 실패 로그 기록
    ● Console error / warning 자동 수집
    ● 런타임 오류 첨부 지원
   ● 캡처·녹화 중 발생한 로그 자동 저장
  
  AI 어시스턴트
   ● Chrome On-device LLM 또는 사용자 LLM API 연결 지원
  
  이슈 초안 자동 생성
   ● 선택 요소·스타일 변경·스크린샷·영상·로그 기반 이슈 생성
   ● 제목 및 설명 자동 작성
  
  자연어 스타일 편집
   ● “패딩 줄여줘”
   ● “둥글기 더 키워줘”
   ● “버튼 간격 맞춰줘”
  자연어 한 문장으로 여러 CSS 속성을 동시에 수정할 수 있습니다.
  디자인 토큰을 인식해 결과를 토큰 단위로 스냅합니다.
  
  멀티 플랫폼 직접 연동
   ● Jira / GitHub / Linear / Notion 지원
   ● 이슈 제목·설명·CSS diff·스크린샷·영상·로그 자동 첨부
   ● 플랫폼별 메타데이터 설정 지원
  
  지원 메타데이터 예시
   ● Jira: 프로젝트, 이슈 타입, 담당자, 우선순위, 에픽
   ● GitHub: 저장소, 라벨, 담당자
   ● Linear: 팀, 프로젝트, 우선순위, 라벨
   ● Notion: 데이터베이스, 상태, Select/Multi-select 속성
  
  이슈 추적
   ● 생성한 이슈 목록 확인
   ● 현재 상태 추적
   ● 플랫폼 링크 관리
  
  Markdown 복사 지원
   ● Notion / Slack / Confluence / Discord 등에 바로 붙여넣기 가능
   ● 테이블 및 diff 유지
   ● 플랫폼 연동 없이 단독 사용 가능
  
  ---
  
  BugShot은 이런 팀을 위한 도구입니다
  
  디자이너 & 프론트엔드 개발자
   ● 디자인 리뷰 중 발견한 구현 이슈를 CSS diff와 함께 전달
   ● DevTools 없이 빠르게 스타일 수정 및 검증
   ● 디자인 토큰 기반 UI 정합성 유지
   ● 라이브 페이지에서 수정안을 직접 제안
  
  QA 엔지니어
   ● 스크린샷·영상·로그 포함 버그 리포트 작성
   ● 인터랙션 버그 영상 기록 및 첨부
   ● 커뮤니케이션 핑퐁 감소
   ● 재현 가능한 이슈 전달
  
  ---
  
  사용법
  
  1. BugShot 실행
   ● 브라우저 툴바의 BugShot 아이콘 클릭
   ● 또는 Ctrl(Cmd) + Shift + E
  
  2. 모드 선택
   ● DOM 요소 선택
   ● 영역 캡처
   ● 화면 녹화
  
  3. 스타일 수정
   ● 요소 선택 후 CSS 속성 수정
   ● 변경 사항 즉시 반영
  
  4. 결과 확인
   ● 자동 생성된 Diff 테이블 검토
   ● 스크린샷·로그·영상 확인
  
  5. 제출 또는 복사
   ● Jira / GitHub / Linear / Notion으로 전송
   ● 또는 Markdown으로 복사
  
  ---
  
  플랫폼 연동
  
  연동 탭에서 플랫폼을 연결할 수 있습니다.
  
   ● Jira — OAuth 또는 API Token
   ● GitHub — OAuth 또는 Personal Access Token
   ● Linear — OAuth 또는 API Key
   ● Notion — OAuth 또는 Internal Integration Token
  
  여러 플랫폼을 동시에 연결해두고 이슈마다 원하는 대상에 전송할 수 있습니다.
  
  스크린샷, 녹화 영상, 로그는 각 플랫폼에 자동 첨부됩니다.
  
  플랫폼을 연결하지 않아도 BugShot은 독립적으로 사용할 수 있습니다.
  모든 결과는 Markdown으로 내보낼 수 있습니다.

  BugShot — 브라우저에서 끝내는 디자인 QA와 버그 리포팅
  
  디자인 리뷰, 버그 제보, 스타일 수정, 이슈 생성까지.
  이제 DevTools·스크린샷 툴·이슈 트래커를 오가며 작업하지 마세요.
  
  BugShot은 웹 페이지 위에서 직접 요소를 검사하고 스타일을 수정한 뒤, 변경 내역과 로그·스크린샷·녹화 영상을 포함한 완성된 이슈를 Jira·GitHub·Linear·Notion으로 바로 전송할 수 있는 크롬 익스텐션입니다.
  
  ---
  
  BugShot으로 할 수 있는 일
  
  - 요소 검사 — 확장 프로그램을 활성화하고 페이지의 어떤 요소든 클릭해 적용된 스타일과 속성을 확인하세요.
  - CSS 실시간 수정 — 시각적 에디터에서 스타일을 변경하고 결과를 즉시 페이지에 반영해보세요.
  - 60초 화면 녹화 — 버그가 발생하는 순간을 그대로 녹화해 재현 영상을 만드세요.
  - 콘솔과 네트워크 로그 수집 — 녹화 구간 동안 발생한 로그를 자동으로 수집하고, 중요한 신호만 골라 정리합니다.
  - DOM과 환경 정보 자동 수집 — 브라우저, 화면 해상도, 선택한 요소의 DOM 정보를 자동으로 첨부합니다.
  - AI 버그 리포트 생성 — 수집된 정보를 바탕으로 재현 단계, 예상 동작, 실제 동작이 정리된 리포트를 자동 생성합니다.
  - 변경 이력 확인 — 페이지에서 수정한 모든 요소를 한곳에서 확인할 수 있습니다.
  - 이슈 트래커로 바로 전송 — Jira, GitHub, Linear, Notion에 리포트와 첨부 파일을 한 번에 생성·전송할 수 있습니다.
  
  ---
  
  BugShot은 이런 팀을 위한 도구입니다.
  
  디자이너, QA:
  - 정확한 버그 전달: 글로 설명하기 어려운 시각적 이슈를 영상과 스크린샷으로 명확하게 공유하세요.
  - 실시간 디자인 검증: 라이브 페이지에서 직접 스타일을 조정해 픽셀 단위로 개선점을 제안할 수 있습니다.
  - 반복 작업 제거: 스크린샷, 브라우저 정보, 콘솔 로그를 매번 수동으로 정리할 필요가 없습니다.
  
  개발자:
  - 디버깅 시간 단축: 재현 환경과 콘솔 로그가 정리된 리포트를 받아 바로 원인 분석에 들어갈 수 있습니다.
  - DevTools 없이 CSS 수정: 직관적인 비주얼 에디터로 빠르게 스타일을 검증하세요.
  - 코드로 바로 복사: 수정 결과를 CSS로 추출해 그대로 프로젝트에 반영할 수 있습니다.
  
  ---
  
  이슈 트래커와 바로 연결됩니다.
  
  - Jira — OAuth 또는 API Token
  - GitHub — OAuth 또는 Personal Access Token
  - Linear — OAuth 또는 API Key
  - Notion — OAuth 또는 Internal Integration Token
  
  여러 플랫폼을 동시에 연결해두고 이슈마다 원하는 대상에 전송할 수 있습니다.
  
  ---
  
  이렇게 사용하세요.
  
  1. 확장 프로그램 실행: 브라우저 툴바의 버그샷 아이콘을 클릭하거나 단축키로 사이드 패널을 여세요.
  2. 녹화 시작: 버그가 발생하는 순간을 최대 60초까지 녹화하면, 콘솔과 네트워크 로그가 자동으로 함께 수집됩니다.
  3. 요소 검사 및 수정: 페이지 위의 어떤 요소든 선택해 스타일과 속성을 확인하고, 비주얼 에디터로 즉시 수정해보세요.
  4. AI 리포트 생성: 수집된 정보를 바탕으로 재현 단계와 환경 정보가 정리된 버그 리포트 초안을 자동으로 만듭니다.
  5. 공유 및 내보내기: 마크다운, 이슈 트래커 전송 등 원하는 방식으로 동료에게 전달하세요.
  
  ---
  
  설치하기 전에 확인하세요.
  
  Side Panel API를 지원하는 모든 크로미움 기반 브라우저에서 동작합니다. 온디바이스 AI 기능을 사용하려면 Gemini Nano를 지원하는 최신 버전의 크롬이 필요합니다. 설치에 문제가 있을 경우 브라우저를 최신 버전으로 업데이트한 뒤 다시 시도해보세요.

• May 23, 2026
  description

  BugShot — 한 번에 끝내는 버그 리포트
  
  디자인 리뷰와 버그 리포팅, 이제 브라우저를 떠나지 마세요. BugShot은 웹 요소를 검사하고, 실시간으로 스타일을 수정하며, 발견한 시각적 버그를 클릭 한 번으로 Jira·GitHub·Linear·Notion 티켓으로 변환해주는 강력한 크롬 익스텐션입니다.
  
  ---
  
  BugShot으로 할 수 있는 일:
  
  ● 실시간 요소 검사 및 수정: 페이지 내 요소를 클릭해 CSS 속성을 즉시 확인하고 수정하세요. 모든 변경 사항은 실시간으로 반영됩니다.
  ● 디자인 토큰 인식: var(--spacing-14)와 같은 CSS 변수를 해석하여 원시 값 대신 디자인 시스템의 토큰 명칭으로 보여줍니다.
  ● Before & After 비교: 수정 전후의 차이를 표(Diff table)로 자동 생성합니다. 토큰 기반의 정확한 변경 내역을 확인할 수 있습니다.
  ● 강력한 캡처 및 녹화: 드래그로 영역을 캡처하고 주석을 답니다. 스크린샷으로 부족하다면 최대 60초간의 영상 녹화로 버그 상황을 완벽히 기록하세요.
  ● 네트워크·콘솔 로그 자동 수집: 캡처가 진행되는 동안 네트워크 요청과 콘솔 메시지가 자동으로 기록됩니다. API 에러나 런타임 오류까지 이슈에 그대로 첨부됩니다.
  ● AI 어시스턴트: 크롬 온디바이스 LLM 또는 직접 사용하는 LLM API 키를 연결하면 두 가지 자동화를 사용할 수 있습니다.
     - 이슈 초안 자동 생성: 선택한 요소·스타일 변경·스크린샷·녹화 영상을 바탕으로 이슈 제목과 설명을 작성합니다.
     - 자연어 스타일 편집: "패딩 줄이고 둥글기 키워줘" 같은 한 문장으로 선택 영역의 CSS를 일괄 수정합니다. 디자인 토큰(예: var(--spacing-14))을 인식해 결과를 토큰 단위로 스냅합니다.
  ● 멀티 플랫폼 다이렉트 연동: Jira, GitHub, Linear, Notion 중 어디든 사이드바에서 바로 이슈를 생성합니다. 이슈 제목, 설명, 변경 내역, 스크린샷, 영상, 로그가 한 번에 첨부됩니다. 플랫폼별 메타(이슈 타입·담당자·우선순위·에픽·라벨·저장소·팀·데이터베이스 등)도 같이 설정할 수 있습니다.
  ● 이슈 추적: 이전에 제출한 이슈와 그 상태를 브라우저 안에서 확인하세요.
  ● 마크다운으로 복사: Notion, Slack, Confluence 등 어디에든 붙여넣으세요. 테이블도 그대로 유지됩니다.
  
  ---
  
  BugShot은 누구를 위한 도구인가요?
  
  디자이너 & 프론트엔드 개발자
  ● 디자인 리뷰 중에 발견한 구현 버그를 정확한 CSS diff와 함께 리포트합니다.
  ● DevTools를 열지 않고도 레이아웃·스타일 이슈를 디버깅합니다.
  ● 계산된 값 대신 디자인 토큰 이름을 그대로 보면서 디자인 시스템과의 정합성을 유지합니다.
  ● 라이브 페이지에서 스타일을 직접 수정해 "이렇게 고치면 됩니다"를 그대로 보여줍니다.
  
  QA 엔지니어
  ● 스크린샷, 녹화 영상, 스타일 비교, 네트워크·콘솔 로그가 포함된 상세한 이슈를 페이지에서 바로 작성합니다.
  ● 인터랙션 버그를 영상으로 녹화해 이슈에 자동으로 첨부합니다.
  ● 모든 맥락을 하나의 리포트에 담아 커뮤니케이션 핑퐁을 줄입니다.
  
  ---
  
  사용법
  
  1. 익스텐션 실행: 브라우저 툴바의 BugShot 아이콘을 클릭하거나 `Ctrl(Cmd) + Shift + E`를 누릅니다.
  2. 캡처 모드 선택: DOM 요소 선택, 영역 스크린샷, 탭 녹화 중에서 고릅니다.
  3. 스타일 편집: 요소를 선택하고 CSS 속성을 수정합니다. 변경 사항이 페이지에 즉시 반영됩니다.
  4. 변경 사항 확인: 자동 생성된 before/after diff 테이블과 스크린샷을 검토합니다.
  5. 제출 또는 복사: 연결된 플랫폼(Jira / GitHub / Linear / Notion)으로 한 번에 보내거나, 다른 도구에 쓰려면 마크다운으로 복사합니다.
  
  ---
  
  플랫폼 연동
  
  연동 탭에서 사용하실 플랫폼을 연결하세요. 모든 플랫폼은 OAuth 또는 토큰 인증을 지원하며, 동시에 여러 개를 연결해 두고 이슈마다 다른 플랫폼을 골라 보낼 수도 있습니다.
  
  ● Jira — OAuth 또는 API 토큰. 프로젝트, 이슈 타입, 담당자, 우선순위, 에픽, 연결된 이슈 지원.
  ● GitHub — OAuth 또는 Personal Access Token. 저장소, 라벨, 담당자 지원.
  ● Linear — OAuth 또는 API Key. 팀, 프로젝트, 라벨, 우선순위, 담당자 지원.
  ● Notion — OAuth 또는 Internal Integration Token. 데이터베이스, 상태, 사용자 정의 속성(select/multi-select) 지원.
  
  스크린샷·녹화 영상·로그는 각 플랫폼의 첨부 또는 인라인 미디어로 자동 업로드됩니다.
  
  어떤 플랫폼도 연결하지 않아도 괜찮아요. BugShot은 단독으로도 동작합니다 — 모든 내용을 마크다운으로 복사할 수 있어요.

  BugShot — 브라우저에서 끝내는 디자인 QA & 버그 리포팅
  
  디자인 리뷰, 버그 제보, 스타일 수정, 이슈 생성까지.
  이제 DevTools·스크린샷 툴·이슈 트래커를 오가며 작업하지 마세요.
  
  BugShot은 웹 페이지 위에서 직접 요소를 검사하고 스타일을 수정한 뒤, 변경 내역과 로그·스크린샷·녹화 영상을 포함한 완성된 이슈를 Jira·GitHub·Linear·Notion으로 바로 전송할 수 있는 크롬 익스텐션입니다.
  
  ---
  
  주요 기능
  
  실시간 요소 검사 및 스타일 수정
   ● 페이지 위 아무 요소나 클릭해 CSS 속성을 확인하고 즉시 수정
   ● 변경 사항 실시간 반영
   ● Hover / Active 상태 확인
   ● Computed Style 및 레이아웃 디버깅 지원
  
  디자인 토큰 인식
   ● var(--spacing-14) 같은 CSS 변수를 토큰 이름 기준으로 해석
   ● var() 체인 추적 지원
   ● Raw value 대신 semantic token 중심 표시
   ● 디자인 시스템 정합성 유지
  
  Before & After Diff 자동 생성
   ● 수정 전후 스타일 차이 자동 비교
   ● CSS 속성 변경 내역 자동 추적
   ● 토큰 단위 diff 지원
   ● Before / After 비교 테이블 생성
  
  스크린샷 & 화면 녹화
   ● 드래그 영역 캡처
   ● Annotation(주석) 추가
   ● 최대 60초 화면 녹화
   ● 인터랙션 버그 기록 지원
  
  네트워크 · 콘솔 로그 자동 수집
    ● API 요청 및 실패 로그 기록
    ● Console error / warning 자동 수집
    ● 런타임 오류 첨부 지원
   ● 캡처·녹화 중 발생한 로그 자동 저장
  
  AI 어시스턴트
   ● Chrome On-device LLM 또는 사용자 LLM API 연결 지원
  
  이슈 초안 자동 생성
   ● 선택 요소·스타일 변경·스크린샷·영상·로그 기반 이슈 생성
   ● 제목 및 설명 자동 작성
  
  자연어 스타일 편집
   ● “패딩 줄여줘”
   ● “둥글기 더 키워줘”
   ● “버튼 간격 맞춰줘”
  자연어 한 문장으로 여러 CSS 속성을 동시에 수정할 수 있습니다.
  디자인 토큰을 인식해 결과를 토큰 단위로 스냅합니다.
  
  멀티 플랫폼 직접 연동
   ● Jira / GitHub / Linear / Notion 지원
   ● 이슈 제목·설명·CSS diff·스크린샷·영상·로그 자동 첨부
   ● 플랫폼별 메타데이터 설정 지원
  
  지원 메타데이터 예시
   ● Jira: 프로젝트, 이슈 타입, 담당자, 우선순위, 에픽
   ● GitHub: 저장소, 라벨, 담당자
   ● Linear: 팀, 프로젝트, 우선순위, 라벨
   ● Notion: 데이터베이스, 상태, Select/Multi-select 속성
  
  이슈 추적
   ● 생성한 이슈 목록 확인
   ● 현재 상태 추적
   ● 플랫폼 링크 관리
  
  Markdown 복사 지원
   ● Notion / Slack / Confluence / Discord 등에 바로 붙여넣기 가능
   ● 테이블 및 diff 유지
   ● 플랫폼 연동 없이 단독 사용 가능
  
  ---
  
  BugShot은 이런 팀을 위한 도구입니다
  
  디자이너 & 프론트엔드 개발자
   ● 디자인 리뷰 중 발견한 구현 이슈를 CSS diff와 함께 전달
   ● DevTools 없이 빠르게 스타일 수정 및 검증
   ● 디자인 토큰 기반 UI 정합성 유지
   ● 라이브 페이지에서 수정안을 직접 제안
  
  QA 엔지니어
   ● 스크린샷·영상·로그 포함 버그 리포트 작성
   ● 인터랙션 버그 영상 기록 및 첨부
   ● 커뮤니케이션 핑퐁 감소
   ● 재현 가능한 이슈 전달
  
  ---
  
  사용법
  
  1. BugShot 실행
   ● 브라우저 툴바의 BugShot 아이콘 클릭
   ● 또는 Ctrl(Cmd) + Shift + E
  
  2. 모드 선택
   ● DOM 요소 선택
   ● 영역 캡처
   ● 화면 녹화
  
  3. 스타일 수정
   ● 요소 선택 후 CSS 속성 수정
   ● 변경 사항 즉시 반영
  
  4. 결과 확인
   ● 자동 생성된 Diff 테이블 검토
   ● 스크린샷·로그·영상 확인
  
  5. 제출 또는 복사
   ● Jira / GitHub / Linear / Notion으로 전송
   ● 또는 Markdown으로 복사
  
  ---
  
  플랫폼 연동
  
  연동 탭에서 플랫폼을 연결할 수 있습니다.
  
   ● Jira — OAuth 또는 API Token
   ● GitHub — OAuth 또는 Personal Access Token
   ● Linear — OAuth 또는 API Key
   ● Notion — OAuth 또는 Internal Integration Token
  
  여러 플랫폼을 동시에 연결해두고 이슈마다 원하는 대상에 전송할 수 있습니다.
  
  스크린샷, 녹화 영상, 로그는 각 플랫폼에 자동 첨부됩니다.
  
  플랫폼을 연결하지 않아도 BugShot은 독립적으로 사용할 수 있습니다.
  모든 결과는 Markdown으로 내보낼 수 있습니다.

• May 17, 2026
  description

  BugShot: 브라우저에서 바로 끝내는 디자인 QA 툴
  
  디자인 리뷰와 버그 리포팅, 이제 브라우저를 떠나지 마세요. BugShot은 웹 요소를 검사하고, 실시간으로 스타일을 수정하며, 발견한 시각적 버그를 클릭 한 번으로 Jira·GitHub·Linear·Notion 티켓으로 변환해주는 강력한 크롬 익스텐션입니다.
  
  ---
  
  BugShot으로 할 수 있는 일:
  
  ● 실시간 요소 검사 및 수정: 페이지 내 요소를 클릭해 CSS 속성을 즉시 확인하고 수정하세요. 모든 변경 사항은 실시간으로 반영됩니다.
  ● 디자인 토큰 인식: var(--spacing-14)와 같은 CSS 변수를 해석하여 원시 값 대신 디자인 시스템의 토큰 명칭으로 보여줍니다.
  ● Before & After 비교: 수정 전후의 차이를 표(Diff table)로 자동 생성합니다. 토큰 기반의 정확한 변경 내역을 확인할 수 있습니다.
  ● 강력한 캡처 및 녹화: 드래그로 영역을 캡처하고 주석을 답니다. 스크린샷으로 부족하다면 최대 60초간의 영상 녹화로 버그 상황을 완벽히 기록하세요.
  ● 네트워크·콘솔 로그 자동 수집: 캡처가 진행되는 동안 네트워크 요청과 콘솔 메시지가 자동으로 기록됩니다. API 에러나 런타임 오류까지 이슈에 그대로 첨부됩니다.
  ● AI 어시스턴트 (BYOK) — 직접 사용하시는 LLM API 키를 연결하면 두 가지 자동화를 사용할 수 있습니다.
     - 이슈 초안 자동 생성: 선택한 요소·스타일 변경·스크린샷·녹화 영상을 바탕으로 이슈 제목과 설명을 작성합니다.
     - 자연어 스타일 편집: "패딩 줄이고 둥글기 키워줘" 같은 한 문장으로 선택 영역의 CSS를 일괄 수정합니다. 디자인 토큰(예: var(--spacing-14))을 인식해 결과를 토큰 단위로 스냅합니다.
  ● 멀티 플랫폼 다이렉트 연동: Jira, GitHub, Linear, Notion 중 어디든 사이드바에서 바로 이슈를 생성합니다. 이슈 제목, 설명, 변경 내역, 스크린샷, 영상, 로그가 한 번에 첨부됩니다. 플랫폼별 메타(이슈 타입·담당자·우선순위·에픽·라벨·저장소·팀·데이터베이스 등)도 같이 설정할 수 있습니다.
  ● 이슈 추적 — 이전에 제출한 이슈와 그 상태를 브라우저 안에서 확인하세요.
  ● 마크다운으로 복사 — Notion, Slack, Confluence 등 어디에든 붙여넣으세요. 테이블도 그대로 유지됩니다.
  
  ---
  
  BugShot은 누구를 위한 도구인가요?
  
  디자이너 & 프론트엔드 개발자
  ● 디자인 리뷰 중에 발견한 구현 버그를 정확한 CSS diff와 함께 리포트합니다.
  ● DevTools를 열지 않고도 레이아웃·스타일 이슈를 디버깅합니다.
  ● 계산된 값 대신 디자인 토큰 이름을 그대로 보면서 디자인 시스템과의 정합성을 유지합니다.
  ● 라이브 페이지에서 스타일을 직접 수정해 "이렇게 고치면 됩니다"를 그대로 보여줍니다.
  
  QA 엔지니어
  ● 스크린샷, 녹화 영상, 스타일 비교, 네트워크·콘솔 로그가 포함된 상세한 이슈를 페이지에서 바로 작성합니다.
  ● 인터랙션 버그를 영상으로 녹화해 이슈에 자동으로 첨부합니다.
  ● 모든 맥락을 하나의 리포트에 담아 커뮤니케이션 핑퐁을 줄입니다.
  
  ---
  
  사용법
  
  1. 익스텐션 실행: 브라우저 툴바의 BugShot 아이콘을 클릭하거나 `Ctrl(Cmd) + Shift + E`를 누릅니다.
  2. 캡처 모드 선택: DOM 요소 선택, 영역 스크린샷, 탭 녹화 중에서 고릅니다.
  3. 스타일 편집: 요소를 선택하고 CSS 속성을 수정합니다. 변경 사항이 페이지에 즉시 반영됩니다.
  4. 변경 사항 확인: 자동 생성된 before/after diff 테이블과 스크린샷을 검토합니다.
  5. 제출 또는 복사: 연결된 플랫폼(Jira / GitHub / Linear / Notion)으로 한 번에 보내거나, 다른 도구에 쓰려면 마크다운으로 복사합니다.
  
  ---
  
  플랫폼 연동
  
  연동 탭에서 사용하실 플랫폼을 연결하세요. 모든 플랫폼은 OAuth 또는 토큰 인증을 지원하며, 동시에 여러 개를 연결해 두고 이슈마다 다른 플랫폼을 골라 보낼 수도 있습니다.
  
  ● Jira — OAuth 또는 API 토큰. 프로젝트, 이슈 타입, 담당자, 우선순위, 에픽, 연결된 이슈 지원.
  ● GitHub — OAuth 또는 Personal Access Token. 저장소, 라벨, 담당자 지원.
  ● Linear — OAuth 또는 API Key. 팀, 프로젝트, 라벨, 우선순위, 담당자 지원.
  ● Notion — OAuth 또는 Internal Integration Token. 데이터베이스, 상태, 사용자 정의 속성(select/multi-select) 지원.
  
  스크린샷·녹화 영상·로그는 각 플랫폼의 첨부 또는 인라인 미디어로 자동 업로드됩니다.
  
  어떤 플랫폼도 연결하지 않아도 괜찮아요. BugShot은 단독으로도 동작합니다 — 모든 내용을 마크다운으로 복사할 수 있어요.

  BugShot — 한 번에 끝내는 버그 리포트
  
  디자인 리뷰와 버그 리포팅, 이제 브라우저를 떠나지 마세요. BugShot은 웹 요소를 검사하고, 실시간으로 스타일을 수정하며, 발견한 시각적 버그를 클릭 한 번으로 Jira·GitHub·Linear·Notion 티켓으로 변환해주는 강력한 크롬 익스텐션입니다.
  
  ---
  
  BugShot으로 할 수 있는 일:
  
  ● 실시간 요소 검사 및 수정: 페이지 내 요소를 클릭해 CSS 속성을 즉시 확인하고 수정하세요. 모든 변경 사항은 실시간으로 반영됩니다.
  ● 디자인 토큰 인식: var(--spacing-14)와 같은 CSS 변수를 해석하여 원시 값 대신 디자인 시스템의 토큰 명칭으로 보여줍니다.
  ● Before & After 비교: 수정 전후의 차이를 표(Diff table)로 자동 생성합니다. 토큰 기반의 정확한 변경 내역을 확인할 수 있습니다.
  ● 강력한 캡처 및 녹화: 드래그로 영역을 캡처하고 주석을 답니다. 스크린샷으로 부족하다면 최대 60초간의 영상 녹화로 버그 상황을 완벽히 기록하세요.
  ● 네트워크·콘솔 로그 자동 수집: 캡처가 진행되는 동안 네트워크 요청과 콘솔 메시지가 자동으로 기록됩니다. API 에러나 런타임 오류까지 이슈에 그대로 첨부됩니다.
  ● AI 어시스턴트: 크롬 온디바이스 LLM 또는 직접 사용하는 LLM API 키를 연결하면 두 가지 자동화를 사용할 수 있습니다.
     - 이슈 초안 자동 생성: 선택한 요소·스타일 변경·스크린샷·녹화 영상을 바탕으로 이슈 제목과 설명을 작성합니다.
     - 자연어 스타일 편집: "패딩 줄이고 둥글기 키워줘" 같은 한 문장으로 선택 영역의 CSS를 일괄 수정합니다. 디자인 토큰(예: var(--spacing-14))을 인식해 결과를 토큰 단위로 스냅합니다.
  ● 멀티 플랫폼 다이렉트 연동: Jira, GitHub, Linear, Notion 중 어디든 사이드바에서 바로 이슈를 생성합니다. 이슈 제목, 설명, 변경 내역, 스크린샷, 영상, 로그가 한 번에 첨부됩니다. 플랫폼별 메타(이슈 타입·담당자·우선순위·에픽·라벨·저장소·팀·데이터베이스 등)도 같이 설정할 수 있습니다.
  ● 이슈 추적: 이전에 제출한 이슈와 그 상태를 브라우저 안에서 확인하세요.
  ● 마크다운으로 복사: Notion, Slack, Confluence 등 어디에든 붙여넣으세요. 테이블도 그대로 유지됩니다.
  
  ---
  
  BugShot은 누구를 위한 도구인가요?
  
  디자이너 & 프론트엔드 개발자
  ● 디자인 리뷰 중에 발견한 구현 버그를 정확한 CSS diff와 함께 리포트합니다.
  ● DevTools를 열지 않고도 레이아웃·스타일 이슈를 디버깅합니다.
  ● 계산된 값 대신 디자인 토큰 이름을 그대로 보면서 디자인 시스템과의 정합성을 유지합니다.
  ● 라이브 페이지에서 스타일을 직접 수정해 "이렇게 고치면 됩니다"를 그대로 보여줍니다.
  
  QA 엔지니어
  ● 스크린샷, 녹화 영상, 스타일 비교, 네트워크·콘솔 로그가 포함된 상세한 이슈를 페이지에서 바로 작성합니다.
  ● 인터랙션 버그를 영상으로 녹화해 이슈에 자동으로 첨부합니다.
  ● 모든 맥락을 하나의 리포트에 담아 커뮤니케이션 핑퐁을 줄입니다.
  
  ---
  
  사용법
  
  1. 익스텐션 실행: 브라우저 툴바의 BugShot 아이콘을 클릭하거나 `Ctrl(Cmd) + Shift + E`를 누릅니다.
  2. 캡처 모드 선택: DOM 요소 선택, 영역 스크린샷, 탭 녹화 중에서 고릅니다.
  3. 스타일 편집: 요소를 선택하고 CSS 속성을 수정합니다. 변경 사항이 페이지에 즉시 반영됩니다.
  4. 변경 사항 확인: 자동 생성된 before/after diff 테이블과 스크린샷을 검토합니다.
  5. 제출 또는 복사: 연결된 플랫폼(Jira / GitHub / Linear / Notion)으로 한 번에 보내거나, 다른 도구에 쓰려면 마크다운으로 복사합니다.
  
  ---
  
  플랫폼 연동
  
  연동 탭에서 사용하실 플랫폼을 연결하세요. 모든 플랫폼은 OAuth 또는 토큰 인증을 지원하며, 동시에 여러 개를 연결해 두고 이슈마다 다른 플랫폼을 골라 보낼 수도 있습니다.
  
  ● Jira — OAuth 또는 API 토큰. 프로젝트, 이슈 타입, 담당자, 우선순위, 에픽, 연결된 이슈 지원.
  ● GitHub — OAuth 또는 Personal Access Token. 저장소, 라벨, 담당자 지원.
  ● Linear — OAuth 또는 API Key. 팀, 프로젝트, 라벨, 우선순위, 담당자 지원.
  ● Notion — OAuth 또는 Internal Integration Token. 데이터베이스, 상태, 사용자 정의 속성(select/multi-select) 지원.
  
  스크린샷·녹화 영상·로그는 각 플랫폼의 첨부 또는 인라인 미디어로 자동 업로드됩니다.
  
  어떤 플랫폼도 연결하지 않아도 괜찮아요. BugShot은 단독으로도 동작합니다 — 모든 내용을 마크다운으로 복사할 수 있어요.

• May 17, 2026
  name

  BugShot

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

• May 11, 2026
  short_description

  디자인 이슈, 말로 설명하지 마세요. 직접 고치고 변경사항을 보내세요.

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

• May 11, 2026
  name

  BugShot — 디자인 이슈 트래커

  BugShot

• May 11, 2026
  host_permissions

  https://*.atlassian.net/*, https://api.atlassian.com/*, https://auth.atlassian.com/*, https://bugshot-oauth.ox501501.workers.dev/*

  https://*.atlassian.net/*, https://api.atlassian.com/*, https://auth.atlassian.com/*, https://api.github.com/*, https://github.com/*, https://uploads.github.com/*, https://api.linear.app/*, https://api.notion.com/*, https://bugshot-oauth.ox501501.workers.dev/*

• May 11, 2026
  description

  BugShot: 브라우저에서 바로 끝내는 디자인 QA 툴
  
  디자인 리뷰와 버그 리포팅, 이제 브라우저를 떠나지 마세요. BugShot은 웹 요소를 검사하고, 실시간으로 스타일을 수정하며, 발견한 시각적 버그를 클릭 한 번으로 Jira 티켓으로 변환해주는 강력한 크롬 익스텐션입니다.
  
  ---
  
  BugShot으로 할 수 있는 일:
  
  - 실시간 요소 검사 및 수정: 페이지 내 요소를 클릭해 CSS 속성을 즉시 확인하고 수정하세요. 모든 변경 사항은 실시간으로 반영됩니다.
  - 디자인 토큰 인식: var(--spacing-14)와 같은 CSS 변수를 해석하여 원시 값 대신 디자인 시스템의 토큰 명칭으로 보여줍니다.
  - Before & After 비교: 수정 전후의 차이를 표(Diff table)로 자동 생성합니다. 토큰 기반의 정확한 변경 내역을 확인할 수 있습니다.
  - 강력한 캡처 및 녹화: 드래그로 영역을 캡처하고 주석을 답니다. 스크린샷으로 부족하다면 최대 60초간의 영상 녹화로 버그 상황을 완벽히 기록하세요. 녹화 중에는 네트워크 요청과 콘솔 로그도 자동으로 수집되어, API 에러나 런타임 오류까지 이슈에 함께 첨부할 수 있습니다.
  - Jira 다이렉트 연동: 이슈 제목, 설명, 변경 내역 표, 스크린샷, 영상이 포함된 티켓을 사이드바에서 즉시 생성합니다. 우선순위, 담당자, 에픽 설정도 가능합니다.
  - 이슈 추적 — 이전에 제출한 이슈와 그 상태를 브라우저 안에서 확인하세요.
  - 마크다운으로 복사 — Notion, Slack, Confluence 등 어디에든 붙여넣으세요. 테이블도 그대로 유지됩니다.
  
  ---
  
  BugShot은 누구를 위한 도구인가요?
  
  디자이너 & 프론트엔드 개발자
  - 디자인 리뷰 중에 발견한 구현 버그를 정확한 CSS diff와 함께 리포트합니다.
  - DevTools를 열지 않고도 레이아웃·스타일 이슈를 디버깅합니다.
  - 계산된 값 대신 디자인 토큰 이름을 그대로 보면서 디자인 시스템과의 정합성을 유지합니다.
  - 라이브 페이지에서 스타일을 직접 수정해 "이렇게 고치면 됩니다"를 그대로 보여줍니다.
  
  QA 엔지니어
  - 스크린샷, 녹화 영상, 스타일 비교가 포함된 상세한 Jira 이슈를 페이지에서 바로 작성합니다.
  - 인터랙션 버그를 영상으로 녹화해 이슈에 자동으로 첨부합니다.
  - 모든 맥락을 하나의 리포트에 담아 커뮤니케이션 핑퐁을 줄입니다.
  
  ---
  
  사용법
  
  1. 익스텐션 실행: 브라우저 툴바의 BugShot 아이콘을 클릭하거나 `Ctrl(Cmd) + Shift + E`를 누릅니다.
  2. 캡처 모드 선택: DOM 요소 선택, 영역 스크린샷, 탭 녹화 중에서 고릅니다.
  3. 스타일 편집: 요소를 선택하고 CSS 속성을 수정합니다. 변경 사항이 페이지에 즉시 반영됩니다.
  4. 변경 사항 확인: 자동 생성된 before/after diff 테이블과 스크린샷을 검토합니다.
  5. 제출 또는 복사: Jira로 한 번에 보내거나, 다른 도구에 쓰려면 마크다운으로 복사합니다.
  
  ---
  
  Jira 연동
  
  Jira 탭에서 OAuth 또는 API 토큰으로 연결하세요. BugShot은 프로젝트 선택, 이슈 유형, 담당자, 우선순위, 에픽, 연결된 이슈를 지원합니다. 스크린샷과 녹화 영상은 첨부파일로 자동 업로드됩니다.
  
  Jira 계정이 없어도 괜찮아요. BugShot은 단독으로도 동작합니다 — 모든 내용을 마크다운으로 복사할 수 있어요.

  BugShot: 브라우저에서 바로 끝내는 디자인 QA 툴
  
  디자인 리뷰와 버그 리포팅, 이제 브라우저를 떠나지 마세요. BugShot은 웹 요소를 검사하고, 실시간으로 스타일을 수정하며, 발견한 시각적 버그를 클릭 한 번으로 Jira·GitHub·Linear·Notion 티켓으로 변환해주는 강력한 크롬 익스텐션입니다.
  
  ---
  
  BugShot으로 할 수 있는 일:
  
  ● 실시간 요소 검사 및 수정: 페이지 내 요소를 클릭해 CSS 속성을 즉시 확인하고 수정하세요. 모든 변경 사항은 실시간으로 반영됩니다.
  ● 디자인 토큰 인식: var(--spacing-14)와 같은 CSS 변수를 해석하여 원시 값 대신 디자인 시스템의 토큰 명칭으로 보여줍니다.
  ● Before & After 비교: 수정 전후의 차이를 표(Diff table)로 자동 생성합니다. 토큰 기반의 정확한 변경 내역을 확인할 수 있습니다.
  ● 강력한 캡처 및 녹화: 드래그로 영역을 캡처하고 주석을 답니다. 스크린샷으로 부족하다면 최대 60초간의 영상 녹화로 버그 상황을 완벽히 기록하세요.
  ● 네트워크·콘솔 로그 자동 수집: 캡처가 진행되는 동안 네트워크 요청과 콘솔 메시지가 자동으로 기록됩니다. API 에러나 런타임 오류까지 이슈에 그대로 첨부됩니다.
  ● AI 어시스턴트 (BYOK) — 직접 사용하시는 LLM API 키를 연결하면 두 가지 자동화를 사용할 수 있습니다.
     - 이슈 초안 자동 생성: 선택한 요소·스타일 변경·스크린샷·녹화 영상을 바탕으로 이슈 제목과 설명을 작성합니다.
     - 자연어 스타일 편집: "패딩 줄이고 둥글기 키워줘" 같은 한 문장으로 선택 영역의 CSS를 일괄 수정합니다. 디자인 토큰(예: var(--spacing-14))을 인식해 결과를 토큰 단위로 스냅합니다.
  ● 멀티 플랫폼 다이렉트 연동: Jira, GitHub, Linear, Notion 중 어디든 사이드바에서 바로 이슈를 생성합니다. 이슈 제목, 설명, 변경 내역, 스크린샷, 영상, 로그가 한 번에 첨부됩니다. 플랫폼별 메타(이슈 타입·담당자·우선순위·에픽·라벨·저장소·팀·데이터베이스 등)도 같이 설정할 수 있습니다.
  ● 이슈 추적 — 이전에 제출한 이슈와 그 상태를 브라우저 안에서 확인하세요.
  ● 마크다운으로 복사 — Notion, Slack, Confluence 등 어디에든 붙여넣으세요. 테이블도 그대로 유지됩니다.
  
  ---
  
  BugShot은 누구를 위한 도구인가요?
  
  디자이너 & 프론트엔드 개발자
  ● 디자인 리뷰 중에 발견한 구현 버그를 정확한 CSS diff와 함께 리포트합니다.
  ● DevTools를 열지 않고도 레이아웃·스타일 이슈를 디버깅합니다.
  ● 계산된 값 대신 디자인 토큰 이름을 그대로 보면서 디자인 시스템과의 정합성을 유지합니다.
  ● 라이브 페이지에서 스타일을 직접 수정해 "이렇게 고치면 됩니다"를 그대로 보여줍니다.
  
  QA 엔지니어
  ● 스크린샷, 녹화 영상, 스타일 비교, 네트워크·콘솔 로그가 포함된 상세한 이슈를 페이지에서 바로 작성합니다.
  ● 인터랙션 버그를 영상으로 녹화해 이슈에 자동으로 첨부합니다.
  ● 모든 맥락을 하나의 리포트에 담아 커뮤니케이션 핑퐁을 줄입니다.
  
  ---
  
  사용법
  
  1. 익스텐션 실행: 브라우저 툴바의 BugShot 아이콘을 클릭하거나 `Ctrl(Cmd) + Shift + E`를 누릅니다.
  2. 캡처 모드 선택: DOM 요소 선택, 영역 스크린샷, 탭 녹화 중에서 고릅니다.
  3. 스타일 편집: 요소를 선택하고 CSS 속성을 수정합니다. 변경 사항이 페이지에 즉시 반영됩니다.
  4. 변경 사항 확인: 자동 생성된 before/after diff 테이블과 스크린샷을 검토합니다.
  5. 제출 또는 복사: 연결된 플랫폼(Jira / GitHub / Linear / Notion)으로 한 번에 보내거나, 다른 도구에 쓰려면 마크다운으로 복사합니다.
  
  ---
  
  플랫폼 연동
  
  연동 탭에서 사용하실 플랫폼을 연결하세요. 모든 플랫폼은 OAuth 또는 토큰 인증을 지원하며, 동시에 여러 개를 연결해 두고 이슈마다 다른 플랫폼을 골라 보낼 수도 있습니다.
  
  ● Jira — OAuth 또는 API 토큰. 프로젝트, 이슈 타입, 담당자, 우선순위, 에픽, 연결된 이슈 지원.
  ● GitHub — OAuth 또는 Personal Access Token. 저장소, 라벨, 담당자 지원.
  ● Linear — OAuth 또는 API Key. 팀, 프로젝트, 라벨, 우선순위, 담당자 지원.
  ● Notion — OAuth 또는 Internal Integration Token. 데이터베이스, 상태, 사용자 정의 속성(select/multi-select) 지원.
  
  스크린샷·녹화 영상·로그는 각 플랫폼의 첨부 또는 인라인 미디어로 자동 업로드됩니다.
  
  어떤 플랫폼도 연결하지 않아도 괜찮아요. BugShot은 단독으로도 동작합니다 — 모든 내용을 마크다운으로 복사할 수 있어요.

• May 6, 2026
  description

  BugShot: 브라우저에서 바로 끝내는 디자인 QA 툴
  
  디자인 리뷰와 버그 리포팅, 이제 브라우저를 떠나지 마세요. BugShot은 웹 요소를 검사하고, 실시간으로 스타일을 수정하며, 발견한 시각적 버그를 클릭 한 번으로 Jira 티켓으로 변환해주는 강력한 크롬 익스텐션입니다.
  
  ---
  
  BugShot으로 할 수 있는 일:
  
  - 실시간 요소 검사 및 수정: 페이지 내 요소를 클릭해 CSS 속성을 즉시 확인하고 수정하세요. 모든 변경 사항은 실시간으로 반영됩니다.
  - 디자인 토큰 인식: var(--spacing-14)와 같은 CSS 변수를 해석하여 원시 값 대신 디자인 시스템의 토큰 명칭으로 보여줍니다.
  - Before & After 비교: 수정 전후의 차이를 표(Diff table)로 자동 생성합니다. 토큰 기반의 정확한 변경 내역을 확인할 수 있습니다.
  - 강력한 캡처 및 녹화: 드래그로 영역을 캡처하고 주석을 답니다. 스크린샷으로 부족하다면 최대 60초간의 영상 녹화로 버그 상황을 완벽히 기록하세요.
  - Jira 다이렉트 연동: 이슈 제목, 설명, 변경 내역 표, 스크린샷, 영상이 포함된 티켓을 사이드바에서 즉시 생성합니다. 우선순위, 담당자, 에픽 설정도 가능합니다.
  - 이슈 추적 — 이전에 제출한 이슈와 그 상태를 브라우저 안에서 확인하세요.
  - 마크다운으로 복사 — Notion, Slack, Confluence 등 어디에든 붙여넣으세요. 테이블도 그대로 유지됩니다.
  
  ---
  
  BugShot은 누구를 위한 도구인가요?
  
  디자이너 & 프론트엔드 개발자
  - 디자인 리뷰 중에 발견한 구현 버그를 정확한 CSS diff와 함께 리포트합니다.
  - DevTools를 열지 않고도 레이아웃·스타일 이슈를 디버깅합니다.
  - 계산된 값 대신 디자인 토큰 이름을 그대로 보면서 디자인 시스템과의 정합성을 유지합니다.
  - 라이브 페이지에서 스타일을 직접 수정해 "이렇게 고치면 됩니다"를 그대로 보여줍니다.
  
  QA 엔지니어
  - 스크린샷, 녹화 영상, 스타일 비교가 포함된 상세한 Jira 이슈를 페이지에서 바로 작성합니다.
  - 인터랙션 버그를 영상으로 녹화해 이슈에 자동으로 첨부합니다.
  - 모든 맥락을 하나의 리포트에 담아 커뮤니케이션 핑퐁을 줄입니다.
  
  ---
  
  사용법
  
  1. 익스텐션 실행: 브라우저 툴바의 BugShot 아이콘을 클릭하거나 `Alt + Shift + B`를 누릅니다.
  2. 캡처 모드 선택: DOM 요소 선택, 영역 스크린샷, 탭 녹화 중에서 고릅니다.
  3. 스타일 편집: 요소를 선택하고 CSS 속성을 수정합니다. 변경 사항이 페이지에 즉시 반영됩니다.
  4. 변경 사항 확인: 자동 생성된 before/after diff 테이블과 스크린샷을 검토합니다.
  5. 제출 또는 복사: Jira로 한 번에 보내거나, 다른 도구에 쓰려면 마크다운으로 복사합니다.
  
  ---
  
  Jira 연동
  
  Jira 탭에서 OAuth 또는 API 토큰으로 연결하세요. BugShot은 프로젝트 선택, 이슈 유형, 담당자, 우선순위, 에픽, 연결된 이슈를 지원합니다. 스크린샷과 녹화 영상은 첨부파일로 자동 업로드됩니다.
  
  Jira 계정이 없어도 괜찮아요. BugShot은 단독으로도 동작합니다 — 모든 내용을 마크다운으로 복사할 수 있어요.

  BugShot: 브라우저에서 바로 끝내는 디자인 QA 툴
  
  디자인 리뷰와 버그 리포팅, 이제 브라우저를 떠나지 마세요. BugShot은 웹 요소를 검사하고, 실시간으로 스타일을 수정하며, 발견한 시각적 버그를 클릭 한 번으로 Jira 티켓으로 변환해주는 강력한 크롬 익스텐션입니다.
  
  ---
  
  BugShot으로 할 수 있는 일:
  
  - 실시간 요소 검사 및 수정: 페이지 내 요소를 클릭해 CSS 속성을 즉시 확인하고 수정하세요. 모든 변경 사항은 실시간으로 반영됩니다.
  - 디자인 토큰 인식: var(--spacing-14)와 같은 CSS 변수를 해석하여 원시 값 대신 디자인 시스템의 토큰 명칭으로 보여줍니다.
  - Before & After 비교: 수정 전후의 차이를 표(Diff table)로 자동 생성합니다. 토큰 기반의 정확한 변경 내역을 확인할 수 있습니다.
  - 강력한 캡처 및 녹화: 드래그로 영역을 캡처하고 주석을 답니다. 스크린샷으로 부족하다면 최대 60초간의 영상 녹화로 버그 상황을 완벽히 기록하세요. 녹화 중에는 네트워크 요청과 콘솔 로그도 자동으로 수집되어, API 에러나 런타임 오류까지 이슈에 함께 첨부할 수 있습니다.
  - Jira 다이렉트 연동: 이슈 제목, 설명, 변경 내역 표, 스크린샷, 영상이 포함된 티켓을 사이드바에서 즉시 생성합니다. 우선순위, 담당자, 에픽 설정도 가능합니다.
  - 이슈 추적 — 이전에 제출한 이슈와 그 상태를 브라우저 안에서 확인하세요.
  - 마크다운으로 복사 — Notion, Slack, Confluence 등 어디에든 붙여넣으세요. 테이블도 그대로 유지됩니다.
  
  ---
  
  BugShot은 누구를 위한 도구인가요?
  
  디자이너 & 프론트엔드 개발자
  - 디자인 리뷰 중에 발견한 구현 버그를 정확한 CSS diff와 함께 리포트합니다.
  - DevTools를 열지 않고도 레이아웃·스타일 이슈를 디버깅합니다.
  - 계산된 값 대신 디자인 토큰 이름을 그대로 보면서 디자인 시스템과의 정합성을 유지합니다.
  - 라이브 페이지에서 스타일을 직접 수정해 "이렇게 고치면 됩니다"를 그대로 보여줍니다.
  
  QA 엔지니어
  - 스크린샷, 녹화 영상, 스타일 비교가 포함된 상세한 Jira 이슈를 페이지에서 바로 작성합니다.
  - 인터랙션 버그를 영상으로 녹화해 이슈에 자동으로 첨부합니다.
  - 모든 맥락을 하나의 리포트에 담아 커뮤니케이션 핑퐁을 줄입니다.
  
  ---
  
  사용법
  
  1. 익스텐션 실행: 브라우저 툴바의 BugShot 아이콘을 클릭하거나 `Ctrl(Cmd) + Shift + E`를 누릅니다.
  2. 캡처 모드 선택: DOM 요소 선택, 영역 스크린샷, 탭 녹화 중에서 고릅니다.
  3. 스타일 편집: 요소를 선택하고 CSS 속성을 수정합니다. 변경 사항이 페이지에 즉시 반영됩니다.
  4. 변경 사항 확인: 자동 생성된 before/after diff 테이블과 스크린샷을 검토합니다.
  5. 제출 또는 복사: Jira로 한 번에 보내거나, 다른 도구에 쓰려면 마크다운으로 복사합니다.
  
  ---
  
  Jira 연동
  
  Jira 탭에서 OAuth 또는 API 토큰으로 연결하세요. BugShot은 프로젝트 선택, 이슈 유형, 담당자, 우선순위, 에픽, 연결된 이슈를 지원합니다. 스크린샷과 녹화 영상은 첨부파일로 자동 업로드됩니다.
  
  Jira 계정이 없어도 괜찮아요. BugShot은 단독으로도 동작합니다 — 모든 내용을 마크다운으로 복사할 수 있어요.

Permissions & access

Permissions

sidePanelactiveTabscriptingstoragecommandscontextMenusidentitytabCapturewebNavigation

Host access

https://*.atlassian.net/*, https://api.atlassian.com/*, https://auth.atlassian.com/*, https://api.github.com/*, https://github.com/*, https://uploads.github.com/*, https://api.linear.app/*, https://api.notion.com/*, https://gitlab.com/*, https://app.asana.com/*, https://bugshot-oauth.ox501501.workers.dev/*

Screenshots