스크린샷 & 어노테이션 — QA Note Docs

스크린샷 캡처

Extension에서 캡처를 시작하면 화면 위에 영역 선택 오버레이가 표시됩니다. 원하는 영역을 드래그하여 선택한 뒤 확인 버튼을 클릭하면 해당 영역이 캡처됩니다.

캡처 시작 방법

방법	설명
키보드 단축키	`Cmd+Shift+X`(Mac) / `Ctrl+Shift+X`(Windows)
팝업 버튼	툴바 아이콘 클릭 → 스크린샷 버튼
컨텍스트 메뉴	페이지 우클릭 → QA Note → Screenshot
플로팅 버튼	프로젝트 설정에서 활성화 시 페이지 위 버튼 표시

하나의 이슈에 최대 5장의 스크린샷을 첨부할 수 있습니다. 제출 폼에서 추가 캡처 버튼을 눌러 스크린샷을 추가하세요.

어노테이션 도구

캡처된 이미지 위에 어노테이션을 추가하여 문제 위치를 정확하게 전달할 수 있습니다. 10가지 도구를 제공합니다.

도구	설명
선택	어노테이션을 클릭하여 선택하고, 드래그하여 이동합니다. `Delete` 키로 삭제합니다.
펜	자유롭게 그립니다. 필압 감지를 지원하여 자연스러운 선을 그릴 수 있습니다.
화살표	드래그하여 화살표를 그립니다. 특정 요소를 가리킬 때 유용합니다.
텍스트	클릭한 위치에 텍스트를 입력합니다.
하이라이트	반투명 사각형으로 영역을 강조합니다.
사각형	외곽선 사각형을 그립니다.
원	외곽선 원(타원)을 그립니다.
번호 마커	클릭할 때마다 자동으로 번호가 증가하는 원형 마커를 배치합니다. 단계별 재현 순서를 표시할 때 유용합니다.
블러	드래그한 영역을 픽셀화하여 민감 정보를 가립니다.
크롭	이미지의 특정 부분만 잘라냅니다.

색상 선택

도구 모음에서 어노테이션 색상을 선택할 수 있습니다. 선택한 색상은 펜, 화살표, 텍스트, 사각형, 원, 하이라이트 등 모든 도구에 적용됩니다.

실행 취소 / 다시 실행

실행 취소: Cmd+Z(Mac) / Ctrl+Z(Windows)
다시 실행: Cmd+Shift+Z(Mac) / Ctrl+Shift+Z(Windows)

추가, 삭제, 이동 등 모든 변경 사항에 대해 전체 히스토리가 유지됩니다.

요소 스타일 검사

스크린샷 캡처 후, 제출 폼에서 요소 검사 기능을 활성화할 수 있습니다. 페이지 위에서 DOM 요소를 클릭하면 해당 요소의 CSS 속성이 이슈에 첨부됩니다.

최대 5개 요소를 선택할 수 있으며, 각 요소에 대해 다음 정보가 수집됩니다.

CSS 셀렉터, 태그 이름, 클래스, ID
박스 모델 (margin, padding, border)
타이포그래피 (font-family, font-size, font-weight, line-height, color)
레이아웃 (display, position, flex/grid 속성)
시각 속성 (background, opacity, border-radius, box-shadow)

자동 수집 메타데이터

스크린샷과 함께 다음 기술 정보가 자동으로 이슈에 첨부됩니다.

콘솔 로그 — error, warn, log 출력 (최근 100건)
네트워크 요청 — HTTP 요청/응답 상세 정보 (최근 50건, 민감 헤더 자동 마스킹)
JS 에러 — 미처리 에러와 Promise rejection (최근 50건, 스택 트레이스 포함)
사용자 액션 — 클릭, 입력, 스크롤, 네비게이션 이벤트 타임라인 (최근 30건)
성능 지표 — LCP, FCP, CLS, INP, TTFB 등 Web Vitals
React 컴포넌트 트리 — React 앱인 경우, 컴포넌트 계층과 props/state
환경 정보 — 브라우저, OS, 뷰포트, 접근성 설정, GPU, 네트워크 연결 상태

캡처 히스토리

Extension 팝업에서 최근 제출한 이슈 목록을 바로 확인할 수 있습니다. 각 항목을 클릭하면 대시보드의 이슈 상세 페이지로 바로 이동합니다.

표시 정보

항목	설명
이슈 제목	최근 20건
우선순위	색상 뱃지 (`low`·`medium`·`high`·`critical`)
상대 시간	`3분 전` · `2시간 전` 형식
프로젝트	다중 프로젝트 사용 시 각 이슈가 어느 프로젝트 소속인지

로컬 캐시는 Chrome storage.local 에 저장되며, 대시보드의 이슈 상태 변경은 다음 팝업 열림 시 갱신됩니다.

드래프트 자동 저장

작성 중인 이슈는 2초 디바운스로 로컬에 자동 저장됩니다. 브라우저 새로고침·우발적 탭 종료·Extension 리로드 어느 경우에도 스크린샷·어노테이션·폼 입력값이 모두 복원됩니다.

저장 범위

폼 필드 (제목·설명·우선순위·라벨 선택)
캡처된 스크린샷 (최대 5장, blob URL 기반)
어노테이션 레이어 (Konva 시리얼라이즈)
세션 리플레이 · 인스턴트 리플레이 메타 (용량 한도 내). 메타데이터 옵트인 항목 전체 목록은 Storage · DOM 스냅샷 참조.

TTL · 용량 관리

24 시간 후 자동 만료 · 삭제
저장소 한도 초과 시 가장 오래된 드래프트부터 graceful 삭제
용량 초과로 저장 실패 시 폼 상단에 노란 배너 표시 (진행은 가능, 복원은 불가)