트위치 방송화면 채팅창 넣기 (OBS studio & twip)

기초적인 방송 송출화면에 게임화면같은 요소를 넣고 나서 뭔가 허전함을 느끼실껍니다

 

 

역시 방송에는 시청자들의 채팅방이 화면에 보이는것이 재밌지 않겠습니까?

​

​

트위치창 에서 보면 채널화면 옆에 채팅창이 있습니다

요렇게 채팅을 치면

 

송출화면에서 저렇게 아이디와 채팅내용이 올라오는 저것!

​

저 채팅창을 넣는것을 해볼껀데요

​

​

​

시작해보겠습니다

​

시작하기에 앞서 트윕 twip 사이트에 로그인을 해주셔야되는데요

​

https://twip.kr/

사이트설명에또 뜨지만 트위치 스트리머를 위한 오버레이 도구라고 소개해주고있습니다

​

 

오버레이도구가 뭘까요?

​

종류가 여러가지 있는데요 앞서 보여드린 채팅창, 목표그래프, 방송 알림창 등

​

OBS상의 소스보다 좀더

 

트위치웹과 연동되는 추가적인 소스라고 생각하시면 편할꺼같아요

​

그중에서 오늘은 채팅창을 넣는것을 해볼껍니다

일단 첫화면에서 바로 스트리머 로그인을 해도되지만

​

우측상단 로그인으로 들어가볼께요

본인이 어차피 트위치아이디로 연동이되는것이라

​

회원가입을 따로할필요는 없구요 스트리머로써 들어가냐 시청자로써 들어가냐 그차이에요

​

채팅창 오버레이를 위해 스트리머 로그인!

로그인이 된상태

​

대시보드로 들어갑시다!

공허함이 가득한 최근 대시보드 흑

​

방송을 맨날하는게 아니니 어쩔수 없지만서도..

​

일단 넘어갑시다 왼쪽메뉴중에

​

"Chat Box" 메뉴를 골라주세요!

-chat box 채팅박스 설정-

​

chat box는 말그대로 채팅창 오버레이도구를 설정 할수있는 곳인데요

​

봅시다

제일윗부분은

​

채팅창 설정상태 미리보기인데(별도움이안되는듯 그이유는 밑에서 서술)

​

오버레이: 이름을 정할수 있다고하는데 비워도된데요 저는 안적음

​

스타일 : 마음에드는 스타일을 정하시면됩니다

​

배경색상, 글자폰트, 글자색상,메세지표시 시간, 지연표시,아이콘숨기기등의 옵션이있습니다

​

옵션은 개인취향이지만

​

글자폰트와 크기 등을 많이 만지게될꺼에요 일단 더 밑으로 스크롤을 내려봅니다

봇숨기기 설정체크도잇었네요

​

설정이 완료되면

​

맨밑에 "설정하기"버튼을 꼭눌러주세요 꼭!

이제 다시 위로올라와서

​

"주소보기"버튼을 눌러주시면

채팅창의 주소가 10초간 표시가됩니다

드래그를 쭉해서 채팅창주소를 복사해주세요

​

클릭드래그 후 Ctrl+C

이제 OBS로 넘어와서 소스목록에서 우클릭

​

추가 > 브라우저 소스를 클릭해줍니다

아마 처음만드시니까 새로만들기체크상태로

​

소스의 이름을 정해주세요

​

저는 "송출화면채팅창"이라 명명

​

"확인"

브라우저소스창의 속성창이 뜹니다

​

URL란에 채팅창주소가 복사된것을 붙여넣기로 넣어주세요 Ctrl+V

​

너비,높이를 임의로 적어주세요 나중에 게임화면의 레이아웃에따라 달라질수가있기 때문

​

저는 400에 1000으로 설정 그리고 확인을 눌러주시면

송출화면에 무언가 들어왔어요!

본인의 트위치 채팅창에서 채팅을쳐보면 정상적으로 나오는지 확인이 가능합니다

​

​

성공!!!

​

하지만

​

나중에 이 채팅창 밑에 게임화면이나 모니터화면을 소스로 넣어놓고 세팅하다보면

​

채팅창의 크기를 바꿔야할일이 자꾸 생길꺼에요

​

이때 주의해야할점

​

채팅창의 스타일과 글자크기 등 > twip사이트에서 chatbox설정에서 변경후 꼭 "설정저장"

송출화면내에 채팅창의범위 설정 > OBS studio에서 합니다 이때

​

twip사이트에서 설정변경을하고 설정저장을 꼭!하시고

​

OBS에서는

채팅창의 브라우저소스를 우클릭해서 속성창에 들어가줍니다

너비와 높이 를 변경해주시구요

​

twip설정된것을 제대로 보시려면

​

브라우져속성창에서 스크롤로 조금만 내려보시면

​

"현재 페이지의 캐시를 새로고침"버튼이 있는데 이버튼을 꼭한번 눌러주세요

​

그리고 "확인"

​

그래야 바로 바뀐 twip 설정대로 채팅창이 표시가 됩니다

​

​

호오 점점 넣을수 있는 소스들이 늘어나고 있군요

​

저도 계속 열심히 해보겠습니다 후후

​