# Framer에 삽입
준비한 애니메이션을 Framer 캔버스에 LottieFiles 플레이어 컴포넌트로 삽입하세요.

플러그인은 애니메이션을 비디오나 GIF로 변환하는 대신 재사용할 수 있는 플레이어 코드 컴포넌트를 추가합니다.

## 삽입 위치 선택

- 특정 컨테이너 안에 컴포넌트를 삽입하고 중앙에 배치하려면 **Frame**을 선택합니다.
- 자식 요소를 선택하면 해당 요소의 부모 Frame을 삽입 컨테이너로 사용할 수 있습니다.
- 적절한 선택 없이 캔버스에 삽입하면 캔버스 루트에 추가됩니다.

## 애니메이션 삽입

1. 준비한 Explore 또는 Workspace 미리 보기를 엽니다.
2. 현재 하위 애니메이션, 테마, 상태 머신, 배경, 렌더러를 확인합니다.
3. **Insert animation**을 선택합니다.
4. 새 컴포넌트가 선택될 때까지 기다립니다.
5. Framer 캔버스 컨트롤로 크기와 위치를 조정합니다.

<Image src="https://assets.docs.lottiefiles.com/static/52a007f651-640.webp" alt="Framer 캔버스에 애니메이션 삽입하기" caption="Framer 캔버스에 애니메이션 삽입하기" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/52a007f651-640.webp 640w, https://assets.docs.lottiefiles.com/static/52a007f651-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/52a007f651-1920.webp 1920w" width="1920" height="1080" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAlElEQVR4nCWMPQuCYBhF3//bH2htiL4QkoKiaIlqsKEf0BY1OQUO0WJIUZiE5EcW7+MJ9cK9Z7hwVKNrYh8dtrsDvcGEdn9E0xiW7JhjUXNrA8mPLE6QHChbTBU1W1roICIMXogIYfTB927o5IuWHLUoDECcpojWpeA+XfO23cpQbxk4Vw/36SNAdvY51VY89pfi13/7U4zNvq22rAAAAABJRU5ErkJggg==" />

큰 애니메이션은 처음 삽입한 컴포넌트를 다루기 쉽도록 비율을 유지한 채 축소됩니다. 삽입된 크기를 프로덕션 기본값으로 사용하지 말고 실제 레이아웃에 맞게 조정하세요.

## 삽입한 뒤

계속 작업하기 전에 Framer Preview를 여세요. 정적인 캔버스에서는 올바르게 보여도 실제 페이지에서 반복, 테마, 상태 머신이 다르게 동작할 수 있습니다.

## 관련 문서

- [플레이어 설정](/ko/integrations/framer/05_insert-and-publish/configuring-the-player)
- [사이트 게시](/ko/integrations/framer/05_insert-and-publish/publishing-your-site)