OBS 스트리밍 오버레이 설정 완벽 가이드: 초보자도 쉽게 따라하는 방법

OBS Studio 소개

OBS Studio(Open Broadcaster Software)는 전 세계에서 가장 많이 사용되는 무료 오픈소스 스트리밍 소프트웨어입니다. Twitch, YouTube, TikTok 등 모든 주요 플랫폼에서 사용할 수 있으며, 강력한 기능과 확장성을 제공합니다.

OBS의 주요 장점

1. 완전 무료 & 오픈소스
상업적 사용에도 비용이 발생하지 않으며, 전 세계 개발자 커뮤니티가 지속적으로 업데이트합니다.

2. 크로스 플랫폼 지원
Windows, macOS, Linux 모든 운영체제에서 동일하게 사용할 수 있습니다.

3. 플러그인 생태계
수백 개의 플러그인을 통해 기능을 무한히 확장할 수 있습니다.

4. 하드웨어 가속 지원
NVIDIA NVENC, AMD VCE, Intel Quick Sync 등 하드웨어 인코딩을 지원하여 CPU 부담을 줄입니다.

브라우저 소스의 이해

브라우저 소스는 OBS의 가장 강력한 기능 중 하나입니다. 웹 페이지를 직접 스트리밍 화면에 표시할 수 있어, HTML/CSS/JavaScript로 만든 모든 콘텐츠를 오버레이로 사용할 수 있습니다.

브라우저 소스로 할 수 있는 것들

• •실시간 채팅 오버레이


• •자막 표시


• •알림 위젯 (팔로우, 구독, 후원)


• •시계, 타이머, 카운트다운


• •소셜 미디어 피드


• •투표/설문 결과 표시


• •사용자 정의 그래픽 요소

브라우저 소스 추가하기

기본 설정 단계

1단계: 소스 패널 열기
OBS 메인 화면 하단의 '소스' 패널을 확인합니다. 여기서 모든 화면 요소를 관리합니다.

2단계: 새 소스 추가

'+' 버튼을 클릭합니다

목록에서 '브라우저'를 선택합니다

'새로 만들기'를 선택하고 이름을 입력합니다

- 예: "채팅 오버레이", "자막", "알림 위젯"

3단계: 브라우저 속성 설정

URL: 오버레이 URL을 입력합니다
너비: 1920 (일반적인 설정)
높이: 오버레이 유형에 따라 다름
   - 자막: 200-300
   - 채팅: 400-600
   - 전체 화면: 1080
FPS: 30 (대부분의 경우 충분)

4단계: 투명 배경 활성화

사용자 지정 CSS 필드에 다음 코드를 입력합니다:

body {
  background-color: rgba(0, 0, 0, 0);
  margin: 0;
  padding: 0;
  overflow: hidden;
}

CoJam 오버레이 연동하기

CoJam은 다양한 오버레이를 제공합니다. 각 위젯의 오버레이 URL을 OBS에 추가하면 됩니다.

CoLive 자막 오버레이

설정값:

• •URL: https://cojam.kr/widgets/colive/overlay?session=YOUR_SESSION_ID


• •너비: 1920


• •높이: 200-300


• •위치: 화면 하단 중앙

권장 CSS:

body { background: transparent; }
.subtitle-container {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

CoTok 채팅 오버레이

설정값:

• •URL: https://cojam.kr/widgets/cotok/overlay


• •너비: 400-500


• •높이: 600-800


• •위치: 화면 우측 또는 좌측

CoYou YouTube 채팅 오버레이

설정값:

• •URL: https://cojam.kr/widgets/coyou/overlay


• •너비: 400-500


• •높이: 600-800


• •위치: 화면 측면

오버레이 위치 및 크기 조정

드래그 앤 드롭 방식

미리보기 화면에서 빨간 테두리가 있는 소스를 클릭합니다

모서리의 핸들을 드래그하여 크기를 조정합니다

중앙을 드래그하여 위치를 이동합니다

정밀 조정

소스를 우클릭합니다

'변환' > '변환 편집'을 선택합니다

정확한 수치를 입력합니다:

- 위치 X, Y
- 크기 (너비, 높이)
- 회전 각도
- 바운딩 박스 유형

정렬 단축키

• •Ctrl+D: 화면 중앙 정렬


• •Ctrl+R: 화면에 맞게 크기 조정


• •Ctrl+F: 화면에 맞게 늘리기

레이어 관리

오버레이들이 겹칠 때 표시 순서를 관리해야 합니다.

소스 순서 변경

소스 목록에서 위에 있는 항목이 화면에서 앞에 표시됩니다.

• •드래그 앤 드롭으로 순서 변경


• •또는 소스 우클릭 > '순서' > '앞으로 가져오기/뒤로 보내기'

권장 레이어 순서 (아래에서 위로)

게임/화면 캡처 (맨 아래)

웹캠

채팅 오버레이

자막 오버레이

알림 위젯 (맨 위)

성능 최적화 팁

브라우저 소스 성능 관리

1. 불필요한 소스 비활성화
사용하지 않는 브라우저 소스는 눈 아이콘을 클릭하여 비활성화합니다. 비활성화된 소스는 리소스를 사용하지 않습니다.

2. FPS 최적화
모든 브라우저 소스가 60fps일 필요는 없습니다.

• •자막, 채팅: 30fps로 충분


• •애니메이션 위젯: 60fps 권장

3. 새로고침 빈도 설정
'상호작용 가능으로 전환될 때 페이지 새로고침' 옵션을 체크하면 매번 새로고침되어 메모리 누수를 방지합니다.

하드웨어 가속

브라우저 소스의 하드웨어 가속은 기본적으로 활성화되어 있습니다. GPU가 충분하다면 그대로 두고, 문제가 생기면 비활성화를 시도해보세요.

문제 해결

브라우저 소스가 검은 화면일 때

URL이 정확한지 확인

인터넷 연결 확인

OBS 재시작

'상호작용' 버튼을 눌러 페이지가 로드되었는지 확인

오버레이가 깜빡일 때

GPU 드라이버 업데이트

하드웨어 가속 토글

다른 브라우저 소스와의 충돌 확인

성능 저하가 발생할 때

브라우저 소스 FPS 낮추기

불필요한 소스 비활성화

OBS 프로세스 우선순위 높이기

씬(Scene) 활용하기

씬을 활용하면 여러 오버레이 구성을 저장하고 빠르게 전환할 수 있습니다.

권장 씬 구성

• •대기 화면: 로고, 타이머, BGM 시각화


• •메인 방송: 게임 캡처, 웹캠, 채팅, 자막


• •휴식 시간: BRB 이미지, 타이머


• •엔딩: 감사 메시지, 소셜 미디어 링크

씬 전환 효과

설정 > 씬 전환에서 다양한 전환 효과를 설정할 수 있습니다:

• •컷 (즉시 전환)


• •페이드


• •슬라이드


• •스팅거 (커스텀 애니메이션)

결론

OBS 브라우저 소스를 활용하면 전문 스트리머 수준의 오버레이를 무료로 구현할 수 있습니다. CoJam의 다양한 오버레이와 함께 사용하면 설정이 더욱 간편해집니다.

처음에는 복잡해 보일 수 있지만, 한 번 설정해두면 이후에는 간단히 방송을 시작할 수 있습니다. 지금 바로 OBS와 CoJam으로 프로페셔널한 스트리밍 환경을 구축해보세요!