# 첫 애니메이션 무료 애니메이션을 찾아 Webflow에 삽입하고 게시된 사이트에서 확인하세요. 첫 워크플로에서는 애니메이션이 하나만 들어 있는 단순한 Lottie를 사용하세요. Webflow의 네이티브 Lottie 경로를 따르므로 사용자 지정 코드나 고급 dotLottie 설정이 필요하지 않습니다. ## 1. 삽입 위치 선택 애니메이션을 배치할 페이지를 엽니다. 사용할 위치 근처에 Div block이나 다른 적절한 페이지 요소를 추가하거나 선택하세요. ## 2. 애니메이션 찾기 1. **Apps**에서 LottieFiles를 실행합니다. 2. **Explore**를 엽니다. 3. `loading`, `success`, `scroll`처럼 용도를 검색합니다. 4. 무료 결과를 열고 전체 애니메이션을 재생합니다. Webflow에서 무료 애니메이션을 찾는 Explore 검색 결과 ## 3. 페이지에 추가 첫 테스트에서는 기본 렌더러, 투명 배경, 반복, 속도를 그대로 둡니다. 삽입할 요소가 선택되어 있는지 확인하고 **Insert animation**을 선택하세요. 앱이 Webflow Asset을 만들고 네이티브 Lottie 요소를 삽입합니다. 페이지와 Navigator에서 새 요소를 찾은 뒤 Webflow 컨트롤로 크기와 레이아웃을 설정하세요. Webflow 캔버스에서 선택한 삽입된 애니메이션 ## 4. 사이트 미리 보기 Webflow Preview에서 사용할 브레이크포인트를 확인합니다. 다음 사항을 테스트하세요. - 애니메이션이 보이고 부모 요소에 잘리지 않는지 - 원래 비율을 유지하는지 - 의도한 시점에 시작하고 반복되는지 - 주변 링크나 컨트롤을 가로막지 않는지 ## 5. 게시 후 확인 먼저 `webflow.io` 스테이징 도메인에 게시합니다. 스테이징 URL을 새 브라우저 탭에서 열고 재생 및 반응형 동작을 다시 확인한 뒤 프로덕션 도메인에 게시하세요. 프로덕션 체크리스트는 [사이트 게시](/ko/integrations/webflow/05_insert-and-publish/publishing-your-site)를 참고하세요. ## 관련 문서 - [미리 보기 및 커스터마이즈](/ko/integrations/webflow/04_prepare/previewing-and-customizing) - [플레이어 설정](/ko/integrations/webflow/05_insert-and-publish/configuring-the-player)