OBS 브라우저 소스 완전 가이드

01 브라우저 소스가 하는 일

OBS의 브라우저 소스는 이름 그대로 OBS 안에 들어 있는 작은 웹 브라우저입니다. 크로미움(Chromium) 엔진이 내장되어 있어서, 여러분이 넣은 주소의 웹페이지를 실제로 렌더링한 다음 그 화면을 방송 장면에 얹습니다.

이 사실 하나가 뒤에 나올 모든 문제의 열쇠입니다. 브라우저 소스는 이미지 파일이 아니라 살아 있는 웹페이지입니다. 그래서 일반 브라우저와 똑같이 동작합니다.

• 페이지에 자체 크기가 있고, 소스에 지정한 폭·높이 안에서 렌더링됩니다
• 페이지를 캐시에 저장해 두고 재사용합니다
• 자바스크립트가 계속 돌아가며 CPU를 씁니다
• 주소(URL)의 물음표 뒤 값이 바뀌면 완전히 다른 페이지로 취급합니다

02 크기와 해상도 — 잘림의 원인

가장 흔한 증상은 오버레이의 일부만 보이거나, 캐릭터가 화면 밖으로 잘려 나가는 것입니다. 원인은 대부분 하나입니다. 브라우저 소스에 적은 폭·높이와 오버레이가 기대하는 해상도가 다른 것입니다.

어긋나면 어떻게 되나

브라우저 소스의 폭·높이는 웹페이지를 그릴 창의 크기입니다. 오버레이가 1920×1080 기준으로 좌표를 잡는데 소스를 1280×720으로 만들면, 페이지는 1280×720짜리 창에 그려집니다. 오른쪽과 아래가 그냥 없는 영역이 되어 잘립니다.

반대로 소스를 실제 방송 해상도보다 크게 잡으면, OBS 미리보기에서 소스를 축소해 맞추게 되어 글자가 흐릿해지거나 캐릭터가 의도보다 작게 보입니다.

세로 방송(모바일)일 때

1080×1920처럼 세로 캔버스로 방송한다면, 오버레이 해상도도 세로로 맞춰야 합니다. 가로 기준으로 만든 오버레이를 세로 캔버스에 늘리면 캐릭터가 가로로 뭉개집니다. 오버레이 설정에서 세로 해상도를 지원하는지 먼저 확인하세요.

03 화면에 아무것도 안 보일 때

소스는 추가했는데 완전히 빈 화면이라면, 아래를 순서대로 확인하면 거의 다 걸립니다.

주소가 완성되지 않았다

많은 오버레이는 채널을 연결해야 주소가 만들어집니다. 연결 전에는 주소가 비어 있거나 반쪽짜리라, 붙여넣어도 아무것도 안 나옵니다. 오버레이 관리 화면에서 "복사" 버튼이 활성화되어 있는지부터 보세요.

소스 순서가 아래에 깔려 있다

OBS의 소스 목록은 위에 있는 것이 앞에 그려집니다. 게임 화면이나 웹캠이 오버레이보다 위에 있으면 오버레이가 가려집니다. 오버레이를 목록 맨 위로 올려 보세요.

투명 배경이 검게 나온다

오버레이 대부분은 배경이 투명입니다. 검은 사각형으로 보인다면 소스 속성의 사용자 지정 CSS에 배경색이 들어가 있는지 확인하세요. 기본값인 body { background-color: rgba(0, 0, 0, 0); }이면 정상입니다.

페이지가 아직 로딩 중이다

연결과 초기화에 몇 초가 걸립니다. 소스를 추가하자마자 빈 화면이어도 5~10초는 기다려 보세요. 계속 비어 있다면 소스 속성에서 "보이지 않을 때 소스 종료"가 켜져 있는지 확인합니다. 켜져 있으면 장면을 전환할 때마다 페이지가 껐다 켜져 매번 다시 연결해야 합니다.

04 바꿨는데 반영이 안 될 때

설정을 고쳤는데 방송 화면은 그대로인 경우입니다. 원인은 두 가지로 나뉘고, 어느 쪽인지 구분하는 게 먼저입니다.

원인 A — 설정이 주소 안에 들어 있다

많은 오버레이는 캐릭터·크기·색 같은 설정을 주소(URL) 안에 실어 보냅니다. 이 방식이면 관리 화면에서 설정을 바꿔도 OBS에 붙여넣은 옛 주소는 옛 설정을 그대로 담고 있습니다. 페이지를 새로고침해도 소용없습니다. 주소 자체가 다르기 때문입니다.

해결은 하나뿐입니다. 관리 화면에서 주소를 다시 복사해 OBS 소스의 URL 칸에 다시 붙여넣으세요. 잘 만들어진 도구라면 설정이 바뀌었을 때 "주소를 다시 복사하세요"라고 알려 줍니다.

원인 B — 브라우저 캐시

주소가 같은데도 옛 화면이 나온다면 캐시입니다. OBS는 한 번 받은 페이지와 이미지를 저장해 두고 재사용합니다. 해결 순서는 이렇습니다.

• 소스 속성을 열고 "현재 페이지 새로 고침" 버튼을 누릅니다
• 그래도 안 되면 소스를 껐다 켭니다(눈 아이콘 클릭)
• 그래도 안 되면 OBS를 완전히 종료했다 다시 켭니다

이미지를 파일로 올리는 대신 이미지 주소(http)로 넣으면 캐시 문제가 훨씬 덜합니다. 용량이 큰 이미지라면 특히 주소 방식이 안정적입니다.

05 CPU 사용량 줄이기

브라우저 소스는 진짜 브라우저라 CPU를 씁니다. 오버레이를 여러 개 얹으면 인코딩이 밀리거나 프레임이 떨어질 수 있습니다. 화질을 포기하지 않고 줄이는 방법이 있습니다.

보이지 않을 때는 끄기 — 신중하게

소스 속성의 "보이지 않을 때 소스 종료"는 CPU를 확실히 아낍니다. 하지만 장면을 전환할 때마다 페이지가 재시작되므로, 채팅 연결이 매번 끊겼다 다시 붙습니다. 연결에 몇 초 걸리는 오버레이라면 장면을 바꿀 때마다 몇 초씩 먹통이 됩니다.

정리하면 이렇습니다. 알림·채팅처럼 항상 살아 있어야 하는 오버레이는 끄지 마세요. 특정 장면에서만 쓰는 장식용이라면 켜도 좋습니다.

필요 이상으로 크게 만들지 않기

4K 캔버스가 아니라면 브라우저 소스를 3840×2160으로 만들 이유가 없습니다. 렌더링할 픽셀이 4배가 되어 CPU도 그만큼 더 씁니다. 1920×1080이면 충분합니다.

같은 오버레이를 여러 장면에 복제하지 않기

장면마다 브라우저 소스를 새로 만들면 각각이 독립된 브라우저가 되어 개수만큼 CPU를 씁니다. 대신 소스를 우클릭 → 복사 후 다른 장면에서 붙여넣기(참조)를 쓰면 하나의 인스턴스를 공유합니다. 여러 장면에 같은 오버레이를 쓴다면 이 방법이 훨씬 가볍습니다.

하드웨어 가속

OBS 설정 → 고급에서 브라우저 소스 하드웨어 가속을 켜면 GPU가 렌더링을 나눠 맡습니다. 대부분 성능이 좋아지지만, 일부 그래픽 드라이버에서 오버레이가 검게 나오는 문제가 있습니다. 검은 화면이 생기면 이 옵션을 꺼 보세요.

06 문제 해결 체크리스트

증상별로 확인할 순서입니다. 위에서부터 하나씩 짚으면 대부분 해결됩니다.