# 2024.04.01 재생목록 업데이트 안내

2024년 봄바람과 함께 찰나에 찾아온 새로운 기능, 샵 플레이어 재생목록을 소개드려요!\
한층 더 업그레이드된 편의성으로 돌아온 라이브러리 '필터' 기능과 '사이드 바'도 함께 만나보세요.🥳 

## 첫째, 샵플레이어를 재생목록으로 만들어보세요.

재생목록은 여러 개의 샵 플레이어를 묶어 만든 목록을 말해요. 재생목록이 만들어지면 위, 아래로 스와이프 하며 숏폼 콘텐츠를 끊임없이 보여줄 수 있어요. 고객을 귀찮게하는 광고가 없으니 다른 플랫폼이나 경쟁사로 이탈할 걱정도 없어요.\
현재는 '상품 배너'가 추가된 샵 플레이어만 재생목록에 포함시킬 수 있어요. 

### 샵플레이어 만들기

샵 플레이어 탭에서 상품 추가부터 해보세요! 숏폼과 연관된 상품을 1개만 연결해도 샵 플레이어가 활성화 돼요.\
상품 배너 정보를 입력한 후에는 반드시 **\[저장 및 업데이트] 버튼**을 클릭해 주세요.

{% tabs %}
{% tab title="상품추가" %}

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FHEkwuDGz5fVijiISt2pT%2F%EC%83%81%ED%92%88%EB%B0%B0%EB%84%88%EC%B6%94%EA%B0%8001.png?alt=media&#x26;token=cffc8a79-bc55-4b0d-802e-b2f43f909bda" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="샵플레이어 사이드바" %}

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FBRiS5SEGazQS0Jver874%2F%EC%83%81%ED%92%88%EB%B0%B0%EB%84%88%EC%B6%94%EA%B0%8002.png?alt=media&#x26;token=575e358b-c697-426f-a90c-31293eac5e99" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="상품배너 추가" %}

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2Fz48OeEHfi5LYEdiIwXL3%2F%EC%83%81%ED%92%88%EB%B0%B0%EB%84%88%EC%B6%94%EA%B0%8003.png?alt=media&#x26;token=9d5e5685-df31-4eec-9a1d-fee92f5be68f" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="저장 및 업데이트" %}

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FjnL8pIXPnvsxOfPBCp8L%2F%EC%83%81%ED%92%88%EB%B0%B0%EB%84%88%EC%B6%94%EA%B0%8004.png?alt=media&#x26;token=e45f59d0-c9cc-475c-adf3-46a69fc739fd" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

