OBS 브라우저 소스 연결 방법: URL 추가부터 소리 설정까지

방송용 위젯이나 오버레이를 OBS Studio에 연결할 때 가장 많이 사용하는 기능이 브라우저 소스예요. 서비스에서 제공하는 URL을 브라우저 소스에 넣으면 후원 알림, 채팅창, 목표 위젯처럼 웹으로 만들어진 화면을 방송 위에 표시할 수 있어요.

브라우저 소스를 처음 연결할 때는 URL을 어디에 넣어야 하는지, 너비와 높이는 얼마로 설정해야 하는지, 소리가 시청자에게도 나가는지 헷갈리기 쉬워요. 화면이 보이지 않거나 소리가 들리지 않을 때도 URL 문제인지 OBS 오디오 설정 문제인지 구분해야 해요.

이 글에서는 OBS에 브라우저 소스를 추가하고 URL과 화면 크기, 오디오 모니터링을 설정하는 전체 과정을 정리해요. 실제 연결 예시는 DORODORA의 메시지 후원 알림을 사용하지만, 같은 방식으로 URL을 제공하는 채팅창이나 방송 위젯에도 적용할 수 있어요. 마지막에는 브라우저 소스 화면이나 소리가 나오지 않을 때 확인할 항목도 함께 살펴볼게요.

DORODORA 스트림 콘솔 열기

먼저 준비할 것

설정을 시작하기 전에 아래 세 가지를 준비해 주세요.

• DORODORA 계정과 후원 페이지
• 최신 버전의 OBS Studio
• 알림 테스트에 사용할 장면

실제 방송 장면을 바로 수정해도 되지만, 처음 연결할 때는 빈 테스트 장면을 하나 만드는 편이 안전해요. 알림의 크기와 위치, TTS 음량을 확인한 다음 완성된 브라우저 소스를 방송 장면에 복사하면 기존 화면을 건드리지 않고 설정할 수 있어요.

설정 과정 한눈에 보기

전체 과정은 아래와 같아요.

1. DORODORA 스트림 콘솔에서 메시지와 TTS를 활성화해요.
2. 브라우저 소스 (URL)을 복사해요.
3. OBS 장면에 브라우저 소스를 추가해요.
4. URL과 화면 크기를 입력해요.
5. 알림 테스트를 보내 화면과 소리를 확인해요.
6. 필요하면 오디오 모니터링과 음량을 조정해요.

한 번 연결한 뒤에는 매번 URL을 다시 붙여 넣을 필요가 없어요. OBS에 저장된 브라우저 소스를 계속 사용하면 됩니다.

1. DORODORA에서 메시지 알림 URL 복사하기

먼저 DORODORA 스트림 콘솔에 접속해요. 오른쪽 설정 영역에서 메시지 (TTS)를 펼치면 메시지 후원 알림에 필요한 항목이 나타나요.

여기서 아래 항목을 확인해 주세요.

• 활성화: 메시지 후원 알림을 사용할 때 켜요.
• TTS 활성화: 후원 메시지를 음성으로 읽을 때 켜요.
• 커스텀 보이스 활성화: 후원자가 커스텀 보이스를 선택할 수 있게 할 때 켜요.

설정을 바꿨다면 아래쪽의 저장을 눌러야 적용돼요.

같은 영역에 있는 브라우저 소스 (URL) 입력란을 누르면 URL이 복사돼요. 이 주소는 후원자에게 공유하는 후원 페이지 주소와 달라요. 시청자가 여는 링크가 아니라 OBS가 알림을 수신하기 위해 사용하는 전용 위젯 주소예요.

브라우저 소스 URL은 방송 화면, 영상, 게시글에 그대로 노출하지 마세요. 캡처 이미지를 만들 때도 URL 전체를 흐리거나 가려야 해요.

2. OBS에 브라우저 소스 추가하기

OBS Studio를 열고 후원 알림을 표시할 장면을 선택해요. 화면 아래쪽의 소스 목록에서 + 버튼을 누른 다음 브라우저를 선택해요. OBS의 표시 언어에 따라 Browser 또는 Browser Source로 보일 수도 있어요.

OBS Studio 소스 목록 아래의 + 버튼을 눌러 새 소스를 추가해요. 이미지 출처: OBS Sources Guide

소스 목록에서 Browser를 선택해요. 한국어 OBS에서는 브라우저로 표시될 수 있어요. 이미지 출처: OBS Sources Guide

