OBS에서 Social Stream Ninja 채팅 CSS 사용하기

Social Stream Ninja를 사용하면 YouTube, Twitch, TikTok 같은 여러 플랫폼의 채팅을 하나의 브라우저 소스로 모을 수 있습니다. Doodlekuma에서 Social Stream 버전 CSS를 다운로드했다면 YouTube 팝아웃 채팅이 아니라 Social Stream dock / output 페이지에 적용해야 합니다.

공식 시작 페이지는 여기입니다: socialstream.ninja/landing

CSS 버전 확인하기

Doodlekuma 테마는 보통 두 가지 CSS를 제공합니다.

Social Stream: Social Stream Ninja dock / output DOM용입니다. .highlight-chat, .hl-name, .hl-message 같은 클래스를 대상으로 합니다.
YouTube: YouTube 기본 팝아웃 채팅용입니다. yt-live-chat-text-message-renderer 같은 요소를 대상으로 합니다.

DOM 구조가 다르기 때문에 두 CSS는 서로 바꿔 쓸 수 없습니다.

준비물

OBS Studio 또는 Streamlabs OBS.
공식 안내에 따라 열거나 설치한 Social Stream Ninja.
YouTube Live 같은 채팅 플랫폼.
Doodlekuma 라이브 채팅 스타일에서 다운로드한 Social Stream 버전 CSS.

Social Stream Ninja에 접속해 자신의 방송 환경에 맞는 방식으로 설정합니다.

실행 후 OBS에서 사용할 dock / output URL을 찾습니다. 이 URL을 OBS 브라우저 소스에 넣게 됩니다.

Step 2: 채팅 소스 연결하기

Social Stream 안에서 YouTube 같은 플랫폼을 추가합니다.

CSS를 넣기 전에 Social Stream 페이지에서 실제 채팅 메시지가 보이는지 먼저 확인하세요. 메시지가 보여야 스타일도 적용할 수 있습니다.

Step 3: OBS 브라우저 소스 추가하기

OBS에서 다음 순서로 설정합니다.

소스 목록에서 +를 클릭합니다.
브라우저를 선택합니다.
Social Stream dock / output URL을 붙여넣습니다.
크기를 500 x 700처럼 설정하거나 방송 레이아웃에 맞춥니다.
필요하면 배경을 투명하게 설정합니다.

Step 4: CSS 붙여넣기

Doodlekuma 테마 페이지에서 Social Stream 다운로드 옵션을 선택합니다.

다운로드한 .css 파일을 열고 전체 내용을 복사한 뒤, OBS 브라우저 소스의 사용자 정의 CSS 입력란에 붙여넣습니다.

자주 확인할 점

스타일이 적용되지 않아요

Social Stream 버전 CSS를 다운로드했는지, OBS URL이 YouTube live_chat URL이 아니라 Social Stream 페이지인지 확인하세요.

YouTube 아이콘이 안 보여요

새 테마는 가능한 경우 YouTube 아이콘을 인라인 SVG로 사용합니다. 오래된 CSS 파일이라면 다시 다운로드해 보세요.

YouTube 채팅과 DOM이 달라 보여요

정상입니다. Social Stream과 YouTube 기본 채팅은 DOM 구조가 다르기 때문에 CSS도 분리해서 사용해야 합니다.

CSS 버전 확인하기

준비물

Step 1: Social Stream Ninja 열기