메뉴 건너뛰기

나는 갈 데가 없다

트위치에서 방송하기

1. OBS 세팅하기 http://www.haganai.me/life/225922

2. 장면 설정하기 http://www.haganai.me/life/225948

3. 채팅과 기부, 팔로우 알람 넣기 http://www.haganai.me/life/225966

4. 투네이션 알아보기 http://www.haganai.me/life/226014

-------------------------------------------------------------------------------------------------


최근 트위치나 유튜브, 팟 방송을 보면 화면 내에 채팅을 표시하는 경우가 많습니다.

또 팔로우 하면 팔로우 했다는 알람이 뜨고, 기부를 통해 스트리머에게 원하는 메세지를 전달하거나, 다른 시청자와 함께 영상을 볼 수도 있습니다.

우리도 따라 해 봅시다.


1. 채팅 표시하기

현재 OBS 및 트위치는 자체적으로 채팅을 화면에 표시해주는 기능을 지원하지 않고 있기 때문에 다른 서비스를 이용해야 합니다.


다양한 서비스가 있지만 '투네이션' 이라는 서비스를 통해 채팅을 표시 해 보도록 합시다.


우선 투네이션에 접속합니다. https://toon.at/


27.PNG


우측 상단의 로그인 버튼을 클릭합니다


28.PNG


'스트리머 입니다' 를 클릭합니다.


29.PNG


'Twitch' 항목을 클릭합니다.


30.PNG


트위치에 로그인 되어 있지 않을 경우 먼저 트위치 아이디와 비밀번호를 묻는 창이 뜹니다. 입력합시다.

로그인 화면에서 로그인 한 뒤, 혹은 이미 트위치에 로그인 되어있을 경우 아이디와 함께 위와 같은 창이 뜨는데, 권한 부여 버튼을 클릭합시다.


31.PNG


로그인이 완료되면 좌측 메뉴에서 채팅 목록을 클릭합니다.



32.PNG

채팅 목록 메뉴에서 스크롤을 조금만 내리면 설정 항목이 있습니다.


효과 애니메이션 설정: 채팅이 새로 올라올 때 어떤 효과를 줄 지 설정할 수 있습니다. (우측 미리보기 박스를 통해 바로 확인할 수 있습니다.)

폰트: 현재 기본 폰트와 나눔고딕을 사용할 수 있습니다. 나눔고딕 사용을 추천합니다.

텍스트 색상: 채팅 내용의 색을 설정할 수 있습니다. 검은색의 경우 #000000, 흰 색의 경우 #FFFFFF 를 입력하면 됩니다. 다른 색을 원할 경우 http://html-color-codes.info/Korean/ 에서 원하는 색상의 RGB 값을 확인하세요.

텍스트 크기: 채팅 내용의 글자 크기입니다. 25~30 사이를 추천합니다.

닉네임 색상: 설정하지 않으면 트위치에서 시청자가 설정한 색이 표시됩니다. 시청자 설정을 무시하고 한 가지 색상으로 표시하고 싶은 경우 옵션을 켜고 원하는 색상을 설정하세요.


상자 테두리: 테두리 없음을 사용할 경우 아래 이미지의 윗쪽 처럼, 사용할 경우 아랫쪽 처럼 표시됩니다. 취향에 따라 선택하세요.


33.PNG



원하는대로 설정했다면 가장 아래에 있는 저장버튼을 누른 뒤, 상단에 있는 위젯 URL 주소를 복사하세요.

그래요. 여기 있는거요.


34.PNG


저 주소를 복사했다면 다시 OBS로 돌아와서


35.PNG


추가 (아래의 + 버튼을 눌러도 됩니다) > BrowserSource를 클릭해줍니다.


36.PNG


자신이 알아보기 쉬운 적당한 소스명을 입력 하고 확인을 누릅시다.


37.PNG


요런 창이 뜨는데 일단 URL 목록에 아까 복사한 주소를 붙여넣기 하고 확인을 누릅시다.


38.PNG


