Motion Prompt 활용법: 시각효과 명세를 AI에 전달하고 구현하는 순서

Motion Prompt를 쓸 때 가장 먼저 기억할 것은 갤러리에서 효과를 고른 뒤 동작 명세와 적용 위치를 AI에 같이 넘기는 흐름입니다. Motion Prompt는 움직이는 예제, 동작 명세, 참고 코드를 함께 제공하는 라이브러리예요. 마음에 든 움직임을 프로젝트의 구현 요구사항으로 바꾸는 데 쓸 수 있습니다.

효과 이름을 몰라도 괜찮습니다. 움직이는 예제를 보고 고르면 됩니다.

효과 번호는 해당 명세를 찾아가는 식별자예요. 그래서 번호만 적지 말고 어느 화면의 어떤 요소에 적용할지도 함께 적어 두기를 권합니다. 같은 효과라도 적용 대상과 실행 시점이 정해져 있어야 구현 방향이 구체적으로 잡힙니다.

ask와 spec은 무엇이 다른가

효과를 고른 다음에는 ask와 spec부터 나눠서 보세요. 많이 헷갈리는 곳이 여기입니다. ask는 효과를 활용하는 요청 예시이고, spec은 데모를 재현하기 위한 상세 설명이에요. 공식 포맷 문서도 두 필드의 역할을 나누어 두었고, 명세에 들어가는 수치는 코드에서 가져오도록 요구합니다.

#002 Stagger를 보면 차이가 분명합니다. 공개 카탈로그의 ask는 카드 5개를 0.08초 간격으로 등장시키는 요청인데, spec은 막대 7개가 0.12초 간격으로 시작하는 데모를 설명하고 있어요. 하나는 활용 예시, 하나는 데모 재현값이라서 생기는 차이입니다. 수치가 다르다는 이유만으로 오류라고 단정할 수는 없으니, 프로젝트에 어느 쪽 값을 쓸지 미리 정해 두는 편이 좋습니다.

명세는 대상, 순서, 시간, 이징, 이동량 순으로 읽기를 권합니다. 이징은 시간에 따라 속도가 어떻게 변하는지를 말해요. 같은 거리를 같은 시간에 움직이더라도 이징에 따라 인상이 달라집니다. 대상과 순서로 무엇이 움직이는지 먼저 잡고, 시간과 이동량으로 동작의 크기와 리듬을 읽으면 이해가 훨씬 수월해요.

고른 효과를 프로젝트에 옮기는 순서

1. 갤러리에서 원하는 움직임을 보고 효과를 선택합니다.
2. 효과를 적용할 화면과 요소를 메모합니다.
3. Send to AI로 선택 결과와 적용 위치를 전달합니다. 스킬 없이 사용한다면 Copy picks로 복사한 내용을 AI 대화에 붙여넣습니다. 여기에는 데모와 명세 URL이 포함됩니다.

요청을 쓸 때는 “카드 목록에 적용하고 실제 스크롤 진입 시 실행해 주세요”처럼 대상과 실행 조건을 함께 넣으세요. 앞에서 정한 요소 수와 시작 간격까지 덧붙이면 AI가 요청 예시와 데모 수치 중 어느 쪽을 따라야 하는지 헷갈리지 않습니다. 저는 구현 도구보다 사용자가 그 움직임을 언제 보게 할지를 먼저 정하라고 말하고 싶어요. 실행 시점이 정해져야 나머지 결정이 따라옵니다.

스킬을 쓰는 흐름이라면 get <id>로 선택한 효과의 명세와 코드를, kit <pack>으로 해당 팩의 공통 코드를 가져옵니다. 공식 스킬 명세는 이렇게 가져온 내용을 프로젝트의 컴포넌트, CSS·JavaScript, 또는 애니메이션 라이브러리에 맞춰 다시 구현하도록 안내해요. 외부 라이브러리 없이 작성된 효과라도 공통 상수와 보조 함수를 담은 kit이 필요할 수 있으니, 코드를 가져올 때 같이 챙기세요.

참고 코드는 시간값에 따라 그림을 그리는 Canvas 2D 데모입니다. 카드 목록에 적용하려면 이 움직임을 실제 컴포넌트의 상태 변화로 옮기고 스크롤 진입 이벤트에 연결해야 해요. 데모에 있는 가상 커서나 반복 재생을 그대로 실행 조건으로 가져오면 의도와 어긋날 수 있습니다. 동작 축소 설정인 prefers-reduced-motion을 반영하는 조건도 구현 요청에 꼭 넣어 두세요.

반복 주기를 애니메이션 길이로 착각하지 않았나

구현을 마쳤다면 데모 전체의 반복 주기를 애니메이션 길이로 옮기지 않았는지부터 확인하세요. #001 Pop-in의 cycle은 4.7초인데, 명세에는 2.35초마다 한 번씩 동작한다고 적혀 있어요. 4.7초를 그대로 등장 애니메이션 길이로 쓰면 명세와 다른 움직임이 나옵니다. 2.35초도 실행 간격일 뿐이라서, 개별 동작이 얼마나 지속되는지와는 따로 읽어야 해요.

결과는 등장 순서, 지연 시간, 이동량, 최종 상태 순으로 비교합니다. 요소가 의도한 순서대로 시작하는지 먼저 보고, 간격과 움직이는 거리를 명세와 맞춰 보세요. 마지막으로 효과가 끝난 뒤 요소가 원하는 위치와 상태에 머무는지 확인합니다. 눈에 보이는 인상만으로 비교하면 어디를 고쳐야 할지 막연해지는데, 이 순서를 따르면 수정할 지점이 금방 드러나요.

실제 설치 가능 여부와 렌더링 결과는 적용할 프로젝트 환경에서 따로 확인해야 합니다.