# 멀티 애니메이션 파일 사용
멀티 애니메이션 dotLottie 파일에서 하위 애니메이션을 선택해 Webflow에 추가하세요.

dotLottie 파일 하나에는 서로 관련된 여러 애니메이션이 들어갈 수 있습니다. 앱은 이를 캐러셀로 표시하므로 현재 페이지에 사용할 하위 애니메이션을 미리 보고 선택할 수 있습니다.

## 하위 애니메이션 선택

1. Explore 또는 Workspace에서 멀티 애니메이션 파일을 엽니다.
2. 하위 애니메이션 목록이 불러와질 때까지 기다립니다.
3. 캐러셀을 이동하며 이름, ID, 미리 보기를 비교합니다.
4. 추가할 하위 애니메이션을 선택합니다.
5. 해당 하위 애니메이션에 필요한 경우에만 테마 또는 상태 머신을 적용합니다.

<Image src="https://assets.docs.lottiefiles.com/static/fb4aadbfa9-640.webp" alt="Webflow의 멀티 애니메이션 선택" caption="Webflow의 멀티 애니메이션 선택" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/fb4aadbfa9-640.webp 640w, https://assets.docs.lottiefiles.com/static/fb4aadbfa9-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/fb4aadbfa9-1920.webp 1920w" width="1920" height="1080" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAe0lEQVR4nE3NsQrCMBhF4b6Jm6hBELRqGm07dDKJi4hJx/yt7/8AypFKLa73fHAzFwQXO2p/46hPnBuLjz3Dbh/pnbmQ8O2T3cEwWy/YmpJrO4D0RSPo2ZsKtVHkE5AfEHzs0GWDWs3Ji2q6+AOCvkSW9Z3CRvwYbZDXBz+xTAKrYRxfAAAAAElFTkSuQmCC" />

## 삽입 결과 이해

- 일반 네이티브 Webflow 재생에서는 선택한 하위 애니메이션을 Lottie JSON으로 추출해 삽입합니다.
- dotLottie v2 또는 활성 상태 머신에서는 고급 dotLottie 플레이어를 삽입하고 선택한 애니메이션 ID를 게시된 런타임에 전달합니다.

두 번째 방식은 번들의 동작을 더 많이 유지하지만 웹 컴포넌트와 페이지 사용자 지정 코드를 추가합니다. 해당 기능이 필요할 때만 사용하세요.

## 결과 확인

삽입한 뒤 예상한 하위 애니메이션이 Webflow Preview와 스테이징 URL에서 먼저 불러와지는지 확인하세요. 디자인 캔버스의 정적인 썸네일만으로 고급 플레이어가 올바르게 초기화되었다고 판단할 수 없습니다.

## 관련 문서

- [상태 머신 준비](/ko/integrations/webflow/04_prepare/preparing-state-machines)
- [호환성 및 제한](/ko/integrations/webflow/06_reference/compatibility-and-limitations)