Social Stream Ninja(SSN)는 YouTube, Twitch, TikTok 등 120개 이상의 플랫폼 채팅을 하나의 브라우저 소스로 모아 줍니다. Doodlekuma의 Social Stream 버전 CSS를 사용하려면 OBS에서 SSN의 Main chat overlay & control dock를 불러오고 거기에 CSS를 붙여넣습니다 — YouTube 기본 팝아웃 채팅이 아닙니다.
공식 사이트: socialstream.ninja
📺 영상이 더 편하다면? YouTube에서 “Social Stream Ninja” 를 검색하거나, 아래 영상부터 시작하세요:
준비물
- OBS Studio(또는 Streamlabs OBS).
- 공식 안내에 따라 설정을 마친 Social Stream Ninja.
- SSN에 연결된 채팅 플랫폼(예: YouTube Live).
- Doodlekuma 라이브 채팅 갤러리에서 받은 Social Stream 버전 CSS.
Social Stream 버전 vs YouTube 버전 — 올바른 것 고르기
대부분의 Doodlekuma 테마는 두 가지 CSS 버전을 제공합니다:
- Social Stream — SSN의 Main chat overlay & control dock용(이 가이드). 기능이 가장 풍부한 오버레이라 더 많은 메시지 유형을 스타일링할 수 있습니다.
- YouTube — YouTube 기본 팝아웃 채팅용(
yt-live-chat-…DOM).
DOM 구조가 다르기 때문에 서로 호환되지 않습니다. 아래 단계에서는 Social Stream 버전을 다운로드하세요.
1단계 — Social Stream Ninja에서 오버레이 URL 복사
- Social Stream Ninja를 열고 Sources and Settings로 이동합니다. 플랫폼(예: 내 YouTube 채널)을 추가해 실제 메시지가 들어오게 합니다.
- 오른쪽 패널 상단에서 Main chat overlay & control dock를 찾습니다. 기능이 가장 풍부한 오버레이이며 Doodlekuma CSS가 이를 대상으로 합니다.
- 오른쪽 위의 [copy link] 버튼으로 URL을 복사합니다.
https://socialstream.ninja/dock.html?session=XXXXXXXX형태입니다.
이 URL은 다음 단계에서 OBS가 불러올 주소이니 잘 보관해 두세요.
2단계 — OBS에 브라우저 소스 추가하고 CSS 붙여넣기
- OBS 소스(Sources) 에서 + 를 클릭하고 브라우저(Browser) 를 선택합니다.
- 1단계의 Social Stream Ninja URL을 URL 칸에 붙여넣습니다.
- 너비
1920, 높이1080으로 설정합니다(또는 방송 레이아웃에 맞게). - Doodlekuma의 Social Stream CSS를 Custom CSS 상자에 붙여넣습니다.
- 확인(OK) 을 클릭합니다. 스타일이 적용된 라이브 채팅이 브라우저 소스에 표시됩니다.
CSS는 어디서 받나요
Doodlekuma 라이브 채팅 갤러리를 열어 테마를 고르고 Social Stream 버전을 다운로드합니다. .css 파일을 열어 전체를 복사한 뒤 2단계의 OBS Custom CSS에 붙여넣습니다. 커스터마이저에서 조정한 뒤에는 다시 다운로드하세요.
문제 해결
스타일이 적용되지 않아요
Social Stream 버전을 받았는지, 그리고 OBS의 URL이 SSN의 dock.html(Main chat overlay & control dock, YouTube의 live_chat URL이 아님)인지 확인하세요.
아무것도 보이지 않아요
CSS를 추가하기 전에 Social Stream Ninja 안에서 실제 메시지가 보이는지 먼저 확인하세요. 소스 먼저, 스타일은 그다음 — 이 순서면 디버깅이 훨씬 수월합니다.
DOM이 YouTube 채팅과 달라 보여요
정상입니다. Social Stream Ninja와 YouTube 기본 채팅은 DOM 구조가 다르므로 CSS 파일을 분리해서 유지해야 합니다.
Social Stream Ninja 추가 리소스
- 공식 사이트: socialstream.ninja
- Creating custom chat overlays for Social Stream Ninja
- How to Set Up Social Stream Ninja (Standalone App) — Full Step-by-Step Guide
- 또는 YouTube에서 Social Stream Ninja 를 검색해 더 많은 설명을 확인하세요.