OBS 브라우저 소스 200% 활용하기 - 위젯부터 인터랙티브 요소까지
OBS 브라우저 소스는 단순히 웹페이지를 보여주는 기능이 아닙니다. 알림, 채팅, 위젯은 물론 커스텀 HTML/CSS로 나만의 방송 요소를 만드는 핵심 기능입니다.
브라우저 소스란 무엇인가
OBS의 브라우저 소스(Browser Source)는 OBS 안에 작은 웹 브라우저를 내장하는 기능입니다. 크롬 기반의 CEF(Chromium Embedded Framework)를 사용하며, URL을 입력하면 해당 웹페이지가 OBS 캔버스 위에 렌더링됩니다. 웹페이지의 배경이 투명하면 게임 화면 위에 자연스럽게 오버레이됩니다.
왜 이게 그렇게 중요한가 하면, 현대 방송의 시각적 요소 대부분이 브라우저 소스를 통해 구현되기 때문입니다. 팔로우/후원 알림 애니메이션, 실시간 채팅 오버레이, 최근 팔로워/구독자 목록, 배경 음악 시각화, 카운트다운 타이머, 시청자 투표 결과 그래프 - 이것들 전부 브라우저 소스입니다.
StreamElements, Streamlabs 같은 서비스가 "오버레이 URL"을 제공하면, 그 URL을 OBS 브라우저 소스에 넣는 방식으로 작동합니다. 하지만 외부 서비스의 위젯만 쓰는 것에 그치지 않고, 직접 HTML과 CSS를 작성해서 완전히 맞춤화된 방송 요소를 만들 수도 있습니다.
필수 위젯 브라우저 소스 모음
대부분의 방송에서 사용하는 핵심 위젯들과 설정 방법입니다.
알림 위젯 (Alert Box)
팔로우, 구독, 후원 등 이벤트 발생 시 화면에 애니메이션과 사운드를 표시합니다.
- StreamElements 또는 Streamlabs에서 알림 위젯 URL을 복사합니다.
- OBS에서 소스 추가 → '브라우저'를 선택합니다.
- URL에 복사한 주소를 붙여넣습니다.
- 너비: 800, 높이: 600 정도로 설정합니다. 알림 애니메이션의 크기에 맞춰 조정하세요.
- 캔버스에서 알림이 표시될 위치로 이동합니다. 보통 화면 중앙 또는 상단에 배치합니다.
이벤트 리스트 (Event List)
최근 팔로우, 구독, 후원 등을 리스트 형태로 표시합니다.
- 서비스 대시보드에서 이벤트 리스트 위젯 URL을 복사합니다.
- 브라우저 소스로 추가합니다. 너비: 350, 높이: 200 정도.
- 화면 하단이나 측면에 배치합니다.
목표 위젯 (Goal Widget)
팔로워 목표, 구독 목표 등을 프로그레스 바로 표시합니다. "팔로워 1,000명 달성 시 10시간 마라톤 방송" 같은 목표를 시각화하면 시청자의 참여 동기를 높입니다.
시계/타이머
방송 경과 시간, 카운트다운 타이머 등을 표시합니다. timeanddate.com이나 countdowntimer.guru 같은 사이트의 임베드 URL을 브라우저 소스로 추가하면 됩니다.
HTML/CSS로 나만의 요소 만들기
브라우저 소스는 URL뿐 아니라 직접 작성한 HTML/CSS 코드도 렌더링할 수 있습니다. 이 기능으로 외부 서비스에 의존하지 않는 완전히 맞춤화된 요소를 만들 수 있습니다.
로컬 HTML 파일 방식
- 텍스트 에디터(메모장, VS Code 등)에서 HTML 파일을 작성합니다.
- 파일을 저장합니다(예: C:\방송소스\my-widget.html).
- OBS 브라우저 소스에서 'URL' 대신 '로컬 파일' 옵션을 체크합니다.
- 저장한 HTML 파일을 선택합니다.
인라인 CSS 방식
간단한 요소는 브라우저 소스의 'Custom CSS' 필드에 직접 작성할 수도 있습니다.
실용 예제 1: 움직이는 하단 자막 (티커)
뉴스 채널처럼 화면 하단에 텍스트가 흘러가는 자막을 만들어봅시다.
HTML 코드 예시:
<div class="ticker-wrap"><div class="ticker"><span>오늘의 방송 일정: 20시 게임 방송 | 22시 시청자 참여 이벤트 | 팔로우 부탁드립니다!</span></div></div>
CSS로 ticker 클래스에 translateX 애니메이션을 적용하면 텍스트가 오른쪽에서 왼쪽으로 흘러갑니다. 배경색, 글꼴, 속도를 자유롭게 조정할 수 있습니다.
실용 예제 2: 소셜 미디어 배너
방송 시작/종료 화면에 소셜 미디어 계정을 안내하는 배너를 만듭니다. HTML로 아이콘과 텍스트를 배치하고, CSS로 스타일링합니다. Font Awesome 아이콘 CDN을 로드하면 트위터, 인스타그램 등의 아이콘을 쉽게 사용할 수 있습니다.
실용 예제 3: 실시간 시계
JavaScript로 현재 시간을 표시하는 시계를 만들 수 있습니다. setInterval 함수로 매 초 시간을 갱신하고, CSS로 디자인을 꾸밉니다. 외부 서비스 없이 정확한 시간을 화면에 표시할 수 있습니다.
브라우저 소스 성능 최적화
브라우저 소스는 편리하지만, 무분별하게 추가하면 OBS 성능에 영향을 줍니다. 각 브라우저 소스가 독립된 크로미움 인스턴스로 작동하기 때문에 메모리와 CPU를 소비합니다.
불필요한 브라우저 소스 정리
사용하지 않는 장면의 브라우저 소스가 계속 리소스를 잡아먹고 있지 않은지 확인하세요. 브라우저 소스 속성에서 '보이지 않을 때 소스 종료'를 체크하면 해당 소스가 화면에 표시되지 않는 장면에서는 렌더링을 중단합니다. 이 옵션 하나만으로도 메모리 사용량을 크게 줄일 수 있습니다.
FPS 제한
브라우저 소스의 FPS를 방송 프레임레이트(보통 30 또는 60)에 맞추세요. 기본값이 60인데, 알림 위젯처럼 가끔만 활성화되는 요소는 30fps로 낮춰도 충분합니다.
해상도 최적화
브라우저 소스의 너비/높이를 필요 이상으로 크게 설정하지 마세요. 1920x1080 전체 캔버스 크기의 브라우저 소스를 여러 개 올리면 GPU 렌더링 부하가 급증합니다. 각 위젯이 실제로 차지하는 영역에 맞춰 크기를 설정하세요.
캐시 초기화
브라우저 소스가 오래되면 캐시된 데이터 때문에 비정상 동작하거나 메모리 누수가 발생할 수 있습니다. OBS를 재시작하면 브라우저 소스의 캐시가 초기화됩니다. 장시간 방송 후 브라우저 소스가 느려지면 OBS를 재시작하는 것이 가장 확실한 해결책입니다.
인터랙티브 브라우저 소스 활용 예시
브라우저 소스의 진정한 위력은 외부 서비스나 자체 서버와 연동할 때 발휘됩니다.
채널 포인트 연동 이펙트
시청자가 채널 포인트를 사용하면 화면에 특정 효과가 나타나도록 설정합니다. StreamElements의 커스텀 위젯 기능으로 "채널 포인트 사용 시 화면에 이미지 팝업" 같은 인터랙션을 HTML/CSS/JS로 구현할 수 있습니다. 눈이 내리는 효과, 화면이 흔들리는 효과, 특정 이미지가 날아다니는 효과 등.
실시간 데이터 대시보드
API를 호출해서 실시간 데이터를 화면에 표시합니다. 게임 전적 사이트 API로 현재 랭크를 보여주거나, 날씨 API로 현재 날씨를 표시하거나, 암호화폐 가격을 실시간으로 띄우는 등의 활용이 가능합니다. JavaScript의 fetch 함수로 주기적으로 API를 호출하고 DOM을 업데이트하는 방식입니다.
Crowd Control과 같은 게임 인터랙션
시청자 행동에 따라 게임 화면에 영향을 미치는 인터랙션 도구도 브라우저 소스를 통해 시각적 피드백을 제공합니다. "시청자가 후원하면 화면에 폭죽이 터지는 효과", "50명이 동시에 이모티콘을 사용하면 이모티콘 비가 내리는 효과" 등을 커스텀 JavaScript로 구현할 수 있습니다.
WebSocket 실시간 연동
고급 활용으로 WebSocket을 통해 외부 서버와 실시간 양방향 통신이 가능합니다. 자체 서버에서 데이터를 보내면 브라우저 소스가 즉시 반응하는 구조입니다. 독자적인 알림 시스템, 실시간 순위표, 시청자 참여형 미니게임 등을 구현할 때 활용됩니다.
브라우저 소스는 웹 기술(HTML, CSS, JavaScript)을 알면 알수록 활용 범위가 넓어지는 도구입니다. 처음에는 서비스가 제공하는 URL을 넣는 것부터 시작하고, 점차 커스텀 HTML로 자신만의 요소를 만들어보세요.