새 소스 이름은 나중에 알아보기 쉽게 정해 주세요. 예를 들어 아래처럼 서비스와 용도를 함께 적어두면 장면에 소스가 많아져도 헷갈리지 않아요.

DORODORA 후원 알림

이미 다른 장면에 같은 브라우저 소스를 만들어 두었다면 기존 추가로 재사용할 수 있어요. 같은 위젯을 여러 장면에서 보여주려는 경우에는 새 소스를 반복해서 만들기보다 기존 소스를 사용하는 편이 관리하기 쉬워요.

3. 브라우저 소스 URL과 크기 설정하기

브라우저 소스 속성 창이 열리면 URL에 앞에서 복사한 DORODORA 브라우저 소스 주소를 붙여 넣어요. 로컬 파일은 사용하지 않으므로 꺼진 상태로 두면 됩니다.

화면 크기는 방송의 기본 캔버스에 맞추는 것이 가장 단순해요. 1080p 방송이라면 아래처럼 설정할 수 있어요.

너비: 1920
높이: 1080

720p 방송이라면 1280 × 720으로 설정해도 돼요. 정확한 값은 OBS의 설정 → 비디오 → 기본(캔버스) 해상도에서 확인할 수 있어요.

브라우저 소스 속성에서 URL과 너비, 높이를 입력해요. 이미지 출처: OBS Browser Source

나머지 항목은 아래 기준으로 시작하면 무난해요.

항목	권장 시작값	이유
사용자 지정 프레임레이트	끄기	기본 30FPS로 먼저 확인해도 충분해요.
사용자 지정 CSS	기본값 유지	투명 배경과 여백 제거 설정을 유지할 수 있어요.
소스가 보이지 않을 때 종료	끄기	장면을 바꿀 때 위젯 연결이 불필요하게 끊기는 것을 피할 수 있어요.
장면이 활성화되면 새로고침	끄기	장면 전환 때 진행 중인 알림이 다시 로드되는 것을 피할 수 있어요.

OBS 공식 문서에 따르면 소스가 보이지 않을 때 종료를 켜면 소스를 숨기거나 다른 장면으로 이동했을 때 브라우저 페이지가 언로드돼요. 장면이 활성화되면 새로고침은 해당 장면으로 돌아올 때 페이지를 다시 불러오는 설정이에요. 일반적인 실시간 후원 알림은 연결을 계속 유지하는 편이 자연스러우므로 두 항목 모두 끈 상태에서 시작하는 것을 권장해요.

OBS를 통해 오디오 제어 또는 이와 비슷한 항목이 보인다면 켜는 편이 좋아요. 브라우저 소스의 TTS가 오디오 믹서에 별도 항목으로 나타나기 때문에 음소거와 음량, 모니터링을 다른 소리와 분리해서 관리할 수 있어요.

설정을 마쳤다면 확인을 눌러 브라우저 소스를 추가해요.

4. 알림 위치와 크기 맞추기

브라우저 소스를 선택하면 OBS 미리보기 화면에 빨간색 테두리가 나타나요. 이 테두리를 드래그해서 크기와 위치를 조절할 수 있어요.

브라우저 소스를 캔버스 전체 크기로 입력했다면 먼저 화면에 정확히 맞춰 주세요.

• Windows: 소스를 우클릭한 뒤 변환 → 화면에 맞추기
• macOS: 소스를 우클릭한 뒤 변환 → 화면에 맞추기
• 단축키: Windows는 Ctrl+F, macOS는 Cmd+F

알림이 나타나는 위치를 위젯 안에서 이미 정해 두었다면 브라우저 소스 자체를 잘라내거나 작게 만들 필요는 없어요. 전체 화면 크기를 유지하면 해상도가 바뀌거나 알림 애니메이션이 화면 밖으로 움직일 때 잘리는 문제를 줄일 수 있어요.

브라우저 소스는 게임 화면이나 배경보다 소스 목록의 위쪽에 있어야 해요. OBS에서는 목록 위에 있는 소스가 미리보기에서도 앞에 표시되기 때문에, 후원 알림 소스가 게임 캡처 아래에 있으면 알림이 재생돼도 화면에 가려질 수 있어요.

5. 테스트 알림 보내기

실제 후원을 기다리면서 확인할 필요는 없어요. DORODORA 스트림 콘솔의 메시지 (TTS) 설정에서 알림 테스트를 누르면 테스트 메시지를 위젯으로 보낼 수 있어요.

테스트 버튼을 누르기 전에 아래 상태를 확인해 주세요.

