OBS Studio에서 브라우저 소스를 투명하게 만드는 방법

게시 됨: 2026-02-19

그래서 OBS Studio에 브라우저 소스를 추가했습니다. 멋진. 하지만 이제 주변에 보기 흉한 흰색 또는 검은색 상자가 표시됩니다. 좋지 않다. 괜찮아요. OBS에서 브라우저 소스를 투명하게 만드는 것은 생각보다 쉽습니다. 올바른 설정만 있으면 됩니다. 그리고 어쩌면 한두 가지 작은 조정이 있을 수도 있습니다.

TLDR: OBS Studio에서 브라우저 소스를 투명하게 만들려면 웹 페이지의 배경이 투명해야 하며 OBS는 배경색을 강제로 지정해서는 안 됩니다. 브라우저 소스 속성에서 페이지 배경을 투명으로 설정합니다. 필요한 경우 오버레이의 CSS를 편집하여 background: transparent; . 완료되면 오버레이가 스트림과 깔끔하게 혼합됩니다.

첫째, 브라우저 소스란 무엇입니까?

OBS의 브라우저 소스는 내장된 미니 웹 브라우저입니다. 웹사이트를 장면에 직접 로드합니다. 이는 다음과 같은 경우에 적합합니다.

스트림 알림
채팅 오버레이
이벤트 목록
사용자 정의 HTML 위젯
스트림 라벨

OBS는 웹사이트를 화면 캡처하는 대신 웹사이트를 직접 로드합니다. 그래야 깨끗하고 날카롭습니다. 그러나 투명성은 웹사이트 자체에서 허용하는 경우에만 작동합니다.

이것이 핵심 아이디어입니다. OBS는 페이지에 구운 배경을 마법처럼 제거할 수 없습니다.

1단계: OBS에 브라우저 소스 추가

아직 시작하지 않았다면 처음부터 시작하겠습니다.

OBS 스튜디오를 엽니다.
소스 패널로 이동하세요.
+ 버튼을 클릭하세요.
브라우저 를 선택합니다.
원하는 대로 이름을 지정하세요.
확인 을 클릭합니다.

이제 URL을 URL 필드에 붙여넣으세요. 필요한 경우 너비와 높이를 설정합니다. 그런 다음 확인을 클릭합니다.

이제 미리보기 창에 브라우저 소스가 나타나는 것을 볼 수 있습니다.

확실한 배경이 있다면 계속 읽어보세요.

Postmeta에서 이미지를 찾을 수 없습니다.

2단계: 웹 사이트 배경이 투명한지 확인

이것이 가장 중요한 단계입니다.

오버레이 페이지의 배경은 투명해야 합니다. 페이지가 흰색, 검정색 또는 단색을 사용하는 경우 OBS에서 이를 표시합니다.

HTML이나 CSS를 제어하는 경우 다음을 추가하세요.

몸 {
  배경: 투명;
}

또는 더 나은 방법은 다음과 같습니다.

HTML, 본문 {
  배경색: rgba(0, 0, 0, 0);
}

이는 완전한 투명성을 보장합니다.

타사 경고 또는 오버레이 서비스를 사용하는 경우 해당 설정을 살펴보세요. 많은 경우 다음과 같은 확인란이 있습니다.

투명한 배경 활성화
배경 비활성화
맞춤 CSS

가능한 경우 켜십시오.

그렇지 않은 경우 맞춤 CSS를 삽입할 수 있는지 확인하세요. 그러면 대개 해결됩니다.

3단계: OBS 브라우저 소스 설정 확인

OBS에서 브라우저 소스를 마우스 오른쪽 버튼으로 클릭하세요.

속성 을 선택합니다.

이제 설정을 주의 깊게 살펴보세요.

확실하게 하다:

올바른 URL이 붙여넣어졌습니다.
너비와 높이는 오버레이 크기와 일치합니다.
사용자 정의 CSS 상자가 있는 경우 배경색을 강제로 적용하지 않습니다.

사용자 정의 CSS 필드가 표시되면 다음을 추가할 수도 있습니다.

body { 배경색: rgba(0,0,0,0) !important; }

변경 후 확인을 클릭하세요.

모든 것이 올바르게 설정되면 배경이 사라져야 합니다.

일반적인 문제: 흰색 배경이 계속 표시됩니다.

이런 일이 많이 발생합니다.

이유는 다음과 같습니다.

웹사이트는 기본 흰색 배경을 가지고 있습니다.
CSS가 올바르게 적용되지 않았습니다.
오버레이 플랫폼은 스타일링을 강제합니다.

빠른 수정:

브라우저 소스를 새로 고칩니다(마우스 오른쪽 버튼 클릭 → 새로 고침).
OBS를 다시 시작하세요.
브라우저 캐시를 지웁니다(브라우저 소스 속성 내부).

