필이의 1인 미디어 허쉴?

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

얼마 전에 OBS(Open Broadcaster Software) 프로그램에

소스 목록을 다루면서

디스플레이 캡쳐 소스에 원하는 영역을 지정해서

송출할 수 없다고 말씀드렸었는데요.

원하는 영역을 자르고 송출할 수 있는 방법을 알려주셔서

정정 겸 내용이 좀 길어서 새로 글을 올립니다.

obs 스튜디오 화면구성 둘러보기

본문은 수정하면 안된다고 들어서 당장 수정할지는

좀 더 검색을 해봐야 할 것 같습니다.

자 그럼 다시 OBS 프로그램을 시작하신 뒤에

소스 목록 영역에서 + 버튼을 누르신 뒤에

디스플레이 캡처를 한 번 생성 해보도록 하겠습니다.

그럼 컴퓨터화면이 보이실 겁니다.

obs 화면의 무한 캡쳐. 너무 오래두시면 CPU에 무리가 가서 렉이 걸리기도 합니다. 주의하세요.

여기서 빨간색 네모 칸에 표시된 영역만

OBS 프로그램에서 보이도록 설정해 보도록 하겠습니다.

이 부분만 자르면 방송을 보는 시청자들은

 빨간색의 영역의 부분만 볼 수 있을겁니다.

소스목록에서 방금 추가한 디스플레이캡쳐를

선택하시고 마우스 오른쪽 버튼을 누르신 뒤에

필터를 눌러 주시면

그럼 새로운 창이 나오는데 + 기호를 누르신 뒤에

자르기/덧대기 메뉴를 선택해 주세요.

OBS 프로그램에서

디스플레이캡쳐에서 원하는 영역을 자를 때

사용하는 기능이라고 생각하시면 됩니다.

제가 캡쳐한 화면이 오른쪽 부분에 보이기 때문에

잘라내는 부분이 얼마나 잘라 냈는지 확인이 가능 합니다.

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

오늘은 유튜브 트위치 카카오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를 이용한 채팅창 만들기를 해보았습니다.

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

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

안녕하세요 필이입니다.

이전 글에는 트위치 채팅창을 browser source로 넣어 보았습니다.

그래서 오늘은 브라우저 소스에 넣는 건 생략하고 유튜브 채팅창 위치와

채팅창을 나만의 스타일로 편집하는 기능을 알려드리도록 하겠습니다.

브라우저 소스 이용한 채팅창 넣기를 모르시는 분들은 트위치 채팅창 넣기를 참고해주세요.

트위치 채팅방 obs화면에 구성하기

일단 유튜브에 로그인 해주시고

자신의 프로필을 클릭하여 크리에이터 스튜디오로 들어갑니다.

스튜디오로 접속하면 우측 메뉴 칸에 실시간 스트리밍으로 들어갑니다.

실시간 스트리밍 화면 좌측 하단에 실시간 채팅 란에서

점이 3개 나란히 있는 더보기를 클릭하면 새 창에서 채팅 열기가 보이실 겁니다.

기존 스튜디오에서 채팅창만 따로 뜯어내는 기능이라고 생각하시면 됩니다.

새창으로 나온 채팅창 상단을 보시면 url이 있는데 이걸 복사해서 브라우저 소스에 붙여넣기 하시면 됩니다.

그럼 가장 기본적인 유튜브 채팅창이 뜹니다.

한조.... 한번도 해본적없는데 왜 적었을까요???

유튜브 채팅창은 기본적으로 채팅창을 크리에이터 스튜디오에서

수정할만한 기능을 가지고 있지 않습니다.

처음 유튜브 채팅창을 사용하고 컴퓨터 지식이 없는 분들에게는

고치고 싶은데 고칠 수 없게되는 거죠.

브라우저소스가 꼭 위에 있어야 합니다.

그래서 브라우저 소스에서 CSS 편집기능을 넣어

유튜브 채팅창이나 기타 url 들 중

수정이 가능한 것들을 수정해주는 기능이 있습니다.

사실 편집이 아니라 덮어씌우는 거지만

보는 사람의 눈에는 수정이니까요

https://chatv2.septapus.com/

반드시 크롬으로 접속해주셔야 합니다.

해당 링크로 접속하시면 우리가 흔히 보던 채팅창이 보이실 겁니다.

그 옆에는 채팅창을 글꼴 배경색 투명도 후원창

까지 모두 수정이 가능할 수 있도록 되어있습니다.

이제 여러분들이 자신의 취향대로 마음대로 꾸며주면 됩니다.

이때 폰트는 왠만하면 하나로 통일해주세요.

영어폰트라서 한글이 지원되지 않으면

그냥 평범한 고딕체 글이 나오기 때문에

폰트를 고치고 싶은 분들은 통일이 편합니다.

나중에 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 화면구성 둘러보기

OBS studio 좀 더 전문적인 설정으로 나의 PC환경에 맞추어 보자

스트리밍 프로그램을 골라보자 OBS studio로 스트리머 시작하기

안녕하세요 필이 입니다.

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

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

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

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

일단 트위치 방송 채팅창 송출을 위해서는 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로 스트리밍 시작해보기