• OBS가 실행 중인가요?
• 브라우저 소스의 눈 아이콘이 켜져 있나요?
• DORODORA 브라우저 소스 URL을 정확히 붙여 넣었나요?
• DORODORA에서 활성화와 TTS 활성화를 저장했나요?

준비됐다면 알림 테스트를 눌러요. OBS 미리보기에 후원 알림이 나타나고 TTS가 재생되면 기본 연결이 끝난 거예요.

6. TTS 음량과 오디오 모니터링 설정하기

알림은 보이는데 TTS가 들리지 않는다면 먼저 OBS의 오디오 믹서를 확인해요. 테스트 알림을 보낼 때 DORODORA 브라우저 소스의 음량 막대가 움직이는지 살펴보세요.

음량 막대가 움직이는 경우

OBS까지 소리는 들어오고 있다는 뜻이에요. 아래 항목을 확인하면 됩니다.

1. 오디오 믹서에서 해당 소스가 음소거되어 있지 않은지 확인해요.
2. 음량 슬라이더가 너무 낮게 내려가 있지 않은지 확인해요.
3. 고급 오디오 속성에서 방송에 내보낼 오디오 트랙이 선택됐는지 확인해요.
4. 스트리머도 직접 듣고 싶다면 오디오 모니터링을 모니터링과 출력으로 바꿔요.

모니터링 끄기 상태에서도 시청자에게는 소리가 출력될 수 있어요. 오디오 모니터링은 방송자가 자신의 헤드폰이나 스피커로 그 소리를 함께 들을지 정하는 설정이기 때문이에요. 따라서 "제 귀에는 안 들린다"는 이유만으로 방송에도 소리가 없다고 판단하면 안 돼요.

반대로 모니터링만(출력 음소거)을 선택하면 방송 출력에서는 빠질 수 있으므로, 스트리머와 시청자가 모두 들어야 하는 후원 TTS에는 일반적으로 모니터링과 출력을 사용해요.

오디오 믹서에서 음량 막대, 슬라이더, 음소거와 모니터링 상태를 확인해요. 이미지 출처: OBS Audio Mixer Guide

음량 막대가 움직이지 않는 경우

브라우저 소스에서 오디오가 OBS로 들어오지 않는 상태일 수 있어요.

1. 브라우저 소스 속성을 다시 열어요.
2. OBS를 통해 오디오 제어가 있다면 켜요.
3. URL이 메시지 알림용 브라우저 소스 URL인지 확인해요.
4. 속성 창의 현재 페이지 캐시 새로고침을 눌러요.
5. 다시 DORODORA에서 알림 테스트를 보내요.

브라우저 소스를 새로고침하면 재생 중이던 알림은 중단될 수 있어요. 실제 방송 중보다는 테스트할 때 사용하는 편이 안전해요.

후원 알림이 보이지 않을 때 확인할 것

브라우저 소스가 다른 화면 뒤에 가려져 있어요

OBS의 소스 목록에서 DORODORA 후원 알림을 게임 캡처, 이미지, 색상 소스보다 위로 올려 주세요. 눈 아이콘이 꺼져 있지 않은지도 확인해야 해요.

URL을 잘못 붙여 넣었어요

후원 페이지 URL과 브라우저 소스 URL은 용도가 달라요. OBS에는 DORODORA 콘솔의 메시지 (TTS) 안에 표시되는 브라우저 소스 (URL)을 넣어야 해요.

주소 앞뒤에 공백이 들어갔거나 일부만 복사되지 않았는지도 확인해 주세요. 직접 드래그해서 복사하기보다 URL 입력란을 눌러 복사하는 편이 안전해요.

설정을 저장하지 않았어요

활성화나 TTS 활성화를 켠 뒤에는 반드시 저장을 눌러야 해요. 스위치만 바꾸고 다른 화면으로 이동했다면 이전 설정이 유지될 수 있어요.

테스트는 전송됐지만 화면 밖에서 재생돼요

브라우저 소스를 우클릭하고 변환 → 변환 초기화를 선택한 다음 변환 → 화면에 맞추기를 적용해 보세요. 브라우저 소스의 너비와 높이가 OBS 기본 캔버스와 같은지도 확인해야 해요.

장면을 바꾼 뒤 알림이 나오지 않아요

브라우저 소스 속성에서 소스가 보이지 않을 때 종료가 켜져 있다면 꺼 보세요. 이 설정이 켜져 있으면 다른 장면으로 이동하는 순간 브라우저 페이지가 종료되고, 다시 돌아올 때 연결을 새로 시작하게 돼요.

