Issue Sticker

About

### 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를 시작하세요!**