Extension 설치
Chrome Extension 설치 및 초기 설정 가이드
Chrome 웹스토어에서 설치
- Chrome 웹스토어에서 QA Note를 검색합니다.
- Chrome에 추가 버튼을 클릭하여 설치합니다.
- 브라우저 툴바에 QA Note 아이콘이 나타납니다.
로그인
Extension은 이메일/비밀번호 로그인과 Google OAuth 로그인을 지원합니다.
- 툴바의 QA Note 아이콘을 클릭합니다.
- 로그인 버튼을 클릭하면 로그인 팝업이 열립니다.
- 이메일/비밀번호 또는 Google 계정으로 로그인합니다.
- 로그인이 완료되면 팝업이 자동으로 닫히고 Extension이 연결됩니다.
데이터 수집 동의
첫 로그인 후 데이터 수집 동의 화면이 표시됩니다. 동의하면 콘솔 로그, 네트워크 요청 등 기술 메타데이터 수집 기능이 활성화됩니다.
이 과정에서 Chrome이 <all_urls> 권한을 요청합니다. 허용하면 모든 사이트에서 QA Note의 전체 기능을 사용할 수 있습니다. 거부해도 기본 스크린샷 캡처는 정상 동작합니다.
조직 & 프로젝트 선택
로그인 후 Extension 팝업에서:
- 조직을 선택합니다 (여러 조직에 속한 경우).
- 프로젝트를 선택합니다.
- 선택된 프로젝트에 이슈가 등록됩니다.
캡처 트리거 방법
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개).