필이의 1인 미디어 허쉴?

안녕하세요. 필이입니다.

오늘은 유튜브 트위치 카카오TV 통합 채팅창인 JSAssist 를 다루어 보겠습니다.

OBS는 역시나 브라우저 소스를 이용할 예정이기때문에 이전에 올린 글들을 먼저 읽고 오신다면

좀 더 쉽게 이해하실 수 있을겁니다.

트위치 채팅방 OBS studio에 구성하기

유튜브 라이브(YouTube Live) 나만의 채팅창 만들기

JSAssist를 다운 받으면 압축만 풀어주시면 설치할 필요 없이 바로 실행 할 수 있습니다.

처음 실행해주시면 엑세스 허용해주세요.

http://js-almighty.com/jsassist/

기본적으로 화면이 직관적이고 간단한 편이라

채팅창을 한번이라도 다루어 보신 분들이라면 간단하게 이용할 수있습니다.

게다가 여러 플랫폼에 송출하는 실시간 스트리머에게는

채팅창을 포괄적으로 한 채팅창에서 볼 수 있기때문에

여러 플랫폼의 채팅창을 올려둘 필요가 없습니다.

그리고 한 플랫폼만 사용하는 스트리머에게는,

특히 유튜브 스트리머에게는 편하게 채팅창을 설정할 수 있도록 해놓았기 때문에

전에 올려드렸던 유튜브 채팅창 설정 방법과는

비교가 안될정도로 쉽고 편하게 설정 할 수 있습니다.

이제 JSAssist 사용법을 알아보도록 하겠습니다.

JSAssist 화면에 왼쪽을 보시면 CHAT INTEGRATION에 보시면

모두 비활성화 되어있는걸 보실 수 있습니다.

각 플랫폼별로 설정이 있는데 설정에 나오는대로만 만 입력하시면 됩니다.

트위치와 유튜브는 아이디 만으로 연동이 가능하지만

카카오TV는 팟플레이어가 있어야 합니다.

아직 팟플레이어를 설치하지 않으셨다면 미리하시는게 편할겁니다.

http://tv.kakao.com/guide/potplayer

연동 성공 된걸 확인하시면 프로그램과 채팅창이 연결된겁니다.

연동되었어도 사용을 원치 않으시면 사용 체크박스를 해제 해주세요.

연결이 확인되었다면 화면 아래쪽으로 내려가셔서 다시 설정 창이 있습니다.

이 설정창을 눌어보시면 채팅창의 글꼴이나 투명도 색상 등을 바꿀 수 있도록 되어있습니다.

모두 한글로 되어있기때문에 읽어보시면서 본인 마음대로 설정을 바꾸시면됩니다.

혹시 여러 버전을 두고 비교해보고 싶으시다면

화면 좌측 프리셋에서 하고 싶은 스타일의 설정을 만들어놓고 추가를 누르시고 이름 지정하고

현재값으로 새 프리셋 추가를 누르시면 새 설정을 저장하실 수 있습니다.

모두 마치셨다면 최상단에 채팅 위젯 주소를 클릭하면 주소가 복사 됩니다.

따로 Ctrl+C는 안하셔도 됩니다.

이제 복사한 주소를 Browser source에 붙여넣기만 하면 채팅창 만들기가 끝이납니다.

그리고 브라우저 소스 넣으시고 잘 적용되었는지 확인하는 방법은

JSAssist 우측 하단에 테스트용 채팅을 체크해주시면

자동으로 여러 플랫폼에 채팅이 입력되어 나옵니다.

OBS 화면 에서도 잘 나온다면 적용까지 완벽히 된겁니다.

전에 만들었던 유튜브 채팅창 만들기보다 훨씬 쉽죠?

채팅 설정의 자유도도 비슷한 정도라서 처음 하시는 분들에게

특히 유튜브 Live 스트리머 분들에게 추천드립니다.

여러 플랫폼 동시에 실시간 스트리밍을 하시는 스트리머분들에게는 필수겠죠?

오늘은 JSAssist를 이용한 채팅창 만들기를 해보았습니다.

여러분의 방송이 매끄럽게 진행이 되도록 항상 새롭고 실용적인 글을 올리고자 노력하겠습니다.

필이였습니다.감사합니다.

안녕하세요 필이 입니다.

오늘은 트위치 실시간 스트리밍을 하시는분들을 위해서 방송 송출 화면에 채팅창을 띄우는 방법에 대해서 글을 써보려 합니다.

일전에 말씀드렸던 브라우저 소스를 가지고 기본적으로 채팅창을 넣는 방법은 다른 플랫폼들도 비슷합니다.

하지만 글꼴을 바꾸고 투명도를 디자인 하는 방법들이 달라서 저는 유튜브와 트위치를 각각 올려드리도록 하겠습니다.

