유튜브 / 트위치 투명 채팅창

1. OBS 설정

<추가>브라우저 클릭>

<확인 클릭>

<빨강 : 필수영역, 파랑 : 고급영역>

설정에 필요한 내용은 빨강 박스의 필수영역과 고급 영역의 파란색 박스가 있습니다. 

1. URL : 유튜브 or 트위치 채팅창의 URL을 복사 붙여 넣기
2. CSS : 채팅창의 글꼴, 크기, 색, 기타 기능에 옷을 입혀 채팅창을 커스터마이징할 수 있습니다.(유튜브만 필요)
3. 너비, 높이 : 채팅창의 사각 박스 크기를 정합니다. 

 

2. 유튜브, 트위치 채팅창 URL 얻어내기

유튜브 채팅창 URL

<카메라 > 실시간 스트리밍 시작 클릭>

<새 창에서 채팅 열기 클릭>

<채팅창 URL 복사>

---

트위치 채팅창 URL

트윕 로그인(https://twip.kr/)

Twip - 트위치 스트리머를 위한 오버레이 도구

<복사하기 클릭>

지금까지 유튜브와 트위치의 URL을 획득 방법을 알아보았습니다.
트위치는 CSS의 기능을 트윕에서 바로 설정할 수 있어 OBS 브라우저 설정에서 CSS에는 다른 무언가를 작성할 필요가 없습니다.

URL을 얻었으면 OBS 브라우저 설정에 URL란에 붙여 넣기 해주세요

Tip.
1. 유튜브 : URL + CSS = 투명 채팅창
2. 트위치 : URL = 투명 채팅창

 

3. CSS 획득(유튜브)

CSS 획득 (링크)

<빨강 박스 CSS 정보>

다양한 옵션이 있습니다. 폰트 종류, 크기, 굵기 등 다양한 옵션들을 조정할 수 있고 'Example'에 바로 설정 값들이 적용되어 채팅창의 디자인을 바로 볼 수 있습니다. 원하는 설정값이 나왔다면
빨강 박스의 CSS 코드를 전체 복사해주세요!

 

4. 고급 방법(채팅창 크기 조절)

위 방법은 자신의 방송 레이어 아웃에 최적화된 채팅창을 오버레이 시키기 위한 고급 방법입니다. 필수는 아니니 참고하시기 바랍니다.

Tip.
1. 그림판 or 포토샵 캔버스 1920x1080 만들기
2. 자신의 방송 레이아웃 전체 캡처
3. 그림판 or 포토샵에 붙여 넣기
4. 채팅창 영역 선택 툴로 크기 확인(예시 빨강 줄 461x1015)
5. 측정된 값 넓이, 높이에 알맞게 입력

 

5. 최종 설정하기

<예시. 유튜브 채팅창 설정>

1~4번의 채팅창의 설정 요소들을 가지고 와서 특정 채널의 채팅창, 크기, 디자인 정보들을 조합하여 최종 결과물까지 얻어냈습니다.

이제 여러분들이 직접 실습하면서 자신의 기술로 만들어보세요!