여러분이 웹사이트, 앱, 마케팅 자료 등에 사용하기 딱 좋은 Lottie 애니메이션을 찾았다고 가정해 봅시다. 그런데 색상이 마음에 안든다던가, 재생속도가 빠르다던가, 크기가 너무 작다는 문제가 있을 수 있겠죠
하지만 걱정하지 마세요. Lottie Editor를 사용하면 모든 Lottie 애니메이션을 쉽게 편집할 수 있습니다. 여러분이 전문 디자이너가 아니더라도 크기, 레이어, 재생 속도, 프레임 속도, 색상 등을 조정할 수 있습니다. 애니메이션을 텔레그램 스티커로서 내보내기 해서 친구들과 공유할 수도 있습니다.
동영상 보기: Lottie Editor로 애니메이션 편집
애니메이션을 편집하거나, 텔레그램 스티커로 내보내기 하거나, 웹사이트, 뉴스레터, 소셜 미디어 등에 삽입하는 방법을 알아보세요. 아래 튜토리얼을 보거나 아래로 스크롤하여 작성된 버전을 확인해 보세요. 따라하고 싶다면, 튜토리얼에서 디자인 에셋을 복사할 수 있습니다.
1. Lottie 애니메이션 준비하기
아직 Lottie 애니메이션이 없는 경우 SVG to Lottie 도구를 이용하여 Lottie 애니메이션으로 변환할 수 있습니다. 다음의 몇 단계만 수행하시면 됩니다.
- SVG 파일을 SVG to Lottie 도구로 끌어다 놓습니다.
- 애니메이션 스타일을 선택합니다.
- ‘Lottie 다운로드하기’를 클릭하거나 ‘미리보기로 업로드’를 클릭하여, 비공개 애니메이션 대시보드에 저장합니다.
아니면, LottieFiles에서 수천 개의 무료 애니메이션 중에서 선택할 수도 있습니다. 개인 및 상업 프로젝트에서 이러한 애니메이션을 다운로드, 편집 및 사용할 수 있습니다.
2. Lottie Editor로 애니메이션 편집하기
드래그 앤드 드랍으로 Lottie 파일을 Lottie Editor에 끌어다 놓습니다. Lottie Editor가 애니메이션을 로드하면 다음의 속성을 편집할 수 있습니다.
- 레이어 - 다른 레이어에 요소가 있는 경우, 해당 요소를 숨기거나 숨김 해제할 수 있습니다. 이것은 애니메이션을 단순화하거나 필요하지 않은 배경 레이어를 제거하는 데 유용할 수 있습니다.
- 크기 - 크기를 편집하여 애니메이션의 너비와 높이를 변경할 수 있습니다.
- 프레임 레이트 – 프레임 레이트란 초당 표시되는 개별 이미지(즉, 프레임)의 수를 나타냅니다. 프레임 레이트가 클수록 애니메이션이 더 부드럽게 보입니다.
- 재생 속도 - 애니메이션이 재생되는 속도를 조정하기 위해 변경할 수 있습니다.
- 애니메이션 지속 시간 - 애니메이션의 길이를 초 단위로 나타냅니다.
- 색상 - 애니메이션의 요소 색상이나 배경 색상을 변경할 수 있습니다.
이러한 설정을 사용하거나 위의 동영상 튜토리얼을 확인하여 작동 방식을 확인하십시오.
3. Lottie 애니메이션을 텔레그램 스티커로 내보내기
Lottie 애니메이션을 텔레그램 스티커로 내보내기 하려면, 다음을 포함하는 애니메이션 스티커에 대한 텔레그램의 요구 사항을 충족하는지 확인해야 합니다.
- 스티커 크기는 512x512픽셀이어야 합니다.
- 애니메이션의 길이는 3초를 초과할 수 없습니다.
- 애니메이션은 반복되어야 합니다.
- 스티커의 크기는 64KB를 초과할 수 없습니다.
모든 요구 사항이 충족되면, 애니메이션 스티커용 텔레그램 파일 형식인 TGS 파일로 애니메이션을 다운로드할 수 있는 옵션이 표시됩니다. 스티커를 사용하려면, 텔레그렘에서 애니메이션 스티커를 설정하는 방법에 대한 단계별 가이드를 확인하세요.
4. 편집한 애니메이션을 Lottie JSON 파일로 저장하기
다음 중 하나의 동작을 수행하면, 편집한 애니메이션을 저장할 수 있습니다.
- Lottie JSON으로 내보내기해서, 애니메이션이 Lottie JSON 파일로 다운로드합니다.
- ‘내 미리 보기에 업로드’를 클릭해서, 이 애니메이션의 복사본이 비공개 애니메이션 대시보드에 저장합니다.
5. 웹사이트, 뉴스레터, 소셜 미디어 등에서 Lottie 애니메이션을 사용하기
웹사이트에 Lottie 애니메이션을 삽입하는 것은 쉽습니다.
- 비공개 애니메이션 대시보드로 이동하여 애니메이션을 클릭합니다. 제공된 에셋 링크를 복사합니다.
- 또는, Lottie Editor를 사용하여 애니메이션을 JSON 파일로 내보내기 하여 자체 서버에 업로드할 수 있습니다.
- 그런 다음, JSON 파일에 링크를 붙여넣어 Lottie 웹 플레이어 내장 코드를 생성합니다.
- 이 HTML 코드를 WordPress, Shopify, Webflow, Squarespace, Wix 또는 기타 웹사이트에 삽입할 수 있습니다.
- 자세한 내용은 Lottie 웹 플레이어를 사용하여 웹사이트에 Lottie 애니메이션을 추가하는 방법에 대한 이 가이드를 확인하십시오.
아쉽게도 Facebook 및 Instagram과 같은 뉴스레터 및 소셜 미디어 플랫폼은 Lottie 애니메이션을 지원하지 않습니다. 그렇지만 걱정하지 마세요. 귀하의 마케팅 자료에 모션을 추가할 수 있습니다.
- 비공개 애니메이션 대시보드로 이동하여 애니메이션에 커서를 올립니다.
- ‘GIF로 변환하기’를 클릭합니다.
- 또는Lottie to GIF 도구로 직접 이동하여 Lottie JSON 파일을 끌어다 놓습니다.
- GIF를 다운로드하면, 뉴스레터와 소셜 미디어 게시물에 삽입할 수 있습니다.
모션 디자인에 대해 전혀 모르더라도 이 포스팅 내용이 애니메이션 편집을 시도해 볼 수 있는 영감을 주었기를 바랍니다. LottieFiles에 있는 수천 개의 무료 애니메이션으로 시작해보세요. 여러분이 어떤 아이디어를 내놓을지 무척 기대됩니다!
일상 생활에 움직임을 추가하는 더 많은 방법을 원하시나요? 귀하의 라이브 스트림에 애니메이션을 추가하는 방법이나, 애니메이션 소셜 미디어 포스팅을 만드는 방법, LottieFiles YouTube채널에서 모든 동영상 튜토리얼을 탐색하는 방법을 확인하세요!
