VS Code
VS Code 기반 IDE를 벗어나지 않고 Lottie 애니메이션을 찾고, 확인하고, 프로젝트에 연동하세요.
LottieFiles 확장 프로그램은 Visual Studio Code, Cursor, Windsurf 안에서 애니메이션 탐색부터 확인, 구현까지 이어 줍니다. 디자이너의 캔버스로 돌아가지 않고도 로컬 파일을 미리 보고, 팀 에셋을 사용하고, 고급 dotLottie 기능을 테스트하고, 구현 코드를 생성할 수 있습니다.
핵심 워크플로
Explore, Workspace 또는 팀의 Motion System에서 애니메이션을 찾습니다.
재생 상태, 멀티 애니메이션 구성, 테마, 모션 토큰 또는 상태 머신을 확인합니다.
알맞은 형식을 다운로드하거나 Workspace URL을 게시하거나 코드를 생성해 프로젝트에 연동합니다.
전체 흐름을 가장 빠르게 경험하려면 빠른 시작을 따라 해 보세요.
시작 방법 선택
| 시작 방법 | 이런 경우에 사용하세요 | 다음 단계 |
| Explore | 공개 애니메이션을 찾아야 할 때 | Explore |
| Workspace | 팀에서 이미 저장하거나 승인한 에셋이 있을 때 | Workspace |
| 로컬 파일 | 프로젝트에 .json 또는 .lottie 파일이 있을 때 | 로컬 Lottie 파일 미리 보기 |
| System | 승인된 색상, 이징, 글꼴, 프리셋 또는 컬렉션 에셋이 필요할 때 | Motion System |
개발자 도구
Lottie JSON을 편집하면서 미리 보고 유효성을 검사합니다.
애니메이션 ID, 마커, 세그먼트, 테마, 모션 토큰 및 상태 머신을 확인합니다.
원본 또는 최적화된
.lottie, Lottie JSON, Animated SVG(SMIL)를 다운로드합니다.Workspace 에셋을 영구 CDN 링크로 게시합니다.
플레이어 코드와 인터랙션 코드를 생성합니다.
여러 애니메이션을 하나의 dotLottie 번들로 만듭니다.
TypeScript 식별자와 CI 유효성 검사 파일을 생성합니다.
지원하는 IDE
Visual Studio Code, Cursor, Windsurf를 지원합니다. 처음 실행할 때의 동작과 안내 화면은 IDE마다 조금씩 다릅니다. IDE 호환성 및 문제 해결을 참고하세요.