여러 장면에서 같은 알림을 사용한다면 각 장면마다 새 위젯을 만들기보다 기존 추가로 같은 브라우저 소스를 재사용하는 방법도 있어요.

방송 전에 꼭 녹화로 확인하세요

OBS 미리보기에서 알림이 보이고 내 헤드폰에서 TTS가 들리더라도 실제 방송 출력은 다를 수 있어요. 라이브를 시작하기 전에 1~2분 정도 테스트 녹화를 하고 결과 파일을 직접 재생해 보세요.

테스트 녹화에서는 아래 항목을 확인하면 돼요.

• 후원 알림이 게임 화면이나 웹캠에 가려지지 않는가
• 후원자 이름과 메시지를 읽을 수 있는가
• TTS가 마이크보다 지나치게 크거나 작지 않은가
• 알림음과 TTS가 게임 소리에 묻히지 않는가
• TTS의 처음이나 끝이 잘리지 않는가
• 장면을 바꾼 뒤에도 테스트 알림이 정상적으로 재생되는가

OBS 공식 오디오 가이드도 라이브 전에 평소와 같은 조건으로 녹화한 뒤 결과를 다시 들어볼 것을 권장해요. 오디오 믹서의 막대만 보는 것보다 실제 녹화 파일을 확인하는 것이 가장 확실해요.

자주 묻는 질문

브라우저 소스 URL을 시청자에게 보내도 되나요?

아니요. 시청자에게 공유할 주소는 DORODORA 후원 페이지이고, 브라우저 소스 URL은 OBS에만 입력하는 위젯 주소예요. 방송 화면이나 공개 게시물에 노출하지 않는 편이 안전해요.

후원 알림 소스의 권장 해상도는 얼마인가요?

OBS의 기본 캔버스와 같은 크기로 시작하는 것을 권장해요. 기본 캔버스가 1920×1080이면 브라우저 소스도 1920×1080, 1280×720이면 브라우저 소스도 1280×720으로 맞추면 됩니다.

저는 TTS를 듣고 싶은데 시청자에게도 같은 소리가 나가나요?

고급 오디오 속성에서 해당 소스의 오디오 모니터링을 모니터링과 출력으로 선택하면 방송자와 시청자 모두 들을 수 있어요. 정확한 결과는 반드시 테스트 녹화로 확인해 주세요.

TTS만 끄고 화면 알림은 계속 사용할 수 있나요?

네. DORODORA의 메시지 (TTS) 설정에서 활성화는 켜고 TTS 활성화만 끈 뒤 저장하면 화면 알림을 유지하면서 메시지 음성 재생을 끌 수 있어요.

OBS를 실행하지 않아도 후원은 받을 수 있나요?

후원 페이지를 통한 결제 자체는 OBS와 별개예요. 다만 OBS가 실행 중이지 않거나 브라우저 소스가 연결되어 있지 않으면 방송 화면에 실시간 알림을 표시할 수 없어요. 들어온 후원 이벤트는 DORODORA 스트림 콘솔에서 확인하고 관리할 수 있어요.

마무리

OBS 후원 알림 설정에서 가장 중요한 것은 올바른 브라우저 소스 URL, 소스 순서, 오디오 출력 세 가지예요. DORODORA에서 메시지와 TTS를 활성화하고 전용 URL을 복사한 뒤, OBS 브라우저 소스에 붙여 넣으면 기본 연결은 끝나요.

연결 후에는 반드시 알림 테스트를 보내고, 오디오 믹서와 테스트 녹화까지 확인해 주세요. 특히 스트리머에게 들리는 소리와 실제 방송으로 나가는 소리는 설정에 따라 다를 수 있으므로 녹화 파일을 직접 들어보는 과정이 중요해요.

DORODORA는 후원 페이지, AI TTS, Voice Cloning TTS, OBS 알림 URL, 스트림 콘솔을 하나의 흐름으로 제공해요. 후원 메시지를 단순한 결제 알림이 아니라 방송 콘텐츠로 활용하고 싶다면 스트림 콘솔에서 메시지 알림부터 설정해 보세요.

DORODORA 후원 알림 설정하기

참고 자료

• OBS Browser Source: https://obsproject.com/ko/kb/browser-source
• OBS Sources Guide: https://obsproject.com/ko/kb/sources-guide
• OBS Audio Mixer Guide: https://obsproject.com/kb/audio-mixer-guide