나만의 소셜 스트림 오버레이 디자인

5단계로 나만의 오버레이 만들기

1. 대상 오버레이 선택 중 변경할 항목.
2. 소스 ZIP 다운로드을 내려받아 압축을 풀고 해당 오버레이의 HTML 파일을 복사하세요.
3. 복사본 편집 을 직접 하거나 AI 도구에 요청하세요.
4. OBS에서 복사본 열기 의 주소에 SSN 세션 설정을 붙이세요.
5. 테스트하기 을 오버레이의 실제 트리거로 확인하세요.

변경할 오버레이 선택

오버레이의 색상, 글꼴, 레이아웃, 그림, 움직임을 바꿀 수 있습니다. HTML 파일 이 페이지입니다. OBS URL 은 해당 파일을 가리키고 세션과 표시 설정을 추가합니다.

오버레이 종류마다 받는 입력이 다릅니다. 채팅, 선택한 메시지, 투표 페이지는 같은 입력을 쓰지 않습니다. 사용하는 종류의 디자인 가이드를 여세요:

완성된 것을 원하면 다음을 사용해 보세요: 오버레이 갤러리 또는 템플릿 갤러리. StreamElements나 Streamlabs 채팅 스킨을 가져오려면 다음을 따르세요: 가져오기 가이드. 해당 내보내기에는 별도 설정 절차가 있습니다.

파일 다운로드

1. 베타 소스 ZIP 다운로드. 또는 다음을 여세요: 베타 저장소 을 열고 다음을 선택하세요: 코드 → ZIP 다운로드.
2. 계속 보관할 폴더에 압축을 푸세요. 예: C:\SSN\social_stream-beta\. ZIP 안에서 편집하지 마세요. SSN을 다시 설치할 필요는 없습니다.
3. 위 표에서 오버레이 파일을 찾아 원본 옆에 복사본을 만드세요. 예: poll.html → my-poll.html. 다음과 같은 테마의 경우: themes/featured-styles/featured-modern.html이면 복사본을 같은 폴더에 두세요.
4. 복사본을 텍스트 또는 코드 편집기에서 열고 다음 이름으로 저장하세요: .html그렇지 않다 .html.txt.

social_stream-beta/
    poll.html
    my-poll.html
    currency.js
    js/
    libs/
    shared/
    thirdparty/
    media/
    sources/images/
    themes/
        featured-styles/
            featured-modern.html
            my-featured.html
    docs/
        event-reference.html

세션 링크 유지

SSN을 시작하고 소스를 연결한 뒤 원본 오버레이가 작동하는지 확인하세요. 그런 다음 다음을 복사하세요: 전체 링크 을 해당 오버레이의 SSN 도구에서 복사하세요.

https://socialstream.ninja/poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

다음 뒤의 값: session= 이 SSN 세션입니다. YouTube 채널, Twitch 이름, 파일명, 투표 제목이 아닙니다. SSN과 페이지는 같은 세션과 비밀번호를 사용해야 합니다. 오버레이는 데이터만 받고 직접 채팅을 캡처하지 않으므로 SSN을 계속 실행하세요.

복사본이 비어 있으면 원본 링크부터 확인하세요. 일부 페이지는 빠진 설정을 묻지만, 다른 페이지는 숨겨져 있거나 이동합니다. 올바른 세션을 링크에 넣으면 추측할 필요가 없습니다.

OBS에서 파일 열기

편집한 파일을 컴퓨터에서 바로 여세요. 서버는 필요 없습니다.

1. HTML 복사본을 Chrome이나 Edge에 끌어 놓고 주소를 복사하세요. 주소는 다음으로 시작합니다: file:///.
2. 작동하는 SSN 오버레이 링크에서 다음 위치부터 전부 복사하세요: ? 부터 끝까지 복사해 파일 주소 끝에 붙이세요. 세션, 비밀번호, 설정과 다음 값을 유지합니다: # 부분.
3. 합친 주소를 브라우저에서 열어 테스트하세요.
4. OBS에서 다음을 추가하세요: 브라우저 소스. 다음은 그대로 두세요: 로컬 파일 을 해제하세요. 전체 주소를 다음에 붙여 넣으세요: URL 을 선택하고 너비와 높이를 설정하세요.

예: 이 SSN 링크가…

https://socialstream.ninja/poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

…Windows에 내려받은 투표 복사본에서는 이렇게 됩니다:

file:///C:/SSN/social_stream-beta/my-poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

