OBS 자막바: 브라우저 소스 하나로 모든 그래픽

OBS Studio는 라이브 HTML5 그래픽을 기본 기능으로 표시할 수 있습니다. 플러그인도, 캡처보드도, 두 번째 PC도 필요 없죠. 여기서는 투명 브라우저 소스 하나로 OBS 자막바, 스코어 버그, 티커를 띄우는 정확한 절차와 자주 겪는 문제의 해결법을 정리합니다.

왜 미디어 소스가 아니라 브라우저 소스인가

미디어 소스는 파일을 재생합니다. 브라우저 소스는 살아 있는 웹 페이지를 실행해 완전한 알파 투명으로 장면 위에 합성하고 실시간으로 갱신합니다. 라이브 그래픽에서는 이 차이가 전부입니다. 페이지가 송출 중에도 스스로 내용을 바꿀 수 있으므로 점수나 이름이 OBS를 건드리지 않고 갱신됩니다.

또한 소스 하나가 모든 그래픽을 담습니다. 자막, 스코어 버그, 티커가 같은 투명 페이지의 요소이므로 서로 어긋날 일이 없고, 소스를 열두 개씩 쌓을 필요도 없습니다.

소스 추가 — 단계별

LowerThird Software를 실행합니다. 제어 패널과 출력 페이지를 내 컴퓨터에서 제공합니다.
OBS에서 카메라나 게임 캡처가 이미 있는 장면을 선택합니다. 소스 아래 +를 누르고 브라우저를 고릅니다.
이름을 그래픽으로 하고 확인을 누릅니다.
URL에 http://localhost:5275/output을 입력합니다.
너비 1920, 높이 1080 — 캔버스 해상도와 동일하게. 장면에서 크기를 조절하지 마세요.
「보이지 않을 때 소스 종료」는 체크하지 말고, 「장면이 활성화될 때 브라우저 새로고침」은 장면 전환마다 그래픽을 초기화하고 싶을 때만 켜세요.
확인을 누르고 소스를 목록 맨 위로 끌어 카메라보다 앞에 오게 합니다.

투명: 설정할 것이 없습니다

투명 설정을 찾는 분이 많지만 그런 항목은 없고, 필요하지도 않습니다. OBS 브라우저 소스는 이미 페이지의 알파 채널을 존중합니다. 페이지가 배경을 칠하지 않으면 OBS는 그려진 픽셀만 합성합니다.

검거나 흰 사각형이 보인다면 OBS가 아니라 페이지가 배경을 칠하고 있는 것입니다. 소스 창의 사용자 지정 CSS로 외부 페이지는 고칠 수 있지만(body { background: transparent !important; }), 방송용으로 만든 페이지라면 애초에 투명해야 합니다.

크기, 스케일링, 세이프 영역

소스는 항상 캔버스와 같은 해상도(보통 1920×1080)로 만들고, 위치 조정은 OBS에서 크기를 바꾸는 대신 페이지 안에서 하세요. 브라우저 소스를 스케일하면 글자가 재샘플링되어 모든 모서리가 뭉개집니다. 방송 자막이 흐릿해 보이는 가장 큰 원인입니다.

1280×720으로 송출하더라도 소스는 1920×1080으로 두고, 마지막에 OBS가 캔버스 전체를 한 번만 축소하게 하세요. 깔끔한 한 번의 축소가 두 단계 스케일링보다 낫습니다.

다섯 가지 문제와 해결

소스가 비어 있습니다. 앱이 실행 중이 아니거나 포트가 다릅니다. 먼저 일반 브라우저에서 주소를 열어 보세요. 거기서도 비어 있다면 OBS 문제가 아닙니다.
그래픽이 갱신되지 않습니다. 페이지가 캐시되었거나 소켓이 끊겼습니다. 소스를 우클릭해 상호작용하거나 새로고침하세요. WebSocket 기반 페이지라면 스스로 재연결해야 합니다.
자막이 흐릿합니다. 소스가 스케일되고 있습니다. 변환을 초기화하고(소스 선택 후 Ctrl+R) 크기는 소스 속성에서 지정하세요.
전체가 끊깁니다. OBS의 하드웨어 가속이 꺼져 있거나 무거운 애니메이션이 돌고 있습니다. width·height·그림자 대신 GPU가 처리하는 transform과 opacity를 쓰세요.
장면을 바꾸면 오버레이가 사라집니다. 「보이지 않을 때 소스 종료」가 켜져 있습니다. 끄거나, 같은 소스를 각 장면에 복사본이 아니라 참조로 추가하세요.

방송 중 운용

패널은 보조 모니터나 책상 위 태블릿에 띄워 두세요. 웹 페이지이므로 같은 네트워크에서 브라우저가 도는 기기라면 무엇이든 조작할 수 있습니다. 현재 게스트가 화면에 있는 동안 다음 게스트의 이름을 입력해 두고, 컷이 바뀌면 TAKE를 누르세요.

명령이 WebSocket으로 전달되므로 폴링 지연도 새로고침도 없습니다. 클릭하면 같은 프레임에서 애니메이션이 시작됩니다.

내 장면에서 바로 시험해 보시겠어요? 얼리 액세스 빌드를 받아 브라우저 소스 하나만 추가하면 5분쯤 뒤 이름 자막을 송출할 수 있습니다.

얼리 액세스 신청

자주 묻는 질문

OBS는 투명 브라우저 소스를 지원하나요?

네. 브라우저 소스는 페이지를 알파 채널과 함께 합성하므로, 페이지가 칠하지 않은 곳에는 영상이 그대로 보입니다. 별도 설정은 필요 없습니다.

어떤 주소를 쓰나요?

로컬 출력 페이지입니다. LowerThird Software에서는 http://localhost:5275/output이고, 내 컴퓨터에서 제공되므로 인터넷이 끊겨도 동작합니다.

브라우저 소스가 방송을 무겁게 하나요?

잘 만든 오버레이의 부담은 매우 작습니다. GPU에서 움직이는 DOM 요소 몇 개일 뿐입니다. OBS 하드웨어 가속을 켜두고, 그림자를 애니메이션하거나 무거운 스크립트를 반복 실행하는 페이지는 피하세요.

같은 오버레이를 vMix나 Streamlabs에서도 쓸 수 있나요?

네. HTML5 브라우저 입력이 있는 인코더라면 같은 주소를 받습니다. vMix, Streamlabs, XSplit, Restream Studio 모두 동일합니다.