> 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="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FfyU57ih0LJFfsahIOLz6%2F%EC%97%90%EB%94%94%ED%84%B0_%EC%86%8D%EC%84%B1%ED%8C%A8%EB%84%90.gif?alt=media&amp;token=8af9b989-3e5f-474b-8c54-0fd072bd00ba" alt=""><figcaption></figcaption></figure>

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

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

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

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

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

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2Fidda7E0eAuoGd5wsJ9Fm%2F0-1_%EB%A1%9C%ED%8B%B0gif.gif?alt=media&amp;token=8e165965-cc7f-4bd5-9fb9-b4ec3df56071" alt=""><figcaption></figcaption></figure>

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

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

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

## 3. 코드 사용하기

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FVOOEAB7qxKBwdFKTaePE%2F%EC%97%90%EB%94%94%ED%84%B0_%EC%BD%94%EB%93%9C2.gif?alt=media&amp;token=5afe70a3-b4d6-4c16-889f-3e812c329525" alt=""><figcaption></figcaption></figure>

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

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

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

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

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