> For the complete documentation index, see [llms.txt](https://support.charlla.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://support.charlla.io/charllaintro/releasenote/2024.04.01.md).

# 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&amp;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&amp;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&amp;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&amp;token=e45f59d0-c9cc-475c-adf3-46a69fc739fd" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

**->**[**상품배너 추가하기**](/userguide/playlist/new.md#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&amp;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&amp;token=8a2b87b7-abd8-45f8-babb-fa52c287cd5d" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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

### 재생목록 탭

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

<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&amp;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&amp;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&amp;token=141147d3-f7d5-4968-a6ce-ab12bfe4134c" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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

### 디자인 편집하기

재생목록은 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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;token=524284ba-9ff8-4dfc-acc5-2a13204a6f32" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

**->**[**디자인 탭 가이드**](/userguide/playlist/undefined-1.md)**에서 더 자세히 알아보기**<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&amp;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&amp;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&amp;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&amp;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&amp;token=55586e6c-8ab9-43d7-b3f7-99e0f2373aa8" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://support.charlla.io/charllaintro/releasenote/2024.04.01.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.