OBS 유튜브 채팅창 투명하게 표시하는 방법
새 창으로 유튜브 채팅창을 열면 아래 이미지와 같이 새로운 창이 열립니다. 새로 열린 채팅창에서 주소를 복사해 놓으시기 바랍니다.
그런 뒤에 다시 OBS 프로그램으로 돌아와서 소스 목록 부분에서 + 기호를 눌러서 채팅창이 화면에 표시되기 위해서 추가 버튼을 누르시고 Browser Source 버튼을 눌러 주시기 바랍니다.
그런 뒤에 새로 만들기 이름을 지정할 때 원하는 이름을 지정하고 확인 버튼을 눌러 주시면 됩니다. 저는 유튜브 채팅창이라는 제목으로 만들었습니다.
그럼 채팅창을 설정하기 위한 창이 하나 뜨는데 여기서 복사한 유튜브 채팅창 URL을 URL 빈칸에 넣어 주시기 바랍니다. 그리고 Width = 가로, Height = 세로입니다.
저는 가로 207세로 650으로 설정 하였습니다. 개인 취향에 맞게 가로와 세로를 숫자로 지정해 주시면 되고 숫자가 커지면 커질수록 가로, 세로 사이즈가 늘어납니다.
마지막으로 채팅창이 투명하게 표시되게 하기 위해서는 CSS 부분에 소스를 넣어 주셔야 합니다. 아래 소스 코드를 복사하셔서 CSS 부분에 붙여 넣으시면 됩니다.
@import url("https://fonts.googleapis.com/css?family=Changa One");
@import url("https://fonts.googleapis.com/css?family=Imprima");
/* Background colors*/
body {
background-color: rgba(0,0,0,0);
}
/* Transparent background. */
yt-live-chat-renderer {
background-color: transparent !important;
}
/* Outlines */
yt-live-chat-renderer * {
text-shadow: -4px -4px #000000,-4px -3px #000000,-4px -2px #000000,-4px -1px #000000,-4px 0px #000000,-4px 1px #000000,-4px 2px #000000,-4px 3px #000000,-4px 4px #000000,-3px -4px #000000,-3px -3px #000000,-3px -2px #000000,-3px -1px #000000,-3px 0px #000000,-3px 1px #000000,-3px 2px #000000,-3px 3px #000000,-3px 4px #000000,-2px -4px #000000,-2px -3px #000000,-2px -2px #000000,-2px -1px #000000,-2px 0px #000000,-2px 1px #000000,-2px 2px #000000,-2px 3px #000000,-2px 4px #000000,-1px -4px #000000,-1px -3px #000000,-1px -2px #000000,-1px -1px #000000,-1px 0px #000000,-1px 1px #000000,-1px 2px #000000,-1px 3px #000000,-1px 4px #000000,0px -4px #000000,0px -3px #000000,0px -2px #000000,0px -1px #000000,0px 0px #000000,0px 1px #000000,0px 2px #000000,0px 3px #000000,0px 4px #000000,1px -4px #000000,1px -3px #000000,1px -2px #000000,1px -1px #000000,1px 0px #000000,1px 1px #000000,1px 2px #000000,1px 3px #000000,1px 4px #000000,2px -4px #000000,2px -3px #000000,2px -2px #000000,2px -1px #000000,2px 0px #000000,2px 1px #000000,2px 2px #000000,2px 3px #000000,2px 4px #000000,3px -4px #000000,3px -3px #000000,3px -2px #000000,3px -1px #000000,3px 0px #000000,3px 1px #000000,3px 2px #000000,3px 3px #000000,3px 4px #000000,4px -4px #000000,4px -3px #000000,4px -2px #000000,4px -1px #000000,4px 0px #000000,4px 1px #000000,4px 2px #000000,4px 3px #000000,4px 4px #000000;
font-family: "Imprima";
font-size: 18px !important;
line-height: 18px !important;
}
yt-live-chat-text-message-renderer #content,
yt-live-chat-legacy-paid-message-renderer #content {
overflow: initial; !important
}
/* Hide scrollbar. */
yt-live-chat-item-list-renderer #items{
overflow: hidden !important;
}
/* Hide header and input. */
yt-live-chat-header-renderer,
yt-live-chat-message-input-renderer {
display: none !important;
}
/* Reduce side padding. */
yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
padding-left: 4px !important;
padding-right: 4px !important;
}
/* Avatars. */
yt-live-chat-text-message-renderer #author-photo,
yt-live-chat-legacy-paid-message-renderer #author-photo {
width: 24px !important;
height: 24px !important;
border-radius: 24px !important;
margin-right: 6px !important;
}
/* Hide badges. */
yt-live-chat-text-message-renderer #author-badges {
display: none !important;
vertical-align: text-top !important;
}
/* Timestamps. */
yt-live-chat-text-message-renderer #timestamp {
color: #999999 !important;
font-family: "Imprima";
font-size: 16px !important;
line-height: 16px !important;
}
/* Badges. */
yt-live-chat-text-message-renderer #author-name[type="owner"],
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="owner"] {
color: #ffd600 !important;
}
yt-live-chat-text-message-renderer #author-name[type="moderator"],
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="moderator"] {
color: #5e84f1 !important;
}
yt-live-chat-text-message-renderer #author-name[type="member"],
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="member"] {
color: #0f9d58 !important;
}
/* Channel names. */
yt-live-chat-text-message-renderer #author-name {
color: #cccccc !important;
font-family: "Changa One";
font-size: 20px !important;
line-height: 20px !important;
}
yt-live-chat-text-message-renderer #author-name::after {
content: ":";
margin-left: 4px;
}
/* Messages. */
yt-live-chat-text-message-renderer #message,
yt-live-chat-text-message-renderer #message * {
color: #ffffff !important;
font-family: "Imprima";
font-size: 18px !important;
line-height: 18px !important;
}
/* Fan Funding Messages. */
yt-live-chat-legacy-paid-message-renderer #event-text,
yt-live-chat-legacy-paid-message-renderer #event-text * {
color: #ffffff !important;
font-family: "Changa One";
font-size: 20px !important;
line-height: 20px !important;
}
yt-live-chat-legacy-paid-message-renderer #detail-text,
yt-live-chat-legacy-paid-message-renderer #detail-text * {
color: #ffffff !important;
font-family: "Imprima";
font-size: 18px !important;
line-height: 18px !important;
}
yt-live-chat-legacy-paid-message-renderer {
background-color: #0f9d58 !important;
margin: 4px 0 !important;
}
yt-live-chat-text-message-renderer a,
yt-live-chat-legacy-paid-message-renderer a {
text-decoration: none !important;
}
yt-live-chat-text-message-renderer[is-deleted],
yt-live-chat-legacy-paid-message-renderer[is-deleted] {
display: none !important;
}
빨간색 네모 칸을 통해 표시할 채팅창 주소와 가로 사이즈 세로사이즈를 세팅 하시고 녹색 네모 칸에 표시된 CSS 부분에 위에 적혀있는 소스를 복사하셔서 붙여 넣으시면 됩니다.
위처럼 세팅을 하고 난 뒤에 OBS 프로그램 방송 화면을 보시면 아래 이미지와 같이 채팅창이 게임 화면을 가리지 않고 게임 화면과 채팅 화면이 같이 보이는 것을 확인 하실 수 있습니다.
만약 채팅창에 표시된 글씨가 너무 커서 조절이 필요하신 분들은 방금 복사한 소스를 메모장으로 열어 보시기 바랍니다. 그런 뒤에 Ctrl + F를 눌러서 size라고 검색하시면 Text Style 부분에 font-size: 라는 부분이 있습니다. 여기서 다른 건 건드리지 마시고 숫자만 조절하시면 채팅창에 표시되는 글자를 조정 할 수 있습니다.
숫자가 낮을수록 글씨 크기가 작아집니다.
마지막으로 순서를 유튜브 채팅창 화면을 제일 상단으로 올리셔야 합니다. 이 과정을 빼먹어서 게임 화면은 나오는데 채팅창이 나오지 않는다고 댓글이 2개나 있었는데 제가 확인을 못했네요 죄송합니다!
유튜브 채팅창을 선택하시고 마우스 오른쪽 버튼을 누르신 뒤에 순서 메뉴 선택하시고 가장 위로 올리기를 하시면 됩니다. 그럼 게임 화면보다 위에 있으므로 이제 유튜브 라이브 스트리밍 채널에서 보시면 게임 화면과 채팅 화면이 잘 나오는걸 보실 수 있습니다.
마지막으로 확인해야겠지요? 유튜브 라이브 스트리밍 화면에서 채팅창과 게임 화면이 정상적으로 잘 나오는 것까지 확인했습니다.
OBS 프로그램을 이용해서 유튜브 실시간 방송을 하시는 분들에게 도움이 되는 정보가 되길 바라면서 작성하였습니다. 기본적으로 채팅을 화면에 표시하는 방법은 위와 비슷한 형식입니다.
OBS 프로그램을 이용해 트위치 자막을 표시하는 방법에 대해서 자료가 필요하신 분들이 있다면 댓글로 기재해 주시면 자료를 정리하여 작성해 보도록 하겠습니다.
예전에 작성 했던 CSS 소스가 먹히지 않아서 추가로 글을 작성 합니다. 댓글 중 망기쿠니 님이 주신 정보에 가보니 유튜브 투명 채팅창 CSS 소스를 제공해 주는 유튜버가 있네요. 고마운 마음으로 그분의 링크 주소를 이곳에 적어 놓겠습니다.
https://www.youtube.com/watch?v=JZeg9oLbAkE&t=0s 이곳은 그분이 제작하신 CSS 소스를 OBS에 적용하는 방법에 대해서 올린 유튜브 영상입니다. 가서 한번 보시고 고맙다고 댓글을 남겨 주도록 합시다.
실제 소스는 http://chatv2.septapus.com/ 이곳에서 제공이 되며 유튜브 투명 채팅창 CSS 코드를 복사해서 사용할 수 있습니다. 원하는 스타일로 수정도 되게 사이트도 제공하고 있어서 자신이 원하는 스타일로 수정하면 자동으로 CSS 코드도 수정이 되게 만들어 놓으셨네요. 너무 잘 만드신 것 같습니다.
추가적인 질문은 영문으로 그분의 유튜브 채널에서 질문을 올리도록 합시다~ 빨간색 네모칸 부분이 CSS 소스 코드 입니다. 전체 선택해서 복사 하시기 바랍니다.
위 사이트에서 CSS 코드를 복사해서 제가 작성한 OBS 프로그램 안에서 CSS 소스를 넣는 부분에 예전 CSS 코드를 삭제 하시고 이곳에서 복사한 CSS 코드를 넣어 주시면 됩니다.
아래 이미지는 실제 CSS 코드를 넣었을때 투명 유튜브 채팅창이 나오는 모습입니다.
좋은 정보를 주신 망기쿠님 그리고 제작자 유튜버에게 감사드립니다. 예전에 작성했던 CSS 코드가 먹지 않아서 변경 하여 다시 올렸으며 기본형입니다. 해당 소스의 출처는 (http://chatv2.septapus.com/) 이곳에 있으며 폰트 조절이나 색깔 조정등도 링크된 사이트에서 가능 합니다. 참고하세요.
