【OBS 지원】댓글 위젯

OBS에서 사용하는 댓글 위젯

댓글 위젯은 YouTube 라이브 채팅을 원하는 디자인으로 방송 화면에 표시하는 OBS용 위젯입니다. 댓글은 YouTube 공식 API(YouTube Data API)로 가져오기 때문에 Google 계정 연동이나 방송자 측의 설정 변경이 필요하지 않습니다.

사용 방법은 컨트롤러에 방송 URL을 붙여 넣고 '연결'을 누른 뒤, 발급된 전용 URL을 OBS의 '브라우저' 소스에 추가하기만 하면 됩니다.

폰트·글자 색상·박스의 채우기와 테두리까지 조정할 수 있어, 채팅창을 그대로 비추는 대신 방송 화면 분위기에 맞춘 모습으로 보여줄 수 있습니다.

YouTube 라이브에 연결하기

어느 방송의 채팅을 표시할지는 댓글 컨트롤러에서 지정합니다. 연결 순서는 다음과 같습니다.

1. 댓글 컨트롤러를 엽니다. 편집 화면 아래에 표시되며, OBS 연동에서 별도 창으로 열거나 QR 코드를 읽어 스마트폰에서 열 수도 있습니다.
2. 방송 URL을 입력란에 붙여 넣습니다.
3. '연결'을 누릅니다.

입력란에는 다음 형식을 붙여 넣을 수 있습니다.

• 일반 시청 URL(youtube.com/watch?v=…)
• youtu.be 단축 URL
• youtube.com/live/… 형식
• 동영상 ID(11자) 그대로

연결되면 동영상 ID와 연결 일시가 표시됩니다. 'YouTube에서 열기'로 연결된 방송 페이지를 확인할 수 있습니다.

지원하는 것은 YouTube에 공개되어 있는 라이브 방송의 실시간 채팅입니다. 실시간 채팅이 열려 있는 방송에만 연결할 수 있어, 종료된 방송이나 다시보기, 일반 동영상의 URL을 지정하면 '이 동영상에는 현재 실시간 채팅이 열려 있지 않습니다'라고 표시됩니다.

방송이 끝나면 댓글 가져오기는 자동으로 멈추고 그대로는 다시 시작되지 않습니다.

• 다음 방송을 표시할 때는 새 방송의 URL을 붙여 넣어 다시 연결합니다.
• 같은 방송인데 댓글이 올라오지 않을 때는 '다시 연결'을 누르면 가져오기를 처음부터 다시 시도합니다.
• 표시를 멈추고 싶을 때는 '연결 해제'를 누르면 연결이 해제됩니다.

표시 커스터마이즈하기

디자인은 위젯 편집 화면에서 설정합니다. 먼저 '템플릿에서 선택'으로 준비된 디자인을 고르고, 거기서 세부 사항을 조정해 나가는 것이 빠른 방법입니다.

편집 화면 오른쪽에는 댓글 목록 전체의 '박스 스타일'과 댓글 종류별 '댓글 스타일'이 나란히 있습니다.

박스 스타일

'박스 스타일'은 댓글 목록을 감싸는 패널의 설정입니다.

• 패널의 채우기·테두리·모서리 둥글기·패딩
• 너비와 높이
• 댓글의 '정렬'과 댓글 사이의 '간격'

그 아래의 '흐르는 방향'에서는 새 댓글이 들어오는 쪽과 댓글이 흘러가는 방향을 네 가지 아이콘에서 고릅니다. 막대 쪽에서 들어와 화살표 방향으로 흐릅니다.

댓글 스타일(편집 패널)

'댓글 스타일'에는 '일반 댓글', '멤버십', '슈퍼챗', '소유자', '모더레이터', '멤버' 6가지가 나란히 있습니다. 어느 것을 눌러도 같은 편집 패널이 열립니다.

편집 패널의 왼쪽은 배치를 바꾸는 미리보기, 오른쪽은 탭으로 바뀌는 설정입니다. 작성자 이름과 본문은 미리보기로 끌어다 놓아 자리를 정할 수 있습니다. 미리보기에서 요소를 누르면 해당 탭으로 옮겨가고, 탭을 누르면 그 요소가 선택됩니다.

