AI NOOK
01 / 10
스크린 녹화만으로
애니메이션을
다시 만든다
motiscope는 웹사이트 애니메이션을 녹화한 영상에서 움직임의 타이밍을 읽고, GSAP·CSS·Framer Motion·Lottie 코드로 재현하는 로컬 도구다.
눈으로 본 움직임을
숫자의 워크플로우로
숫자의 워크플로우로
웹 애니메이션 · Workflow Radar 018호
스크린 녹화만으로
AI NOOK
02 / 10
스크린샷은
시간을 모른다
정지 화면은 모양과 색은 보여주지만, 애니메이션의 핵심인 시간축은 보여주지 않는다.
1
얼마나 오래?카드가 등장하는 데 걸린 시간
2
얼마나 기다려?요소 사이의 stagger 간격
3
어떻게 빨라져?ease-in·ease-out 같은 가속 곡선
AI NOOK
03 / 10
두 신호로
WHEN과 WHAT을 나눈다
숫자는 움직임의 시간을 측정하고, 일부 핵심 프레임은 어떤 요소가 움직였는지 보여준다.
1
Measured프레임 차이로 motion-energy 곡선을 만든다.
2
Seen대표 PNG 프레임에서 움직인 요소를 확인한다.
3
Rebuild측정값과 관찰값을 코드 구조로 바꾼다.
AI NOOK
04 / 10
감으로 맞추던 값을
측정값으로 바꾼다
영상에서 바로 코드로 옮길 수 있는 시간 정보를 뽑아낸다.
①
duration각 움직임의 지속 시간
②
easing속도 변화와 cubic-bezier 형태
③
stagger카드가 순서대로 나오는 간격
④
loop반복 주기와 yoyo 여부
AI NOOK
05 / 10
마음에 드는 사이트를
따라 만들고 싶을 때
“이 영상처럼 만들어줘”라는 막연한 요청을, 코딩 에이전트가 이해할 수 있는 수치와 구조로 바꿔준다.
Before
눈대중으로 duration과 딜레이를 추측한다.
After
분석 결과를 기준으로 GSAP·CSS를 작성한다.
“비슷하게”에서
“117ms 간격으로”로
“117ms 간격으로”로
AI NOOK
06 / 10
녹화 파일 하나로
네 단계면 된다
1
화면 녹화관심 있는 웹 애니메이션을 짧게 기록한다.
2
analyzemotion-energy와 핵심 프레임을 추출한다.
3
recreateGSAP·CSS·Framer·Lottie 중 목표를 고른다.
4
브랜드에 맞게 수정색·이미지·카피를 내 프로젝트에 맞춘다.
AI NOOK
07 / 10
어떤 스택에도
옮길 수 있다
1
GSAP복잡한 타임라인·스크롤 연동
2
CSS / WAAPI가벼운 랜딩페이지와 카드 인터랙션
3
Framer MotionReact·Next.js 기반 제품 UI
4
Lottie / SVG아이콘·로고·벡터 루프
AI NOOK
08 / 10
복사기가 아니라
시간표 추출기다
모양과 의미를 모두 자동으로 복제하는 도구는 아니다. 숫자로 측정되는 것과 프레임에서 추정되는 것을 구분해야 한다.
강한 부분
duration·fps·구간·easing 모양·loop 주기
직접 보정할 부분
정확한 요소명·3D 깊이·원본 에셋·스크롤 트리거
분석 결과는
초안의 기준선이지
완성품은 아니다
초안의 기준선이지
완성품은 아니다
AI NOOK
09 / 10
좋아하는 랜딩페이지를
한 장면만 녹화하라
긴 영상을 분석하려 하지 말고, 가장 따라 만들고 싶은 3~8초 구간 하나부터 시작한다.
1
3~8초 구간 선택카드 등장·스크롤·루프 중 하나만 고른다.
2
motion spec 기록duration·stagger·easing을 표로 옮긴다.
3
코드로 재현원본 에셋 대신 내 브랜드 에셋으로 바꾼다.
AI NOOK
10 / 10
움직임을 복사하지 말고
구조를 배워라
motiscope는 애니메이션을 설명하는 데서 멈추지 않고, 다시 만들 수 있는 시간 구조로 바꿔준다. 원본 디자인과 에셋은 정당한 범위에서만 참고한다.