Issue Sticker

Visual bug tracking tool for web development

### Issue Sticker - 시각적 버그 추적 도구 **웹 개발 QA 과정을 혁신하는 시각적 버그 관리 도구** Issue Sticker는 웹 개발 과정에서 QA 담당자가 발견한 버그를 Figma의 코멘트 기능처럼 시각적으로 관리할 수 있는 Chrome 확장 프로그램입니다. 페이지의 특정 위치에 스티커를 남기고, 개발자가 직관적으로 확인하고 해결할 수 있도록 도와줍니다. ### 🎯 주요 기능 #### 1. 시각적 이슈 스티커 - **Ctrl/Cmd + Alt + 1** 단축키로 이슈 생성 모드 토글 후 페이지 클릭 - 사이드 패널에서 "이슈 생성 모드" 버튼으로도 활성화 가능 - 페이지의 정확한 위치에 스티커 표시 - 등급별 색상 구분 (S/A/B/C/D) - 상태별 아이콘 표시 (미해결/진행중/완료) #### 2. 자동 정보 수집 - **스크린샷 자동 캡처**: 이슈 생성 시점의 화면 자동 저장 - **화면 녹화**: 단축키(Ctrl/Cmd + Alt + 2)로 화면 녹화 후 이슈에 첨부 (v1.2.0) - 최대 2분 녹화, 자동 압축 (최대 10MB) - WebM 형식으로 저장 - 녹화 인디케이터로 상태 확인 - **네트워크 로그 수집**: 최근 50개의 네트워크 요청 자동 첨부 - **콘솔 로그 캡처**: 이슈 생성 시점의 콘솔 로그 자동 수집 (v1.2.0) - **상세 로그 모드**: Request/Response Body까지 수집 (선택적) #### 3. 이슈 관리 - **사이드 패널**: 모든 이슈를 한눈에 확인 - **필터링**: 등급, 상태, URL별 필터링 - **콘솔 로그 필터링**: 로그 레벨, 타입별 필터링 (v1.2.0) - **스티커 표시 제어**: 필요시 스티커 숨김/표시 - **상태 관리**: 이슈 상태 업데이트 및 댓글 기능 #### 4. 마크다운 지원 (v1.3.0) - 이슈 설명에 마크다운 포맷 사용 가능 - 헤딩, 볼드, 이탤릭, 코드 블록, 리스트, 링크 등 지원 - Jira 이슈 생성 시 자동으로 Jira ADF 형식으로 변환 - 구조화된 형식으로 Jira에 표시되어 가독성 향상 #### 5. 익스텐션 전역 제어 (v2.0.0) - **익스텐션 활성화/비활성화 토글**: 사이드 패널에서 익스텐션 전체 기능을 한 번에 켜고 끌 수 있음 - **도메인 제한 기능**: 테넌트별로 허용된 도메인에서만 익스텐션 사용 가능 - 보안 및 데이터 격리 강화 - 허용되지 않은 도메인 접근 시 명확한 안내 메시지 표시 #### 6. Jira 연동 (선택사항) - Jira 이슈 자동 생성 - 담당자, 수정 버전 등 필드 설정 - Jira 이슈와 동기화 - 마크다운 설명이 자동으로 Jira ADF 형식으로 변환 (v1.3.0) ### 💡 사용 방법 1. **익스텐션 설치 후 사이드 패널 열기** 2. **익스텐션 활성화 확인** (v2.0.0): - 사이드 패널 상단에서 익스텐션 활성화 상태 확인 - 필요시 토글 버튼으로 활성화/비활성화 - 도메인 제한이 설정된 경우 허용된 도메인에서만 사용 가능 3. **이슈 생성 모드 활성화**: - 방법 1: 사이드 패널에서 "이슈 생성 모드" 버튼 클릭 - 방법 2: **Ctrl/Cmd + Alt + 1** 단축키로 이슈 생성 모드 토글 3. **이슈 생성 모드가 활성화되면**: - 페이지의 요소에 마우스를 올리면 하이라이트 표시 - 원하는 위치를 클릭하면 해당 위치에 이슈 생성 폼이 열림 - 이슈 생성 모드 인디케이터가 화면에 표시됨 4. **화면 녹화** (선택사항): - **Ctrl/Cmd + Alt + 2** 단축키로 녹화 시작/중지 - 녹화 중에는 화면에 녹화 인디케이터 표시 - 최대 2분 자동 녹화, 자동 압축 후 이슈에 첨부 5. **이슈 정보 입력**: 제목, 설명(마크다운 지원), 등급(S/A/B/C/D) 설정 6. **자동 수집**: 스크린샷(또는 녹화 영상), 네트워크 로그, 콘솔 로그가 자동으로 첨부됩니다 7. **이슈 관리**: 사이드 패널에서 필터링 및 상태 업데이트 8. **마크다운 사용**: 이슈 설명에 마크다운 포맷 사용 가능 (v1.3.0) - Jira로 생성 시 자동으로 구조화된 형식으로 변환 ### 📊 로그 수집 기능 #### 네트워크 로그 - **기본 모드**: 항상 활성화, URL, 메서드, 상태 코드, 타임스탬프 수집 - **상세 모드**: Request/Response Headers 및 Body 수집 (선택적) - JSON Viewer로 편리하게 확인 #### 콘솔 로그 (v1.2.0) - 이슈 생성 시점의 콘솔 로그 자동 캡처 - 로그 레벨별 필터링 (log, info, warn, error) - 로그 타입별 필터링 (console.log, console.error 등) - 이슈 상세에서 콘솔 로그 확인 가능 #### 화면 녹화 (v1.2.0) - **단축키**: Ctrl/Cmd + Alt + 2로 녹화 시작/중지 - **자동 제한**: 최대 2분 녹화 후 자동 중지 - **자동 압축**: 최대 10MB로 자동 압축 - **형식**: WebM 형식으로 저장 - **이슈 첨부**: 녹화된 영상을 이슈에 첨부하여 버그 재현 과정을 시각적으로 전달 - **녹화 인디케이터**: 녹화 중 화면에 표시되는 인디케이터로 상태 확인 ### 📝 주요 사용 사례 - **QA 테스트**: 웹사이트 QA 과정에서 발견한 버그 추적 - **버그 재현**: 화면 녹화로 버그 발생 과정을 시각적으로 기록 - **프로토타입 리뷰**: 디자인 리뷰 시 피드백 남기기 - **버그 리포트**: 개발팀에 상세한 버그 정보 전달 (스크린샷/영상, 로그 포함) - **협업**: QA와 개발팀 간 효율적인 소통 --- **Issue Sticker로 더 효율적인 웹 개발 QA를 시작하세요!**