탭별로 설정할 수 있는 항목은 다음과 같습니다.

• '전체' 탭 — 세로 / 가로·'본문과 같은 줄'·정렬·배분·간격과, 한 건마다의 채우기·테두리·모서리 둥글기·패딩·그림자
• '본문'·'작성자 이름' 탭 — 폰트·글자 간격·글자 색상·외곽선·그림자
• '본문' 탭만 — 줄바꿈된 줄을 왼쪽 / 가운데 / 오른쪽으로 모으는 '텍스트 정렬'과, 본문만 안쪽으로 들이는 '마진'

테두리에는 두께와 함께 '변'과 '선 종류' 메뉴가 나란히 있습니다. 색을 지정하기 전에는 조작할 수 없습니다.

• '변'은 전체 / 위 / 오른쪽 / 아래 / 왼쪽 / 커스텀 중에서 고릅니다.
• '커스텀'을 고르면 변마다 두께를 정할 수 있습니다. 0으로 둔 변은 그려지지 않습니다.
• '선 종류'는 실선 / 파선 / 점선 중에서 고릅니다.

작성자 이름과 슈퍼챗의 금액은 행 박스 안뿐 아니라 박스 위 / 아래에도 놓을 수 있습니다.

• 미리보기의 행 위아래로 끌어다 놓거나, '작성자 이름'·'금액' 탭의 '배치'에서 고릅니다.
• 좌우 위치는 왼쪽·가운데·오른쪽에서 고를 수 있습니다.
• 같은 쪽에 둘 다 놓으면 한 줄에 나란히 놓이며, 각각 왼쪽·가운데·오른쪽을 고를 수 있습니다.

폰트

폰트는 '본문'·'작성자 이름'·'금액'·'멤버십' 각 탭에서 서체·굵기·기울임을 한 묶음으로 고릅니다. 고른 폰트는 그 요소에만 적용됩니다.

• 글자 크기는 일반 댓글의 '전체' 탭에서 정합니다.
• '금액' 탭에서는 폰트(서체·굵기·기울임·글자 간격)도 본문과 따로 지정할 수 있습니다.
• 멤버십·슈퍼챗·'소유자'·'모더레이터'·'멤버'의 탭은 지정하지 않으면 일반 댓글의 같은 탭 폰트를 따릅니다. '일반 댓글의 폰트 이어받기'로 되돌릴 수 있습니다.

장식

'전체' 탭의 '장식'에서 댓글 1건의 박스에 아이콘·선·이미지를 합쳐 최대 8개까지 겹칠 수 있습니다. '+ 장식 추가'에서 종류를 고릅니다.

위치는 어느 종류든 '기준점'과 거기서의 X / Y로 정합니다. X는 오른쪽, Y는 아래쪽이 +입니다. 아이콘과 이미지의 기준점은 박스의 9곳, 선의 기준점은 각 변의 가운데입니다.

겹치는 쪽은 '박스 위'와 '박스 아래' 중에서 고릅니다. 박스 밖으로 튀어나오게 두어도 잘리지 않습니다.

아이콘

• '아이콘'에서 'Fluent Emoji'나 'Tabler Icons'의 아이콘을 고릅니다.
• 기준점으로부터의 위치·크기·회전·좌우 반전과 겹치는 쪽을 정합니다.
• 미리보기의 아이콘은 드래그로 옮길 수 있습니다. 누르면 나오는 핸들로 크기와 방향도 바꿀 수 있습니다(Shift를 누른 채 돌리면 15° 단위).
• Tabler Icons 아이콘은 색을 고를 수 있습니다. 설정하지 않으면 본문 색이 됩니다(이어받은 종류에서도 일반 댓글에서 보이는 색 그대로입니다).
• 선으로 그린 Tabler Icons 아이콘은 '선 두께'도 바꿀 수 있습니다.

선