예, 캐시로 인해 문제가 발생할 수 있습니다. 특히 CSS를 변경한 후에는 더욱 그렇습니다.

보너스 팁: 투명성을 위해 PNG 및 WebM 사용

브라우저 소스가 이미지나 애니메이션을 표시하는 경우 투명도를 지원하는지 확인하세요.

최상의 형식:

이미지용 PNG
비디오용 알파 채널이 포함된 WebM
GIF (품질은 제한되어 있지만 작동함)

MP4를 사용하면 투명도가 작동하지 않습니다. MP4는 알파 채널을 지원하지 않습니다.

이건 OBS 문제가 아닙니다. 형식의 제한입니다.

웹사이트를 편집할 수 없으면 어떻게 되나요?

때로는 페이지를 제어하지 못하는 경우도 있습니다.

어쩌면 위젯일 수도 있습니다. 또는 CSS 옵션이 없는 타사 도구입니다.

아직 선택권이 있습니다.

옵션 1: 크로마 키 사용

배경이 밝은 녹색이거나 다른 단색인 경우 제거할 수 있습니다.

브라우저 소스를 마우스 오른쪽 버튼으로 클릭하세요.
필터 를 선택합니다.
+ 를 클릭합니다.
크로마키 를 선택합니다.

배경이 사라질 때까지 설정을 조정합니다.

밝은 녹색 배경에 가장 잘 어울립니다.

그러나 그것은 완벽하지 않습니다. 미세한 세부 사항이 손상될 수 있습니다.

Postmeta에서 이미지를 찾을 수 없습니다.

옵션 2: 자르기

OBS에서 소스의 가장자리를 드래그하는 동안 ALT를 누르세요.

이렇게 하면 프레임의 일부가 잘립니다.

이런 식으로 원하지 않는 배경 가장자리를 숨길 수 있습니다.

간단합니다. 그리고 빠르다.

고급 방법: 사용자 정의 HTML 오버레이의 경우

자신만의 오버레이를 구축하면 투명성이 쉬워집니다.

다음과 같이 HTML을 시작하세요.

<!DOCTYPE HTML>
<html>
<머리>
<스타일>
  HTML, 본문 {
    여백: 0;
    패딩: 0;
    배경: 투명;
    오버플로: 숨김;
  }
</style>
</head>
<본문>

<!-- 귀하의 콘텐츠가 여기에 있습니다 -->

</body>
</html>

이렇게 하면 여백이 제거되고 페이지가 깨끗하고 완전히 투명하게 유지됩니다.

또한 다음을 추가하지 마십시오.

배경 이미지
배경 그라데이션
기본 테마 색상

최소한으로 유지하십시오.

나머지는 OBS가 처리합니다.

성능 팁

투명성이 훌륭합니다. 그러나 브라우저 소스는 CPU를 사용할 수 있습니다.

원활하게 진행하세요:

작은 오버레이 크기를 사용하세요.
불필요한 애니메이션을 비활성화합니다.
필요하지 않은 경우 프레임 속도를 낮추십시오.
무거운 JavaScript를 피하십시오.

오버레이가 지연되는 경우 투명성 문제가 아닐 수도 있습니다. 너무 복잡할 수도 있습니다.

빠른 투명성 체크리스트

뭔가가 작동하지 않으면 다음 목록을 살펴보세요.

홈페이지 배경이 투명으로 설정되어 있나요?
background: transparent를 사용하셨나요? CSS에서?
소스 새로고침하셨나요?
캐시를 지웠나요?
이미지 형식이 투명성을 지원합니까?
OBS는 최신인가요?

대부분의 문제는 5분 이내에 해결됩니다.

투명성이 중요한 이유

투명한 오버레이는 전문적으로 보입니다.

그들은 당신의 장면에 조화를 이룹니다.

못생긴 상자는 없습니다.

이상한 테두리가 없습니다.

경고는 게임 플레이나 카메라 위에 자연스럽게 떠 있습니다.

그리고 스트림이 즉시 더 깨끗해 보입니다.

작은 세부 사항. 큰 차이.

최종 생각

OBS Studio에서 브라우저 소스를 투명하게 만드는 것은 복잡하지 않습니다.

처음에는 신비롭게 느껴집니다.

황금률을 기억하세요:

투명성은 웹사이트 자체에서 나와야 합니다.

OBS는 페이지 출력 내용을 정확하게 표시합니다. 더 이상은 없습니다. 그 이하도 아닙니다.

CSS가 투명한 배경을 사용하면 OBS가 자동으로 마법을 수행합니다.

이제 해당 오버레이를 정리하세요.

귀하의 스트림은 그럴 자격이 있습니다.