빠른 시작
Explore에서 애니메이션을 찾고 바로 실행할 수 있는 플레이어 코드를 프로젝트에 추가하세요.
이 가이드에서는 공개 애니메이션을 찾아 확인하고, 배포 방식을 정한 뒤 프로젝트에 연결하는 전체 과정을 다룹니다.
시작하기 전에
확장 프로그램을 설치합니다. 설치를 참고하세요.
VS Code, Cursor 또는 Windsurf에서 프로젝트를 엽니다.
LottieFiles 사이드바를 열고 Explore를 선택합니다.
1. 애니메이션 찾기
loading, success, error, empty state처럼 제품의 상태를 검색합니다. 결과를 선택하면 미리 보기가 열립니다.
2. 애니메이션 확인
애니메이션을 재생하고 원하는 위치로 이동하며 살펴보세요. 크기와 재생 시간, 배경, 사용할 수 있는 파일 형식을 확인합니다. 제품과 색상 팔레트가 어울리지 않으면 색상을 빠르게 바꾼 뒤 다시 미리 봅니다.
3. 배포할 소스 정하기
생성된 코드에서 애니메이션을 계속 불러오려면 프로젝트 파일이나 영구 URL이 필요합니다.
Download로 애니메이션을 프로젝트에 저장해 직접 소유하고 버전을 관리합니다.
팀에서 관리하는 영구 URL이 필요하면 Workspace에 저장하고 CDN을 활성화합니다.
승인된 에셋이 이미 호스팅되어 있다면 기존 Workspace 또는 Motion System CDN URL을 사용합니다.
임시 업로드 URL이나 미리 보기 URL을 실제 제품에 사용하지 마세요.
4. 코드 생성
Code Snippet을 열고 프로젝트의 프레임워크를 선택한 뒤 재생 옵션을 설정합니다. 생성된 코드를 복사하고 확장 프로그램이 안내하는 런타임 패키지를 설치하세요.
5. 프로젝트에서 확인
애플리케이션을 실행하고 다음 사항을 확인하세요.
선택한 소스에서 애니메이션을 불러오는지
자동 재생과 반복 재생이 미리 보기와 같은지
컴포넌트의 크기와 배경에 잘 어울리는지
브라우저 또는 런타임 콘솔에 로딩 오류가 없는지