아무것도 안 뜨지만 정상입니다. 당황하지 마시고 트위치에 로그인 한 상태에서 https://www.twitch.tv/dashboard 에 접속한 다음, 채팅창에 뭐라도 채팅을 쳐 보세요.


39.PNG


이렇게 채팅창에 채팅을 쳐 보면


40.PNG


아까 추가한 채팅 소스에 정상적으로 채팅이 추가되는걸 확인 할 수 있습니다.


근데 채팅 사이즈가 제 맘에 들지 않습니다. 좀 바꿔보죠. 그냥 눌러서 크기 조절 하면 될 것 같지만 여기서 화면 조정했던 것 마냥 소스 선택 -> 마우스로 크기조정 하시면 안 됩니다.


41.PNG


아까 만든 채팅 소스를 우클릭 한 다음 속성을 클릭합시다.


42.PNG


설정 창이 뜨면 Width (가로) Height (세로) 값을 적당한 값으로 지정하고 확인을 누르고, 다시 채팅창으로 돌아가 채팅을 남겨봅시다.


43.PNG


제가 원하는 사이즈로 조정되었습니다.


만약 조정한 사이즈도 맘에 들지 않는 경우 다시 크기를 조절한 뒤, 채팅을 입력해서 확인하시면 됩니다.


44.PNG


사이즈 조절이 끝났다면 적당한 위치로 옮겨주시면 됩니다.


2. 기부/호스팅/팔로우 알람 화면에 띄우기

채팅도 방송에 나오겠다. 이제 기부를 받거나, 팔로우을 받았을 때 방송 화면에 표현하는 방법을 알아 봅시다.

* 알람에 대한 내용, 설정을 바꾸는 부분은 다음 시간에 배워보고, 이번 시간에는 OBS에 세팅하는 방법을 배워 봅니다.



다시 투네이션에 접속한 뒤 스트리머로 로그인 합니다. https://toon.at/



좌측의 위젯관리 - 기부 화면 메뉴를 클릭합니다.

45.PNG




46.PNG  

위젯 URL 항목의 주소를 복사 해 주세요


47.PNG


채팅창 삽입할때 했던 것 처럼 브라우저 소스를 추가 해 주세요


48.PNG

역시나 자신이 알아보기 쉬운 이름으로 설정합니다


49.PNG


URL 항목에 아까 복사한 위젯 주소를 입력하고 확인 버튼을 누릅니다.


50.PNG


역시나 아무것도 안 나옵니다. 하지만 확인은 미리 해 봐야겠죠. 투네이션 스트리머 페이지로 돌아갑니다.


53.PNG


잘 보시면 위젯 URL 아래에 각종 테스트 버튼이 있습니다. 여기서 기부 테스트를 눌러보시면


51.PNG


실제 기부를 받았을 때 어떻게 표시되는지 확인 할 수 있습니다.


또한 팔로우 테스트를 누르면


52.PNG


팔로우 받았을 때 어떻게 표시되는지도 확인 할 수 있습니다.


이 테스트 버튼을 활용해 크기를 조절하고 (채팅과 마찬가지로 화면상에서 조절하시면 안 됩니다. 위 채팅 삽입 설명을 참고하셔서 해상도 조절을 통해 크기를 조절하세요)

적당한 위치에 자리잡도록 설정하시면 됩니다.


3. 기부 링크 넣기


팔로우는 트위치에서 기본적으로 제공 해 주는 기능이기때문에 OBS에 설정하는 것 만으로 끝이지만, 기부(도네이션)의 경우 트위치가 아닌 서드파티 (타 업체)를 통해 제공하는 기능이기 때문에 시청자가 기부 링크에 접근할 수 있도록 약간의 설정이 필요합니다.


우선 자신의 트위치 채널에 접속 해 봅시다. 자신의 채널은 로그인 한 뒤 트위치 상단 메뉴에서 자기 아이디 클릭 > 채널을 클릭해 접속 할 수도 있고, https://www.twitch.tv/(자신의 Id)를 주소창에 입력해 접속 할 수도 있습니다.


54.PNG


자신의 채널에 접속했다면 하단의 패널 편집 좌측의 버튼을 눌러봅시다.


55.PNG


