주요 기능

    주요 기능


    기사 요약

    기존에는 라이브 스트리밍 페이지를 구성하려면 JavaScript 코드를 직접 작성해야 했지만, 이제는 샵라이브 플러그인으로 간단히 코드만 삽입해도 라이브 스트리밍 페이지를 구현할 수 있습니다.

    • 간단한 연동: 코드 몇 줄만으로 Shoplive Plugin을 적용해 라이브 페이지를 만들 수 있으며, 플레이어만 표시하거나 다시보기 리스트까지 함께 노출하는 등 다양한 구성이 가능합니다.

    • 라이브 미니 프리뷰: 라이브 미니 프리뷰란, 방문자가 웹페이지에 들어오면 화면 우측 하단에 작은 실시간 영상 창이 자동으로 재생되어 현재 진행 중인 라이브 방송의 일부를 바로 볼 수 있게 해 주는 기능입니다. 사용자가 이 미리보기 창을 클릭하면 전체 라이브 스트리밍 화면으로 즉시 전환되어 본방송을 시청할 수 있습니다.

    • 방송 모아보기: 방송이 종료되면 별도 설정 없이도 라이브 페이지에서 리플레이가 자동 공개되어 사용자가 언제든 시청할 수 있습니다. 특정 방송은 리플레이를 비공개로 전환할 수도 있습니다.
      (지난 방송 목록은 샵라이브 플러그인 하단 영역에 표시되며, 리플레이를 공개하려면 샵라이브 어드민의 해당 방송 상세 페이지에서 ‘API 플러그인’과 ‘리플레이’를 공개로 설정해야 합니다.)


    플러그인 기본 구성

    샵라이브 플러그인의 기본구성을 통해 사용자는 한 화면에서 현재 진행 중인 방송과 종료된 방송의 리플레이, 준비 중인 방송 등을 한 번에 확인할 수 있습니다.


    샵라이브 플러그인 상단에는 방송 상세 정보와 함께 현재 진행 중인 방송이 표시됩니다. 진행 중인 방송이 없을 때는 가장 최근 방송(방송 예고나 종료된 방송의 리플레이)가 대신 노출됩니다.
    또한, 기본 구성 외에도 자유롭게 영역을 설정할 수 있어, 플레이어 영역만 표시하거나 종료된 방송의 리플레이, 준비 중인 방송 목록만 따로 보여주는 등 다양한 방식으로 구성할 수 있습니다.


    방송 배너(Preview)·PIP(webPIP) 기능 안내

    구분

    방송 배너 (Preview)

    WEB PIP

    동작 환경

    PC Web, Mobile Web

    PC Web, Mobile Web

    방송 시청 여부

    영상 시청 가능하며 방송 시청 수 집계에는 포함되지 않음

    영상 시청 가능하며 방송 시청 수로 집계됨

    방송 참여(채팅·상품 클릭 등)

    가능

    가능

    구현 필수 조건

    • Shoplive Plugin JavaScript 코드 초기화(init)

    • 어드민 → 좌측 메뉴 ‘플러그인 설정’ → 방송 배너 ‘사용’

    • Shoplive Plugin JavaScript 코드로 플레이어 적용

    • 어드민 → 좌측 메뉴 ‘플러그인 설정’ → PIP ‘사용’

    • iframe 허용된 페이지 필요

    상세 조건 및 동작

    • API 플러그인 공개 상태 + ‘방송 배너 사용’ 설정

      현재 방송이 방송 배너 영역에 자동 노출됩니다.

      동일 방송을 여러 위치에 동시에 노출하는 기능은 제공하지 않습니다.

    • API 플러그인 공개 상태 + ‘방송 배너 사용 안 함’ 설정

      자동 노출되지 않습니다.

      필요 시 별도 코드(링크)를 사용해 원하는 영역에 선택적으로 노출할 수 있습니다.

    • iframe 기반 동작

      플레이어 안에서 상품이나 상품 목록 배너를 클릭하면, iframe 기반의 webPIP가 실행됩니다. 이때 설정된 URL은 샵라이브가 만든 iframe 안에서 열리므로, 사용자가 처음 들어왔던 플레이어 페이지의 주소(URL)는 변하지 않고 그대로 유지됩니다.

    • messageCallback

      webPIP를 사용할 경우, 상품 클릭 및 상품 목록 배너 클릭 시 기본 콜백 대신 webPIP 로직이 이벤트를 처리합니다.

    • CORS

      환경에 따라 CORS 정책으로 인해 특정 URL 접근 시 브라우저에서 차단이 발생할 수 있으나, 샵라이브는 이러한 경로를 감지하여 자동으로 이탈 처리하여 통신 오류를 방지할 수 있습니다.


    라이브 미니 프리뷰 노출 크기 정의

    라이브 미니 프리뷰는 아래와 같은 크기로 노출됩니다.

    구분

    width

    height

    min-width

    max-width

    min-height

    max-height

    공통

    -

    -

    100px

    200px

    150px

    332px

    화면 폭 ≤ 480px

    35vw

    35vw * 6 / 4→ width의 1.5배

    -

    -

    -

    -

    481px ≤ 화면 폭 ≤ 1024px

    26vw

    26vw * 15 / 9→ width의 약 1.667배

    -

    -

    -

    -

    화면 폭 ≥ 1025px

    17vw

    17vw * 15 / 9→ width의 약 1.667배

    -

    -

    -

    -



    What's Next