BugShot — 한 번에 끝내는 디자인 QA

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

BugShot: 브라우저에서 바로 끝내는 디자인 QA 디자인 리뷰와 버그 리포팅, 이제 브라우저를 떠나지 마세요. 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은 단독으로도 동작합니다 — 모든 내용을 마크다운으로 복사할 수 있어요.