AI 오버레이 빌더

오버레이를 생성하고 테스트한 뒤 저장된 출력을 OBS에서 불러오세요.

설명

AI 오버레이 빌더는 프롬프트로 HTML 오버레이를 만드는 도구입니다. 빌더 자체가 OBS 페이지는 아닙니다. 사용: aiprompt.html 에서 제작하고 미리 본 뒤 다음을 사용하세요: aioverlay.html 를 출력 페이지로 사용하세요.

프롬프트 입력란, 미리보기 제어, 이벤트 시뮬레이션 버튼, 저장 제어, HTML 소스 탭이 있는 AI 오버레이 빌더 페이지 — 오버레이를 OBS에 넣기 전에 미리보기와 이벤트 시뮬레이션을 실행하세요.

1. 프롬프트 페이지에서 제작하기

열기 aiprompt.html?session=YOUR_SESSION.
오버레이가 해야 할 동작과 원하는 모양을 설명하세요.
레이아웃, 메시지 동작, 색상, 애니메이션 타이밍, 중요한 이벤트 유형을 구체적으로 지정하는 프롬프트를 사용하세요.
미리보기 제어를 클릭하고 채팅, 팔로우, 구독, 선물, 레이드, 후원, 사용자 지정 JSON 이벤트를 시뮬레이션하세요.
알아보기 쉬운 페이지 이름으로 오버레이를 저장하세요.

2. 출력 페이지를 OBS에 추가하기

저장한 뒤 출력 페이지를 OBS 브라우저 소스로 추가하세요. 세션과 저장된 페이지 이름을 동일하게 유지하세요.

https://socialstream.ninja/aioverlay.html?session=YOUR_SESSION&overlay=chat-overlay

오버레이가 투명하거나 이벤트 발생 시에만 표시된다면 먼저 빌더의 시뮬레이션 버튼을 사용해 표시되는지 확인하세요.

3. 더 빠르게 설정하려면 템플릿 사용하기

신뢰할 수 있는 결과가 빠르게 필요하면 템플릿에서 시작해 맞춤 설정하세요. 더 구체적인 결과를 원하면 AI 빌더를 사용하세요.

스타일이 적용된 채팅 메시지를 보여주는 Social Stream Ninja 오버레이 미리보기 예시 — 정해진 레이아웃에는 템플릿이 적합하며, 맞춤 실험에는 AI 생성이 적합합니다.

일반적인 해결 방법

미리보기가 비어 있음: 시뮬레이션 버튼을 클릭하고 콘솔 패널을 확인하세요.
OBS에 아무것도 표시되지 않음: 저장된 페이지 이름과 세션이 빌더와 일치하는지 확인하세요.
이벤트 동작이 잘못됨: 일반 채팅뿐 아니라 실제로 사용할 이벤트 유형으로 테스트하세요.
생성된 코드가 작동하지 않음: 검토 및 다듬기(Review & polish)를 사용하거나 프롬프트를 간단하게 바꾸세요.
빌더에서는 작동하지만 OBS에서는 작동하지 않음: 동일한 다음 항목을 여세요: aioverlay.html URL을 먼저 일반 브라우저에서 여세요.