XSplit 유튜브 채팅창 표시 방법
이전에 OBS 프로그램을 이용하여 개인 방송을 진행할 때 유튜브 채팅창을 투명하게 표시하는 방법에 대해서 작성한 적이 있습니다. 필요하신 분들이 있다면 링크된 URL을 참고하시기 바랍니다. - http://zzarungna.tistory.com/818
XSplit 프로그램에서도 유튜브 채팅창을 표시하는 방법에 대해서 간단히 작성해 보려고 합니다. 물론 소스코드를 넣어야 하고 처음 사용하시는 분들은 복잡하게 느껴질 수도 있지만 익숙해지시면 어렵지 않습니다.
먼저 유튜브 사이트에 접속하셔서 채팅 URL을 가져오도록 합시다. 유튜브에 접속하시고 방송하려는 구글 아이디로 로그인을 하시고 아래 이미지 빨간색 화살표 방향에 표시된 프로필 버튼을 눌러 주시고 크리에이터 스튜디오를 눌러 주시면 됩니다.
이곳에서 왼쪽에 실시간 스트리밍 버튼을 눌러 주시고 실시간 채팅 부분에서 점 3개로 이루어진 버튼을 누르시고 새 창에서 채팅 열기 버튼을 눌러 주시면 됩니다.
그럼 아래 이미지와 같이 유튜브 채팅창만 따로 웹페이지가 열립니다. 이곳에서 주소창 전체를 복사해 놓으시기 바랍니다.
XSplit 프로그램에서 유튜브 채팅창을 추가하시려면 아래 이미지와 같이 추가 버튼을 눌러 주시고 Webpage 메뉴를 눌러 주시면 됩니다.
그럼 아래 이미지와 같이 추가할 URL을 입력할 수 있는 창이 나옵니다. 이곳에서 바로 전에 복사했던 채팅창 주소를 붙여넣어 주시고 OK 버튼을 눌러 주시면 됩니다.
아래 이미지와 같이 유튜브 채팅창을 일반적으로 추가하게 되면 하얀색 바탕화면에 다른 메뉴 부분까지 표시되어 예쁘지가 않습니다. 유튜브 채팅창을 투명하게 만들고 보기 좋게 보이게 하려면 방금 추가했던 Webpage를 마우스 오른쪽 버튼으로 선택하시면 추가 창이 나옵니다.
새로운 창이 열린 곳에서 Html 메뉴를 선택하시고 CSS 편집 버튼을 눌러 주시면 됩니다.
CSS 편집 창에 이제 CSS 코드를 넣어 주시면 됩니다. 프로그래밍 공부를 따로 하지 않는 한 보기 어려운 코드지만 편하게 유튜브 채팅창을 수정할 수 있도록 제공해 주는 분이 있습니다.
https://chatv2.septapus.com/ 사이트에 접속하셔서 아래 이미지와 같이 CSS라고 되어 있는 영역을 전체 선택해서 복사해 주시기 바랍니다.
여기서 글자 크기는 Channel names 메뉴에 Font size 부분의 숫자를 변경하시면 채팅창 글자 크기가 변경되며 색깔도 원하는 색깔로 변경하실 수 있습니다. 사이트에서 색깔과 글자 크기를 조정하면 자동으로 CSS 코드가 생성되도록 사이트를 만들어 줬습니다.
작업이 완료되시면 빨간색 네모 칸 영역에 모든 CSS 코드를 복사해 주시기 바랍니다.
위 사이트에서 가져온 CSS 코드를 이제 복사하여 붙여 넣어 주신 뒤에 CSS 덮어쓰기 버튼을 눌러 주시면 됩니다.
완성한 뒤에 채팅창 영역을 보면 채팅창이 투명하게 표시되며 글자도 훨씬 보기 좋게 됩니다.
위처럼 XSplit 프로그램을 이용하여서 유튜브 채팅창을 표시하는 방법에 대해서 간단히 작성해 보았습니다. 프로그래밍을 잘하시는 분들이라면 소스 코드를 직접 제작하여서 자신만의 유튜브 채팅창을 만드실 수 있지만 대부분 만들기 쉽지 않을 것이기 때문에 다른 분이 만들어놓은 사이트를 이용해서 간단히 채팅창을 표시하시고 익숙해지시면 여러 가지 방법을 통해서 변경해 보시기 바랍니다.
해당 소스의 출처는 https://www.youtube.com/channel/UCjJySJ6KE6xapIj6CElIoFQ 이곳에서 가져 왔습니다. 필요한 분들에게 도움이 되길 바랍니다.
