스크린샷 한 장을 재현 가능한 이슈로 만들고, 쓰던 코딩 에이전트에 전달하고, 사람이 확인한 결과를 리포트로 남깁니다.
고객의 제보가 개발자의 작업이 되고, 검수와 보고의 근거로 남는 네 단계를 한 흐름으로 연결합니다.
확장 프로그램에서 화면과 문제 지점을 표시하면 재현 환경과 오류 맥락이 함께 접수됩니다.
MCP가 연결된 Claude Code나 Cursor에 이슈 링크를 넘기고, 연결 전에는 한 장의 프롬프트로 복사합니다.
커밋과 배포 기록을 확인한 뒤, 로그인한 사람이 실제 결과를 검수 완료로 전환합니다.
처리 타임라인과 커밋을 쉬운 언어로 묶고, 사람이 편집한 초안을 발행합니다.
아래 항목은 현재 지원하는 증거와 기록 범위입니다. 라이브러리·용량·보존 조건은 각 카드의 기술 사양에서 펼쳐 볼 수 있습니다.
시각적 증거를 자동으로 기록합니다.
영역 선택 캡쳐 후 펜·화살표·텍스트로 주석을 추가합니다.
최대 5장 · Konva 캔버스
rrweb로 DOM 변화를 기록하여 정확한 상호작용을 재현합니다.
최대 60초 · gzip 압축
허용 도메인에서 상시 녹화 버퍼를 유지합니다. 버그 발생 시 '방금 전' 구간을 즉시 제출합니다.
120초 버퍼 · 10K 이벤트 · 과부하 자동 감지
작성 중인 이슈가 자동으로 로컬에 저장됩니다. 새로고침이나 실수로 닫아도 스크린샷·리플레이·폼 데이터를 모두 복원할 수 있습니다.
2초 디바운스 · 24시간 TTL · 용량 초과 시 graceful fallback
최근 제출한 이슈 목록을 팝업에서 바로 확인하고, 클릭 한 번으로 대시보드 이슈 상세로 이동합니다.
최근 20건 · 우선순위 · 상대 시간 표시
버그가 발생한 정확한 환경을 기록합니다.
브라우저 종류와 버전을 식별합니다.
navigator.userAgent
OS 플랫폼 정보를 기록합니다.
navigator.platform
브라우저 창의 가로·세로 픽셀 크기를 기록합니다.
innerWidth × innerHeight
Retina 등 고밀도 디스플레이 배율을 기록합니다.
devicePixelRatio
버그가 발생한 페이지의 URL과 제목을 기록합니다.
마지막 클릭한 요소의 CSS 셀렉터, 태그, 텍스트를 캡쳐합니다.
css-selector-generator
페이지의 런타임 데이터를 가로채 기록합니다.
console.log, warn, error를 인터셉트하여 최근 100건을 저장합니다.
버퍼 200 · 반환 100
fetch, XHR을 인터셉트하여 상태 코드, 소요 시간, 헤더, 에러 응답 본문을 기록합니다.
최대 50건 · 민감 헤더 13종 자동 마스킹
React Fiber 트리를 순회하여 컴포넌트명, props, state, hooks를 캡쳐합니다.
깊이 10 · 노드 50 · hooks 20
버그 발생 직전의 사용자 행동을 추적합니다.
클릭, 입력, 네비게이션, 스크롤, 특수 키 입력을 기록합니다.
최대 30건 · 비밀번호 자동 마스킹
선택한 요소의 박스 모델, 타이포그래피, 레이아웃, 부모·형제 간격을 캡쳐합니다.
최대 5개 요소 · computed style
캡처 과정에서 '이 순간이 버그'라고 표시한 지점을 행동 타임라인 위에 마커로 기록합니다.
행동 타임라인 연동
콘솔에 찍히지 않는 에러까지 잡아냅니다.
window.onerror로 잡히는 모든 JS 에러의 메시지, 파일, 라인, 컬럼, 스택 트레이스를 기록합니다.
최대 50건 · stack 2000자
unhandledrejection 이벤트로 잡히는 비동기 에러를 별도 캡쳐합니다.
'느려요' 리포트를 정량 데이터로 바꿉니다.
LCP, FCP, CLS, INP, TTFB 5대 핵심 성능 지표를 실시간 관찰합니다.
PerformanceObserver
DNS → TCP → TLS → 요청 → 응답 → DOM 파싱 → Load까지 전체 타임라인을 기록합니다.
PerformanceNavigationTiming
가장 느린 리소스 상위 10개의 로딩 시간과 전송 크기를 기록합니다.
PerformanceResourceTiming
50ms 이상 메인 스레드를 블로킹하는 태스크를 감지합니다. UI 프리징 원인 분석에 핵심입니다.
최대 30건
CLS에 기여한 개별 레이아웃 이동의 크기와 대상 요소를 기록합니다.
최대 20건 · 요소 셀렉터 포함
JS 힙 메모리 사용량, 총 할당량, 한계치를 기록합니다. 메모리 릭 탐지에 활용됩니다.
performance.memory
버그 재현에 필요한 시스템 컨텍스트를 수집합니다.
다크모드, 모션 감소, 고대비, 강제 색상 등 사용자의 OS/브라우저 설정을 기록합니다.
matchMedia 4종
브라우저 언어 목록, 타임존 이름, UTC 오프셋을 기록합니다. i18n 버그 재현 필수.
navigator.languages · Intl
연결 유형(4G/3G), 다운링크 대역폭, RTT, 데이터 절약 모드 여부를 기록합니다.
navigator.connection
GPU 벤더와 모델명을 기록합니다. 렌더링 관련 버그 분석에 활용됩니다.
WEBGL_debug_renderer_info
브라우저의 현재 줌 배율을 기록합니다.
chrome.tabs.getZoom()
React, Vue, Angular, Svelte, jQuery, Next.js, Nuxt를 자동 감지하고 버전을 기록합니다.
전역 변수 탐지
페이지 내 모든 iframe의 src, sandbox 속성, cross-origin 여부를 기록합니다.
최대 20개
등록된 SW의 scope, 상태(active/waiting/installing), 스크립트 URL을 기록합니다.
WebGL, WebRTC, WASM, WebSocket, Worker 등 10가지 주요 웹 API 지원 여부를 확인합니다.
웹폰트별 family, weight, 로딩 상태(loaded/failed)를 기록합니다.
최대 30개 · document.fonts
Content-Security-Policy meta 태그의 내용을 기록합니다. 보안 정책으로 인한 기능 차단 원인 분석.
페이지 상태 변화와 네비게이션을 추적합니다.
pushState, replaceState, popstate를 추적하여 SPA 내부 네비게이션 이력을 기록합니다.
최대 30건
탭이 포그라운드/백그라운드로 전환된 시점을 기록합니다. 백그라운드 탭 관련 버그 판별에 활용.
최대 20건
브라우저 윈도우의 포커스 획득/상실 시점을 기록합니다.
최대 20건
IndexedDB, Cache Storage 등의 전체 사용량과 쿼터를 기록합니다. 내용은 수집하지 않습니다.
navigator.storage.estimate()
opt-in 으로 수집하는 민감 데이터. 마스킹은 클라이언트 측에서 SSoT 로 처리됩니다.
localStorage · sessionStorage · cookies 의 키-값을 수집합니다. 비밀번호·인증헤더·토큰 14+13+14종이 자동으로 마스킹됩니다.
opt-in · 키당 2KB 제한 · MCP get_storage
이슈 발생 시점의 페이지 DOM 을 outerHTML 로 저장합니다. script · input value · data-* 민감 속성은 클라이언트에서 제거합니다.
opt-in · gzip 압축 · MCP get_dom_snapshot
개발자는 쓰던 도구에서 그대로 — 처리 기록은 자동으로 남습니다.
이슈 URL 한 줄이면 스크린샷·콘솔·네트워크·재현 단계가 Claude Code · Cursor 로 전달되고, 진행 상태는 QA Note 에 자동 기록됩니다.
resolve_by_url · OAuth 원클릭
MCP 설정 전이라도 이슈 컨텍스트를 프롬프트 한 장으로 복사해 어떤 AI 도구에든 붙여넣을 수 있습니다.
커밋 메시지에 이슈 키(QANOTE-12)만 붙이면 수정 제출이 자동 기록됩니다. AI 도구 없이도 작동합니다.
push 웹훅 · 이슈별 커밋 링크
배포 이벤트와 커밋을 상관시켜, 배포가 확인된 이슈만 '검수 가능'으로 표시합니다.
발행 후 바뀌지 않는 기록 — 청구와 보고의 근거가 됩니다.
접수 → 작업 중 → 수정 제출 → 검수 완료 → 보고 완료(+차단됨). 수정 제출(에이전트)과 검수 완료(사람)를 구분합니다.
검수 완료 전환은 로그인한 사람에게만 허용됩니다. 에이전트의 자가 보고를 믿지 않는 설계입니다.
이슈별 쉬운 언어 요약, 처리 타임라인, 커밋 링크를 묶어 발행합니다. 초안은 사람이 편집한 뒤 발행합니다.
공개 링크 · 인쇄 친화
발행된 리포트는 스냅샷으로 고정됩니다. 정정은 새 버전으로 발행되고 이력이 남습니다.
리플레이의 입력 필드는 마스킹하고, 인증 헤더는 자동 제거하며, 쿠키·스토리지 스냅샷은 프로젝트와 사용자가 명시적으로 동의한 경우에만 수집합니다.
네트워크 로그의 민감 파라미터 14종, 헤더 13종, Body 필드 14종이 자동 필터링됩니다.