# 첫 애니메이션
무료 애니메이션을 찾아 Framer에 삽입하고 게시된 사이트에서 확인하세요.

첫 워크플로에서는 애니메이션이 하나만 들어 있는 단순한 파일을 사용하세요. 테마, 상태 머신, 멀티 애니메이션 번들은 다음 단계에서 다룹니다.

## 1. 삽입 위치 선택

애니메이션을 배치할 페이지를 엽니다. 새 컴포넌트를 특정 Frame 안에 넣고 중앙에 배치하려면 해당 Frame을 선택하세요.

## 2. 애니메이션 찾기

1. **Plugins**에서 LottieFiles를 엽니다.
2. **Explore**에서 **Free animations**를 선택합니다.
3. `loading`, `success`, `scroll`처럼 용도를 검색합니다.
4. 결과를 열고 전체 애니메이션을 재생합니다.

<Image src="https://assets.docs.lottiefiles.com/static/1b095277e9-640.webp" alt="Framer의 Explore 검색 결과" caption="Framer의 Explore 검색 결과" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/1b095277e9-640.webp 640w, https://assets.docs.lottiefiles.com/static/1b095277e9-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/1b095277e9-1920.webp 1920w" width="1920" height="1080" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAfElEQVR4nGPwiUj+7xWW+H/WohX/z168+n/esjX/PcMS//tGpvz3Dk/6ywBTcPLMuf8gcOb8pf+eoQn/QeIgDFbgHZ70/+DhY/////73f//hk2ANKAq8wpP+Hz9xCmzCoeNYFIBMmLNw1f9jh0/8nzZv/n/vcIikd0TyHwCKmWSieDoHPAAAAABJRU5ErkJggg==" />

## 3. 삽입하기

첫 테스트에서는 기본 렌더러, 투명 배경, 반복, 속도를 그대로 두고 **Insert animation**을 선택합니다.

플러그인이 LottieFiles 플레이어 컴포넌트를 추가하고 선택한 뒤 Framer 화면을 결과 위치로 이동합니다. 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==" />

## 4. 페이지 미리 보기

Framer Preview를 열고 사용할 데스크톱 및 모바일 너비에서 페이지를 테스트합니다. 다음 사항을 확인하세요.

- 애니메이션이 보이고 부모 Frame에 잘리지 않는지
- 원래 비율을 유지하는지
- 의도한 시점에 시작하고 반복되며 반응하는지
- 주변 링크나 컨트롤을 가로막지 않는지

## 5. 게시 후 확인

생성된 `framer.app` 도메인이나 팀의 스테이징 환경에 게시합니다. 게시된 URL을 새 브라우저 탭에서 열고 재생 및 반응형 동작을 다시 확인하세요.

실제 페이지에서 올바르게 동작해야 게시가 끝난 것입니다. 프로덕션 체크리스트는 [사이트 게시](/ko/integrations/framer/05_insert-and-publish/publishing-your-site)를 참고하세요.

## 관련 문서

- [미리 보기 및 커스터마이즈](/ko/integrations/framer/04_prepare/previewing-and-customizing)
- [플레이어 설정](/ko/integrations/framer/05_insert-and-publish/configuring-the-player)