로티 블록

로티(Lottie)란?

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

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

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

1. 블록 추가하기

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

2. [로티 블록]을 클릭하여, 에디터에 적용합니다.

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

2. 로티 블록 설정하기

로티(Lottie)의 자세한 사용방법은 [2. 큐샵에 애니메이션 적용하기] 가이드를 참고 부탁드립니다.

애니메이션 설정 항목

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

상세설정 설정항목

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

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

1. 로티(Lottie) 홈페이지에 접속하여, 회원가입 또는 로그인을 합니다.

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

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

무료 버전에서는 최대 10개의 애니메이션 사용이 가능합니다. 더 다양하고 많은 애니메이션 사용을 위해서는 [로티 요금제 업그레이드]가 필요합니다.

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

오른쪽 위 검색탭에 키워드를 검색하여 애니메이션을 찾을 수 있습니다. 영문으로 검색 시 더 정확한 검색 결과를 얻을 수 있습니다.

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

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

로티 블록에 사용이 되는 애니메이션 파일은 IconScout / Creattie 에서도 다운이 가능합니다.

다운로드 파일 적용 방법

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

2. 가장 첫번째 Lottie JSON 파일 옆 [Download]버튼을 클릭하여 파일을 다운 받습니다.

   
3. 로티 블록의 업로드 방식을 [파일]로 선택한 후 파일 업로드를 합니다.

   
4. [로티블록]가이드를 참고하여 블록 설정을 합니다.

URL적용 방법

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

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

1. 가장 첫번째 [Enable Asset Link] 토글을 활성합니다.

2. 아래 활성 된 [Asset Link]링크를 복사합니다.

   
3. 로티 블록의 업로드 방식을 [URL]로 선택한 후 복사한 링크를 붙여넣습니다.

   
4. [로티블록]가이드를 참고하여 블록 설정을 합니다.

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

4. 로티활용 사례

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

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

[ 로티(Lottie) 활용 사례 바로가기 ]