# 빠른 시작 Explore에서 애니메이션을 찾고 바로 실행할 수 있는 플레이어 코드를 프로젝트에 추가하세요. 이 가이드에서는 공개 애니메이션을 찾아 확인하고, 배포 방식을 정한 뒤 프로젝트에 연결하는 전체 과정을 다룹니다. ## 시작하기 전에 - 확장 프로그램을 설치합니다. [설치](/ko/integrations/vscode/01_quickstart/installation)를 참고하세요. - 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**을 열고 프로젝트의 프레임워크를 선택한 뒤 재생 옵션을 설정합니다. 생성된 코드를 복사하고 확장 프로그램이 안내하는 런타임 패키지를 설치하세요. 프레임워크 옵션과 생성된 플레이어 코드가 표시된 LottieFiles Code Snippet 패널 ## 5. 프로젝트에서 확인 애플리케이션을 실행하고 다음 사항을 확인하세요. - 선택한 소스에서 애니메이션을 불러오는지 - 자동 재생과 반복 재생이 미리 보기와 같은지 - 컴포넌트의 크기와 배경에 잘 어울리는지 - 브라우저 또는 런타임 콘솔에 로딩 오류가 없는지 ## 다음 단계 - [출력 형식을 선택](/ko/integrations/vscode/05_integrate/choosing-an-output-format)합니다. - [Workspace 애니메이션을 CDN으로 게시](/ko/integrations/vscode/05_integrate/publishing-with-cdn)합니다. - [로컬 Lottie 파일을 미리 봅니다](/ko/integrations/vscode/04_inspect/previewing-local-lottie-files). - [인터랙션 패턴을 생성](/ko/integrations/vscode/05_integrate/generating-interaction-snippets)합니다. - [Motion System 프리미티브를 사용](/ko/integrations/vscode/06_motion-system/using-motion-system-primitives)합니다.