설치 가이드

몇 분 만에 알림 설치 완료

OBS와 Streamlabs용 FrameWork Alerts 설치 전 과정 — 영상과 글로 모두 안내해요. 단계 안내는 한국어, 영상은 영어예요.

Streamlabs + OBS

모든 FrameWork 알림은 같은 방식으로 설치해요: OBS의 Browser Source 하나, Streamlabs의 Text Over Image 변형 하나, 그리고 다운로드에 포함된 Custom Fields. 영상을 한 번 보거나, 아래의 단계별 안내를 따라 하세요.

전체 영상 안내는 영어예요 · Streamlabs + OBS

1부

OBS에서 Browser Source 설정하기

  1. 알림 플랫폼(Streamlabs)을 열고 Alerts 섹션으로 이동하세요.

  2. 설정할 알림 유형(Followers, Subscribers, Donations 등)을 선택하고, 전체 화면 알림에 쓰지 않는 알림 유형은 모두 체크 해제하세요.

  3. 플랫폼에서 제공하는 Widget URL을 복사하세요.

  4. OBS 열기 → 새 소스 추가 → Browser Source 선택 → 알아보기 쉬운 이름 지정(예: Alerts - Fullscreen).

  5. 복사한 URL을 URL 필드에 붙여 넣으세요.

  6. Width와 Height를 캔버스 해상도와 같게 설정하세요:

    • OBS의 설정 → 비디오 → 기본(캔버스) 해상도에서 확인할 수 있어요

  7. “Shutdown source when not visible”을 켜세요.

  8. 확인을 누르고, 이 Browser Source가 소스 목록 맨 위, 다른 모든 소스보다 위에 있는지 확인하세요.

2부

알림 변형 설정하기

  1. 알림 플랫폼에서 선택한 알림 유형에 새 변형(variation)을 추가하고 알아보기 쉬운 이름을 지정하세요.

  2. Layout을 “Text Over Image”로 설정하세요(알림이 제대로 표시되려면 필수예요).

  3. Image 섹션에 알림 파일을 끌어다 놓고 Select를 누르세요.

  4. Alert Duration을 설정하세요:

    • 알림을 재생해 전체 길이를 확인하세요.
    • 그 길이에서 1초를 뺀 값을 Alert Duration 필드에 입력하세요.
    • 예: 알림이 35초라면 → 34초를 입력하세요.

  5. Sound → 기본값 그대로 두세요(무시).

  6. Alert Animation → Fade In / Fade Out으로 설정하세요(권장).

  7. Text Animation & Font → 원하는 대로 설정하세요.

3부

사용자 지정 HTML / CSS / JS 추가하기

  1. Custom HTML/CSS 토글을 켜세요.

  2. 알림 폴더로 돌아가 “Custom Fields — For Full Screen Alerts” 파일을 여세요.

  3. 각 파일을 플랫폼의 해당 섹션에 복사해 붙여 넣으세요:

    • HTML → HTML 탭에
    • CSS → CSS 탭에
    • JS → JS 탭에

  4. “Custom Fields” → “Edit Custom Fields” 클릭 → Custom Fields 파일 내용을 붙여 넣으세요.

  5. “Update Custom Fields”를 누른 다음 Save(오른쪽 아래)를 누르세요.

4부

Custom Fields로 세부 조정하기

저장한 후 Custom Fields를 열면 다음 옵션을 설정할 수 있어요:

Text Delay알림을 재생하고 화면이 검게 변할 때 일시 정지하세요. 그 시점을 기록하세요 — 모든 알림은 끝부분에 약 4초간 검은 화면이 있어요. 그 정확한 시점을 여기에 입력하세요.
Text Horizontal Position텍스트의 좌우 위치를 조정해요. 가운데는 50으로 설정하세요.
Text Vertical Position텍스트의 위아래 위치를 조정해요. 가운데는 50으로 설정하세요.
Alert Volume기본값이 미리 최적화되어 있어요. 필요하면 낮추세요.

모든 설정을 마쳤다면 Test Alert를 눌러 제대로 작동하는지 확인하세요.

5부

같은 섹션의 작은 알림 바로잡기

같은 카테고리에 전체 화면 알림과 작은 알림이 함께 있다면(예: 전체 화면 Follower 알림 + 작은 Follower 알림), 같은 위젯 링크를 공유하기 때문에 작은 알림의 크기가 잘못 표시돼요. 다음 단계에 따라 바로잡으세요.

  1. 작은 알림 변형을 여세요.

  2. Custom HTML/CSS를 켜세요.

  3. 알림 폴더로 돌아가 “Custom Fields — For Non-Full-Screen Alerts”를 여세요.

  4. 각 파일을 알맞은 탭에 복사해 붙여 넣으세요:

    • HTML → HTML 탭
    • CSS → CSS 탭
    • JS → JS 탭

  5. “Edit Custom Fields” 클릭 → Custom Fields 파일 붙여 넣기 → “Update Custom Fields” 클릭 → Save 클릭.

  6. 이 변형의 Custom Fields를 열고 다음과 같이 설정하세요:

    • Horizontal Position: 50으로 설정
    • Vertical Position: 25로 설정
    • Image Size: 알림이 표시되는 크기를 조정해요
    • Alert Layout: 플랫폼 기본 레이아웃 옵션(Custom Fields의 옵션이 아님)에서 Image Above로 설정

이제 알림 설치와 설정이 모두 끝났어요. 문제가 생기면 웹사이트에서 문의 티켓을 보내 주세요. 최대한 빨리 답변드릴게요.

막힌 단계가 있나요?

사용하는 플랫폼과 진행 중인 단계를 적어 문의 티켓을 보내 주시면, 스튜디오가 차근차근 안내해 드릴게요.

문의 티켓 보내기