> For the complete documentation index, see [llms.txt](https://help.qshop.ai/customer_support/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.qshop.ai/customer_support/guide/tip/animation.md).

# 애니메이션 활용하기

애니메이션은 텍스트, 이미지 등의 요소에 시각적 효과를 적용하는 기능입니다.

애니메이션 효과를 적용하여 브랜드의 특색을 자연스럽게 나타내고, 특정 콘텐츠에 집중 할 수 있도록 디자인 구성을 할 수 있다는 장점을 가지고 있습니다.

큐샵에서는 에디터의 설정, 로티 블록, 코드 등 다양한 방법으로 요소에 애니메이션 효과를 적용하여 사이트 디자인을 할 수 있습니다.

애니메이션 효과를 적용하는 자세한 방법은 아래 가이드를 참고 부탁드립니다.

## 1. 속성패널 사용하기

<figure><img src="/files/WhDyi7fdVshSpYYzv0ve" alt=""><figcaption></figcaption></figure>

도형, 이미지, 텍스트 등 다양한 블록에 애니메이션 설정을 할 수 있습니다.

블록을 선택한 뒤 에디터 오른쪽 **\[속성패널 > 고급]** 설정을 통해 슬라이드, 페이드 등 다양한 애니메이션을 적용 할 수 있으며 여러 블록의 동작시간을 서로 다르게 설정하여 다양한 시각적 효과를 만들어 줄 수 있습니다.

애니메이션 설정의 자세한 방법은 \[[속성패널](/customer_support/guide/design/editor/rnb.md)] 가이드를 참고 부탁드립니다.

{% hint style="warning" %}
블록에 적용 된 애니메이션 효과는 PC와 모바일에서 동일하게 작동 됩니다.
{% endhint %}

## 2. 로티 블록 사용하기

<figure><img src="/files/hMMAKFQz3Lb54kI4YxW3" alt=""><figcaption></figcaption></figure>

로티(Lottie)는 JSON기반의 애니메이션 파일을 제공하는 플랫폼 입니다.

로티에서 제공하는 다양한 이미지를 활용하여, 사이트에 생동감을 부여하고 사이트의 정보를 쉽게 이해 시키는 등 많은 장점을 가지고 있습니다.

로티 블록을 사용하는 자세한 방법은 \[[로티블록](/customer_support/guide/design/editor/contents/advanced/lottie.md)] 가이드를 참고 부탁드립니다.

## 3. 코드 사용하기

<figure><img src="/files/YKI7tBtuW8Fl2yjZXb2P" alt=""><figcaption></figcaption></figure>

큐샵은 코드블록, 커스텀 코드 에디터 등을 통해 사이트 내 코드를 통해 디자인 구성을 할 수 있습니다.

사용자의 역량에 따라 보다 다양한 종류의 애니메이션을 만들어 사용을 할 수 있습니다.

\[[Claude](https://claude.ai/) / [ChatGPT](https://chatgpt.com/)]등 AI 플랫폼을 통해 애니메이션 적용에 필요한 코드를 쉽게 만들어 보실 수 있습니다.

커스텀 코드를 사용하는 자세한 방법은 \[[커스텀 코드 에디터](/customer_support/guide/design/custom/editor.md)] 가이드를 참고 부탁드립니다.

{% hint style="danger" %}
커스텀 코드는 큐샵에서 제공하는 기능이 아닌 직접 코드를 작성하여 사용을 해야하기때문에 디자인에 필요한 애니메이션 코드 안내 및 코드로 인해 발생하는 현상에 대해서는 안내가 불가능합니다.
{% endhint %}


---

# 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://help.qshop.ai/customer_support/guide/tip/animation.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.