• '선'을 고르면 박스의 한 변(왼쪽 / 오른쪽 / 위 / 아래)을 따라 선을 놓을 수 있습니다.
• 길이는 변 길이의 %와 px 보정으로 정합니다. 박스 크기에 맞춰 늘고 줄어듭니다(100%와 -24px이면 양 끝을 12px씩 비웁니다).
• '선 종류'는 실선·파선·점선·이중선·물결선·지그재그 중에서 고를 수 있습니다. '두께'는 어느 종류든 선 자체의 두께입니다.

• 파선·점선·물결선·지그재그는 '간격'으로 선이나 점의 틈과 물결 마루의 너비를 바꿀 수 있습니다. 비워 두면 두께에 맞춰 자동으로 정해집니다.
• '끝 모양'은 '둥글게'와 '각지게' 중에서 고를 수 있습니다(점선에는 적용되지 않습니다).
• 색을 정하지 않으면 박스의 테두리 색(테두리가 없으면 본문 색)이 됩니다. 테두리 색을 넣은 슈퍼챗에서는 금액대의 색에 맞춰집니다.
• 선은 글자를 피하지 않으니 '패딩'으로 글자 쪽을 비워 주세요.

이미지

• '이미지'를 고르면 파일 선택 화면이 열립니다. 업로드해 둔 이미지를 고르거나 새 이미지를 업로드해 놓을 수 있습니다.
• 위치·회전·좌우 반전·겹치는 쪽은 아이콘과 같습니다. 크기는 '너비'로 정하며, 높이는 이미지의 가로세로 비율에 맞춰집니다.
• '이미지 변경'으로 다른 이미지로 바꿀 수 있습니다.
• 이미지 추가와 교체는 프로 플랜 이상의 기능입니다.

템플릿 그린 가든이 아이콘, 네온 사인이 선을 쓴 예입니다.

슈퍼챗·멤버십

멤버십과 슈퍼챗은 본문과 다른 디자인으로 눈에 띄게 만들 수 있습니다. '멤버십'과 '슈퍼챗'도 같은 한 장의 편집 패널로 열리며, 그 종류만의 배치와 박스·본문·작성자 이름을 설정할 수 있습니다.

• 멤버십이면 '멤버십', 슈퍼챗이면 '금액'도 다룰 수 있습니다.
• '+ 그룹'으로 그릇을 만들어 한꺼번에 옮기거나 채우기·테두리·모서리 둥글기·패딩을 줄 수 있습니다. 그룹의 채우기에는 행 박스와 같은 패턴이나 그러데이션도 쓸 수 있습니다.
• 세 개 이상 늘어서 있을 때 요소를 다른 요소의 옆(세로면 좌우, 가로면 위아래)에 놓으면 그 둘이 자동으로 하나의 그룹이 됩니다.

슈퍼챗의 '색 지정 방식'은 '슈퍼챗'을 열면 제목 줄에 있습니다.

• '금액별로 색 구분'을 고르면 금액대별로 색을 바꿀 수 있습니다.
• '단색으로 고정'이면 금액과 관계없이 같은 색이 됩니다.

'금액별로 색 구분'일 때는 그 오른쪽에 '전체'와 1~7의 선택이 나옵니다.

• '전체' — 티어 1~7의 견본이 세로로 늘어서서, 금액대별 색을 한눈에 보면서 배치·작성자 이름·금액을 편집할 수 있습니다. 어느 행에 끌어다 놓아도 배치는 7행 모두에 반영됩니다.
• 티어 번호 — 그 견본 한 줄만 남고, '박스'와 '본문' 두 가지로 그 티어의 박스와 글자 색상을 설정합니다.

역할(소유자·모더레이터·멤버)

'소유자', '모더레이터', '멤버'도 같은 한 장의 편집 패널로 열립니다. 작성자에게 그 역할이 있는 일반 댓글이 해당 행이 되며, 그 역할만의 배치·박스·본문·작성자 이름을 덮어쓸 수 있습니다.