그럼 요런 창이 뜨는데 저 + 자가 적혀있는 박스를 눌러 새 패널을 생성하고, 다시 투네이션 스트리머 페이지로 돌아갑시다.



56.PNG


대쉬보드 메뉴를 보다보면 기부 링크라는 주소가 있습니다.


저 두 개의 주소 중 맘에 드시는 주소를 하나 복사 해 주세요


57.PNG

Panel Title: 패널 제목입니다. 큰 글씨로 패널의 가장 위에 표시됩니다.

Add Image: 이미지를 업로드 합니다. 적당한 이미지가 없을 경우 투네이션 대시보드 페이지에서 이미지를 다운받을 수 있습니다.

Image Links to: 이미지를 누르면 이동할 주소를 입력합니다. 아까 복사한 기부 링크를 입력합니다.

Description: 설명입니다. 이미지 아래에 표시할 텍스트를 입력합니다.


* 링크 주소 뒤에 공백이 있으면 링크가 정상적으로 동작하지 않습니다.

* 이미지 없이 텍스트로만 기부 링크를 달고 싶으신 경우 Description 창에 [기부하기](https://toon.at/donate/hare9/1)  와 같은 형식으로 입력해 주시면 됩니다.


위 네가지를 모두 입력하셨다면 Submit 버튼을 눌러 저장합시다.


58.PNG


Submit 버튼이 비활성화 된 것을 확인한 다음, 패널편집 좌측의 버튼을 눌러 패널편집을 종료합니다.


59.PNG

편집모드가 종료되면 이미지를 클릭 해 정상적으로 링크가 동작하는지 확인 해 봅시다.


60.PNG


위와 같이 자신의 기부 링크로 이동하면 성공입니다.




지금까지 트위치에서 방송하기 위해 꼭 알아야 할 기본적인 내용들을 알아 봤습니다. 다음 시간에는 이번시간에 사용한 '투네이션' 서비스의 자세한 설정법을 배워보도록 하겠습니다.

번호 제목 글쓴이 날짜 조회 수
242 트위치에서 방송하기 - 5 투네이션 알아보기 (2/2) file 하레 2016.11.27 368
241 트위치에서 방송하기 - 4 투네이션 알아보기 (1/2) file 하레 2016.11.27 1945
» 트위치에서 방송하기 - 3 채팅과 기부, 팔로우 알람 넣기 file 하레 2016.11.27 4113
239 트위치에서 방송하기 - 2 장면 설정하기 file 하레 2016.11.27 1669
238 트위치에서 방송하기 - 1 OBS 세팅하기 file 하레 2016.11.27 7660
237 아리스쨩으로 합성을 해 보아요! [1] file 하레 2016.06.20 554
236 드디어 GTX 1080을 장착했습니다. [8] file KITT 2016.05.27 112
235 Icecast2와 foobar2000 조합으로 음악 방송하기 [2] file 워나힐 2016.04.11 1341
234 이거 이 가격에 사면 후회 안함? [9] file 갓랄 2016.02.28 114
233 사과농장에 오랜만에 물좀 줬더니 뭐가 났네 [1] file 하야테2 2015.11.14 134560
232 전자사전 [2] Naitre=네트르 2015.08.01 58
231 AK100과 e11k의 조합 [3] file 하야테2 2015.07.16 71
230 나는 오늘만 산다...! [8] file KITT 2015.07.15 191
229 Astell & Kern AK100 ii가 어쩌다 보니 두대가 제 손안에... [2] 하야테2 2015.07.15 135
228 아스텔엔컨 ak100 2세대 하나자와 카나 에디션 판매시작 [3] file 하야테2 2015.07.11 227
227 라데온 차세대 플래그쉽 VGA - FURY [2] 사람사는곳 2015.06.16 69
226 막귀의 아이리버 AK100 리뷰 [5] 하야테2 2015.06.10 77
225 다시 올림 [9] file Naitre=네트르 2015.06.05 92
224 혼돈의 디씨위키 그리고... [15] file 미숫가루 2015.06.04 135
223 근황 [3] Naitre=네트르 2015.06.02 65
위로