> 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/userguide/motion-thumbnail.md).

# 모션 썸네일

### 1. 모션 썸네일이란 무엇인가요? 

모션 썸네일은 정적인 **상품 썸네일 이미지를 동영상으로 대체해 보여주는 기능**입니다.\
스크립트를 한 번만 삽입하면 별도의 코딩 없이 몇 번의 클릭만으로 움직이는 썸네일을 적용할 수 있어요. \
모션 썸네일로 고객의 시선을 사로잡고 구매 전환율을 높여 보세요!

{% hint style="success" %}

#### **이런 분들에게 유용해요**

* 복잡한 코딩 없이 썸네일에 동영상을 적용하고 싶은 쇼핑몰 운영자
* 상품 영상을 활용해 더 많은 클릭과 구매를 유도하고 싶은 마케터
  {% endhint %}

[<mark style="color:$info;">\[상품의 썸네일 이미지 vs 모션 썸네일 비교해보기</mark>](https://charllasample.cafe24.com/category/%EC%8D%B8%EB%84%A4%EC%9D%BC-%ED%94%8C%EB%A0%88%EC%9D%B4%EC%96%B4/32/)<mark style="color:$info;">]</mark>

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FsQeJvGKBwd4zILMshi8H%2F%E1%84%86%E1%85%A9%E1%84%89%E1%85%A7%E1%86%AB%E1%84%8A%E1%85%A5%E1%86%B7%E1%84%82%E1%85%A6%E1%84%8B%E1%85%B5%E1%86%AF.png?alt=media&amp;token=ad9a461a-1c1f-426c-9fb6-a0b806f06f64" alt=""><figcaption></figcaption></figure>

### 2. 주요 특징이 뭔가요?&#x20;

#### 한 번의 설치로 간편하게

* 스크립트를 한 번만 삽입하면 별도의 코딩 없이 이미지와 동영상을 간편하게 연결할 수 있어요.

#### 모든 플랜에서 자유롭게

* 이용 중인 요금제와 관계없이 모든 플랜에서 사용할 수 있어요.

#### 어떤 상품이든 유연하게

* 찰나에 직접 등록한 상품과 카페24 연동 상품 모두 이미지에 영상을 적용할 수 있어요.

### 3. 어떻게 적용하나요?

{% stepper %}
{% step %}

#### [**스크립트 설치하기**](/userguide/motion-thumbnail/installation.md)

* 안내에 따라 찰나에서 제공하는 스크립트 코드를 쇼핑몰에 삽입해 주세요.
* 카페24 연동 고객은 버튼을 한 번 클릭해 간편하게 스크립트를 설치할 수 있어요.

{% hint style="info" %}

#### **`</body>` 태그를 쉽게 찾는 방법**

HTML 편집 화면에서 **`Ctrl + F`**(Mac은 **`Command + F`**)를 누른 후 **`</body>`**&#xB97C; 검색해 주세요.&#x20;

검색된 <mark style="color:$primary;">**`</body>`**</mark><mark style="color:$primary;">**&#x20;**</mark><mark style="color:$primary;">**태그 바로 윗줄**</mark>에 복사한 스크립트 코드를 붙여 넣으면 됩니다.
{% endhint %}
{% endstep %}

{% step %}

#### [**상품과 동영상 연결하기**](/userguide/motion-thumbnail/mapping.md)

* 모션 썸네일을 적용할 상품을 직접 등록하거나 카페 24에서 연동한 상품을 선택한 후, 상품 이미지에 적용할 동영상을 연결해요.

{% hint style="info" %}

### **더 쉽게 이미지 URL 복사하는 방법**&#x20;

이미지에 마우스 우클릭으로 \[이미지 주소 복사]를 선택하면 이미지 URL을 간편하게 복사할 수 있어요.

<img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FGFtIsNOhikUoiLEZcGko%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%202026-08-19%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%204.31.28.png?alt=media&amp;token=80b3db54-9361-484d-82c4-d02673551690" alt="" data-size="original">
{% endhint %}
{% endstep %}

{% step %}

#### [**모션 썸네일 설정하기** ](/userguide/motion-thumbnail/settings.md)

* 동영상 연결 설정에서 모션 썸네일을 적용할 이미지를 선택해 설정을 변경할 수 있어요.
  {% endstep %}

{% step %}

#### 내 쇼핑몰에서 모션 썸네일 확인하기&#x20;

* 스크립트를 설치한 페이지에서 적용된 모션 썸네일을 확인해보세요!
* 카페24 연동 상품은 메인페이지, 검색페이지에 적용됩니다.
  {% endstep %}
  {% endstepper %}

### FAQ.  자주 묻는 질문&#x20;

<details>

<summary><strong>카페24가 아닌 다른 플랫폼에서도 사용할 수 있나요?</strong></summary>

네. 이용 중인 플랫폼과 관계없이 스크립트를 설치하면 모션 썸네일을 사용할 수 있어요.

</details>

<details>

<summary><strong>이미지는 몇 개까지 연결할 수 있나요?</strong></summary>

상품 1개당 최대 4개의 이미지를 등록할 수 있어요. 카페24 연동 상품은 상품 이미지가 자동으로 등록돼요.

</details>

<details>

<summary><strong>카페24 상품 정보를 모션 썸네일에서 수정할 수 있나요?</strong></summary>

아니요. 연동된 상품 정보는 조회만 가능해요. 상품명이나 가격 등을 변경하려면 카페24에서 수정해 주세요.

</details>

<details>

<summary><strong>이미지 URL은 어떻게 확인하나요?</strong></summary>

이미지 위에서 마우스 오른쪽 버튼을 클릭한 후, **‘이미지 주소 복사’**&#xB97C; 선택하면 개발자 도구 없이도 간편하게 확인할 수 있어요.

</details>

<details>

<summary><strong>[재연결 필요] 상태가 되었어요. 어떻게 해결하나요?</strong></summary>

\[재연결 필요] 상태는 모션 썸네일에 연결된 상품이나 동영상 정보가 변경되는 등 예외적인 상황에서 표시돼요. 원인에 따라 아래 방법으로 다시 연결해 주세요.

* **동영상 또는 상품 연결이 끊어진 경우**\
  \[영상 연결] 또는 \[상품 연결] 버튼을 클릭해 다시 연결해 주세요.
* **카페24 상품 정보와 찰나에 연동된 정보가 일치하지 않는 경우**\
  \[상품 설정] 탭에서 \[새로고침] 버튼을 클릭해 최신 정보로 업데이트해 주세요.
* **현재 플랜의 업로드 수를 초과한 경우**\
  \[결제 관리]에서 플랜을 업그레이드하거나 기존 영상을 삭제해 업로드 공간을 확보해 주세요.

위 방법으로 해결되지 않는 경우, 상담톡으로 문의해 주시면 확인 후 처리해 드릴게요.

</details>


---

# 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/userguide/motion-thumbnail.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.