치지직(Chzzk), SOOP 등 인터넷 방송 스트리머 여러 명을 동시에 한 화면에서 시청할 수 있는 Chrome MV3 확장 프로그램입니다.
⚠️ 공식 개발자 API를 사용하지 않습니다. 브라우저에 저장된 로그인 세션 쿠키 방식만 사용합니다.
📄 각 기능의 자세한 설명은 상세 기능 정의 문서를 참고하세요.
- 시청목록 탭 — 대시보드 표시 목록(멀티뷰 목록 + 즐겨찾기 좌우 배치)과 스트리머 추가를 서브탭으로 구성
- 멀티뷰 목록 순서 변경 — 메인 화면은 목록 상단 고정 박스에 별도 표시, 서브 채널은 드래그 또는 위/아래 버튼으로 순서 변경, 서브 채널을 메인 화면 박스로 드래그하면 메인 교체
- 팔로잉 목록 연동 — 치지직·SOOP 각각 내 팔로잉 목록을 불러와 LIVE 방송 우선 정렬 후 시청/즐겨찾기 추가
- 즐겨찾기 보관함 — 자주 보는 스트리머 영구 저장, 폴더(트리) 구조 관리, LIVE 여부 표시, 시청 목록 간 상호 복사 (치지직·SOOP 혼합 보관 가능)
- 플랫폼 아이콘 — 목록 내 각 채널에 치지직 / SOOP 아이콘 표시
- 레이아웃 선택 — 기본형(서브 좌) / 반전형(서브 우) / 서브하단 / 서브상단 4종 중 선택 (기타설정 탭)
- 멀티뷰 화면 — 메인 1채널 + 서브 N채널 동시 시청
- 방송 딜레이 표시 — 메인 하단 바에 실시간 딜레이(초) 표시, 서브 타일 hover 시 개별 딜레이 표시
- 메인 ↔ 서브 스왑 — 서브 타일 클릭 시 영상 재로드 없이 메인과 교체
- 비방송 안내 — 시청 중인 채널이 방송 종료 상태면 화면에 "방송중이 아닙니다" 표시 및 자동 새로고침 중단 (1분 주기로 재확인 후 방송 재개 시 자동 복귀)
- 초기화 안내 — 화면을 새로 불러올 때 "초기화 진행중입니다" 표시, 와이드 화면 전환이 끝나면 사라짐 (1분 내 전환 안 되면 "수동 최대화 필요" 안내로 전환)
- 와이드 모드 자동 전환 — 영상 재생 시 치지직 와이드 화면으로 자동 전환 (메인/서브 공통, 최대 1분 재시도, 화면 교체 시에도 재시도)
- 자동 동기화 — 메인/서브 화면 각각에 개별 적용, 딜레이가 기준치(초) 초과 시 자동 새로고침 / 신호 없으면 약 10초 후 자동 재시도
- 채팅 연동 — 치지직 메인 스트리머의 채팅창 자동 표시 (숨김 상태 저장) / SOOP은 채팅 미지원으로 채팅 영역 자동 숨김
- 채팅 자동 접기 — 대시보드 내 iframe 채팅 패널 자동 숨김
- 볼륨 복원 — 스왑 시 기존 메인 볼륨 수준을 유지하여 새 메인에 적용
- 볼륨 독립 제어 — 서브 채널별 음소거 토글 및 볼륨 슬라이더 개별 조작
- 서브채널 개별 삭제 — 서브 타일 hover 시 ✕ 버튼으로 해당 채널만 삭제 (방송 중이 아닌 채널은 항상 표시)
- 서브 패널 접기 — 모든 레이아웃에서 서브 채널 영역을 버튼으로 접기/펼치기
- 서브 패널 높이 조절 — 레이아웃 3/4에서 핸들 드래그로 서브채널 영역 높이 조절 및 자동 저장/복원
- 서브 패널 너비 조절 — 레이아웃 1/2에서 핸들 드래그로 서브채널 영역 너비 조절
- 서브채널 정보 표시 — 서브 타일에 프로필 사진 또는 채널 이름을 표시, 항상 표시/마우스 올릴 때만 표시 선택 가능 (기타 설정, 기본값: 마우스 올릴 때 채널 이름)
┌──────────────┬──────────────────────────────┬──────────────┐
│ 서브 채널 │ 메인 플레이어 │ 채팅 │
│ │ │ │
│ [서브타일] │ 영상 (재로드 없이 스왑) │ 채팅 iframe │
│ [서브타일] │ │ │
│ [서브타일] │ 🔴 스트리머명 [↻ 새로고침] │ │
└──────────────┴──────────────────────────────┴──────────────┘
Chrome 웹스토어 출시 전 직접 설치 방법입니다.
- 이 레포지토리를 다운로드(ZIP) 또는 클론합니다.
- Chrome 주소창에
chrome://extensions입력 - 우측 상단 개발자 모드 토글 활성화
- 압축해제된 확장 프로그램 로드 클릭 →
source/폴더 선택 - 확장 아이콘이 toolbar에 나타나면 완료
치지직에 로그인된 상태에서 사용해야 팔로잉 목록 연동 및 자동 로그인이 정상 동작합니다.
스트리머 추가
- 팝업 →
스트리머 추가탭 내 팔로잉 목록 가져오기버튼으로 팔로잉 채널 불러오기 또는- 채널 고유 ID(32자리)와 표시명을 직접 입력
- 팝업 →
멀티뷰 실행
- 팝업 →
시청 목록탭 →멀티뷰 대시보드 열기
- 팝업 →
메인 화면 변경
- 팝업
시청 목록에서▶ 메인버튼으로 시작 메인 스트리머 지정 - 대시보드에서 서브 타일 클릭으로 실시간 스왑
- 팝업
볼륨 조절
- 서브 타일에 마우스를 올리면 음소거 토글 + 볼륨 슬라이더 표시
source/
├── manifest.json 권한 선언, content_scripts 등록
├── background.js Service Worker — 쿠키 주입 규칙, 팔로잉 API fetch 대리
├── content.js 스트림 페이지 주입 스크립트 (볼륨 제어, 와이드 모드, SOOP 팝업 닫기)
├── content-soop-main.js SOOP 스트림 페이지 MAIN 월드 스크립트 (로컬 앱 연결 요청 차단)
├── platforms/
│ ├── chzzk.js 치지직 플랫폼 어댑터 (라이브 상태, 프로필, 팔로잉, 채팅 URL)
│ ├── soop.js SOOP 플랫폼 어댑터 (라이브 상태, 프로필, 팔로잉)
│ └── index.js 플랫폼 어댑터 진입점 (getPlatform 함수)
├── popup.html 팝업 관리자 UI (2탭: 시청목록 / 기타설정)
├── popup/
│ ├── main.js DOM 초기화, 탭 이벤트, 버튼 이벤트
│ ├── storage.js 스토리지 로드/저장, 스트리머 삭제/이동/복사, 즐겨찾기 트리 로드/저장
│ ├── watchlist.js 시청 목록 렌더링, 수동 추가 이벤트
│ ├── favorite-tree.js 즐겨찾기 폴더 트리 렌더링 및 드래그앤드롭
│ ├── following.js 팔로잉 목록 불러오기 및 렌더링
│ └── settings.js 설정 저장, 레이아웃 선택 이벤트
├── dashboard.html 멀티뷰 대시보드 UI
├── dashboard/
│ ├── main.js DOM 초기화, 공유 상태, 버튼 이벤트, 딜레이 수신
│ ├── player.js iframe 생성, 메인/서브 플레이어, 서브 타일 생성
│ ├── control.js 메인 ↔ 서브 스왑, 자동 동기화, 레이아웃/패널 접기
│ └── chat.js 채팅 iframe 세팅 및 숨김 상태 복원
└── resources/
├── main_icon_16.png 툴바 아이콘
├── main_icon_32.png HiDPI 툴바 아이콘
├── main_icon_48.png 확장 관리 페이지 아이콘
├── main_icon_128.png 웹스토어 아이콘
├── icon.png 원본 아이콘
├── chzzk_icon_16.jpg 팝업 내 치지직 플랫폼 아이콘
└── soop_icon_16.jpg 팝업 내 SOOP 플랫폼 아이콘
- Chrome Extension Manifest V3
- Vanilla JS (프레임워크 없음)
declarativeNetRequest— SameSite=Lax 쿠키 우회 및 헤더 변조chrome.storage.local— 시청 목록 / 즐겨찾기 / 설정 영구 저장- postMessage 양방향 통신 — 대시보드 ↔ chzzk iframe 볼륨 제어
- 트위치(Twitch) 플랫폼 채널 멀티뷰 지원 추가
- 서브 채널과 메인 채널을 교환한 후 메인 채널의 영상이 재생되지 않는 버그 수정 — 재생/일시정지(space/k) 표시는 정상 동작하지만 영상 자체는 갱신되지 않는 문제
- 통나무 파워 자동 수령 — 채팅창에 수령 버튼이 나타나면 자동으로 클릭 (네이버에서 작업장(매크로)으로 판단할 수 있는 위험이 있어 보류)
재현이 되지 않아 확정 버그(업데이트 예정 기능)로 등록하지는 않았지만, 한 번 발생했던 오류를 날짜와 함께 기록합니다. 이후 새로운 버그가 발견되거나 Todo 항목을 추가할 때, 이 목록에 해당하는 내용이 있는지 먼저 확인합니다.
- 2026-08-02 — 서브 채널과 메인 채널 교환 후 메인 화면 영상이 갱신되지 않음 (재생/일시정지 단축키 표시는 정상 동작). 재현 안 됨 — 추정 원인: iframe을 DOM에서 다른 위치로 옮길 때(reparent) 발생하는 브라우저 비디오 컴포지팅 지연 가능성.
- 메인 채널 볼륨이 프로그램 실행 시 100으로 강제 고정되던 문제 수정
- 팝업 멀티뷰 표시 목록에서 드래그앤드롭으로 채널 순서를 변경할 수 있는 기능 추가
- 서브 → 메인 스왑 후 새로고침 시 음량이 0으로 고정되는 버그 수정
- 광고 재생 중 자동 동기화가 새로고침을 실행하는 문제 수정 (치지직·SOOP 공통)
- 치지직 API 데이터 추출 방식 개선 — 더 안정적인 방식으로 전환
- 서브 채널 영역 확대 보기 추가 — 버튼 클릭 후 드래그로 원하는 영역만 확대, 버튼으로 원래 화면 복원 가능
- 서브 채널 순서 변경 추가 — 서브 타일을 드래그해서 원하는 순서로 재배치
- 서브 채널 가로 배치 시 마우스 휠 스크롤로 목록 좌우 이동 지원
- 프로그램명 MultiStream으로 변경
- SOOP(아프리카TV) 채널 멀티뷰 지원 추가
- 팝업 UI 전면 개편 — 시청목록 / 기타설정 2탭 구조로 통합
- 대시보드 표시 목록에서 멀티뷰 목록과 즐겨찾기를 나란히 표시
- 팔로잉 목록 및 즐겨찾기에 치지직 / SOOP 플랫폼 아이콘 표시
- LIVE 배지 위치 개선 — 이름보다 앞에 표시
- 확장 아이콘 및 UI 색상 전면 교체
- 방송 중이 아닌 서브채널에서도 삭제 버튼이 항상 표시되도록 개선
- 서브채널 정보 표시 방식 선택 기능 추가 (프로필 사진 또는 채널 이름, 항상 표시 / 마우스 올릴 때 중 선택)
- 치지직 외 페이지(스튜디오, 드롭스 등) 방문 시 오류 발생하던 문제 수정
- 다른 앱 작업 중 브라우저로 전환 시 서브채널이 새로고침되던 문제 수정
- 즐겨찾기 목록에 폴더(트리) 구조 추가 (드래그앤드롭으로 항목/폴더 정리 가능)
- 즐겨찾기 항목에 현재 생방송 여부(LIVE/OFF) 표시 추가
- 시청 목록에서 항목별 메뉴(⋯)로 즐겨찾기에 바로 추가할 수 있도록 개선
- 서브 화면 좌측 상단에 채널 프로필 사진 표시 (기타 설정에서 항상 표시 / 마우스 올릴 때만 표시 / 표시 안함 선택 가능)
- 기본형/반전형 레이아웃에서 서브 화면 영역을 더 넓게 조절할 수 있도록 개선
- 와이드 화면 자동 전환이 간헐적으로 동작하지 않던 문제 개선 (화면 교체 시에도 재시도)
- 시청 목록 채널이 방송 중이 아닐 때 "방송중이 아닙니다" 안내 표시 (1분마다 재확인 후 방송 재개 시 자동 복귀)
- 화면을 새로 불러올 때 "초기화 진행중입니다" 안내 표시
- 서브 화면에도 자동 동기화 적용 (영상 신호 없을 때 자동 재시도 포함)
- 서브 화면을 메인으로 전환할 때 간헐적으로 소리가 나오지 않던 문제 수정
- "전체 새로고침" 버튼 제거 (필요 시 브라우저 새로고침 이용)
- 시청 중인 채널 수 표시 단위를 "명"에서 "채널"로 변경
- 시청 목록에 스트리머를 직접 추가할 때 탭이 자동으로 전환되지 않도록 변경
- 팔로잉 목록에서 즐겨찾기에 등록된 항목 표시를 "저장됨"에서 "즐겨찾기"로 변경
- 즐겨찾기 목록에 LIVE/OFF 표시 추가
- 확장 프로그램 이름 표기 오류 수정
- 메인 채널 지연시간이 기준치를 초과해도 새로고침되지 않던 문제 수정
- 대시보드를 새로고침해도 팝업에서 변경한 레이아웃이 적용되도록 개선
- 대시보드가 이미 열려있을 때 팝업에서 다시 열면 기존 창으로 이동하도록 개선
- 팝업 알림을 화면 하단 메시지 형태로 개선
- 시청 목록에서 스트리머 순서를 위아래로 변경할 수 있는 기능 추가
- 채널 ID / 스트리머명 입력 시 특수문자 입력 제한 추가
- 즐겨찾기 목록에서 이미 시청 목록에 추가된 채널은 "추가됨"으로 표시
- 치지직에 로그인되어 있지 않을 때 팔로잉 목록을 불러오지 못하던 오류 수정 (로그인 안내 화면 추가)
- 레이아웃 선택을 시청 목록 탭으로 이동 (대시보드 열기 버튼 하단)
- 기타 설정 탭 하단 버전 번호 표시 추가
- 레이아웃 3/4 서브채널 높이 드래그 조절 기능 추가 (저장/복원)
- 코드 구조 모듈화 리팩터링 (popup/, dashboard/ 폴더 분리)
- 리소스 파일 구조 정리 (resources/ 폴더로 이동)
- 레이아웃 4종 선택 기능 추가 (서브 좌/우/하단/상단)
- 대시보드에서 서브채널 개별 삭제 기능 추가
- 메인/서브 채널 딜레이 실시간 표시
- 서브 채널 최대 너비 제한 조정
- 생방송 시 와이드 모드 자동 전환 개선
- 방송 딜레이 표시 기능 추가
- 초기 멀티뷰 기본 기능 안정화
- 초기 릴리즈: 멀티뷰 대시보드, 팔로잉 연동, 즐겨찾기
- 본 확장프로그램은 Naver 및 Soop의 정보수집 방해 또는 삭제 요청 시 삭제될 수 있습니다.
- 본 프로그램 개발 목적은 단순히 '여러 동시화면 보기 위함'이며 그 외의 목적은 없습니다.
- 본 프로그램은 웹개발을 모르는 타언어 개발자가 Claude Code를 이용하여 개발하였습니다. 처음으로 AI만을 이용하여 개발을 시도해 본 프로젝트입니다.