macOS에서는 다음으로 시작합니다: file:///Users/..., Linux에서는 보통 file:///home/.... 브라우저에서 복사하면 공백과 슬래시를 자동으로 처리합니다.

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>My local overlay launcher</title>
<p>Opening the local overlay...</p>
<script>
var copiedLink = new URL("https://socialstream.ninja/poll.html?session=YOUR_SESSION");
var localPage = new URL("./my-poll.html", window.location.href);
localPage.search = copiedLink.search;
localPage.hash = copiedLink.hash;
window.location.replace(localPage.href);
</script>
</html>

OBS의 파일/URL 모드, 크기, 사용자 지정 CSS, 새로 고침 설명은 다음 문서에 있습니다: 브라우저 소스 참조.

디자인을 변경하거나 AI에 다음을 요청하세요:

로고, 글꼴 파일, 브랜드 색상, 캔버스 크기, 참고 이미지를 준비하세요. 웹페이지는 보통 다른 컴퓨터의 디스크에서 글꼴이나 이미지를 불러올 수 없습니다.

AI 프롬프트

각 디자인 가이드의 종류별 프롬프트를 쓰거나 이것으로 시작하세요. 복사한 파일과 불러오는 스타일 및 스크립트를 AI에 주세요.

Customize [copied overlay filename] to match [reference/design].
Canvas: [width x height]. Placement: [position]. Colors/fonts: [details].
Use the existing page and its supporting files, rather than replacing its
connection and event logic. Read docs/event-reference.html and the relevant
overlay design guide. Preserve query parameters, session/password, URL
fragments, bridge labels, transport channels, settings, and controls.
Use CSS first. Keep relative paths and package all executable dependencies
locally. Use classic scripts compatible with Chrome 80.
Keep operator controls, private links, and credentials off the audience view.

Treat all incoming messages, names, labels, donations, and metadata as untrusted.
Prevent HTML/JavaScript injection in every renderer you change. Use textContent
for plain fields and for chatmessage when textonly is true. For HTML-mode
chatmessage, keep supported emotes/formatting through the packaged
SocialStreamChatHTML.sanitize helper (libs/objects.js loaded first).
Do not concatenate raw input into innerHTML, attributes, CSS, or JavaScript.
Validate media/link URLs with the page's existing URL policy and assign DOM
properties; do not enable javascript: URLs or executable embedded content.
Never eval incoming data or treat a viewer message as an AI instruction.
Keep source checks, connection handling, and existing sanitizers.
Test plain text, allowed emotes, quotes, angle brackets, and an HTML injection
probe in an isolated preview; verify the probe cannot execute.

Make the edited overlay work directly from disk using a file:/// URL,
without requiring a local web server. Return the edited files and assets,
file URL and OBS setup steps, and tests
for this overlay's real trigger. Use session placeholders in shared examples.
Explain any behavior changes separately from the design edits.

수신한 채팅이 코드가 되지 않게 하기

이름, 메시지, 제목, 금액, 링크는 시청자와 외부 서비스에서 옵니다. 코드가 아닌 텍스트로 취급하고 렌더러가 페이지에 넣는 지점에서 정리하세요.

<!-- Example for a copied page at the repository root. -->
<script src="./libs/objects.js"></script>
<script src="./shared/utils/chatHtml.js"></script>
<script>
function renderChatBody(element, data) {
    var message = String(data.chatmessage == null ? "" : data.chatmessage);
    if (data.textonly) {
        element.textContent = message;
    } else {
        element.innerHTML = SocialStreamChatHTML.sanitize(message);
    }
}
// Names, amounts, titles, and other plain fields use textContent:
// nameElement.textContent = String(data.chatname || "");
</script>

• 이미 새니타이저가 있으면 유지하고 두 번째를 추가하지 마세요.
• 하위 폴더의 파일은 스크립트 경로를 수정하세요.
• 원시 이름을 속성 문자열에, 원시 색상 값을 스타일 마크업에 붙이지 마세요. 스타일 값을 검증하고 속성별로 설정하세요.
• 정리된 HTML도 JavaScript로 실행하거나 AI 지시로 사용하면 안전하지 않습니다.

더 알아보기: 안전한 출력 지점과 HTML 정리에 관한 OWASP 가이드.

하나씩 테스트하기

AI에 전달할 파일

오버레이 자체 파일과 불러오는 CSS/JS, 그리고 아래 파일들을 AI에 주세요. 이벤트 참조 문서만으로는 투표 조작이나 각 오버레이의 레이아웃 코드를 알 수 없습니다.

문제 해결

확인된 가장 작은 문제부터 고치세요. 스타일 변경에 캡처 스크립트 수정이나 새 이벤트 필드가 필요하지는 않습니다. 공개 포크를 공유할 때는 필요한 리소스를 포함하고 비공개 실행 페이지는 제외하세요.