Extension 설치

Chrome 웹스토어에서 설치

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

브라우저 지원

QA Note Extension은 Chrome 계열 브라우저(Chrome, Edge, 네이버 웨일 등)에서 사용할 수 있습니다.

Safari는 Chrome Web Store 확장을 직접 설치할 수 없으므로, 고객사 리포터는 /reporter/issues의 웹에서 이슈 등록 폼으로 기본 이슈를 접수할 수 있습니다. 화면 주석, 세션 리플레이, 자동 환경 정보 수집이 필요한 경우에는 Chrome 계열 브라우저에서 Extension을 사용하세요.

로그인

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개).