> 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 %}