혹시 Instagram Web에서 영상을 보다가 딱 5초만 되감고 싶었던 적이 있나요? 그건 불가능합니다.
Instagram 같은 플랫폼들은 기본적인 비디오 컨트롤을 숨기고 <video> 요소를 눈에 보이지 않는 오버레이로 덮어둡니다. 한 번 클릭하면 음소거되고, 다시 클릭하면 일시 정지되거나 게시물 자체가 열립니다. 타임라인을 스크러빙하거나 재생 속도를 바꾸고 싶다고요? 운이 좋기를 바랍니다.
저는 이런 제한적인 웹 플레이어들과 싸우는 것에 지쳐서 **OnePlay - Video Control**를 만들었습니다. 이것은 웹상의 모든 HTML5 비디오에 깔끔하고 데스크톱 수준의 컨트롤을 제공하는 경량 Chrome 확장 프로그램(Manifest V3 + TypeScript)입니다.
OnePlay Demo
이것이 무엇을 하는지, 웹사이트가 업데이트되어도 어떻게 작동하게 유지했는지, 그리고 AI를 사용하여 구축한 저의 실제 작업 흐름에 대해 간략히 살펴보겠습니다.
OnePlay의 기능
-
오버레이 방지 컨트롤: 최대 z-index에서 위치하며 포인터 처리를 격리하여, 투명한 탭-음소거/일시정지 차단기들이 사용자의 클릭을 가로채는 것을 막습니다.
-
완벽한 재생 및 테마: 탐색(Seek), 볼륨, 속도(0.5x ~ 3x), 사용자 지정 단축키(Space, J/L, Arrows), 전체 화면 또는
-
최상위 Shadow DOM (Top-Level Shadow DOM): 컨트롤러가 document.documentElement에 직접 연결된 격리된 Shadow DOM 내부에 마운트됩니다.
-
뷰포트 추적 (Viewport Tracking): requestAnimationFrame을 통해 대상 비디오의 경계 상자(bounding box)를 추적하며 그 위에 떠 있습니다.
사이트 레이아웃 트리와 완전히 분리되어 있기 때문에, 플랫폼이 매주 프런트엔드를 재설계하더라도 OnePlay는 계속 작동합니다.
저의 현실적인 AI 워크플로우 (인간 + 에이전트)
저는 이 프로젝트의 대부분을 Antigravity와 Gemini Flash 3.8 조합으로 구축했습니다. 솔직히 말해서, 브라우저 확장 프로그램의 경우 Flash처럼 빠른 모델만으로도 충분했습니다. 느리고 무거운 모델은 필요하지 않았습니다.
하지만 AI 프롬프트에 100% 의존하는 것은 속도를 늦출 수 있습니다. 제가 균형을 맞춘 방법은 다음과 같습니다:
- CSS 수동 수정: 버튼 정렬이나 테마 스타일이 약간 어긋나 보일 때마다, 저는 그것을 설명하기 위해 AI에게 5개의 프롬프트를 낭비하지 않았습니다. CSS를 직접 조정하는 것이 훨씬 빨랐습니다.
- DOM 자체 검사: 소셜 미디어 사이트는 혼란스러운 DOM 구조를 가지고 있습니다. 사이트가 어떻게 작동하는지 추측하도록 AI에게 요청하는 대신, 저는 페이지를 직접 검사하여 특이점을 파악하고 에이전트에게 로직을 어떻게 개선할지에 대한 지침을 제공했습니다.
그리고 업데이트 확인의 경우, 모든 것을 하드코딩하고 크롬 웹 스토어 심사를 기다리는 대신, Cloudflare Pages에 간단한 정적 version.json 파일을 호스팅했습니다.
다음 계획은 무엇인가요? (여러분의 피드백을 환영합니다!)
OnePlay는 추적이 전혀 없는 100% 로컬 환경에서 실행됩니다. 만약 사람들이 유용하다고 느낀다면, 저는 다음과 같은 기능을 추가하기 위해 모듈식 플러그인 시스템을 구축할 계획입니다:
- 🔊 볼륨 부스터 (Volume Booster): (100%를 넘어서는 기능).
- 📝 자막 및 AI 채팅: 자막 API에 연결하고, 로컬 자막 생성 및 비디오에 대한 질문을 하는 보조 데스크톱 앱(Desktop App).
- 🖥️ 중앙 미디어 허브 (Central Media Hub): 여러 탭에서 재생되는 모든 비디오를 제어하는 실시간 미리보기가 있는 통합 팝업.
직접 사용해 보시고 어떤지 알려주세요. 아니면 다음에 보고 싶은 기능이 있다면 말씀해주세요!
👉 Chrome 웹 스토어에서 설치하기
👉 GitHub의 소스 코드 보기 (별점 ⭐은 환영합니다!)
