HTML5 오버레이: 브라우저 그래픽이 방송에 도달하는 법
오늘날 거의 모든 현대적인 라이브 그래픽 시스템은 브라우저 엔진에서 그립니다. 이 페이지에서는 HTML5 오버레이가 무엇인지, 투명도가 어떻게 인코더까지 살아남는지, 그래픽이 어떻게 제어 패널과 동기화되는지, 그리고 이 기법의 한계가 어디인지 설명합니다.
HTML5 오버레이란
배경을 한 번도 칠하지 않는 평범한 웹 페이지입니다. 자막, 버그, 티커 같은 각 그래픽은 1920×1080 캔버스 위에 배치된 DOM 요소입니다. 뒤에 아무것도 그리지 않으므로 나머지 픽셀은 전부 투명합니다.
인코더는 그 페이지를 내장 브라우저로 열고(OBS는 Chromium Embedded Framework인 CEF를 씁니다), 알파 채널을 존중해 장면 위에 합성합니다. 인코더 입장에서는 움직이는 PNG 같은 투명 소스가 하나 더 있는 것뿐입니다.
송출 중에 그래픽이 바뀌는 원리
페이지는 한 번 열고 계속 열어 둡니다. 오퍼레이터가 TAKE를 누르면 명령이 WebSocket으로 페이지에 도달하고, 페이지는 클래스를 추가하거나 값을 갱신하며 CSS가 요소를 화면으로 움직입니다. 다시 불러오지도, 파일을 쓰지도 않습니다.
이것이 라이브 데이터를 가능하게 합니다. 페이지는 렌더된 파일이 아니라 실행 중인 애플리케이션이므로, 그래픽이 송출 중인 상태에서도 점수가 오르고 시계가 흐르고 이름이 바뀝니다.
중요한 성능 규칙
- transform과 opacity만 애니메이션하세요. GPU에서 합성됩니다. width·height·top·left 애니메이션은 매 프레임 레이아웃 계산을 강제합니다.
- box-shadow와 filter 애니메이션은 피하세요. 넓은 영역을 다시 그려 오버레이가 끊기는 가장 흔한 원인입니다.
- DOM을 작게 유지하세요. 수십 개 요소는 정상입니다. 수천 개는 프레임을 흘리는 방송입니다.
- 폴링하지 마세요. 100ms마다 다시 그리는 타이머는 변화 여부와 무관하게 같은 비용을 씁니다. 갱신은 소켓으로 밀어 넣으세요.
- 캔버스에 맞추세요. 인코더 해상도로 만들어 브라우저 소스가 절대 재스케일되지 않게 하세요. 재스케일은 모든 글자 모서리를 뭉갭니다.
HTML5로 부족한 지점
브라우저 소스는 인코더가 합성하므로 그래픽은 그 인코더 안에만 존재합니다. 스위처나 하드웨어 키어, 다른 시설에 공급해야 한다면 영상 신호가 필요합니다. SDI 키와 필, 또는 알파를 지원하는 NDI입니다. NDI 그래픽 →
또 하나의 한계는 프레임 정확도입니다. 브라우저는 그릴 수 있을 때 그립니다. 스트리밍에서는 보이지 않지만, 프레임을 세는 체인이라면 진짜 송출 서버가 필요합니다.
이렇게 만드는 이유
LowerThird Software의 출력 페이지는 의도적으로 지루한 HTML5입니다. 투명 배경, CSS 애니메이션, SignalR 기반 상태. 즉 인코더는 이미 쓰고 있는 하드웨어에서 합성하고, CSS를 아는 디자이너는 재빌드 없이 외형을 바꿀 수 있습니다. OBS에서 동작 확인 →
완성된 HTML5 그래픽 템플릿·패널·투명 출력을 설치 한 번으로. 템플릿을 처음부터 만들 필요가 없습니다.
얼리 액세스 신청