Developers - 아프리카TV

확장 프로그램이란?

확장 프로그램은 무엇인가요?

확장 프로그램은 SOOP에서 제공하는 독립된 어플리케이션으로, 주로 방송에 도움이 되는 부가 기능을 제공합니다.
확장 프로그램은 개인 개발자가 직접 제작할 수 있으며, 심사 후 SOOP 확장 프로그램 마켓에 출시할 수 있습니다

확장 프로그램은 어떻게 생겼나요?

확장 프로그램은 팝업형 , 화면 송출형 2가지 유형이 존재하며, 선택하여 제작할 수 있습니다.

1. 팝업형
방송 송출 화면과 별도로 분리된 팝업 UI로 노출되며, 스트리머와 유저간 인터렉션이 가능합니다.
2. 화면 송출형
방송 송출 화면에 오버레이 형태로 노출되며, 스트리머/유저간 인터렉션이 불가능합니다.

어떻게 사용하나요?

확장 프로그램은 스트리머 방송에 도움이 되는 부가 기능을 제공하는 프로그램으로,
스트리머가 확장 프로그램 마켓에서 다운받아 활성화한 후 방송에서 사용할 수 있습니다.
설치한 확장 프로그램은 ‘내 확장 프로그램 관리’에서 활성화할 수 있으며, 방송 시에만 사용할 수 있습니다.
스트리머가 활성화한 확장 프로그램은 사용자 유형에 따라 방송단 (프릭샷, 외부장치 방송 설정, 모바일 방송하기) , 시청단 (라이브 플레이어)에 노출됩니다.
유저는 마켓에서 따로 설치 필요 없이, 스트리머의 방송에서의 확장 프로그램 활성화 유/무에 따라 사용할 수 있으며, 유저 단독 사용은 불가합니다.

1. 스트리머 확장 프로그램 활성화
1. 1확장 프로그램마켓에서 확장 프로그램 추가
2. 2내 확장 프로그램 관리에서 추가한 확장 프로그램 활성화
3. 3프릭샷 or 외부장치 방송 설정 or 모바일 방송하기에서 방송 시작
4. 4프릭샷 or 외부장치 방송 설정에서 [확장 프로그램] 버튼 클릭 / 모바일 방송하기에서는 생방송 시작하기 우측 소스 추가 버튼 클릭
2. 스트리머 확장 프로그램 사용하기
팝업형
- - 스트리머 :
  [프로그램 실행] 버튼 클릭 시 , 실행 팝업 노출
- - 유저 :
  PC 플레이어 화면 우측 버튼 클릭, 모바일 플레이어 채팅창 우측 버튼 클릭
화면 송출형
- - 스트리머 :
  1. 1. 관리 팝업에서 [프로그램 실행] 버튼 클릭 시, 설정 팝업 노출
  2. 2. 링크 복사 후 웹 URL 붙여넣기
    * 프릭샷 : 장면 관리 > 추가 > 웹 URL 메뉴 선택 > 웹 URL 붙여넣기 * OBS : 소스추가 > 브라우저 > 웹 URL 붙여넣기
  3. 3. 방송 송출 영역 내 확장 프로그램 노출
- - 유저 :
  화면 송출형 확장 프로그램은 버튼 없이 플레이어 화면에 바로 노출
3. 모바일 확장 프로그램 사용하기
팝업형
- - 스트리머 :
  생방송 방송하기 우측 소스 추가 버튼에서 확장 프로그램 추가
- - 유저 :
  채팅창 우측 확장 프로그램 버튼으로 실행
화면 송출형
- - 스트리머 :
  생방송 방송하기 우측 소스 추가 버튼에서 확장 프로그램 추가
- - 유저 :
  화면 송출형 확장 프로그램은 플레이어 화면에 바로 노출

확장 프로그램은 누가 사용하나요?

확장 프로그램은 개인 개발자가 제작한 확장프로그램에 따라 사용자 유형이 달라지며,
SOOP이 지원하는 사용자 유형은 아래와 같습니다.

사용자 유형
스트리머	유저	스트리머 / 유저
방송하는 스트리머만 실행	스트리머 방송에 참여하는 유저만 실행	방송하는 스트리머 와 방송에 참여하는 유저 모두 실행
스트리머 / 유저 인터렉션 불가	스트리머 / 유저 인터렉션 불가	스트리머 / 유저 인터렉션 가능

확장 프로그램은 어떻게 만들 수 있나요?

확장 프로그램은 JavaScript를 포함한 HTML, CSS 등 일반적인 웹 애플리케이션 개발 기술을 사용하여 제작합니다.
단, html 작성 시, 필수 스크립트를 포함해야 합니다.
아래의 가이드를 참고하여 확장 프로그램을 만들어 보세요.

1. html안에 포함 되어야 할 필수 스크립트

<script src="https://static.sooplive.co.kr/asset/app/extension-helper/soop-extension-sdk.js"></script>

2. 필수 스크립트를 포함한 작성 예시

const SDK = window.AFREECA.ext;
const extensionSDK = SDK();
function init() {
    // do something
}

extensionSDK.handleInitialization((userInfo, broadInfo, playerInfo) => {
    init();
});

main.js

<!DOCTYPE html> 
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>SOOP Extensions</title>
    <script defer src="https://static.sooplive.co.kr/asset/app/extension-helper/soop-extension-sdk.js"></script>
    <script defer src="main.js"></script>
</head>
<body>
</body>
</html>

user_screen.html, streamer_screen.html, mo_user_screen.html

제작한 확장 프로그램은 어떻게 출시되나요?

제작한 확장 프로그램은 심사를 거쳐 출시할 수 있습니다.
심사 시, 확장 프로그램의 콘텐츠 및 동작성 등을 종합적으로 심사하여 확장 프로그램의 적합성을 판단합니다.
심사 완료 후 출시가 결정된 확장 프로그램은 마켓에 노출됩니다.