WordPress에서 Lottie 애니메이션을 사용하는 방법

WordPress 웹 사이트에 애니메이션을 통합하는 것은 지친 웹 페이지에 활기를 불어넣고 방문자가 사이트에 머무는 동안 계속 참여하도록 하는 좋은 방법입니다. 이를 수행하는 쉽고 효율적인 방법은 고품질의 가벼운 애니메이션인 lottie 애니메이션을 사용하는 것입니다.

Lottie 애니메이션은 여러 가지 이유로 인기가 높아지고 있으며, 인기를 얻고 웹사이트를 멋지게 꾸밀 준비가 되어 있다면 이 애니메이션이 적합할 수 있습니다.

이러한 애니메이션을 만들고 WordPress 사이트에 원활하게 추가하는 몇 가지 다른 방법이 있습니다.

롯데애니메이션이란?

Lottie는 After Effects 애니메이션을 렌더링하고 애니메이션 데이터를 일반적인 이미지 파일 형식과 달리 JSON 파일로 내보낼 수 있는 Android, iOS, 웹 및 Windows용 라이브러리입니다. 요컨대, 정적 자산을 재미있고 매력적인 것으로 쉽게 대체할 수 있습니다.

이 오픈 소스 솔루션은 AirBnB 팀에 의해 처음 소개되었지만 다양한 시장의 디자이너와 애니메이터 사이에서 빠르게 인기를 얻고 있습니다. WordPress 웹 사이트에서 lottie 애니메이션을 사용할 때의 큰 장점 중 하나는 GIF 애니메이션이나 mp4 파일에 비해 파일 크기가 매우 작다는 것입니다. 또한 유연한 애니메이션 형식을 통해 브라우저에서 렌더링을 처리할 수 있습니다.

복권 애니메이션을 사용할 수 있는 많은 가능성이 복권 애니메이션이 인기 있는 한 가지 이유입니다. lottie 애니메이션을 애니메이션 헤더, 버튼, 눈길을 끄는 그래픽 요소 등으로 사용할 수 있습니다. 방문자가 웹 페이지를 스크롤하거나, 가리키거나, 클릭할 때 애니메이션이 트리거되도록 설정할 수도 있습니다. B2C 및 B2B 웹 사이트 모두에 대한 다양성과 쉬운 구현은 웹 디자인의 품질과 전반적인 모양을 개선하는 획기적인 방법입니다.

Lottie 애니메이션 만들기

귀하의 사이트에 복권 애니메이션을 추가할지 여부를 고려할 때 먼저 주식 또는 사용자 정의 접근 방식을 할지 여부를 결정해야 합니다. 각각 장단점이 있으므로 결정하기 전에 두 옵션을 모두 고려하는 것이 좋습니다.

모든 유형의 애니메이션에서는 항상 적을수록 좋습니다. 애니메이션 요소를 웹사이트 재설계에 통합할 때 해당 애니메이션이 고객의 여정에서 어떤 역할을 하는지 고려하십시오.

커스텀 로티 애니메이션

웹 사이트를 위한 맞춤형 로티 애니메이션을 찾고 있다면 Adobe After Effects를 전문으로 하고 이러한 유형의 애니메이션에 익숙한 애니메이터 또는 디자이너와 협력해야 합니다.

많은 복권 애니메이션이 일러스트레이션 스타일을 사용하므로 계속 진행하기 전에 이것이 웹사이트의 브랜딩 및 스타일에 맞는지 결정해야 합니다. 그래픽 요소와 애니메이션 효과를 결정하면 애니메이터는 Adobe After Effects에서 사용자 정의 애니메이션을 만들고 After Effects 확장을 사용하여 복권 애니메이션으로 내보내야 합니다. 이렇게 하면 사이트에 쉽게 구현할 수 있는 고품질 애니메이션이 렌더링됩니다.

로티 애니메이션이 고품질인 이유 중 하나는 제작 과정에서 개발자나 엔지니어가 웹 형식으로 디자이너의 애니메이션을 다시 만들 필요가 없기 때문입니다. 애니메이션을 그 어느 때보다 쉽게 ​​구현할 수 있는 즉시 사용 가능한 솔루션을 제공합니다.

주식 복권 애니메이션

새로운 디자인을 신속하게 만들고 싶다면 스톡 로티 애니메이션을 사용하는 것이 좋습니다. 기존 주식 복권 애니메이션을 찾아 필요한 경우 브랜드에 맞게 사용자 지정할 수 있습니다.

Lottie Files는 수많은 무료 및 유료 로티 애니메이션을 찾을 수 있는 스톡 웹사이트입니다. 이 사이트는 또한 다운로드하기 전에 애니메이션의 색상을 편집할 수 있는 편집 도구를 제공합니다. 애니메이션에서 많은 수의 색상을 변경해야 하는 경우 숙련된 애니메이터 또는 디자이너가 Adobe After Effects를 사용하여 이러한 변경을 보다 효율적으로 수행하고 애니메이션을 내보낼 수도 있습니다.

사이트에서 수많은 애니메이션을 구현하려는 경우 또는 매우 구체적인 사이트 미학이 있는 경우 올바른 스타일의 여러 스톡 옵션을 찾기 어려울 수 있습니다. 이 경우 귀하의 사이트에 적합하고 이미 선택한 스톡 옵션과 일치하는 더 많은 애니메이션을 만들기 위해 애니메이터를 고용하는 것을 고려할 수 있습니다.

