백엔드 없이 TypeScript 1,200줄로 구현한 실시간 유튜브 동기화 확장 프로그램

Context

기존 Watch-Together 서비스는 별도 웹사이트 접속과 룸 코드 공유라는 번거로운 과정 필요. 유튜브 플랫폼 내부에서 즉각적인 동기화가 가능한 심리스한 사용자 경험 부재. 브라우저 컨텍스트 전환 없는 실시간 제어 솔루션 필요.

Technical Solution

• Supabase Realtime Broadcast 채널을 활용한 서버리스 Pub/Sub 아키텍처 설계
• chrome.identity.launchWebAuthFlow와 skipBrowserRedirect 옵션을 이용한 확장 프로그램 전용 OAuth 인증 흐름 구현
• chrome.storage.local을 통한 세션 유지로 팝업 DOM 소멸 시에도 로그인 상태 보존
• 두 사용자의 이메일 주소를 정렬 후 해싱하여 고유 룸 코드를 생성하는 결정론적 매칭 알고리즘 적용
• machine_id 기반의 필터링으로 본인이 발행한 이벤트가 다시 수신되는 루프 방지
• 상태 변경 플래그와 500ms 타임아웃 기반의 Echo Suppression 로직으로 무한 이벤트 루프 차단

Impact

• TypeScript 코드 1,200줄 미만으로 핵심 기능 구현

Key Takeaway

인프라 구축보다 사용자 인터랙션 정의를 우선하는 설계 방식의 중요성. 실시간 동기화 시스템의 핵심 난제는 단순 전송이 아닌 원격 실행으로 인한 이벤트 피드백 루프(Echo) 제어에 있음.