prismBETA
← 디자이너 브리핑
2026-09-28 · 03 / 05

AI 에이전트가 웹플로우 애니메이션을 직접 짠다

웹플로우 MCP 서버 업데이트로 AI 에이전트가 커스텀 코드가 아닌 '네이티브 웹플로우 인터랙션'(내부적으로 GSAP 구동)을 만들 수 있게 됐다. 스크롤 트리거·호버·텍스트 분할 같은 흔한 UI 애니메이션을 인터랙션 패널에서 편집 가능한 형태로 생성한다. 에이전트는 사이트 규칙을 담은 가이드라인을 스스로 작성하고 웹플로우 클라우드 앱을 배포·디버깅하는 것도 가능하며, 다만 모든 GSAP 기능이 그대로 매핑되지는 않는다.

스크롤에 따라 요소가 나타나고 움직이는 사이트 애니메이션은 보기엔 좋지만, 트리거 설정·타임라인·스태거·이징 곡선을 일일이 맞춰야 하는 품이 많이 드는 작업이다. 지금까지 웹플로우의 AI 에이전트는 레이아웃은 짜도 네이티브 애니메이션은 다루지 못했다.

이번 MCP 업데이트로 에이전트가 텍스트 분할, 스크롤 트리거, 호버·커서 효과 등 흔한 GSAP 기반 UI 애니메이션을 웹플로우 인터랙션으로 직접 만든다. GSAP 쇼케이스 데모 셋을 골라 에이전트에게 재현을 시킨 결과가 글에 프롬프트·결과와 함께 담겨 있다. 다만 모든 GSAP 기능이 인터랙션 속성으로 일대일 매핑되지는 않아, 일부 예제는 바로 동작하지 않고 그 경우엔 여전히 커스텀 코드가 맞는 도구라고 밝힌다. 이와 함께 에이전트가 사이트 규칙을 담은 가이드라인을 스스로 쓰고, 웹플로우 클라우드 앱을 배포·디버깅하는 기능도 추가됐다.

중요한 차이는 결과물이 버려지는 코드가 아니라는 점이다. 생성된 애니메이션이 네이티브 인터랙션으로 남기 때문에 디자이너가 패널에서 그대로 이어서 편집할 수 있다. 개발 핸드오프를 거치지 않고 디자인 도구 안에서 AI 결과를 다듬는 흐름이 가능해진다.

투표
애니메이션 셋업, AI에 맡기실래요?
이 글이 도움이 되셨나요?
이야기의 흐름6
매주 월요일 아침 갱신 · 요약은 AI가 생성하며 출처 원문을 확인하세요.