BugShot의 상품 로고 이미지

BugShot

5.0(

평점 3개

)
BugShot의 항목 미디어 5(스크린샷)
BugShot의 항목 미디어 1(스크린샷)
BugShot의 항목 미디어 2(스크린샷)
BugShot의 항목 미디어 3(스크린샷)
BugShot의 항목 미디어 4(스크린샷)
BugShot의 항목 미디어 5(스크린샷)
BugShot의 항목 미디어 1(스크린샷)
BugShot의 항목 미디어 1(스크린샷)
BugShot의 항목 미디어 2(스크린샷)
BugShot의 항목 미디어 3(스크린샷)
BugShot의 항목 미디어 4(스크린샷)
BugShot의 항목 미디어 5(스크린샷)

개요

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

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은 단독으로도 동작합니다 — 모든 내용을 마크다운으로 복사할 수 있어요.

세부정보

  • 버전
    1.1.2
  • 업데이트됨
    2026년 5월 11일
  • 제공
    ox501501
  • 크기
    3.14MiB
  • 언어
    언어 2개
  • 개발자
    이메일
    ox501501@gmail.com
  • 비판매자
    판매자로 식별되지 않은 개발자입니다. 유럽 연합에 거주하는 소비자의 경우, 이 개발자와 체결한 계약에 대해서는 소비자 권리가 적용되지 않을 수 있음을 유의해야 합니다.

개인정보 보호

확장 프로그램을 관리하고 조직에서 확장 프로그램이 사용되는 방식을 알아보세요.

BugShot에서 데이터 수집 및 사용과 관련하여 다음 정보를 공개했습니다. 더 자세한 정보는 개발자의 privacy policy을 참고하세요.

BugShot 항목은 다음을 처리합니다.

인증 정보
사용자 활동
웹사이트 콘텐츠

개발자가 사용자 데이터에 관해 다음과 같이 선언했습니다

  • 승인된 사용 사례를 제외하고 서드 파티에 판매하지 않음
  • 항목의 핵심 기능과 관련 없는 목적으로 사용하거나 전송하지 않음
  • 신용도 판단 또는 대출 목적으로 사용하거나 전송하지 않음

관련 항목

AccessCheck — 웹 접근성 검사기 & WCAG 감사 도구 | ADA 준수

5.0

쉬운 한국어 설명이 포함된 WCAG 웹사이트 스캐너. 색상 대비, 대체 텍스트, 제목, ARIA 등 50가지 이상의 접근성 문제를 검사합니다.

UI Inspector - Visual CSS Editor

4.0

Inspect and visually edit elements and their CSS directly on the page for faster design and UI debugging.

OverlayQA – AI Design QA & Bug Capture

5.0

Capture visual bugs, compare Figma designs, and run AI accessibility audits. Export to Jira, Linear, Notion & more.

No-Inspect Web Editor - text & Images

0.0

Replace the need of using inspect element. Perfect for designers, managers & marketers. No tech skills needed!

웹사이트 편집

4.1

웹사이트 편집: 쉽게 웹을 편집하고, 텍스트를 변경하며, 콘텐츠를 즉시 켜고 끌 수 있습니다. 웹사이트를 쉽게 변경하세요.

BetterBugs: Create precise bug reports with 1-click

4.9

One-click bug reports with all the context devs need

비주얼 테스트 - UI Testing Inspector

5.0

웹페이지 업데이트 전후의 시각적 변화를 상세한 보고서와 DOM 분석으로 비교합니다.

Tab ReTitler

3.5

Customize browser tab titles for better organization. Change titles temporarily or permanently with URL patterns.

Glitches: Report visual issues without the hassle

5.0

Send visual bug reports to GitHub, Jira or Productive with screenshots, screen recordings, annotations and AI auto-fix.

Frontend Inspector

0.0

Inspect any element's design properties. Hover to see colors, spacing, fonts, and dimensions instantly.

Treedent - Tab Manager

4.8

Treedent transforms tab chaos into clarity, using intuitive tree-structured navigation designed for focus and flow.

VibeCheck Track - Record & Report Bugs

5.0

Record bugs directly from your browser, with all the context developers need to fix them.

AccessCheck — 웹 접근성 검사기 & WCAG 감사 도구 | ADA 준수

5.0

쉬운 한국어 설명이 포함된 WCAG 웹사이트 스캐너. 색상 대비, 대체 텍스트, 제목, ARIA 등 50가지 이상의 접근성 문제를 검사합니다.

UI Inspector - Visual CSS Editor

4.0

Inspect and visually edit elements and their CSS directly on the page for faster design and UI debugging.

OverlayQA – AI Design QA & Bug Capture

5.0

Capture visual bugs, compare Figma designs, and run AI accessibility audits. Export to Jira, Linear, Notion & more.

No-Inspect Web Editor - text & Images

0.0

Replace the need of using inspect element. Perfect for designers, managers & marketers. No tech skills needed!

웹사이트 편집

4.1

웹사이트 편집: 쉽게 웹을 편집하고, 텍스트를 변경하며, 콘텐츠를 즉시 켜고 끌 수 있습니다. 웹사이트를 쉽게 변경하세요.

BetterBugs: Create precise bug reports with 1-click

4.9

One-click bug reports with all the context devs need

비주얼 테스트 - UI Testing Inspector

5.0

웹페이지 업데이트 전후의 시각적 변화를 상세한 보고서와 DOM 분석으로 비교합니다.

Tab ReTitler

3.5

Customize browser tab titles for better organization. Change titles temporarily or permanently with URL patterns.

Google 앱