Studio 에디터: Lottie 애니메이션 파일 추가 및 사용자 지정하기

4 분 분량
Lottie Files는 클라이언트의 사이트에 고품질 애니메이션을 추가할 수 있는 훌륭한 소스입니다. URL을 통해 애니메이션을 가져온 후 필요에 따라 크기를 조정하고 연속으로 반복 재생할지 여부를 결정할 수 있습니다. 
다음 지침을 참고하세요.
시작하기 전:
애니메이션을 가져오려면 LottieFiles 계정이 필요합니다. 

LottieFiles에서 애니메이션 가져오기

필요한 만큼 Lottie 애니메이션을 추가해 디자인에 활기를 불어넣으세요. LottieFiles의 워크스페이스에 애니메이션을 저장한 후 URL을 복사해 Studio 에디터에 직접 붙여넣을 수 있습니다. 애니메이션은 즉시 새 페이지 요소로 추가됩니다.
Lottie의 애니메이션을 Studio 에디터에 직접 붙여넣을 수 있는 GIF
또는, 새 Lottie 애니메이션 요소를 추가하고 관련 URL을 설정 패널에 붙여넣을 수 있습니다. 

Lottie 애니메이션 요소를 추가하려면:

  1. 에디터 왼쪽에서 요소 추가를 클릭합니다.
  2. 삽입 및 SNS를 클릭합니다.
  3. Lottie 애니메이션을 클릭합니다.
  4. Lottie 애니메이션 옆 사이트에 추가 아이콘을 클릭합니다.


  5. (별도의 브라우저 탭에서) LottieFiles 계정에 저장된 애니메이션 URL을 복사합니다.
  6. 에디터에 애니메이션 URL을 붙여넣습니다.
    1. 에디터에서 Lottie 애니메이션 요소를 클릭합니다.
    2. 설정 아이콘을 클릭합니다.
    3. 애니메이션 효과 URL에 URL을 붙여넣습니다.
    4. 키보드에서 Enter 키를 누릅니다.
다음 단계:
설정 패널 상단에서 애니메이션 미리보기를 클릭해 애니메이션이 어떻게 재생되는지 확인하세요.
에디터에 새 Lottie 요소 추가 및 설정 패널에서 애니메이션 링크 삽입하기
중단점 활용하기:
모든 화면에 이상적으로 표시되도록 중단점별로 Lottie 애니메이션의 크기를 사용자 지정할 수 있습니다. 

Lottie 애니메이션 변경하기

다른 Lottie 애니메이션으로 변경하려면, 요소의 설정 패널에 새 URL을 붙여넣어 쉽게 변경할 수 있습니다. 

애니메이션을 변경하려면:

  1. Lottie 애니메이션 요소를 선택합니다.
  2. 설정 아이콘을 클릭합니다.
  3. 애니메이션 효과 URL에 새 애니메이션 URL을 붙여넣습니다.
Lottie 애니메이션 URL을 복사할 위치와 복사 시 캔버스에서 즉시 변경되는 방식을 보여주는 GIF

애니메이션 반복 재생 설정하기

클라이언트 사이트에서 Lottie 애니메이션이 한 번만 재생되거나 반복 재생되도록 재생 방식을 선택할 수 있습니다. 

애니메이션 재생 방식을 설정하려면:

  1. Lottie 애니메이션 요소를 선택합니다.
  2. 설정 아이콘을 클릭합니다.
  3. 반복재생 옆 버튼을 클릭해 켜거나 끕니다.
Lottie 애니메이션이 재생되는 방식을 제어하는 설정 패널의 버튼 스크린샷

Lottie 애니메이션에 대체 텍스트 추가하기

설정 패널에서 애니메이션 또는 사이트를 간략하게 설명하는 대체 텍스트를 추가하세요. 이를 통해 사이트의 SEO 순위를 향상시키는 동시에, 스크린 리더를 사용하는 사용자가 애니메이션을 이해하는 데 도움을 줄 수 있습니다.

애니메이션에 대체 텍스트를 추가하려면:

  1. Lottie 애니메이션 요소를 선택합니다.
  2. 설정 아이콘을 클릭합니다.
  3. 애니메이션 텍스트 로 스크롤합니다.
  4. 애니메이션 효과의 대체 텍스트를 입력하세요 아래에 텍스릍 설명을 입력합니다.
  5. 키보드에서 Enter 키를 누릅니다.
Lottie 애니메이션 요소에 대체 텍스트 추가하기
참고 사항:
Lottie 애니메이션은 Wix 사이트로 가져오면 자동으로 JSON 파일로 변환됩니다. 기술적인 이유로 모든 파일 입력란을 포함할 수는 없습니다. 따라서, Lottie 애니메이션은 라이브 Wix 사이트에서는 약간 다르게 보일 수 있습니다(예: 감소된 범위/모션 양을 표시). 

도움이 되었나요?

|