다른 플랫폼에 경우 사용 경험이 없어서 따로 정리된 걸 공유하거나 통합된 툴을 하나 올려드리도록 하겠습니다.

일단 트위치 방송 채팅창 송출을 위해서는 Twip이라는 사이트( http://twip.kr/ )에 들어가야합니다.

그리고 사이트를 이용할 때는크롬으로 실행해주셔야합니다.

링크를 눌러 들어가시면 위와 같은 페이지가 뜰텐데, 로그인을 해주시면 됩니다.

회원가입은 트위치에 계정을 가지고 있다면 안하셔도 되고 회원가입을 하셔야 한다면 트위치에서 회원가입을 하신 다음에

트위프에 접속하시면 됩니다.

로그인 하셨다면 우리는 스트리밍 기능을 가져와야하니까 스트리머 로그인 버튼을 클릭해서 접속합시다.

그리고 이제 대시보드를 클릭하신다면 관리자 페이지(대시보드)가 뜹니다.

여러 기능들이 있지만 우리는 채팅방이 필요하니 좌측 아래 메뉴들 중에서 chat box로 들어가 줍니다.

이제 chat box 메뉴로 이동하시면 우측에 보이는 것처럼 채팅창 모양이 미리보기로 보입니다.

미리보기는 내가 선택한 글꼴이나 배경색 들을 미리 보면서 조절하는

곳으로 생각하시면 됩니다.

스크롤을 조금 내려 하단에 위치한 설정을 만져주시면 됩니다.

배경색상을 투명하게하거나 어둡게 할 수도 있고 글자색과 글꼴도 변경이 가능합니다.

자 이제 설정을 마쳤다면 다시 스크롤을 올리셔서

오버레이 주소에서 ‘주소 보기’를 눌러주시고, 나오는 주소를 복사해주시면 됩니다.

복사한 주소를 가지고 OBS studio로 돌아가서 소스 목록에서 + 버튼을 눌러 Browser Source를 선택해 만듭니다.

소스 만들기/선택 창에서 채팅창이라고 이름을 바꿔주세요. 아니면 그냥 넘어가셔도 됩니다.

이벤트 중이라 글쓰면서도 소녀들을 지휘하느라 여념이 없습니다. ^^;;;

생성 후에 만들어진 채팅방에 우클릭을 하고 ‘속성’을 누르시면 창이 뜹니다.

URL에는 아까 우리가 복사한 트위치 방송 채팅창 주소를 입력하고

Width와 Height는 채팅창이 보이는 영역의 크기를 본인에게 맞게 지정해주시면 됩니다.

캔버스에서는 크기는 변형이 가능하나 가로 세로 비율 변경이 안되니까

여러번 왔다갔다 하시면서 본인 화면에 맞는 크기로 조절해주세요.

그리고 캔버스에서 빨간색 테두리로 지정된 영역을 자신이 놓고 싶은 부분에 놓아주시면 설정이 완료됩니다.

만약에 채팅창이 보이지 않는다면 소스목록에서 채팅장을 드래그해서 가장 위로 올려주시면 됩니다.

일러, 포토샵이나 파워포인트 만져보신 분들은 아시겠지만 우클릭해서 제일 위로 올려주셔도됩니다.

화면이 차곡차곡 쌓여있는 거기 때문에 밑에 있으면 안보입니다.

트위치 같은 경우 채팅방의 글꼴 등을 chat box에서 언제나 바꿀수 있기때문에

브라우저 소스의 기본 사용법만 알면 쉽게 사용할 수 있습니다.

브라우저 소스 설정창에서 CSS가 보이실텐데 이걸 통해서 나만의 채팅창을 꾸밀 수도 있습니다.

그건 유튜브를 이용한 채팅창을 등록할 때 다루어볼겁니다.

처음에는 시청자가 없어서 채팅창이 한가하거나 아예 없을 수도 있습니다.

자신이 동경하는 스트리머가 있어서 처음 스트리머에 접하는 분들에게

처음부터 엄청난 시청자수를 바라는건 헛된 꿈이겠죠.

하지만 열심히 하다보면 시청자들도 늘어날겁니다.

시청자수는 하나의 지표 정도로 생각하시고 본인이 스트리밍을 통해서 얻고자 하는걸 생각하시면 꾸준히 하는 것이 답인 것 같습니다.

시청자들이나 구독자들이 별로 없어도 자신은 행복하다는 스트리머나 크리에이터 분들도 많으시니까요.

즐겁게 지속가능하게 하실수 있는 컨텐츠를 찾기바랍니다.

오늘도 여러분의 1인 미디어를 응원하며 마치겠습니다.

필이였습니다.

감사합니다.

OBS studio 화면구성하기

OBS studio 세세하게 설정 건드려보기

OBS studio로 스트리밍 시작해보기