인터랙션 스니펫 생성
Utilities 탭에서 스크롤, 뷰포트, 호버, 클릭 또는 상태 머신 패턴을 생성하세요.
Utilities Snippets에서는 기본 자동 재생과 반복 재생을 넘어서는 재사용 가능한 인터랙션 패턴을 제공합니다.
Snippets 열기
Utilities를 엽니다.
Snippets를 선택합니다.
패턴을 선택합니다.
프레임워크를 선택합니다.
패키지 설치 명령과 생성된 코드를 복사합니다.
패턴 종류
| 패턴 | 동작 |
| Scroll | 페이지 스크롤에 맞춰 애니메이션 진행 위치 이동 |
| Viewport | 플레이어가 뷰포트에 들어오면 재생 |
| Hover | 포인터가 들어오면 재생하고 나가면 일시 정지 |
| Hover Reverse | 포인터가 들어오면 정방향으로 재생하고 나가면 시작점으로 역재생 |
| Click | 클릭할 때 재생과 정지 전환 |
| State Machine | 애플리케이션 로직으로 dotLottie 상태 머신 제어 |
지원 프레임워크
Utilities 인터랙션 스니펫은 다음 환경을 지원합니다.
@lottiefiles/dotlottie-react를 사용하는 React@lottiefiles/dotlottie-vue를 사용하는 Vue 3@lottiefiles/dotlottie-web을 사용하는 Vanilla JavaScript
Angular와 Svelte는 기본 연동 코드에서는 지원하지만 현재 인터랙션 패턴 목록에는 없습니다.
애니메이션 소스 지정
CDN이 활성화된 최근 Workspace 파일이 있으면 Utilities에서 자동으로 사용합니다. 그렇지 않으면 임시 소스가 들어간 코드를 생성합니다.
워크스페이스에서 CDN 링크를 비활성화했다면 임시 소스를 프로젝트에 다운로드한 파일 경로나 다른 영구 URL로 교체하세요. 프로덕션 코드에 임시 값을 남겨 두면 안 됩니다.
패턴 조정
생성된 코드를 바로 적용하기 전에 다음 항목을 확인하고 제품에 맞게 바꾸세요.
대상 요소 또는 선택자
스크롤 범위와 프레임 매핑
뷰포트 진입 임계값
포인터와 키보드 접근성
이벤트 리스너와 플레이어 인스턴스 정리
상태 머신 ID, 입력값, 이벤트 페이로드
동작 확인
대상 브라우저와 동작 줄이기(reduced motion) 설정에서 인터랙션을 테스트하세요. 모션 패턴이 기본 UI 작업을 막거나 콘텐츠 접근성을 떨어뜨려서는 안 됩니다.