[트위치 방송하는법, 방송세팅 #1] 트윕 채팅창 디자인 설정 및 적용하기 (Twip ChatBox)

요즘 트윕은 방송하는 사람들이라면 대부분 사용하고 있는 라이브 스트리밍 서포트 플랫폼 혹은 도네이션 플랫폼이다. 이 트윕에는 여러 기능들 중에 "ChatBox"라고 트위치 채팅을 라이브 방송화면에 채팅창으로 띄워놓을 수 있는 기능을 제공하고있다.

트윕 채팅창 사용하기

트윕 좌측 메뉴

트윕에 트위치 스트리머 계정으로 로그인을 하면 대쉬보드에서 이렇게 길다란 좌측 메뉴를 볼 수 있다. 우리는 이 중 [위젯] > [채팅창] 을 클릭하여 들어갈 것이다.

트윕 채팅창 설정 페이지

채팅창 메뉴에 들어가게 되면 이러한 페이지가 보이게 될 것이다. 영역 별로 순서대로 알아보자.

1. 오버레이

페이지 맨 상단에서 볼 수 있는 노란색 버튼을 클릭해보면, 오버레이라는 것을 선택할 수 있는 메뉴가 뜬다. 오버레이는 트윕 채팅창 설정 정보를 저장할 수 있는 일종의 저장슬롯같은 것이라고 생각하면 된다.

트윕 오버레이 기능

이런식으로 사용자가 지정한 제목으로 최대 5개의 오버레이(채팅창 설정정보)를 만들어 저장해둘 수 있다. 이렇게 오버레이를 여러개 저장해둘 수 있기 때문에 방송 중간중간 상황에 맞추어 빠르게 채팅창 디자인 전환할 수 있다.

2. 채팅창 디자인 미리보기 및 URL

트윕 채팅창 디자인 미리보기 및 URL

트윕은 자신이 적용한 채팅창 디자인을 데모를 통해 미리 확인 할 수 있도록 제공하고 있다. 그리고 미리보기 윗쪽을 보면, "클릭해서 URL 확인"이라는 부분이 있는데 저 URL은 OBS, XSplit과 같은 방송송출프로그램에 채팅창을 연결할 때 사용하는 URL이다. 이 URL이 자신이 아닌 다른 누군가에게 노출이 되면 내 채팅창을 다른사람이 이용할 수도 있어서 절대로 타인에게 URL을 노출해선 안된다.

3. 오버레이 제목 입력창

트윕 오버레이 제목 입력창

현재 채팅창 디자인 설정을 저장할 오버레이의 제목을 이 입력창에 기입하면 오버레이의 제목을 변경할 수 있다.
알아보기 쉽고 정렬된 이름일 수록 이후에 쉽게 찾아 사용할 수 있기 때문에 제목을 잘 정해서 기입하는걸 추천한다.

4. 채팅창 스타일(=디자인) 선택창

트윕 스타일 선택창

트윕은 기본적으로 여러가지 채팅창 스타일(=디자인)을 제공하고 있고, 자주는 아니지만 계속 디자인을 추가해가고 있다. 스타일 선택창에 있는 스타일들 중 하나를 선택하면 그 스타일이 적용되어 미리보기에 나타나게 된다.

커스텀CSS를 선택했을때의 모습

기본 스타일 CSS코드 가져오기

여기서 특별히 "커스텀 CSS"를 선택하게 되면 사용자가 직접 스타일을 수정할 수 있게 CSS 코드를 수정할 수 있는 코드입력창을 제공한다. 코드입력창을 통해 기존 스타일의 CSS코드를 수정하거나 완전히 새로운 스타일을 제작할 수도 있다. 스타일 커스터마이징에 대해선 이후 포스팅에서 알아보도록 하겠다.
필자가 이 커스텀CSS를 제작하는 작업을 아트머그를 통해 대행해주고 있다. 혹시 자신만의 특별한 디자인을 가진 채팅창을 사용하고 싶다면 필자에게 의뢰하여도 좋다. 아래 링크를 참고하길 바란다.
https://betaman-workshop.tistory.com/44

트윕/아프리카도우미 채팅창 디자인(CSS) 제작의뢰 오픈!/트위치/아프리카TV

5. 채팅창 스타일 세부 설정창

트윕 채팅창 스타일 세부 설정창

트윕에서 기본적으로 제공하는 스타일의 세부 설정을 조작할 수 있는 설정창이다. 이 설정창을 통해 채팅창의 배경색, 폰트, 폰트색, 폰트크기, 메세지 표시 시간(일정시간이 지나면 채팅 말풍선이 사라지게 하는 기능이다.), 아이콘 숨기기, 봇채팅 숨기기, 채팅을 보여주지 않을 유저의 아이디 설정, 멀티 채널 설정(한 채팅창에서 여러채널의 채팅을 하나로 모아서 보여주는 기능이다. 최대 5개의 채널을 하나의 채팅창으로 모아서 보여줄 수 있다.), 채널명 숨기기를 설정할 수 있다.
이 페이지에 있는 모든 설정 정보들은 민트색 "설정하기" 버튼을 클릭하여 저장하지 않으면 적용이 되지 않기 때문에 설정을 마친 후엔 꼭 설정하기 버튼을 클릭하여 저장해주자.

방송송출프로그램에 트윕 채팅창 적용하기

실시간 방송 화면에 트윕 채팅창을 띄우기 위해선 채팅창 URL을 복사해서 OBS 또는 Xsplit같은 프로그램에 넣어준 뒤 레이아웃을 잡아주어야 한다. 그 적용법은 트윕에서 공식적으로 제공하는 메뉴얼 동영상이 있으니 그것을 참고하도록 하자.

아직 OBS에 트위치 계정이 연동되지 않았다면 아래 글을 참고하길 바란다
https://betaman-workshop.tistory.com/47

[트위치 방송하는법, 방송세팅 #3] OBS와 트위치를 연동해보자

https://www.youtube.com/watch?v=-0577-80O64

https://www.youtube.com/watch?v=PIGf8brqWrE