모든 유형의 스톡 애니메이션 또는 그래픽의 경우 스톡 애니메이션에 대한 라이선스 요구 사항을 염두에 두고 필요한 경우 원본 디자이너에게 애니메이션을 제공해야 합니다.

WordPress에 Lottie 애니메이션 추가하기

WordPress 웹 사이트에 복권 애니메이션을 추가하는 것은 매우 부드러운 프로세스입니다. 사용자 정의 HTML 위젯을 사용하여 사이트에 애니메이션 코드를 추가하거나 WordPress 플러그인을 사용하여 애니메이션을 추가할 수 있습니다.

사용자 정의 HTML 위젯

숙련된 WordPress 개발자는 작은 JavaScript 라이브러리와 사용자 정의 HTML 위젯을 사용하여 사이트에 복권 애니메이션을 추가할 수 있습니다. 먼저 애니메이션 .json 파일 및 모든 이미지 자산과 함께 lottie.min.js 스크립트를 테마 폴더에 업로드합니다. 그런 다음 .json 애니메이션 파일을 원하는 컨테이너 div에 로드하는 Lottie 스크립트를 시작하기 위해 위젯에 추가할 작은 JS 스니펫이 있습니다.

이 간소화된 접근 방식은 추가 WordPress 플러그인으로 사이트에 부담을 주지 않기 때문에 대부분의 WordPress 사이트에 매우 적합합니다. 복권 애니메이션을 추가할 때 애니메이션 반복 여부, 반복 횟수 및 페이지에서 애니메이션 요소를 트리거할 수 있는 항목을 제어할 수도 있습니다.

개발자의 도움 없이 로티 애니메이션을 추가하기 위한 대부분의 플러그인에는 Elementor 페이지 빌더가 필요하므로 Elementor 이외의 테마 또는 페이지 빌더 플러그인을 사용하는 경우 사용자 정의 HTML 접근 방식이 더 잘 작동하는 경향이 있습니다.

플러그인 없이 사이트에 요소를 추가하는 것도 웹사이트 속도와 성능에 더 좋습니다. 플러그인을 더 많이 추가하면 사이트에 부담이 되기 때문입니다.

워드프레스 플러그인 옵션

개발자를 사용하여 사용자 정의 방법을 사용하지 않으려면 사이트에 lottie 위젯을 추가하는 또 다른 옵션은 WordPress 플러그인을 사용하는 것입니다.

Elementor Pro – 롯데 위젯

Elementor는 끌어서 놓기 기능이 있는 WordPress용 페이지 빌더이며 Elementor Pro 라이선스에는 Lottie 위젯이 포함되어 있습니다. 이 위젯을 사용하면 코드 없이 로티 애니메이션을 추가하고 애니메이션의 크기와 동작을 사용자 지정할 수 있습니다. 이 플러그인은 Lottie Files 스톡 웹사이트와 편리하게 연결되므로 사이트에서 직접 스톡 애니메이션 옵션을 쉽게 선택하거나 자신의 창작물을 업로드할 수 있습니다.

구텐베르그 블록 – 궁극의 애드온

사이트에서 Gutenberg 편집기를 사용하는 경우 Gutenberg용 Ultimate Addon 플러그인은 플러그인을 사용하여 lottie 애니메이션을 추가하는 데 좋은 선택이 될 수 있습니다. Gutenberg 편집기는 WordPress 5.0 릴리스 이후로 WordPress 코어의 일부였지만 가장 인기 있는 것은 아닙니다. 많은 사이트에서 여전히 클래식 편집기나 Site Origin, Elementor 또는 Beaver Builder와 같은 다른 페이지 빌더를 사용합니다.

그럼에도 불구하고 실행 가능한 옵션입니다. Gutenberg용 Ultimate Addons는 검토가 잘 된 플러그인이며, 추첨 애니메이션을 추가하고 애니메이션 속도 및 트리거와 같은 고급 옵션을 제어하는 ​​옵션을 포함하여 많은 훌륭한 기능을 제공합니다.

추가 WordPress 플러그인

로티 애니메이션을 추가하고 사용자 정의하기 위해 WordPress 디렉토리에서 사용할 수 있는 추가 플러그인이 있습니다. Elementor용 프리미엄 애드온 및 Elementor용 Elementskit 애드온과 같은 일부 플러그인을 사용하려면 사이트를 구축하고 Elementor를 사용해야 합니다. Divi 테마 또는 Gutenberg 블록과 같은 다른 WordPress 테마 및 빌더를 위한 플러그인도 있습니다.

애니메이션을 얻을 시간

Lottie 애니메이션은 WordPress 사이트가 있는 사람이라면 누구나 액세스할 수 있습니다. 맞춤형 애니메이션이나 스톡 애니메이션, 영웅 애니메이션 또는 스크롤링 애니메이션 등 무엇을 원하든지 간에 리소스는 손끝에서 찾을 수 있습니다.

애니메이션이 어떻게 보이고 무엇을 하기를 원하는지에 대해 창의적이 될 수 있으며, 복권 애니메이션의 가능성을 탐색하기 시작하면 애니메이션이 웹사이트 품질에 얼마나 추가할 수 있는지 깨닫기 시작할 것입니다. .