Extension 설치

Chrome 웹스토어에서 설치

1. Chrome 웹스토어에서 QA Note를 검색합니다.
2. Chrome에 추가 버튼을 클릭하여 설치합니다.
3. 브라우저 툴바에 QA Note 아이콘이 나타납니다.

로그인

Extension은 이메일/비밀번호 로그인과 Google OAuth 로그인을 지원합니다.

1. 툴바의 QA Note 아이콘을 클릭합니다.
2. 로그인 버튼을 클릭하면 로그인 팝업이 열립니다.
3. 이메일/비밀번호 또는 Google 계정으로 로그인합니다.
4. 로그인이 완료되면 팝업이 자동으로 닫히고 Extension이 연결됩니다.

데이터 수집 동의

첫 로그인 후 데이터 수집 동의 화면이 표시됩니다. 동의하면 콘솔 로그, 네트워크 요청 등 기술 메타데이터 수집 기능이 활성화됩니다.

이 과정에서 Chrome이 <all_urls> 권한을 요청합니다. 허용하면 모든 사이트에서 QA Note의 전체 기능을 사용할 수 있습니다. 거부해도 기본 스크린샷 캡처는 정상 동작합니다.

조직 & 프로젝트 선택

로그인 후 Extension 팝업에서:

1. 조직을 선택합니다 (여러 조직에 속한 경우).
2. 프로젝트를 선택합니다.
3. 선택된 프로젝트에 이슈가 등록됩니다.

캡처 트리거 방법

Extension은 세 가지 방법으로 캡처를 시작할 수 있습니다.

• 팝업 버튼 — 툴바 아이콘 클릭 후 캡처 버튼 선택
• 키보드 단축키 — Cmd+Shift+X(Mac) / Ctrl+Shift+X(Windows)
• 컨텍스트 메뉴 — 페이지에서 우클릭 후 QA Note 메뉴 선택

프로젝트 설정에서 페이지 위에 표시되는 플로팅 버튼 또는 사이드 탭을 활성화할 수도 있습니다.

주요 기능

• 스크린샷 캡처 — 영역을 드래그하여 선택한 뒤 캡처합니다. 최대 5장까지 첨부할 수 있습니다.
• 어노테이션 — 화살표, 박스, 원, 텍스트, 번호 마커, 펜, 하이라이트, 블러, 크롭 등 10가지 도구를 제공합니다.
• 세션 리플레이 — 수동 녹화(최대 60초)와 인스턴트 리플레이(최근 2분 자동 보관)를 지원합니다.
• 콘솔 로그 — console.error, console.warn, console.log 출력을 자동으로 수집합니다(최근 100건).
• 네트워크 로그 — HTTP 요청/응답을 기록합니다. 민감 정보(인증 토큰, 쿠키 등)는 자동으로 마스킹됩니다.
• React 컴포넌트 트리 — React 앱인 경우, 컴포넌트 계층 구조와 props/state를 자동으로 수집합니다.
• 성능 지표 — LCP, FCP, CLS, INP, TTFB 등 Web Vitals와 리소스 로딩 시간을 캡처합니다.
• 요소 스타일 검사 — 특정 DOM 요소를 선택하여 CSS 속성, 레이아웃 정보를 첨부할 수 있습니다(최대 5개).