모아보기 설치
모아보기란, 이미 진행되었다가 VOD로 전환된 콘텐츠나 예정된 라이브 또는 진행 중이 라이브 콘텐츠를 한 화면에서 볼 수 있도록 모아둔 공간입니다.
이 가이드에서는 카페24로 구축된 파트너사 홈페이지에 소스라이브 모아보기를 설치해 기존 라이브를 다시보기 하거나 최신 라이브 영역, 라이브 예고 영역을 설정할 수 있습니다.
이미 카페24를 이용 중이라면, 간단한 코드 삽입으로 쉽게 소스라이브 모아보기를 설치합니다.
모아보기 설치를 성공적으로 진행하기 위해서는,
- 소스라이브 파트너 계약을 완료하고 모비두 담당자에게 파트너 계정을 발급 받아야 합니다.
- 모아보기 연동은 회원 연동과 라이브 설치를 완료한 후에 사용 가능합니다.
소스라이브 모아보기 설치
PC Web 연동
STEP 1. 카페24에 대표운영자로 로그인합니다.
![](https://files.readme.io/ebb5cc4-1_.png)
STEP 2. 디자인 (PC/모바일) > 디자인 대시보드 > 디자인 보관함 > PC탭에서 소스라이브를 적용할 디자인을 선택 후 복사합니다. 이는 실제 운영 중인 페이지에 영향이 가지 않도록 하기 위해서입니다.
![](https://files.readme.io/32f050056f1ee7e6445eb7df89488ff9bfcd135042143bf7c03151b753ab981f-_.png)
STEP 3. 복사된 디자인의 디자인 편집 버튼을 클릭해 스마트 디자인 Easy 화면으로 이동합니다.
![](https://files.readme.io/782598a832702d6e524523c2a7f0d7bca57a62153edfe4002b2453926851b425-_.png)
STEP 4. 하단의 HTML 수정을 클릭해 스마트 디자인 화면으로 이동합니다.
![](https://files.readme.io/69af56702232bb2217bcc5e7667ca2141b4e1bc7c3fc65b4fd8c8cf420035c4c-_.png)
STEP 5. 왼쪽 하단 폴더추가 버튼을 클릭해 노출된 팝업 화면에서 폴더명 항목에 saucelive를 입력 후 저장을 클릭합니다. 해당 폴더가 추가된 것을 확인할 수 있습니다.
![](https://files.readme.io/70e8d80009fa5603d844a52aa7568906bdf4819d73991d6622aa3842de5dfe87-.png)
STEP 6. 왼쪽 하단 화면추가 버튼을 클릭해 노출된 팝업 화면에서 앞에서 추가한 saucelive 폴더를 클릭합니다. 저장 경로는 saucelive로 지정되고, 파일명 항목에는 collection.html를 입력 후 저장을 클릭합니다.
![](https://files.readme.io/0c629a68af290baf7565768a54498a4113a2a5177602e0257cc00e385442a218-24__5.png)
STEP 7. 아래 코드를 복사해 앞서 추가한 collection.html 에 붙여 넣고 상단의 저장을 클릭 후 라이브 페이지를 직접 추가합니다.
확인해주세요.
모비두 담당자에게 전달 받은 파트너 ID 를 확인 후 const partnerId = " "에 해당 파트너ID로 변수명을 수정해야 합니다.
<!--@layout(/layout/basic/layout.html)-->
<div id='sauce_collect'></div>
<script type="text/javascript" src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
<script>
function flexCollectMoveBroadcast(params){
const regex = /\/broadcast\/([^?]+)/;
const match = params.broadcastUrl.match(regex);
if(!match) return
const broadcastId=match[1]
window.location.href="/saucelive/saucelive.html?broadcastId=" + broadcastId
}
window.addEventListener(
"load", async () => {
// 모비두에서 확인 받은 파트너 ID 를 정확히 입력해주세요
const partnerId = " ";
window.SauceWebLib.setInit({partnerId: partnerId ,searchBar:false });
window.SauceWebLib.load();
},
false
);
</script>
STEP 8. 코드를 적용한 디자인을 대표 디자인으로 설정합니다.
![](https://files.readme.io/2ed32eb7a9e66f14bcb1ed66ea6496205da9860e57b2fa29994510de5138e0ed-24_2_2.png)
PC Web 모드에서 회원 연동 작업이 완료되었습니다.
모바일 연동
STEP 1. 카페24에 대표운영자로 로그인합니다.
![](https://files.readme.io/ebb5cc4-1_.png)
STEP 2. 디자인 (PC/모바일) > 디자인 대시보드 > 디자인 보관함 > 모바일 탭에서 소스라이브를 적용할 디자인을 선택 후 복사합니다. 이는 실제 운영 중인 페이지에 영향이 가지 않도록 하기 위해서입니다.
![](https://files.readme.io/32f050056f1ee7e6445eb7df89488ff9bfcd135042143bf7c03151b753ab981f-_.png)
STEP 3. 복사된 디자인의 디자인 편집 버튼을 클릭해 스마트 디자인 화면으로 이동합니다.
![](https://files.readme.io/dc98cc9314ddd380bd16f5acfb33827e9790ba86a3883d3afde97ae193091f58-24_2.png)
STEP 4. 왼쪽 하단 폴더추가 버튼을 클릭해 노출된 팝업 화면에서 폴더명 항목에 saucelive를 입력 후 저장을 클릭합니다. 해당 폴더가 추가된 것을 확인할 수 있습니다.
![](https://files.readme.io/3c727b21c6432db7aa4798674bd8297bf1b1d3aaf114b71c309b21a8bf1d61c1-24_10-.png)
STEP 5. 왼쪽 하단 화면추가 버튼을 클릭해 노출된 팝업 화면에서 앞에서 추가한 saucelive 폴더를 클릭합니다. 저장 경로는 saucelive로 지정되고, 파일명 항목에는 collection.html를 입력 후 저장을 클릭합니다.
![](https://files.readme.io/9d6b221e130ed62e28767b829c08bd783f6a2befeb6b684c1ce93b9639879215-24_11__.png)
STEP 6. 아래 코드를 복사해 앞서 추가한 collection.html 에 붙여 넣고 상단의 저장을 클릭 후 라이브 페이지를 직접 추가합니다.
확인해주세요.
모비두 담당자에게 전달 받은 파트너 ID 를 확인 후 const partnerId = " "에 해당 파트너ID로 변수명을 수정해야 합니다.
<!--@layout(/layout/basic/layout.html)-->
<div id='sauce_collect'></div>
<script type="text/javascript" src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
<script>
function flexCollectMoveBroadcast(params){
const regex = /\/broadcast\/([^?]+)/;
const match = params.broadcastUrl.match(regex);
if(!match) return
const broadcastId=match[1]
window.location.href="/saucelive/saucelive.html?broadcastId=" + broadcastId
}
window.addEventListener(
"load", async () => {
// 모비두에서 확인 받은 파트너 ID 를 정확히 입력해주세요
const partnerId = " ";
window.SauceWebLib.setInit({partnerId: partnerId ,searchBar:false });
window.SauceWebLib.load();
},
false
);
</script>
STEP 7. 코드를 적용한 디자인을 대표 디자인으로 설정합니다.
![](https://files.readme.io/2ed32eb7a9e66f14bcb1ed66ea6496205da9860e57b2fa29994510de5138e0ed-24_2_2.png)
모바일 모드에서 모아보기 설치 작업이 완료되었습니다.
Updated 29 days ago