안녕하세요 필이입니다.
이전 글에는 트위치 채팅창을 browser source로 넣어 보았습니다.
그래서 오늘은 브라우저 소스에 넣는 건 생략하고 유튜브 채팅창 위치와
채팅창을 나만의 스타일로 편집하는 기능을 알려드리도록 하겠습니다.
브라우저 소스 이용한 채팅창 넣기를 모르시는 분들은 트위치 채팅창 넣기를 참고해주세요.
일단 유튜브에 로그인 해주시고
자신의 프로필을 클릭하여 크리에이터 스튜디오로 들어갑니다.
스튜디오로 접속하면 우측 메뉴 칸에 실시간 스트리밍으로 들어갑니다.
실시간 스트리밍 화면 좌측 하단에 실시간 채팅 란에서
점이 3개 나란히 있는 더보기를 클릭하면 새 창에서 채팅 열기가 보이실 겁니다.
기존 스튜디오에서 채팅창만 따로 뜯어내는 기능이라고 생각하시면 됩니다.
새창으로 나온 채팅창 상단을 보시면 url이 있는데 이걸 복사해서 브라우저 소스에 붙여넣기 하시면 됩니다.
그럼 가장 기본적인 유튜브 채팅창이 뜹니다.
한조.... 한번도 해본적없는데 왜 적었을까요???
유튜브 채팅창은 기본적으로 채팅창을 크리에이터 스튜디오에서
수정할만한 기능을 가지고 있지 않습니다.
처음 유튜브 채팅창을 사용하고 컴퓨터 지식이 없는 분들에게는
고치고 싶은데 고칠 수 없게되는 거죠.
브라우저소스가 꼭 위에 있어야 합니다.
그래서 브라우저 소스에서 CSS 편집기능을 넣어
유튜브 채팅창이나 기타 url 들 중
수정이 가능한 것들을 수정해주는 기능이 있습니다.
사실 편집이 아니라 덮어씌우는 거지만
보는 사람의 눈에는 수정이니까요
반드시 크롬으로 접속해주셔야 합니다.
해당 링크로 접속하시면 우리가 흔히 보던 채팅창이 보이실 겁니다.
그 옆에는 채팅창을 글꼴 배경색 투명도 후원창
까지 모두 수정이 가능할 수 있도록 되어있습니다.
이제 여러분들이 자신의 취향대로 마음대로 꾸며주면 됩니다.
이때 폰트는 왠만하면 하나로 통일해주세요.
영어폰트라서 한글이 지원되지 않으면
그냥 평범한 고딕체 글이 나오기 때문에
폰트를 고치고 싶은 분들은 통일이 편합니다.
나중에 CSS 편집이 익숙해지면 얼마든지 바꿀 수 있습니다.
저처럼 폰트를 통일하셨다면 1줄만 보이실 겁니다. 폰트 종류만큼 줄이 증가합니다.
완성이 되었다면 스크롤을 밑으로 내리면
우리에게 생소한 컴퓨터 언어들이 엄청나게 많을 겁니다.
이제 이 언어들이 채팅창을 바꿔주는 명령어들인데
모두 복사해서 브라우저 소스에 CSS 창에 넣어주도록 합니다.
유튜브 채팅창에 아무거나 써보시면서
내가 원하던대로 채팅창의 투명도나 색이 잘 들어가 있는지
글씨가 너무 크거나 작지 않은지 모두 확인해보도록 해야합니다.
이때 채팅창에 오류가 뜬다면?
유튜브에 실시간 대시보드에 들어가셔서 밑으로 내려가다보면
공개설정이란게 있습니다. 이걸 공개로 바꿔 주셔야합니다.
그래도 채팅이보이지 않는다면 CSS를 모두 복사해서 붙여넣기 하지않아서 있을 수도 있고
지난번 처럼 브라우저소스가 소스목록 맨위에 없어서 일수도 있습니다.
알맞게 잘 적용이 되었다면 유튜브 채팅창을 브라우저 소스에 삽입하기 완료 되었습니다.
그냥 한글이 평범한 고딕이더라도 이게 마음에 든다고 생각하시면 그대로 사용하시면 됩니다.
나름 괜찮습니다. 폰트를 변경하고 싶으시다면 한글 폰트를 찾아 수정해주셔야 합니다.
브라우저 소스에 있는 채팅창 CSS를 메모장 등에 복사해서 붙여넣기 합니다.
https://fonts.google.com/earlyaccess
해당 링크에서 Ctrl + F로 korean을 검색해서 한글이 되는 폰트를 찾아봅시다.
괜찮은걸 찾았다면 @import url~~~~.css); 되었는 코드를 복사해줍니다.
메모장에 있는 @import url~~~~을 지우고
복사한 @import url~~~~.css); 를 붙여넣기 합니다.
그리고 문단 중간 중간에 여러 개의 font-familly: 를 찾아
뒤에 있는 “수정 전 폰트”를 “ 맨 위에 붙여넣기한 폰트”를 넣어주면 css는 수정이 완료 되었습니다.
이를 앞에 했던 것처럼 브라우저 소스에 css를 넣어주고 폰트가 변경된걸 확인하면 완성입니다.
 폰트 변경 전 |
제가 생각하기에는 이번 글은 꽤나 어려운 부분이 아니었나 싶네요.
그래도 천천히 따라 하다 보시면
나만의 유튜브 채팅창을 얻을 수 있는 굉장한 자유도가 있습니다.
여러분이 실시간 스트리밍을할 때
자신만의 개성이 듬뿍 담긴 채팅창을 상상하며 만들어보시기 바랍니다.
여러분의 1인 미디어를 응원하는 필이 였습니다.
다음 글은 좀 더 수정이 자유롭고 유튜브, 트위치, 카카오TV의
통합 채팅창인 JSAssist에 대해서 알아보도록 하겠습니다.
감사합니다.
OBS studio 좀 더 전문적인 설정으로 나의 PC환경에 맞추어 보자