바람이 머문 언덕

OBS Studio 유튜브 실시간 채팅창 표시 방법. 본문

컴퓨터 IT/인터넷 방송 관련 글

OBS Studio 유튜브 실시간 채팅창 표시 방법.

키키로 2018. 10. 8. 18:37
반응형

컴퓨터를 새로 구입하면서 그 동안하고 싶었던 게임 실시간 방송을 유튜브에 테스트 삼아 올려 보았습니다. 

8세대 cpu인 커피레이크가 탑재되어 있어서 그런지 별문제 없이 게임 화면이 실시간으로 잘 업로드되었지만 다른 게임을 보다 채팅 창도 게임에 표시하면 좋겠다는 생각이 들어 방법을 알아 보았습니다.


기본 화면에 유튜브 실시간 스트리밍 채팅 창을 추가로 표시하기 위해 아래 빨간색으로 '+'를 클릭합니다.



아래 그림처럼 메뉴 나타나면 '브라우저'를 클릭합니다.

설정 값을 립력하기 위해 리스트에 추가된  '브라우저'를 더블 클릭합니다.



채팅 창의 주소를 가져 오기 위해 유튜브 -> 크리에이터 스튜디오 -> 실시간 스트리밍 -> 지금 스트리밍하기로 이동합니다. 그 다음 빨간 네모 1번를 클릭후  '새창에서 채팅 열기'를 클릭합니다. 



새로운 대화 창이 나타나면 주소를 복사합니다.



복사한 채팅창 주소를 OBS Studio -> 브라우저 설정 창에 '붙여넣기' 합니다.



그럼 아래와 같이 채팅 창이 나타나는 것이 보일 것입니다.

그렇지만 채팅 창 배경 때문에 방송 화면이 가려 보기가 싫습니다.



채팅 창 배경이 보이지 않게 하기 위해서는 CSS를 추가로 입력해 주어야 합니다.

CSS 소스를 얻기 위해   https://chatv2.septapus.com/ 사이트에 접속합니다.


그리고  아래로 스크롤하면 보이는 CSS 소스를 복사합니다.



복사한 CSS 소스를  OBS Studio -> 브라우저 -> CSS에 복사한 것을 '붙여놓기' 합니다.



그럼 아래와 같이 채팅 창 배경은 투명하게 되고 채팅 내용만 보이게 됩니다.

이것을 자신의 원하는 위치와 크기로 조정해 주면 됩니다.



그 다음부터는 유튜브 공개 방송을 할 때 채팅 내용이 같이 표시되는 것을 볼 수가 있을 것입니다.

OBS Studio를 이용한 동시송출방법.