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 이곳에서 가져 왔습니다. 필요한 분들에게 도움이 되길 바랍니다.
2017.09.06 00:40
비밀댓글입니다
2017.09.06 01:27 신고
게임을 실행하면서 Xsplit 프로그램을 동시에 실행하면서 방송을 진행 하는 것이기 때문에 컴퓨터에 부담이 갈수 밖에 없습니다.
채팅창을 띄우는 건 Xsplit 프로그램의 한 부분이기 때문에 PC에 많은 부담을 주지 않습니다.
개인적으로 제대로 방송을 한다면 투컴으로 진행하는 게 좋을 거라고 생각되지만 한번 직접 테스트해보시고 판단 하시는 게 가장 좋을 듯합니다.
2017.10.09 08:31
비밀댓글입니다
2017.10.09 15:53 신고
https://chatv2.septapus.com/ 제가 직접 보니 익스플로러 브라우저에서 CSS 표시가 나오지 않더군요. 크롬 브라우저로 해당 URL에 접속해 보시기 바랍니다.
크롬 사용 방법은 아래 URL을 참고하세요.
http://zzarungna.tistory.com/472
2018.07.10 00:09
비밀댓글입니다
2018.07.10 10:52 신고
우선제가 알고 있는 지식으로는 불가능 할 것 같습니다.
혹시라도 관련해서 방법을 찾게 되면 댓글을 추가로 남기도록 하겠습니다.
2018.11.13 00:06
비밀댓글입니다
2018.11.14 07:37 신고
우선 유튜브 채팅창 자체가 웹페이지로 열어볼 수 있게 제공 되기 때문에 웹페이지를 열어서 컴퓨터에서 채팅창 화면을 보실 수 있습니다.
코드가 적용된 라이브 채팅창을 보려면 CSS가 적용된 웹페이지를 따로 만들면 가능할 것 같습니다.
2018.11.25 19:53
비밀댓글입니다
2018.11.25 23:30 신고
따로 알고 있는 페이지는 없으며 채팅창 웹사이트를 열어 F12를 누르시면 개발자 도구 접근이 가능 합니다.
그곳에서 CSS 수정이 가능 합니다.
추가로 아래 URL 정보를 참고 하시면 도움이 될것 같습니다.
채팅창 플러그인을 만드신 분이 있어서 해당 프로그램을 이용해 보시는 게 어떨까요?
https://tgd.kr/1246685