**->**[**상품배너 추가하기**](https://support.charlla.io/userguide/playlist/new#add-banner)**에서 더 자세히 알아보기**<br>

### 재생목록 만들기

\[라이브러리] > \[동영상 탭]에서 동영상 맨 앞의 체크박스를 선택하고 상단에 **\[ + 재생목록 만들기] 버튼**을 클릭 하세요.\
재생목록 만들기 팝업에서 새로운 재생목록 만들기 또는 기존 재생목록에 동영상을 추가할 수 있어요.

{% tabs %}
{% tab title="재생목록 만들기 버튼" %}

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FPmL6uto45cDU0CuARxSJ%2F01.png?alt=media&#x26;token=fb4e0b46-c7f3-45ca-8f5d-afc4c0537af3" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="재생목록 만들기 팝업" %}

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FVW0XKkMjqkkQc36sEk6b%2F02.png?alt=media&#x26;token=8a2b87b7-abd8-45f8-babb-fa52c287cd5d" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

**->**[**재생목록 만들기**](https://support.charlla.io/userguide/playlist/new)**에서 더 자세히 알아보기**

### 재생목록 탭

\[라이브러리] > \[재생목록 탭] > \[재생목록 카드]를 클릭하면 \[재생목록 편집 페이지]로 이동해요.\
편집페이지에서는 재생목록의 순서와 디자인을 변경할 수 있어요.

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FSlw5GFG7rl5R144YuXo6%2F%E1%84%8C%E1%85%A2%E1%84%89%E1%85%A2%E1%86%BC%E1%84%86%E1%85%A9%E1%86%A8%E1%84%85%E1%85%A9%E1%86%A8%20%E1%84%8F%E1%85%A1%E1%84%83%E1%85%B31.png?alt=media&#x26;token=d984026f-131b-469f-bce8-bf957d3aaa90" alt=""><figcaption></figcaption></figure>

### 순서 편집하기

{% tabs %}
{% tab title="1개씩 순서 변경하기" %}

1. 재생순서의 동영상 블럭에 마우스를 올리면 이동 가능한 상태로 변해요.
2. 동영상 블럭을 마우스로 클릭한 상태로 드래그하여 위, 아래로 움직여보세요.
3. 원하는 순서에 동영상 블럭을 놓고 **\[저장] 버튼**을 클릭하여 저장하세요.
4. **\[링크복사]** 또는 **\[코드복사]** 후 원하는 곳에 붙여넣기 하면 편집한 순서대로 재생되는 목록을 확인할 수 있어요.

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FqorpPr0MdNnJAqjI4Utq%2F%EA%B0%9C%EB%B3%84%EC%88%9C%EC%84%9C%EB%B3%80%EA%B2%BD01.png?alt=media&#x26;token=459ca84a-241a-489f-b306-b0df3d5e5b06" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="여러개를 한 번에 순서 변경하기" %}

1. 순서 변경을 원하는 동영상의 체크박스를 모두 선택해 주세요.
2. 동영상을 체크하면 상단에 **\[맨 위로 이동], \[맨 아래로 이동], \[목록에서 제외]** 버튼이 표시됩니다.
3. 선택한 동영상들을 먼저 보여주고싶다면 **\[맨 위로 이동]**&#xBC84;튼을, 나중에 보여주고싶다면 **\[맨 아래로 이동]**&#xBC84;튼을 클릭하세요.
4. 동영상을 맨 위, 맨 아래로 이동한 후 반드시 오른쪽 상단의 **\[저장]** 버튼을 클릭하여 변경 내용을 반영해 주세요.
5. **\[링크복사]** 또는 **\[코드복사]** 후 원하는 곳에 붙여넣기 하면 편집한 순서대로 재생되는 목록을 확인할 수 있어요.

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FKosryeLZA7CSK4CnSQbA%2F%EC%9D%BC%EA%B4%84%EB%B3%80%EA%B2%BD01.png?alt=media&#x26;token=141147d3-f7d5-4968-a6ce-ab12bfe4134c" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

**->** [**재생순서 가이드**](https://support.charlla.io/userguide/playlist/undefined)**에서 더 자세히 알아보기**

### 디자인 편집하기

재생목록은 PC < > 모바일 어떤 기기에서든 최적화된 쇼핑 경험을 제공하기 위해 반응형으로 제작되었어요.\
특히 PC에서는 쇼핑몰 디자인이나 상품에 따라 디스플레이를 달리 할 수 있도록 목록, 그리드, 슬라이드 3가지 레이아웃을 준비했어요. \[재생목록] > \[재생목록 카드] > \[디자인 탭]에서 레이아웃과 크기를 자유롭게 설정해 보세요!

{% tabs %}
{% tab title="목록" %}
**목록을 스크롤하며 쉽고 빠르게 필요한 정보를 얻을 수 있어요.**

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FOFLNAOOCqVxKV8K8kOl6%2Fpc%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%8305.png?alt=media&#x26;token=66e031c7-a92a-4d5f-abdd-ac9f8ac2af37" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="그리드" %}
**한 번에 많은 썸네일이 표시되기 때문에 페이지 공간 활용이 가장 좋아요.**

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2F9mtkm67M2nlEQXRjMiHu%2Fpc%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%8306.png?alt=media&#x26;token=965d6814-e8cd-4e0f-821d-acf580bf4b96" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="슬라이드" %}
**소수의 상품만 게시하여 메인 상품이나 시즌별 컬렉션을 강조할 때 효과적이에요.**

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FXz1fNnzkDlQhNq6t1EOc%2Fpc%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%8307.png?alt=media&#x26;token=aa602860-c46f-4c89-94e4-521124e4307e" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="PC 레이아웃 편집" %}
재생목록은 최적의 숏폼 시청과 쇼핑 경험을 제공할 수 있도록 모바일 / PC 화면이 달라요. 모바일인 경우 항상 동일한 형태로 표시 되지만, PC인 경우 숏폼과 상품 목록의 '배치 방식'을 선택할 수 있어요.

1. \[디자인 탭] > \[PC 레이아웃 메뉴]에서 목록, 그리드, 슬라이드 레이아웃 중 하나를 클릭하세요.
2. 선택한 레이아웃은 페이지 미리보기에서 자세히 볼 수 있어요.
3. 쇼핑몰과 비슷한 환경에서 재생목록을 미리보고 싶다면, 상단의 **\[미리보기]** 버튼을 클릭하세요.\
   -> [**새창으로 미리보기**](#window-preview) 로 이동하여 더 자세히 알아보기&#x20;
4. 디자인 탭에서 수정사항이 생기면 메뉴 상단 배경이 어둡게 변경되며 **\[미리보기]**, **\[변경취소]**, **\[저장하기]** 버튼이 표시돼요. **\[저장하기]** 버튼을 클릭하여 선택한 PC 레이아웃을 반영해 주세요.
5. **\[링크복사]** 또는 **\[코드복사]** 후 원하는 곳에 붙여넣기 한 다음, PC에서 재생목록을 확인해 보세요.&#x20;

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FLyU3pWfIfQuCTi0m3Uuu%2Fpc%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%8301.png?alt=media&#x26;token=85f18945-0f31-4666-8330-a7208c9478e7" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FQQhTe8XG3SikAqlJ5D0C%2Fpc%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%8302.png?alt=media&#x26;token=61a95c79-cd25-4cfe-a0a5-9864cdb9f5dd" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2F0JDVDqft2XwP1B4OWknx%2Fpc%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%8303.png?alt=media&#x26;token=5946681b-8759-4144-bebd-cb38b40e28d7" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="크기 설정" %}
높이'를 설정하여 재생목록의 크기를 조절할 수 있어요. 기본으로 설정된 높이는 640px이에요. PC에 샵 플레이어 재생목록을 최적으로 시청할 수 있는 높이를 설정했어요. 샵 플레이어 높이를 변경하고 싶다면, 크기 설정에서 높이 입력값을 수정해 주세요.

1. **\[디자인 탭] > \[크기 설정]** 메뉴에서 높이 인풋박스의 숫자를 변경해 주세요.
2. 기본 640px로 입력되어 있으며, 샵 플레이어 크기가 커지길 원한다면 그 이상의 숫자를 입력해 주세요. \
   최소 520px \~ 최대 800px 범위까지 입력할 수 있어요. 최소, 최대 입력 범위를 벗어나면, 가까운 최소값, 최대값으로 바뀌어요. 예를들면, 300px을 입력한 경우 520px로 변경돼요. 재생목록 크기가 너무 작아지거나 너무 커지면 사
3. 페이지 내에서는 높이 변경을 미리볼 수 없어요. 상단의 **\[미리보기]** 버튼을 클릭하세요. 쇼핑몰과 최대한 비슷한 환경에서 높이를 확인할 수 있어요.\
   -> [**새창으로 미리보기**](#window-preview) 로 이동하여 더 자세히 알아보기
4. 디자인 탭에서 수정사항이 생기면 메뉴 상단 배경이 어둡게 변경되며 **\[미리보기]**, **\[변경취소]**, **\[저장하기]** 버튼이 표시돼요. **\[저장하기]** 버튼을 클릭하여 높이를 반영해 주세요.

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FgWk61YoyvzyF3czhdoId%2F%EB%86%92%EC%9D%B4%EC%84%A4%EC%A0%9501.png?alt=media&#x26;token=352d6d03-8895-4b12-adae-fd0d12fb9f0c" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2F3ZbvRiRkKNEcZp2uEycY%2F%EB%86%92%EC%9D%B4%EC%84%A4%EC%A0%9502.png?alt=media&#x26;token=524284ba-9ff8-4dfc-acc5-2a13204a6f32" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

**->**[**디자인 탭 가이드**](https://support.charlla.io/userguide/playlist/undefined-1)**에서 더 자세히 알아보기**<br>

### Q. 어떤 플랜을 구독하면 재생목록을 사용할 수 있나요?

{% hint style="info" %}
A. 샵 플레이어 기능이 플랜에 포함된 **'스탠다드' 플랜** 구독 시에만 재생목록 기능을 사용할 수 있어요. \
더 많은 분들이 재생목록을 사용할 수 있도록 <mark style="color:purple;">**이벤트가 예정**</mark>되어 있으니 기대해 주세요 !&#x20;
{% endhint %}

### Q. 로드 수는 어떻게 계산되나요?

{% hint style="info" %}
재생목록의 로드 수도 현재와 동일하게 적용돼요. 즉, 샵 플레이어가 1번 Load(재생 준비) 될 때마다 1씩 증가하며, 이후 반복 재생이 되는 경우는 증가하지 않습니다. 재생목록의 경우 1번 **'스와이프'** 될 때마다 로드 수가 1씩 증가해요. 예를 들어, 재생목록에서 1번 > 2번 > 다시 1번 순서로 동영상을 시청했을 때, 1번은 2회, 2번은 1회 로드 수가 계산되어 총 3회 로드 수가 발생해요.\
\
재생목록 과금에 대한 더 자세한 사항은 1:1 채팅으로 문의 주세요!\ <img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FGEJ2ztxSEkGinzi41aIE%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-04-01%2010.26.59.png?alt=media&#x26;token=cbea1777-59ba-47ef-b40c-8c4165df55d1" alt="" data-size="original">
{% endhint %}

## 둘째, 원하는 플레이어만 모아보는 '필터' 기능을 만나보세요!

* 필터는 \[라이브러리] > \[동영상 탭]에서 찾을 수 있어요.
* 모든 플레이어 보기 : 동영상 목록에 업로드 된 동영상 목록 전체를 보여줘요.
* 디스플레이어만 보기 : 상품 배너가 없는 동영상들만 표시해요. 배너가 추가된 동영상들은 제외돼요.
* 샵 플레이어만 보기 : 상품 배너가 추가된 동영상들만 표시해요. 상품 배너가 없는 동영상들은 제외돼요.

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2F2G8YjIORduXx9pjaXjIR%2F%ED%95%84%ED%84%B001.png?alt=media&#x26;token=9f60d6a5-60f4-4095-bf34-d4cfc632fc94" alt=""><figcaption></figcaption></figure>

* 필터가 적용되면 필터 UI가 활성화 표시로 변경돼요.

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FQHr4qloWSITrGcYl26TZ%2F%ED%95%84%ED%84%B002.png?alt=media&#x26;token=8a5a15cf-87e8-47a7-9f15-56c7f97b3bfc" alt=""><figcaption></figcaption></figure>

## 셋째, 샵플레이어 상품 배너를 30개까지 추가할 수 있어요!

{% tabs %}
{% tab title="사이드바 UI 개선" %}

* 이전에 상품 배너와 미리보기를 동시에 볼 수 없어서 스크롤을 하시느라 불편하셨죠?\
  플레이어 탭을 좌측으로 옮기고 미리보기와 배너의 배치를 나란히 하여 편의성을 높였어요. 완전히 달라진 사이드바를 경험하세요!
* 샵 플레이어에 추가할 수 있는 상품 배너의 개수가 최대 30개로 늘어났어요. 숏폼 콘텐츠와과 연관성 높은 상품을 더 많이 노출하여 구매 전환율을 높여보세요!

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FW1RDIMPqB1br69aOMVU4%2F%EC%82%AC%EC%9D%B4%EB%93%9C%EB%B0%9401.png?alt=media&#x26;token=16c89eda-5cf4-4d70-bc58-b325c385d327" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="라이브러리 '대표상품 행' 업데이트 " %}

* 샵 플레이어에 상품 배너를 30개까지 확장하며 라이브러리에 상품 배너가 표시되는 방법을 바꾸었어요.
* 업데이트 후에는 첫번째 배너 = 대표 상품명과 총 몇 개의 배너가 있는지 숫자 태그가 함께 표시돼요.

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FIn9PTMwzrJio7pLax3RL%2F%EC%82%AC%EC%9D%B4%EB%93%9C%EB%B0%9402.png?alt=media&#x26;token=55586e6c-8ab9-43d7-b3f7-99e0f2373aa8" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}