치지직(Chzzk)에서 내가 보낸 채널별 치즈 후원 내역을 자동 수집·분석·시각화하는 크롬 확장프로그램
치지직 프로필 페이지(game.naver.com/profile#cash)의 공식 구매 내역 API를 순회하여
나의 치즈 후원 내역을 안전하게 수집하고, 채널별·월별·크로스탭·메시지 검색 및 연말결산 카드로 시각화합니다.
- 🔄 스마트 증분 수집 (1~2초 빠른 업데이트): 이미 수집된 내역이 있을 경우, 최근 변경분만 1~2초 만에 초고속으로 수집하여 기존 데이터와 안전하게 병합합니다.
-
⚡ 백그라운드 수집 & 툴바 뱃지: 팝업 창을 닫거나 다른 탭으로 이동해도 백그라운드 서비스 워커에서 수집이 중단 없이 지속되며, 브라우저 툴바 뱃지(
45%$\to$ DONE)로 실시간 진행률을 확인합니다. -
🧀 치지직 방송/채널 인페이지 후원 위젯:
chzzk.naver.com에서 생방송이나 스트리머 채널을 볼 때, 화면 좌측 하단에 해당 스트리머에게 후원한 총액, 횟수, 팬 등급 칭호 및 최근 메시지를 띄워주는 플로팅 위젯을 제공합니다. -
👑 후원 금액별 팬 등급 칭호 시스템:
- 🥉 동치즈 (1만원 미만) • 🥈 은치즈 (1만원
5만원) • 🥇 금치즈 (5만원20만원) • 💎 다이아 치즈 (20만원~50만원) • 👑 치즈 대주주 (50만원 이상)
- 🥉 동치즈 (1만원 미만) • 🥈 은치즈 (1만원
-
📊 6대 다차원 분석 탭:
- 수집 대시보드: ⚡ 빠른 업데이트 / 전체 재수집, 총 사용 금액, 후원 채널 수, 총 후원 횟수 및 팬 칭호가 포함된 TOP 5
- 채널별 랭킹: 채널명 실시간 검색, 팬 등급 뱃지, 연도 필터, 금액순/채널명순 정렬, 비중 그래프
- 월별 추이: 연도·채널 필터, 월별 후원액 바 차트, 전월 대비 증감(±원화 색상 구분)
- 크로스탭 히트맵: 채널 × 연월 매트릭스, 후원 강도별 5단계 히트맵 셀, Top-N 필터 및 월별 합계
- 심층분석 & 메시지 아카이브: 채팅 vs 영상(영도) vs TTS 비중, 24시간 시간대별 & 요일별 패턴, 최고 단일 후원 TOP 5, 보낸 메시지 전체 검색
- 🎁 치즈 연말결산 (Wrapped): Spotify Wrapped 스타일 인포그래픽 카드, 도네 성향 칭호(Persona), 고해상도 PNG 이미지 저장
-
💾 3종 데이터 내보내기 (Export):
-
Excel 호환 CSV: UTF-8 BOM(
\uFEFF)이 포함되어 한글 깨짐 없이 바로 열람 가능 - 구조화된 JSON: 백업 및 외부 데이터 분석용 원본 데이터 포맷
-
독립 실행형 HTML 리포트 (
cheese_history.html): 확장프로그램의 다크 테마 UI와 5개 인터랙티브 탭이 100% 내장되어 브라우저에서 바로 열람 가능
-
Excel 호환 CSV: UTF-8 BOM(
-
🔒 100% 로컬 보안 & 프라이버시: 외부 서버나 텔레메트리 전송 없이 브라우저 로컬(
chrome.storage.local)에만 데이터가 저장됩니다.
| 탭 | 주요 기능 및 화면 설명 |
|---|---|
| 📊 수집 | 시작/종료 연도 선택 후 원클릭 수집, 진행률 프로그레스 바, 핵심 요약 카드 3종, 최다 후원 채널 TOP 5 랭킹 |
| 📺 채널별 | 전체 후원 채널 목록, 실시간 채널명 검색, 연도별 필터, 금액순/이름순 정렬, 채널별 점유 비중 바 |
| 📅 월별 | 연월별 후원액 추이 바 차트, 전월 대비 증감(빨간색 증가/초록색 감소), 연도 및 채널별 필터 지원 |
| 🗺️ 크로스탭 | 채널 × 연월 매트릭스 히트맵 테이블 (후원 금액에 따른 색상 강도 단계), Top 5/10/20 필터, 월별 합계 행 |
| 💬 심층분석 | 💬 채팅 vs 🎬 영상(영도) vs 🎙️ TTS 보이스 후원 비중 파이/바, ⏰ 24시간대별 & 요일별 후원 그래프, 역대 최고 단일 후원 TOP 5, 후원 메시지 드립 전체 검색기 |
| 🎁 결산카드 | 연도별 결산 카드 프리뷰, 6종 도네 성향 칭호(영도 장인, 한우물 순애파, 치즈 박애주의자, 새벽 올빼미 등), 🖼️ 결산 카드 PNG 이미지 저장 (SNS 공유용) |
git clone https://github.com/huntmori/chzzk-cheese-tracker.git
cd chzzk-cheese-tracker
npm installnpm run build빌드가 완료되면 루트 디렉토리에 dist/ 폴더가 생성됩니다.
- Chrome 주소창에
chrome://extensions/입력 - 우측 상단 개발자 모드(Developer mode) 토글 → ON
- 좌측 상단 압축해제된 확장 프로그램을 로드합니다 (Load unpacked) 클릭
- 프로젝트 디렉토리 내
dist/폴더 선택
https://game.naver.com/profile#cash 에 접속하여 네이버 계정으로 로그인합니다.
- 브라우저 툴바 우측 상단의 치즈 아이콘(🧀) 클릭
- 수집 탭에서 시작 연도와 종료 연도 선택
- 수집 시작 버튼 클릭
💡 백그라운드 수집 지원:
수집을 시작한 후 팝업 창을 닫아도 백그라운드에서 수집이 계속 진행됩니다.
브라우저 툴바의 🧀 아이콘 뱃지(25%$\to$ 60%$\to$ DONE) 및game.naver.com탭 우측 하단 토스트로 진행 상황을 확인할 수 있습니다.
- 상단 탭을 자유롭게 넘나들며 채널별, 월별, 크로스탭, 심층 분석 데이터를 확인합니다.
🎁 결산카드탭에서 나의 도네이션 성향을 확인하고🖼️ 결산 카드 이미지 저장 (PNG)버튼을 눌러 인포그래픽 이미지를 다운로드합니다.
팝업 하단의 CSV 내보내기, JSON 내보내기, HTML 내보내기 버튼을 눌러 원하는 포맷으로 데이터를 소장합니다.
chzzk-cheese-tracker/
├── package.json # npm 스크립트 및 의존성 (vue, vite, @vitejs/plugin-vue)
├── vite.config.js # Vite 빌드 및 정적 에셋 복사 설정
├── popup.html # Vite 팝업 HTML 엔트리 포인트
├── manifest.json # 확장프로그램 매니페스트 (Manifest V3)
├── src/
│ ├── popup/ # Vue 3 팝업 UI 애플리케이션
│ │ ├── main.js # Vue 앱 인스턴스 생성 및 마운트
│ │ ├── App.vue # 최상위 루트 컴포넌트 및 탭 내비게이션
│ │ ├── components/ # 세부 탭 UI 컴포넌트
│ │ │ ├── Header.vue # 헤더 및 마지막 수집 상태 뱃지
│ │ │ ├── CollectPanel.vue # 연도 셀렉트, 수집 시작/초기화, 진행바
│ │ │ ├── CollectTab.vue # 요약 카드 3종 및 TOP 5 랭킹
│ │ │ ├── ChannelTab.vue # 채널별 분석 및 실시간 검색
│ │ │ ├── MonthlyTab.vue # 월별 추이 및 전월 대비 증감
│ │ │ ├── CrossTab.vue # 채널 × 연월 매트릭스 히트맵
│ │ │ ├── AnalyticsTab.vue # 후원 메시지 검색 & 채팅/영도/시간대 분석
│ │ │ ├── WrappedTab.vue # 치즈 연말결산 인포그래픽 & 페르소나
│ │ │ └── ExportFooter.vue # CSV / JSON / HTML 내보내기 바
│ │ ├── composables/ # 상태 관리 및 비즈니스 로직
│ │ │ └── useCheeseTracker.js
│ │ ├── styles/ # 다크 테마 및 전역 CSS 스타일
│ │ │ └── main.css
│ │ └── utils/ # 포맷터, HTML 리포트 생성기, Canvas 렌더러
│ │ ├── formatters.js
│ │ ├── htmlExporter.js
│ │ └── wrappedCanvas.js
│ ├── background.js # 백그라운드 서비스 워커 (API 순회, 재시도, 스토리지, 뱃지)
│ └── content.js # 콘텐츠 스크립트 (화면 토스트 알림 및 네트워크 스니퍼)
├── icons/ # 확장프로그램 아이콘 (16, 48, 128px)
├── dist/ # 빌드 산출물 (Chrome에 로드하는 폴더)
└── api-sniffer.js # 개발자용 DevTools API 엔드포인트 탐색 스크립트
| 항목 | 내용 |
|---|---|
| 엔드포인트 | GET https://api.chzzk.naver.com/commercial/v1/product/purchase/history |
| 인증 방식 | 네이버 로그인 활성 세션 쿠키 (credentials: 'include') |
| 요청 파라미터 | searchYear (연도), searchMonth (월, 1~12), page (0부터 시작), size (페이지 크기) |
{
"code": 200,
"message": null,
"content": {
"page": 1,
"size": 10,
"totalCount": 20,
"totalPages": 2,
"data": [
{
"purchaseDate": "2026-05-05 09:48:58",
"payAmount": 1000,
"channelName": "스트리머이름",
"channelId": "be3d3c52...",
"channelImageUrl": "https://...",
"donationType": "CHAT",
"donationText": "후원 메시지",
"useSpeech": true,
"discountedAmount": 0
}
]
}
}| 권한 (Permission) | 사용 목적 |
|---|---|
storage |
수집된 후원 데이터를 브라우저 로컬(chrome.storage.local)에만 안전하게 보관 |
activeTab |
팝업에서 현재 탭 정보 및 네이버 탭 활성화 확인 |
scripting |
game.naver.com 페이지에 진행 상황 안내 토스트 표시 |
https://game.naver.com/* |
로그인 세션 쿠키 참조 |
https://api.chzzk.naver.com/* |
치즈 구매 내역 API 호출 |
🛡️ 개인정보 보호: 본 확장프로그램은 어떠한 사용자 데이터도 외부 서버로 전송하지 않으며, 모든 수집과 통계 분석은 사용자 본인의 브라우저 내부에서만 수행됩니다.
# 개발 모드 (Vite dev server)
npm run dev
# 확장프로그램 번들 빌드 (dist/ 폴더 생성)
npm run buildgame.naver.com/profile#cash 페이지의 DevTools Console(F12)에 api-sniffer.js 전체 코드를 붙여넣고 엔터를 누르면, 페이지에서 월/연도를 변경할 때마다 실제 API 호출 정보와 응답 구조를 실시간으로 확인할 수 있습니다.
- Node.js 18 이상 (빌드 시)
- Google Chrome 또는 Chromium 기반 브라우저 (Microsoft Edge, 네이버 웨일, Brave 등)
- 치지직 이용 이력이 있는 네이버 계정
- 본 확장프로그램은 본인 계정의 치즈 후원 내역만 조회합니다.
- 치지직 공식 API 규격 변경 시 일부 동작이 영향을 받을 수 있습니다.
- 네이버 이용약관 범위 내에서 개인 용도로 사용해주세요.