CDN으로 게시

파일을 애플리케이션에 직접 포함하지 않고 팀에서 관리하는 영구 URL로 불러오려면 CDN으로 게시하세요.

시작하기 전에

LottieFiles에 로그인합니다.
애니메이션을 Workspace에 저장합니다.
워크스페이스에서 CDN 링크를 허용하는지 확인합니다.
파일을 게시할 권한이 있는지 확인합니다.

Workspace 설정에서 팀 전체의 CDN 링크를 비활성화할 수 있습니다. 이 경우 확장 프로그램에서 게시 작업이 숨겨지거나 비활성화됩니다.

CDN 활성화

Workspace에서 애니메이션을 엽니다.
CDN 또는 공개 에셋 영역을 찾습니다.
제공되는 .lottie 또는 Lottie JSON 형식 가운데 사용할 에셋의 CDN을 활성화합니다.
게시가 끝날 때까지 기다립니다.
생성된 URL을 복사합니다.

원본이 dotLottie 전용 기능을 사용한다면 .lottie URL을 사용하세요. 그 기능이 사라지는 JSON URL을 선택하면 확장 프로그램에서 경고합니다.

코드에서 URL 사용

URL을 생성된 Code Snippet이나 런타임 설정에 붙여 넣습니다. 게시된 URL은 일반적으로 LottieFiles 호스팅 도메인을 사용하며 현재 미리 보기 세션과 관계없이 계속 사용할 수 있습니다.

import { DotLottieReact } from "@lottiefiles/dotlottie-react";

export function StatusAnimation() {
  return <DotLottieReact src="https://lottie.host/example/animation.lottie" autoplay loop />;
}

예시 URL을 Workspace에서 복사한 정확한 URL로 바꾸세요.

애니메이션 업데이트

새 파일이나 버전을 만든 뒤 CDN 영역을 다시 열어 어떤 에셋이 현재 게시되어 있는지 확인하세요. 생성된 스니펫도 새로 고쳐 원하는 파일과 형식을 참조하도록 합니다.

CDN 비활성화

애플리케이션에서 더 이상 사용하지 않거나 파일을 공개 상태로 유지하면 안 될 때 공개 에셋을 비활성화하세요. 사용 중인 URL을 제거하면 배포된 클라이언트가 동작하지 않을 수 있으므로 먼저 해당 URL을 사용하는 코드를 업데이트해야 합니다.

Motion System URL과의 차이

System 탭에는 컬렉션 에셋에 이미 저장된 URL이 표시됩니다. 이 탭에서 CDN 공개 설정을 켜거나 끌 수는 없습니다. Motion System 프리미티브 사용을 참고하세요.

문제 해결

Enable CDN이 보이지 않음 - 워크스페이스 관리자에게 CDN 링크를 허용했는지 확인하세요.
스니펫에 여전히 임시 값이 표시됨 - Workspace로 돌아가 파일의 CDN을 활성화한 뒤 Utilities Snippets를 다시 여세요.
URL에서 잘못된 버전을 불러옴 - 활성 Workspace 파일과 게시된 에셋을 확인한 뒤 URL을 다시 복사하세요.