> 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/design/editor/contents/advanced/lottie.md).

# 로티 블록

## 로티(Lottie)란?

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FY5EL85QJBnrogxiLhqr1%2F%ED%9A%8C%EC%83%89%20%ED%85%8C%EB%91%90%EB%A6%AC.gif?alt=media&amp;token=2b829c7f-df01-42d3-8d2a-44e04eb3dcaa" alt=""><figcaption></figcaption></figure>

로티(Lottie)는 JSON기반의 애니메이션 파일을 제공하는 플랫폼 입니다. \
모션 애니메이션은 사이트에 생동감을 부여하고, 사용자에게 보다 쉽게 사이트의 정보를 이해 시키는 등 \
많은 장점을 갖고 있습니다.

로티의 파일은 GIF, MP4에 비해 적은 용량에 높은 품질을 갖고 있기에 다양한 애니메이션 파일을 활용하여 더 효과적인 사이트 디자인을 할 수 있습니다.

로티(Lottie)에서 제공하는 파일 업로드 또는 링크 연결을 통 사이트에 다양한 애니메이션을 적용할 수 있습니다.

## 1. 블록 추가하기

1\. 추가 패널의 **\[Quick]** 아이콘 또는 **\[Advanced]** 아이콘을 클릭합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FJEteQMSku3895SG4m66P%2F1_%EC%B6%94%EA%B0%80%20%ED%8C%A8%EB%84%90_%EA%B3%A0%EA%B8%89.png?alt=media&amp;token=02863ca2-e5d3-41e1-aa5e-0cf0b2d20ade" alt=""><figcaption></figcaption></figure>

2\. **\[로티 블록]**&#xC744; 클릭하여, 에디터에 적용합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FQmUfWWIxq8aN34q6MWG8%2F2_%EB%A1%9C%ED%8B%B0%20%EB%B8%94%EB%A1%9D.png?alt=media&amp;token=e852b174-f3bc-44d2-9c53-c4288e6e7239" alt=""><figcaption></figcaption></figure>

3\. 아래 **\[로티 블록 설정하기]** 가이드를 참고하여 로티 블록을 설정합니다.

## 2. 로티 블록 설정하기

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FotWEiCYZqdniBGefM3qI%2F%EB%A1%9C%ED%8B%B0%201920.png?alt=media&amp;token=eab90926-1c0f-4fd0-8be6-d5491250aaca" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
로티(Lottie)의 자세한 사용방법은 \[2. 큐샵에 애니메이션 적용하기] 가이드를 참고 부탁드립니다.
{% endhint %}

{% tabs %}
{% tab title="애니메이션 설정 항목" %}

| <p><strong>애니메이션 선택</strong><br>파일 업로드 또는 URL 링크 연결을 통해 로티의 애니메이션을 적용할 수 있습니다.</p>                                         |
| -------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>파일찾기</strong><br>키워드 검색을 통해 로티에서 원하는 애니메이션을 찾아 볼 수 있습니다.</p><ul><li>영문으로 검색 시 더 정확한 검색 결과를 얻을 수 있습니다.</li></ul> |
| <p><strong>미리보기</strong><br>등록한 애니메이션을 재생합니다.</p>                                                                          |
| <p><strong>썸네일 위치 설정</strong><br>등록한 애니메이션의 썸네일이 적용이 될 위치를 선택합니다.</p><ul><li>프레임 단위로 애니메이션 위치 지정</li></ul>                 |
| {% endtab %}                                                                                                               |

{% tab title="상세설정 설정항목" %}

| <p><strong>반복</strong><br>애니메이션의 반복 재생을 선택합니다.</p>                                                                                                                                                                                                                                             |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>재생 방향</strong><br>애니메이션이 재상이 되는 방향을 선택합니다.</p>                                                                                                                                                                                                                                      |
| <p><strong>재생 속도</strong><br>애니메이션이 재생 되는 속도를 설정합니다.</p>                                                                                                                                                                                                                                       |
| <p><strong>재생 조건</strong><br>자동 또는 수동 재생으로 선택이 가능합니다.</p><ul><li>수동 재생\_마우스오버 시작<br>애니메이션에 마우스를 올릴 때 재생이 시작 됩니다.<br>마우스를 뗀 후에도 재생이 계속 됩니다.</li><li>수동 재생\_마우스오버 유지<br>애니메이션에 마우스가 올라가 있을 경우 재생이 됩니다.<br>마우스를 떼면 재생이 중지 됩니다.</li><li>수동 재생\_스크롤<br>페이지를 스크롤 하여 해당 위치에 도달했을 때 재생이 됩니다.</li></ul> |
| {% endtab %}                                                                                                                                                                                                                                                                                   |
| {% endtabs %}                                                                                                                                                                                                                                                                                  |

## 3. 큐샵에 애니메이션 적용하기

아래 내용을 참고하여 사이트에 로티(Lottie) 애니메이션을 적용 할 수 있습니다.

