워치파티 오버레이 타이머 (Watch Party Overlay Timer)

비디오 위에 시간 및 정보 오버레이를 표시하여 OBS 등으로 화면을 캡처할 때 유용하게 사용할 수 있는 브라우저 확장 프로그램입니다.

🎯 프로젝트 목표

온라인 스트리밍 서비스를 이용한 단체 시청(Watch Party) 시, 송출 화면에 현재 재생 시간과 영상 정보를 명확히 표시하여 시청 경험을 동기화하고 방송 프로그램으로 화면을 원활하게 캡처할 수 있도록 지원합니다.

✨ 주요 기능

🚀 스트리밍 디스플레이 (NEW in v3.0+)

• 별도 창에서 오버레이 정보 표시: 방송용 컴퓨터에서 원격으로 오버레이 사용 가능
• VDO.Ninja 연동: 네트워크를 통한 실시간 스트리밍 지원
• 플레이어 하단 바 스타일: 비디오 플레이어 하단에 자연스럽게 배치되는 1200×100px 가로형 UI
• 동적 창 크기 조정: 설정 패널 확장/축소에 따라 창 크기 자동 조정
• 튜토리얼 시스템: 첫 사용자를 위한 4단계 가이드 제공

🎨 고급 커스터마이징 (v3.1.0)

• 진행바 크기 조절: 너비(80200px)와 높이(212px) 개별 조절
• 창 크기 조절: 너비 300~1200px 범위에서 실시간 조절
• iOS 스타일 토글: 진행바 및 플랫폼 배지 표시/숨김 토글
• 플랫폼별 색상 배지: YouTube, 치지직, 라프텔, 넷플릭스 등 고유 색상 적용
• 폰트 크기 세밀 조절: 에피소드, 시리즈, 시간 폰트 크기 개별 설정 (6~40px)
• 동적 레이아웃: 폰트 크기에 따라 진행바와 요소들이 자동 조정

📺 기본 오버레이 기능

• 실시간 비디오 정보 표시: 제목, 시리즈, 재생 시간 자동 추출
• 다양한 표시 모드:
  • 일반 모드: 모든 정보 표시 (시리즈, 에피소드, 시간, 플랫폼)
  • 컴팩트 모드: 에피소드와 시간만 간결하게 표시
  • 그린스크린 모드: 크로마키 처리를 위한 녹색 배경
• 시간 표시 옵션: 현재/전체, 현재만, 숨김 선택 가능
• 오버레이 위치 조절: 좌측/우측 상단 토글

🎯 지원 플랫폼

• Laftel (라프텔): 애니메이션 스트리밍 서비스
• Chzzk (치지직): 네이버 라이브 스트리밍 플랫폼
• YouTube: 전 세계 동영상 플랫폼
• Netflix: 글로벌 OTT 서비스

🛠️ 설치 방법 (개발자 모드)

1. 이 저장소를 클론하거나 다운로드합니다.
2. Chrome/Edge 브라우저를 열고 주소창에 chrome://extensions 또는 edge://extensions를 입력합니다.
3. 개발자 모드(Developer Mode)를 활성화합니다.
4. "압축 해제된 확장 프로그램을 로드합니다.(Load unpacked)" 버튼을 클릭하고, 다운로드한 overlay-timer 디렉터리를 선택합니다.

💡 사용 방법

기본 오버레이 사용

1. 지원되는 비디오 사이트에서 동영상을 재생합니다.
2. 확장 프로그램 아이콘을 클릭하여 팝업을 엽니다.
3. "정보 가져오기" 토글을 ON으로 설정합니다.
4. "오버레이 표시" 토글을 ON으로 설정하면 화면에 오버레이가 나타납니다.
5. OBS에서 브라우저 화면 캡처를 통해 오버레이를 송출에 포함할 수 있습니다.

스트리밍 디스플레이 사용 (투컴 환경)

1. 팝업에서 "📺 스트리밍 디스플레이 열기" 버튼을 클릭합니다.
2. 새 창이 열리면 하단 화살표를 클릭하여 설정 패널을 확장합니다.
3. "🎥 VDO.Ninja 열기" 버튼을 클릭하여 VDO.Ninja 사이트로 이동합니다.
4. "Remote Screenshare into OBS" 선택 → 이 탭 선택 → Audio 체크박스 해제 → Share
5. 생성된 링크를 방송용 컴퓨터의 OBS Browser Source에 추가합니다.

🎨 커스터마이징 옵션

스트리밍 디스플레이 설정

• 표시 설정: 표시 모드, 시간 표시, 진행바 표시, 플랫폼 표시, 너비 조절
• 모양 설정:
  • 색상: 배경색, 불투명도, 텍스트, 강조색, 진행바 색상
  • 진행바: 너비(80200px), 높이(212px)
  • 글자 크기: 에피소드, 시리즈, 시간 (6~40px)
  • 레이아웃: 모서리, 높이 조절

고급 기능

• 튜토리얼 시스템: "사용법 가이드 다시 보기" 버튼으로 언제든 재확인
• 설정 초기화: "기본값으로 재설정" 버튼으로 모든 설정 복원
• 실시간 적용: 모든 설정 변경이 즉시 반영되며 자동 저장

📸 스크린샷

스트리밍 디스플레이 예시

팝업 UI 예시

오버레이 작동 예시

🔧 개발 정보

• 언어: JavaScript (ES6+), HTML5, CSS3
• 플랫폼: Chrome Extension Manifest V3
• 아키텍처:
  • Background Script: 전역 상태 관리 및 탭 간 통신
  • Content Script: 웹 페이지 정보 추출 및 오버레이 표시
  • Popup Script: 사용자 인터페이스 제어
  • Streaming Display: 독립적인 오버레이 표시 창

📋 최신 업데이트 (v3.1.0)

새로운 기능

• 진행바 크기 조절 기능 (너비/높이 개별 설정)
• 창 너비 조절 기능 (300~1200px)
• iOS 스타일 토글 스위치
• 플랫폼별 색상 배지 시스템
• 동적 레이아웃 (폰트 크기 기반)

개선사항

• 기본값 재설정 시 즉시 적용 문제 해결
• 진행바 설정 UI 재구성 (논리적 그룹화)
• 슬라이더 조작 시 debounce 처리
• 배경색 설정 정확도 향상

📄 라이선스

GNU General Public License v3 (GPLv3)를 따릅니다. 자세한 내용은 LICENSE 파일을 참고하십시오.

🤝 기여 방법

버그 제보, 기능 제안 및 코드 기여는 언제나 환영합니다. GitHub 이슈 또는 Pull Request를 이용해주십시오.

🙏 감사 인사 (Acknowledgements)

Created by RiceBerry
Assisted by Cursor IDE

Special Thanks to:

• 초승달
• 에스더
• 뇨롱이

CHZZK 커뮤니티에서 소중한 피드백과 지원을 해주신 분들께 감사드립니다.