# Webflow에 삽입
준비한 애니메이션을 네이티브 Lottie 요소 또는 고급 dotLottie 플레이어로 추가하세요.

**Insert animation**을 사용하기 전에 Webflow에서 삽입할 위치를 선택하세요. 앱이 만드는 결과는 원본과 활성화한 기능에 따라 달라집니다.

## 삽입 위치 선택

- 일반 Lottie는 원하는 캔버스 삽입 위치의 요소를 선택합니다.
- dotLottie v2, 테마, 멀티 애니메이션 또는 상태 머신은 Div block처럼 자식 요소를 포함할 수 있는 요소를 선택합니다.
- 텍스트, 이미지처럼 자식 플레이어를 포함할 수 없는 요소는 선택하지 마세요.

<Image src="https://assets.docs.lottiefiles.com/static/d79aa51604-640.webp" alt="선택한 Webflow 컨테이너에 삽입할 준비가 된 애니메이션" caption="선택한 Webflow 컨테이너에 삽입할 준비가 된 애니메이션" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/d79aa51604-640.webp 640w, https://assets.docs.lottiefiles.com/static/d79aa51604-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/d79aa51604-1920.webp 1920w" width="1920" height="1080" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAkElEQVR4nEWOQQqCUAAFvYR9pcjMhQXpT/1ZmJHVKrTAlRq0Sbv/BYqJJGgxiwfDY7RL0/Hl2jw5lRXJ7kB6PFM0HXn1eGsyVMhohdqkLENFvM/6XdRtj2aaJtZojDAGRGGEt00J1glF9ROc+QJ1u6MLgfQ9hoaOL4P/g2XbzFSAM53gxhkiznGzsu/K6/b1AVVHRGczVi9SAAAAAElFTkSuQmCC" />

## 삽입 방식 선택

| 준비한 원본                   | Webflow 결과                                      |
| ------------------------ | ----------------------------------------------- |
| 일반 Lottie JSON           | Webflow Asset 및 네이티브 Lottie 요소                  |
| 런타임 전용 기능이 없는 dotLottie  | 가능한 경우 선택한 애니메이션을 네이티브 Lottie JSON으로 변환         |
| dotLottie v2 또는 활성 상태 머신 | `<dotlottie-wc>` 요소, 고유 스타일, 썸네일, 페이지 사용자 지정 코드 |

## 애니메이션 추가

1. Webflow에서 올바른 요소가 선택되어 있는지 확인합니다.
2. LottieFiles에서 준비한 애니메이션을 검토합니다.
3. **Insert animation**을 선택합니다.
4. 페이지와 Navigator에서 결과를 찾습니다.
5. Webflow 클래스, 크기, 반응형 레이아웃을 적용합니다.

{/* [screenshot:W19] 네이티브 Lottie 결과와 고급 dotLottie 결과를 두 가지 Webflow 삽입 방식으로 구분해 촬영하세요. */}

## 관련 문서

- [플레이어 설정](/ko/integrations/webflow/05_insert-and-publish/configuring-the-player)
- [상태 머신 준비](/ko/integrations/webflow/04_prepare/preparing-state-machines)