1\. [로티(Lottie) 홈페이지](https://lottiefiles.com/kr/)에 접속하여, 회원가입 또는 로그인을 합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FlZqEzzQkr9hH1JKnMw1U%2F1_%EB%A1%9C%ED%8B%B0%20%EB%A1%9C%EA%B7%B8%EC%9D%B8.png?alt=media&amp;token=be1a2d78-8fe1-4565-9426-5826cf1aa2a1" alt=""><figcaption></figcaption></figure>

2\. 오른쪽 위 **\[대시보드로 가기]** 버튼을 클릭하여, 대시보드로 이동합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2Fl5VvXJ3P4GmOtuwsMPKi%2F2_%EB%A1%9C%ED%8B%B0%20%EB%8C%80%EC%8B%9C%EB%B3%B4%EB%93%9C.png?alt=media&amp;token=c7ca07df-605c-4446-b968-15806442c5b7" alt=""><figcaption></figcaption></figure>

3\. 각 항목의 오른쪽 끝 \[View more] 버튼을 클릭합니다.

{% hint style="info" %}
무료 버전에서는 최대 10개의 애니메이션 사용이 가능합니다. \
더 다양하고 많은 애니메이션 사용을 위해서는 \[[로티 요금제 업그레이드](https://lottiefiles.com/kr/pricing)]가 필요합니다.
{% endhint %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FAy9TTJ0p1MeppG8IXXaZ%2F3_%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98%20%EB%8D%94%EB%B3%B4%EA%B8%B0.png?alt=media&amp;token=7a1084b5-12a5-4bb0-a1e2-fab01def3f42" alt=""><figcaption></figcaption></figure>

4\. 다양한 애니메이션 중 원하는 애니메이션을 선택합니다.

{% hint style="info" %}
오른쪽 위 검색탭에 키워드를 검색하여 애니메이션을 찾을 수 있습니다.\
영문으로 검색 시 더 정확한 검색 결과를 얻을 수 있습니다.
{% endhint %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FQB7wsOWB3Wv7tywTtHUK%2F4_%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98%20%EC%84%A0%ED%83%9D.png?alt=media&amp;token=f0aede8a-1b80-4649-8764-b448b4b270a5" alt=""><figcaption></figcaption></figure>

5\. 선택한 애니메이션 오른쪽 위 **\[다운로드]** 버튼을 클릭합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2Fuhs9dKPK1vmYcBFKsN2J%2F5_%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C%20%EB%B2%84%ED%8A%BC.png?alt=media&amp;token=80b0bc52-a673-4172-ae2f-7cde822367c0" alt=""><figcaption></figcaption></figure>

6\. 파일 다운로드 또는 애니메이션 URL 등록 방법으로 로티 블록에 적용할 수 있습니다.

{% hint style="info" %}
로티 블록에 사용이 되는 애니메이션 파일은 [IconScout](https://iconscout.com/)  / [Creattie](https://creattie.com/) 에서도 다운이 가능합니다.
{% endhint %}

<details>

<summary>다운로드 파일 적용 방법</summary>

1. Download & Handoff 항목 중 \[Download] 를 선택합니다.
2. 가장 첫번째 Lottie JSON 파일 옆 \[Download]버튼을 클릭하여 파일을 다운 받습니다.

   <figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FuBJPZy6jLDgjwFK0G6YF%2F6_%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C.png?alt=media&amp;token=138cf2a7-4a75-4674-a5af-56c83da4fadd" alt=""><figcaption></figcaption></figure>
3. 로티 블록의 업로드 방식을 **\[파일]**&#xB85C; 선택한 후 파일 업로드를 합니다.

   <figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FEjoXJjeYuY02TWjj8Yqw%2F7_%ED%8C%8C%EC%9D%BC%20%EC%97%85%EB%A1%9C%EB%93%9C_1280.png?alt=media&amp;token=c76a75f4-87bc-402a-8c1b-3df785b03e63" alt=""><figcaption></figcaption></figure>
4. \[로티블록]가이드를 참고하여 블록 설정을 합니다.

</details>

<details>

<summary>URL적용 방법</summary>

1. Download & Handoff 항목 중 Handoff 를 선택합니다.

* URL방식의 경우, 로티 계정의 유료 구독 유무에 따라 일정 기간 경과시 링크가 만료될 수 있습니다.

2. 가장 첫번째 \[Enable Asset Link] 토글을 활성합니다.
3. 아래 활성 된 \[Asset Link]링크를 복사합니다.

   <figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FmAe6qQn10YWy2eIWZiji%2F8_URL%20%EB%B3%B5%EC%82%AC.png?alt=media&amp;token=8e739133-b579-47a2-8160-ea4c922a4e15" alt=""><figcaption></figcaption></figure>
4. 로티 블록의 업로드 방식을 \[URL]로 선택한 후 복사한 링크를 붙여넣습니다.

   <figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2Ftyt16zdWYTaDxBbdP0Xu%2F9_URL%20%EB%B6%99%EC%97%AC%EB%84%A3%EA%B8%B0_1280.png?alt=media&amp;token=321efb25-22f8-418b-a7b3-dd881ead2816" alt=""><figcaption></figcaption></figure>
5. \[로티블록]가이드를 참고하여 블록 설정을 합니다.

</details>

7\. 파일 등록 및 블록 설정이 완료 되었다면 \[게시하기]버튼을 클릭하여 사이트에 적용합니다.

## 4. 로티활용 사례

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FIAfBay6AouzkIkGBvfby%2F10_%ED%99%9C%EC%9A%A9%20%EC%82%AC%EB%A1%80.png?alt=media&amp;token=bede3d38-8e72-480d-9218-3cfbc2a9be41" alt=""><figcaption></figcaption></figure>

로티(Lottie)는 토스, 배달의 민족, 무신사, 디즈니, 넷플릭스 등 국내외 많은 브랜드에서도 사용을 하고 있는 플랫폼 입니다.

아래 바로가기를 통해 다양한 애니메이션을 활용하여 브랜드의 개성을 나타내고 있는 사례들을 확인해보세요

\[ [로티(Lottie) 활용 사례 바로가기](https://lottiefiles.com/kr/case-studies) ]