범용 웹 컴포넌트로 구현한 WebRTC 퍼블리시 서브

본 논문은 WebRTC 기반 실시간 미디어 애플리케이션의 구조적 문제점을 진단하고, 이를 해결하기 위한 새로운 웹 컴포넌트 “video‑io”를 제안한다. 서론에서는 전통적인 통신 시스템이 엔드포인트와 네트워크 서비스를 명확히 구분해 왔음에도 불구하고, 현대 웹 기반 커뮤니케이션은 SaaS 형태의 벤더 락인으로 인해 동일한 클라이언트가 여러 서비스에 접근하기 어렵다는 점을 지적한다. WebRTC 표준은 브라우저 간 P2P 미디어 전송을 가능하게 하지만, 시그널링·접근 제어는 여전히 각 서비스 제공자가 독자적으로 구현한다. 이로 인해 개발자는 서비스마다 별도의 애플리케이션을 작성해야 하는 비효율이 발생한다. 관련 연구 섹션에서는 기존의 Flash 기반 위젯, iframe 위젯, 프레임워크‑전용 컴포넌트 등이 대부분 단일 벤더에 종속되었으며, 서버‑사이드 게이트웨이·페더레이션 접근법은 복잡도와 확장성 문제를 안고 있음을 정리한다. 저자는 이러한 한계를 극복하기 위해 “앱 로직을 엔드포인트에 두고, 서비스‑특정 로직을 플러그인 형태로 분리”하는 설계 원칙을 제시한다. 배경 및 동기 부문에서는 WebRTC 애플리케이션에서 흔히 사용되는 세 가지 추상화 모델을 비교한다. (1) 호출(call) 모델은 일대일 연결에 초점을 맞추고, 시그널링만 다루며 미디어 제어는 제한적이다. (2) 회의실(conference) 모델은 다자간 연결을 지원하지만, 방 구조가 고정돼 유연성이 떨어진다. (3) 명명된 스트림(named‑stream) 모델은 스트림을 이름으로 식별하고, 퍼블리셔와 다수의 서브스크라이버가 자유롭게 연결·해제할 수 있는 구조다. 특히 Flash 시대에 널리 사용되던 NetStream 개념을 WebRTC에 적용하면, 양방향 통신을 내부적으로 최적화하면서도 외부에서는 단방향 스트림 인터페이스만 제공해 설계가 단순해진다. 핵심 구현 섹션에서는 video‑io 컴포넌트의 구조와 API를 상세히 설명한다. `` 커스텀 엘리먼트는 80여 개의 속성(예: publish, subscribe, controls, flip, poster, fit, customButtons 등)과 메서드(publish, subscribe, addTrack, removeTrack, play, stop 등), 이벤트(data, error, stateChange 등)를 제공한다. 이러한 속성은 HTML 속성으로 선언하거나 JavaScript 로 동적으로 제어할 수 있다. 컴포넌트 내부에서는 getUserMedia 로 로컬 미디어를 획득하고, RTCPeerConnection 을 이용해 P2P 연결을 설정한다. 시그널링 데이터는 “named‑stream” 컴포넌트와 교환되며, 이는 별도의 커넥터가 담당한다. 커넥터 인터페이스는 서비스‑별 구현체로, publish, subscribe, stop, addTrack, removeTrack, getStats 등 최소한의 메서드 집합을 정의한다. 각 구현체는 해당 서비스의 REST API, WebSocket, SDK 등을 래핑해 동일한 호출 방식으로 동작한다. 논문에서는 Janus, Jitsi, FreeSWITCH, Agora, Firebase, LiveKit 등 10개의 실제 서비스에 대한 커넥터를 구현하고, 각각의 인증·토큰 관리, 스트림 식별, 미디어 라우팅 방식을 비교한다. 이를 통해 video‑io가 서비스에 독립적인 프론트엔드 로직을 유지하면서도, 다양한 백엔드와 즉시 연동될 수 있음을 입증한다. 응용 시나리오 섹션에서는 두 개의 video‑io 인스턴스를 직접 연결해 P2P 호출을 구현하는 방법과, 명명된 스트림을 통해 다중 구독자를 지원하는 방송·회의 모델을 제시한다. P2P 방식은 외부 시그널링 채널만 필요하지만, 다자간 연결 시 각 피어마다 개별 연결을 관리해야 하는 단점이 있다. 반면 명명된 스트림 기반은 서버가 스트림 라우팅을 담당하므로, 퍼블리셔와 서브스크라이버가 자유롭게 입·출입하고, 확장성이 뛰어나다. 고급 시나리오에서는 비디오 이미지 처리(가상 배경, 확대/축소, 마그니파이어), 로컬 녹화·재생, PWA 및 브라우저 확장 프로그램과의 통합을 다룬다. 특히 가상 배경은 WebGL 기반 필터 파이프라인을 video‑io 내부에 삽입해 클라이언트 측에서 실시간으로 처리한다. 또한, 컴포넌트는 토큰 기반 인증을 통해 엔드투엔드 암호화를 지원하고, 재연결 로직과 품질 측정 API를 제공해 네트워크 변동에 강인하게 대응한다. 결론에서는 video‑io가 “앱 로직은 엔드포인트에, 서비스 로직은 플러그인 커넥터에” 배치함으로써 벤더 락인을 해소하고, 개발자가 한 번의 코드 작성으로 다수의 WebRTC 서비스에 배포할 수 있는 환경을 제공한다는 점을 강조한다. 향후 작업으로는 커넥터 표준화, 자동 테스트 프레임워크 구축, 그리고 AI 기반 실시간 비디오 분석 기능을 추가하는 방안을 제시한다.