# 로컬 Lottie 파일 미리 보기 로컬 .lottie 또는 Lottie JSON 파일을 열고 VS Code에서 재생 상태와 파일 기능을 살펴보세요. 별도의 플레이어로 전환하지 않고 작업 중인 로컬 애니메이션을 바로 미리 보세요. 재생, 모션 토큰, 코드 패널이 있는 로컬 애니메이션 미리 보기 옆의 Utilities Upload ## 로컬 파일 열기 다음 두 가지 방법을 사용할 수 있습니다. - 에디터에서 인식된 `.lottie` 또는 Lottie JSON 파일을 열고 LottieFiles 미리 보기 작업을 실행합니다. - `Utilities -> Upload`를 열고 `.lottie` 또는 `.json` 파일을 선택한 다음 **Preview**를 클릭합니다. Utilities의 최근 파일 목록은 현재 세션 동안만 유지됩니다. 목록에서 항목을 제거해도 원본 파일은 삭제되지 않습니다. 저장하지 않은 Lottie JSON 편집 내용도 유효한 애니메이션으로 인식되면 미리 볼 수 있습니다. 프로젝트 상대 경로를 연동 코드에 사용하기 전에는 파일을 저장하세요. ## 재생 컨트롤 미리 보기에서 다음 작업을 할 수 있습니다. - 재생 또는 일시 정지 - 프레임 사이 이동 - 반복 재생 켜기 또는 끄기 - 재생 속도 변경 - 미리 보기 배경 변경 - 편집 후 다시 불러오기 Lottie JSON의 데이터가 유효하다면 편집하는 동안 미리 보기가 갱신됩니다. JSON 문법이 잘못되면 오류를 고칠 때까지 마지막으로 성공한 화면이 유지됩니다. ## 파일 구성 확인 표시되는 패널은 파일에 포함된 내용에 따라 달라집니다. - **Info 또는 manifest** - 형식, 크기, 재생 시간, 포함된 메타데이터 - **Animations** - 멀티 애니메이션 `.lottie` 안의 하위 애니메이션 - **Markers** - 코드에서 재생할 수 있도록 이름이 지정된 프레임 범위 - **Segments** - 테스트용으로 지정한 시작 및 종료 프레임 - **Themes and motion tokens** - 포함된 스타일과 편집 가능한 슬롯 - **State machines** - 인터랙션 로직과 입력값 - **Code Snippet** - 현재 소스에 맞는 런타임 코드 ## 유효하지 않거나 인식되지 않는 JSON 일반 JSON 파일은 Lottie 미리 보기로 열리지 않습니다. Lottie 애니메이션에는 일반적으로 애니메이션 버전, 레이어, 에셋, 프레임 범위, 컴포지션 크기가 들어 있습니다. 에디터 진단과 [유효성 검사 도구](/ko/integrations/vscode/05_integrate/validating-animations-and-generating-types)로 오류 위치를 확인하세요. ## 관련 문서 - [멀티 애니메이션 파일 사용](/ko/integrations/vscode/04_inspect/working-with-multi-animation-files) - [테마와 모션 토큰 사용](/ko/integrations/vscode/04_inspect/using-themes-and-motion-tokens) - [상태 머신 테스트](/ko/integrations/vscode/04_inspect/testing-state-machines)