• 아무것도 설정하지 않으면 일반 댓글과 같은 모습 그대로입니다.
• 손댄 뒤에 '전체' 탭의 '일반 댓글의 설정으로 되돌리기'를 누르면 배치와 박스가 일반 댓글의 설정으로 돌아갑니다.
• 작성자 이름의 색은 그 역할에 색을 고르기 전까지 일반 작성자 이름의 색을 따릅니다. 아래의 '일반 작성자 이름 색상 이어받기'로 되돌릴 수 있습니다.

YouTube 로고에 대하여

방송 화면에는 YouTube 로고가 표시됩니다. YouTube에서 가져온 댓글을 표시하고 있음을 분명히 하기 위한 표시입니다.

로고는 댓글 영역 바깥쪽 오른쪽 아래에 작게 표시되며, 설정에서 숨길 수 없습니다. 로고를 클릭하면 연결 중인 방송 페이지가 열립니다.

참고: YouTube API Services의 Developer Policies

가져오는 정보와 취급

댓글 위젯이 가져오는 것은 연결을 지시한 방송에 대해 YouTube에 공개되어 있는 실시간 채팅 정보뿐입니다. 구체적으로는 다음 정보입니다.

• 댓글 본문과 게시 일시
• 작성자의 표시 이름·아이콘 이미지 URL·채널 ID
• 작성자의 속성(방송자·모더레이터·멤버·인증된 채널의 구분)
• 슈퍼챗과 멤버십에 관한 이벤트 정보
• 연결 대상을 특정하기 위한 정보(동영상 ID, 실시간 채팅 ID)

모두 YouTube에 공개된 정보이며, 이용자 본인의 YouTube 계정에 당사가 접속하는 일은 없습니다.

가져온 실시간 채팅 정보는 방송 화면에 표시하기 위한 중계에만 사용하며, 당사의 데이터베이스에는 저장하지 않습니다. 중계를 위해 당사 서버의 메모리상에 최근 일정 건수만 일시적으로 보관하고, 방송 종료 또는 연결 해제로 삭제됩니다.

다만 연결 대상을 식별하기 위한 정보(동영상 ID, 실시간 채팅 ID, 연결 일시)는 채팅 내용과는 별도로 위젯 설정으로 저장됩니다. 연결을 해제하거나 위젯을 삭제하면 사라집니다.

작성자가 YouTube에서 댓글을 삭제한 경우 또는 작성자가 방송에서 차단된 경우에는, YouTube로부터 알림을 받아 방송 화면상의 해당 표시를 신속히 제거합니다. 취급에 관한 자세한 내용은 개인정보처리방침에 기재하고 있습니다.

OBS의 브라우저 소스에 붙여 넣기만 하면 사용 가능

만든 댓글 위젯은 전용 URL로 발급됩니다. OBS에서 브라우저 소스를 추가하고 해당 URL을 설정하면 방송 화면에 표시할 수 있습니다.

방송 레이아웃에 맞춰 OBS 쪽에서 크기와 위치를 조정할 수 있으므로, 게임 화면이나 카메라 영상과의 균형을 보면서 배치할 수 있습니다.

OBS에 추가하는 것은 처음 한 번뿐입니다. 방송할 때마다 하는 일은 컨트롤러에 방송 URL을 붙여 넣고 '연결'을 누르는 조작뿐이며, OBS 쪽 설정은 그대로 계속 사용할 수 있습니다. 브라우저 소스를 지원하는 방송 소프트웨어라면 OBS 외에서도 표시할 수 있습니다.

OBS 추가 절차를 단계별로 확인하고 싶다면 Jamluca 사용법을 참고하세요.

댓글 위젯이 어울리는 방송 상황

• 방송 화면 분위기에 맞춘 디자인으로 댓글을 보여주고 싶을 때
• 게임 화면이나 영상을 보면서 시청자의 댓글도 함께 따라가게 하고 싶을 때
• 슈퍼챗과 멤버십을 눈에 띄게 해서 감사를 전하고 싶을 때
• 모더레이터나 멤버의 발언을 색으로 구분할 수 있게 하고 싶을 때
• 잡담 방송이나 작업 방송에서 댓글을 화면의 주인공으로 보여주고 싶을 때
• 다시보기나 클립에도 댓글을 영상으로 남기고 싶을 때