Social Stream Ninja의 StreamElements 채팅 스킨

지원되는 기능은?

가져오기 도구의 대상은 사용자 지정 채팅 위젯 으로, StreamElements 또는 Streamlabs용이며 테마 팩의 채팅 구성 요소도 포함합니다. 위젯 소스 파일이 필요합니다. 전체 StreamElements 계정이나 오버레이 URL의 테마를 가져오지는 않습니다.

다음 중 하나를 사용하세요: SSN Windows 데스크톱 앱 또는 Chrome 확장 프로그램 으로 채팅을 캡처하세요. 가져온 스킨은 해당 채팅을 OBS에 표시합니다. 호환성은 위젯에 따라 다르며 목표, 포인트, 스토어, 알림 같은 계정 기능은 수동 변환이 필요할 수 있습니다.

1. 위젯 파일 준비

디자이너의 원본 ZIP이나 폴더로 시작하세요. HTML, CSS, JavaScript와 fields/data JSON, 이미지, 글꼴을 찾으세요. 팩에 디자인이 여러 개라면 채팅 위젯 하나를 선택하세요.

설치 링크만 있나요? 디자이너에게 채팅 위젯 소스를 요청하거나 StreamElements 사용자 지정 위젯 편집기의 코드를 사용하세요. 스크린샷, 영상 또는 브라우저 소스 URL만으로는 변환할 수 없습니다.

위젯 코드가 StreamElements 편집기에 있는 경우

사용자 지정 위젯의 코드 편집기를 여세요. 사용 가능한 각 부분을 별도의 일반 텍스트 파일로 저장하세요: html.txt, css.txt, js.txt, fields.txt 그리고 data.txt로 저장하세요. 서식을 추가하거나 JSON을 변경하지 말고 내용을 복사하세요. data 파일이 없으면 가져오기 도구가 fields의 기본값을 사용합니다.

이 파일들을 모두 함께 선택하세요. 사용할 항목: 파일 선택 (Choose Files). 로컬 이미지나 글꼴도 포함하세요. 폴더 선택 (Choose Folder) 는 폴더 경로를 보존합니다. 참고: StreamElements 코드 편집기 참고 문서 에서 코드 및 필드 구조를 확인하세요.

신뢰하는 코드만 가져오세요. 위젯 JavaScript는 미리 보기와 다운로드한 오버레이에서 실행됩니다.

2. 가져오기 도구 열기

SSN 메뉴에서 다음 섹션을 찾으세요: 스타일이 완성된 채팅 오버레이. 그 아래에서 찾을 항목: StreamElements / Streamlabs 채팅 스킨 가져오기를 선택하세요. 현재 세션이 채워집니다. 메뉴에서 다음을 검색할 수도 있습니다: StreamElements 또는 가져오기 도구 직접 열기.

사용: ZIP 선택 (Choose ZIP), 파일 선택 (Choose Files) 또는 폴더 선택 (Choose Folder)로 선택하세요. 파일 처리 후 데모 미리 보기가 로드됩니다. 가져오기 경고를 확인하세요. 다음을 사용하세요: 고급 파일 선택 (Advanced file selection) 로 잘못 감지된 소스 파일을 수정하세요.

예시 채팅 메시지 옆에 설정 세 단계와 데모 미리 보기, 라이브 미리 보기, OBS HTML 다운로드 제어가 표시된 채팅 가져오기 도구. — 예시 위젯과 자리표시자 세션 ID가 있는 가져오기 도구입니다. 가져온 채팅 스킨은 자체 디자인을 사용합니다.

3. 연결 및 미리 보기

SSN을 실행 상태로 유지하고 채팅 도크에 실제 메시지가 나타나는지 확인하세요.
가져오기 도구의 다음을 확인하세요: SSN 세션 ID / 스트림 ID를 확인하세요. 비어 있다면 다음에서 복사하세요: 세션 옵션 (SSN 내부). Twitch 또는 YouTube 사용자 이름이 아닙니다.
세션 비밀번호를 사용한다면 입력하세요.
사용: 데모 미리 보기 (Demo Preview) 로 예시 메시지를 확인한 뒤 라이브 미리 보기 (Live Preview) 를 선택하고 방송 채팅에 새 메시지를 보내세요.
다음 경우: 메시지 기록 (Message history) 가 표시되면 시간에 따른 제거 또는 최대 메시지 수를 조절하세요.

데모 미리 보기는 세션 없이 예시 메시지만 사용합니다. 라이브 미리 보기에는 SSN에서 들어오는 채팅이 필요합니다. 미리 보기가 비어 있다는 것만으로 연결 실패라고 볼 수는 없습니다.

4. 다운로드 후 OBS에 추가

클릭: OBS HTML 다운로드 (Download OBS HTML) 하여 영구적인 위치에 저장하세요.
OBS에서 다음을 추가하세요: 브라우저 소스, 활성화하세요: 로컬 파일을 선택하고 해당 HTML 파일을 찾으세요.
채팅 영역의 너비와 높이를 설정한 뒤 메시지를 하나 더 보내 확인하세요.

세션이 이미 포함되어 있으므로 OBS에서 URL을 편집할 필요가 없습니다. 다운로드한 파일을 브라우저 소스로 사용하세요. SSN과 채팅 캡처 소스를 계속 실행하세요. 가져오기 도구와 StreamElements는 닫아도 됩니다.

내보낸 파일에는 세션 ID와 선택적 비밀번호가 포함됩니다. 비공개로 보관하세요. 나중에 세션, 비밀번호 또는 위젯 설정을 바꾸려면 원본 파일을 다시 가져와 교체 파일을 다운로드한 뒤 OBS 소스를 새로고침하세요.

작동하지 않을 때

위젯 코드를 찾을 수 없음: 원본 소스 파일을 사용하세요. 이미지, fields/data만 있는 파일, 이전에 변환한 SSN 파일은 위젯 소스가 아닙니다.
데모가 비어 있거나 모양이 잘못됨: 고급 파일 선택에서 HTML/CSS/JS를 확인하세요. 일치하는 fields 및 data 파일과 모든 리소스를 제공하세요.
데모는 되지만 라이브 미리 보기가 비어 있음: 새 메시지를 보내고 SSN 도크를 확인하며 세션 ID와 비밀번호를 맞추세요.
라이브는 되지만 OBS가 비어 있음: 선택한 로컬 HTML 파일, 브라우저 소스 크기, 표시 여부를 확인한 뒤 캐시를 새로고침하세요.
글꼴이나 이미지가 누락됨: 내보내기 요약을 확인하세요. 파일에 포함하지 못한 원격 리소스에는 접근 가능한 URL과 인터넷이 여전히 필요합니다.
메시지가 사라짐: 위젯에 Message history가 있다면 조절하세요. 일부 위젯은 자체 JavaScript에서 메시지 제거를 제어합니다.
계정 API나 플러그인이 실패함: 일부 위젯에는 코드 변경이 필요합니다. 가져오기 도구의 변환 프롬프트를 사용하거나 도움 요청 을 원본 위젯 파일과 문제 스크린샷을 첨부하여 요청하세요. 세션 자격 증명은 공유하지 마세요.