ShadowMAX는 DJMAX Respect V 및 리듬게임 플레이어를 위한 흙디맥 연습 웹 도구입니다.
게임을 직접 실행하지 않고도, YouTube 패턴 영상이나 채보 보관 영상을 보면서 손가락과 운지를 효율적으로 연습할 수 있도록 제작되었습니다.
별도의 프레임워크나 빌드 도구 없이 브라우저에서 바로 동작하는 Pure Static Web App입니다.
-
YouTube 영상 연동 및 미세 속도 조절
- YouTube URL 또는 Video ID로 영상 불러오기 (일반, Shorts, 단축 URL 지원)
- 재생 / 일시정지, 실시간 Seek 탐색 바 동기화
- 리듬게임 패턴 연습에 최적화된 미세 재생 속도조절 (
0.5x,0.7x,0.8x,0.9x,0.95x,1.0x,1.05x,1.1x,1.2x,1.3x,1.5x) - 영상 제어 및 속도 가속/감속 전용 단축키 (
1/2키 등 커스텀 변경 지원)
-
DJMAX Respect V 원작 충실 기어 & 키 입력 비주얼라이저
- 4B / 5B / 6B / 8B 패턴 모드 지원
- DJMAX 원작 노트 디자인 색상 및 대칭 서브 바 레이아웃:
- Side Note (전 모드 공통
L-Shift,R-Shift): Cyan (rgb(65, 199, 192)), 하단 좌/우 50% 분할 대칭 바 - 8B Trigger Note (
C,,): Crimson (rgb(239, 0, 81)), 8B 전용 하단 좌/우 50% 분할 대칭 바 - Track 1, 3, 4, 6: Center White → Outer Grayish (
rgb(99, 92, 64)) - Track 2, 5: Center Light Blue (
rgb(154, 234, 241)) → Outer Deep Blue (rgb(31, 110, 231))
- Side Note (전 모드 공통
- 5B Center Track (
D / L): 공용키 입력 지원 및 키 변경 시 임시 키캡 분할(D/L) 바인딩 지원
-
실시간 키뷰어 워터폴 노트 스트림 (60 FPS)
- 키를 누를 때마다 실시간으로 떨어지는 노트 스트림 워터폴 화면 제공
- 롱노트 누름 유지 확장 및 60 FPS
requestAnimationFrame물리 엔진 연동 - 단일 전고 화면 & z-index 백그라운드 레이어링: 메인 트랙 노트(
z-index: 5)와 사이드/트리거 노트(z-index: 1)의 백그라운드 오버랩 낙하로 최적의 가시성 제공
-
YouTube 네이티브 오버레이 북마클릿 (NEW)
- YouTube 시청 페이지(
youtube.com/watch)에서 북마클릿 클릭 한 번으로 재생 중인<video>위에 기어/워터폴 오버레이 즉시 실행 - Shadow DOM 기반 CSS/변수 격리로 유튜브 페이지와 충돌 제로
- 유튜브 최신 Content-Security-Policy(CSP) 및 Trusted Types 완벽 대응 (
fetch+eval+ Trusted Types 로더) - 4B/5B/6B/8B 모드 전환, 미세 속도 조절, 좌/중/우 배치 변경 및 닫기 지원
- 크로스 오리진 설정 동기화:
bridge.html+postMessage릴레이를 통해 독립 실행형 앱에서 설정한 커스텀 키/배치가 유튜브 오버레이와 실시간 자동 동기화
- YouTube 시청 페이지(
- ShadowMAX 웹사이트(
https://orphera.github.io/shadowmax)에 접속합니다. - 사이드바의 [⚡ ShadowMAX 북마클릿] 버튼을 브라우저 북마크(즐겨찾기) 바로 드래그합니다.
- 또는 새 북마크를 생성한 뒤 URL(주소) 란에 아래 코드를 입력합니다:
javascript:(async function(){var e=document.getElementById('shadowmax-overlay-root');if(e){if(window.__SHADOWMAX_CLEANUP__){window.__SHADOWMAX_CLEANUP__()}else{e.remove()}return}try{var p=(window.trustedTypes&&window.trustedTypes.createPolicy)?window.trustedTypes.createPolicy('shadowmax-loader',{createScript:function(s){return s}}):{createScript:function(s){return s}};var u=window.__SHADOWMAX_BASE_URL__||'https://orphera.github.io/shadowmax';var r=await fetch(u+'/js/overlay-entry.js?_='+Date.now());if(!r.ok)throw new Error('HTTP '+r.status);var c=await r.text();(0,eval)(p.createScript(c))}catch(err){console.error('[ShadowMAX]',err);alert('ShadowMAX 오버레이 로드 실패: '+(err&&err.message?err.message:err))}})();
- YouTube에서 원하는 리듬게임 패턴 영상을 재생한 뒤 북마크를 클릭하면 오버레이가 실행됩니다.
- 다시 북마클릿을 클릭하거나 우측 상단
✕버튼을 누르면 깨끗하게 닫힙니다.
shadowmax/
├── src/ # 웹 애플리케이션 정적 소스 코드 (배포 대상)
│ ├── index.html # 독립 실행형 SPA HTML5
│ ├── bridge.html # 크로스 오리진 localStorage 릴레이 브릿지
│ ├── style.css # Vanilla CSS3 디자인 시스템 & 키 기어 레이아웃
│ ├── overlay.html # 오버레이 전용 축소 마크업
│ ├── overlay.css # Shadow DOM 격리 오버레이 스타일
│ └── js/ # Vanilla JS (ES Modules)
│ ├── main.js # 독립 실행형 앱 진입점
│ ├── overlay-entry.js# 유튜브 북마클릿 네이티브 오버레이 진입점
│ ├── dom-root.js # Swappable DOM Root 헬퍼 ($, $$)
│ ├── player-adapter.js# 플레이어 어댑터 (IFrame / Native Video)
│ ├── player.js # 플레이어 제어 & 재생 속도
│ ├── input.js # 키보드 이벤트 감지 & 입력 가드
│ ├── keyboard.js # 키보드 이벤트 정규화
│ ├── ui.js # 기어 비주얼라이저, 키 변경 및 모드 전환
│ ├── storage.js # localStorage 설정 자동 저장
│ ├── viewer.js # 60 FPS 키뷰어 워터폴 노트 스트림 엔진
│ ├── replay.js # 연습 녹화 & 복기 리플레이
│ └── status.js # 플레이어 상태 표시
├── .github/
│ └── workflows/
│ └── deploy.yml # GitHub Actions 자동 Pages 배포 CI/CD
├── serve.py # Windows 개발 환경용 파이썬 로컬 서버 (CORS & MIME 지원)
├── AGENTS.md # 개발 원칙 및 프로젝트 가이드라인
├── README.md # 프로젝트 설명서
└── LICENSE # MIT License
Windows 환경에서 ES Modules (<script type="module">) 호스팅 시 발생할 수 있는 MIME Type 체크 문제를 해결한 파이썬 전용 개발 서버가 포함되어 있습니다.
python serve.py실행 후 브라우저에서 http://localhost:8000으로 접속하여 테스트할 수 있습니다.
ShadowMAX는 src/ 디렉터리만을 선택적으로 GitHub Pages에 자동 배포하는 CI/CD 워크플로우가 구성되어 있습니다.
- 저장소
Settings→Pages이동 Build and deployment->Source항목을 **GitHub Actions**로 선택main브랜치에git push시 자동으로 배포 완료
MIT License © 2026 ShadowMAX