OBS 오버레이는 소스 목록 아래의 + 버튼으로 '이미지'(고정 그림) 또는 '브라우저'(알림·채팅 위젯이 주는 웹 주소) 소스를 추가한 뒤 목록에서 게임 소스보다 위에 두면 올라갑니다. 확인할 것은 소스 종류, 겹치는 순서, 배경 투명 여부 세 가지입니다. 이 글의 메뉴 이름은 OBS Studio 32.2.2 한국어 로케일 문자열과 공식 지식 베이스를 2026년 10월 6일 확인 기준으로 대조한 것이며 Windows PC 기준입니다. 웹캠 배치는 웹캠 화면을 넣고 게임을 녹화하는 방법에서 다루므로, 여기서는 이미지와 브라우저 소스에만 집중합니다.
결론: 알림 오버레이는 OBS에 내장되어 있지 않습니다
OBS Studio에는 방송 알림 기능이 내장되어 있지 않고, 공식 FAQ는 제3자 알림 제공자의 오버레이를 브라우저 소스로 추가하라고 안내합니다. 따라서 알림이나 채팅 박스는 제공자가 알려 준 주소를 붙여 넣는 쪽, 로고나 프레임은 직접 만든 파일을 불러오는 쪽이라고만 기억하면 충분합니다. 이 글은 특정 제공자나 템플릿 사이트를 소개하지 않습니다. 장면 구성 전체가 부담스럽게 느껴진다면 OBS가 너무 복잡할 때 자동 녹화로 갈아타는 법을 다룬 글도 참고할 수 있습니다.
이미지·브라우저 오버레이를 올리는 순서
- 1장면을 고르고 게임 소스부터 두기장면 목록에서 오버레이를 올릴 장면을 선택합니다. 공식 스트림 레이아웃 튜토리얼은 디스플레이 캡쳐(Display Capture), 게임 캡쳐(Game Capture, Windows 전용), 윈도우 캡쳐(Window Capture), 비디오 캡쳐 장치(Video Capture) 중 하나로 게임 소스를 먼저 넣고, 편집 > 변환 > 화면에 맞추기(Ctrl-F)로 캔버스 크기에 맞추는 순서를 안내합니다. 오버레이는 그 위에 덮는 층입니다.
- 2이미지 소스로 고정 오버레이 추가소스 목록 아래 + 버튼(소스 추가)을 누르면 열리는 창에서 '소스 유형' 목록의 '이미지'를 고릅니다. '소스를 표시'가 체크된 것을 확인한 뒤 '새 소스 생성' 버튼을 누르면 소스 이름이 자동으로 붙고 속성 창이 열립니다. 공식 지식 베이스는 이전 화면 기준으로 Create New 선택, 이름 입력, OK 순서로 안내하므로 화면이 조금 다르게 보일 수 있습니다. 속성 창에서 '찾아보기'로 파일을 고르고 확인을 누릅니다. 지원 형식은 BMP, TGA, PNG, JPEG, GIF이며 알파(투명도)는 해당하는 형식에서 쓸 수 있습니다. 파일을 지정하는 속성 이름은 '이미지 파일'입니다.
- 3브라우저 소스로 웹 오버레이 추가같은 창의 '소스 유형' 목록에서 '브라우저'를 고르고 '새 소스 생성' 버튼을 누른 뒤, 열린 속성 창의 URL 칸에 제공자가 알려 준 주소를 붙여 넣습니다. 공식 문서의 기본값은 너비 800, 높이 600이며, FPS 30은 '사용자가 임의로 설정한 프레임 레이트 사용'을 켰을 때 쓰는 값입니다(문서 날짜 2022년 1월 11일). 알림 튜토리얼은 '적절한 크기'로 맞추라고만 안내하므로, 설정 > 비디오의 '기본 (캔버스) 해상도'를 참고해 너비와 높이를 조정한 뒤 미리보기에서 잘리는 곳이 없는지 봅니다. 컴퓨터에 저장한 페이지는 대신 '로컬 파일'을 켭니다.
- 4배경이 투명한지 확인이미지는 파일 자체가 투명 배경으로 저장되어 있어야 뒤의 화면이 비칩니다. 브라우저 소스는 '사용자 지정 CSS'의 기본값 body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; } 가 배경을 투명하게 만든다고 공식 문서에 적혀 있습니다. 네모난 배경이 보이면 이 칸을 직접 고쳤는지 먼저 확인합니다. 이 밖의 투명 처리 방법은 지식 베이스에 설명이 없습니다.
- 5크기와 위치 맞추기소스를 선택하면 미리보기에 빨간 경계 상자가 나타납니다. 드래그로 옮기고, 모서리나 가장자리의 빨간 핸들로 크기를 바꿉니다. 정확한 값은 편집 > 변환 > 변환 편집(Windows는 Ctrl-E)의 '위치', '크기', '자르기'에 입력합니다. Alt를 누른 채 핸들을 끌면 자르기가 되고, Ctrl을 누른 채 끌면 스냅이 해제됩니다.
- 6순서로 앞뒤 정하기소스 목록에서 위쪽 소스가 아래쪽 소스보다 앞에 그려집니다. 오버레이가 게임 뒤에 가려졌다면 오버레이를 선택하고 목록 아래의 위 화살표 버튼을 누르거나, '순서' 메뉴의 '위로 올리기', '맨 위로 올리기'를 씁니다. 오버레이가 여러 개여도 같은 규칙으로 정리합니다.
- 7표시·잠금·새로고침 상태 점검눈 아이콘이 회색이면 숨김, 흰색이면 표시 중입니다. 배치를 끝낸 소스는 '잠금'으로 고정해 둘 수 있습니다. 브라우저 소스가 예전 화면을 계속 보여 주면 속성에서 '현재 페이지의 캐시를 새로고침'을 누릅니다.
오버레이 종류별로 고르는 소스
| 상황 | 쓰는 소스 | 공식 문서에서 확인할 값 |
|---|---|---|
| 로고·프레임 같은 고정 이미지 | 이미지 | '이미지 파일'에 BMP, TGA, PNG, JPEG, GIF 중 하나를 지정 |
| 웹 주소로 오는 알림·채팅 박스 | 브라우저 | URL에 제공자 주소를 붙여 넣기. 문서 기본값은 너비 800, 높이 600 |
| 내 컴퓨터에 저장한 웹 페이지 | 브라우저 | '로컬 파일'을 켜고 경로 지정(기본값은 꺼짐) |
| 뒤의 게임 화면이 비쳐야 하는 오버레이 | 알파가 있는 이미지, 또는 브라우저의 기본 사용자 지정 CSS | 기본 CSS는 body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; } |
| 여러 장을 돌려 보여 주기 | 이미지 슬라이드 쇼(Image Slide Show) | 문서 기본값은 슬라이드 간 시간 8000 ms, 전환 속도 700 ms |
| 오버레이가 게임 뒤로 가려질 때 | 소스 순서 | 목록에서 위쪽 소스가 아래쪽 소스보다 앞에 표시됨 |
녹화·방송을 켜기 전 점검 목록
- 이미지 파일 형식: BMP, TGA, PNG, JPEG, GIF 중 하나이고, 투명이 필요하면 투명 배경으로 저장했는지 확인
- 브라우저 소스 URL: 제공자 화면의 주소와 똑같은지, '로컬 파일' 켜짐·꺼짐이 의도와 맞는지 확인
- 너비·높이: '기본 (캔버스) 해상도'와 비교해 미리보기에서 잘리거나 비는 곳이 없는지 확인
- 소스 순서: 오버레이가 게임 소스보다 목록 위쪽에 있는지 확인
- 눈 아이콘이 흰색이고 '사용자 지정 CSS' 기본값을 지우거나 바꾸지 않았는지 확인
- 페이지 권한: 기본값 'OBS 상태 정보에 대한 읽기 권한'에서 바꿨다면 바꾼 이유를 설명할 수 있는지 확인
배치를 마치고 녹화로 넘어갈 때
지금까지의 작업은 OBS 안에서 화면 구성을 짜는 일이며, DOR에 라이브 오버레이 기능이 있다는 뜻이 아닙니다. 녹화 단계에서 DOR가 하는 일은 OBS식 장면·소스·출력 설정을 먼저 만들지 않고 시작하게 해 주는 것입니다. 발로란트 같은 지원 게임을 실행하면 무료 Windows 앱이 게임을 자동으로 감지해 풀매치를 mp4로 녹화하며, 발로란트는 킬 하이라이트가 자동 클립으로 만들어지는 7개 게임에 들어갑니다. 녹화 뒤에는 앱 보관함의 구간 자르기로 시작과 끝을 지정하고 16:9, 9:16, 1:1 중 출력 비율을 고를 수 있으며, 설치가 필요 없는 브라우저 편집기 DOR 스튜디오에서는 텍스트를 편집 단계에서 얹을 수 있습니다. 이것은 방송 중 실시간으로 보이는 오버레이와는 다른, 완성된 영상 위의 편집 기능입니다.
