스크린샷 & 어노테이션
화면 캡처와 10가지 어노테이션 도구 활용법
목차
스크린샷 캡처
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 삭제
- 용량 초과로 저장 실패 시 폼 상단에 노란 배너 표시 (진행은 가능, 복원은 불가)