MotionSites가 실제 제공하는 것(웹사이트 빌더 아님)

세련된 3D 히어로 데모 아래에 "website"라고 댓글을 달면 누군가 MotionSites 링크를 DM으로 보내줍니다. 그런데 막상 받은 편지함에 도착한 것은 웹사이트 빌더가 아닙니다. 텍스트 파일입니다.

MotionSites가 실제로 파는 것

MotionSites.AI는 Framer, v0, Webflow 같은 부류의 웹사이트 빌더가 아니라 프롬프트와 브리프 라이브러리입니다. 홈페이지에서는 "Premium Hero Prompts"와 "ready-to-use prompts"로 "build beautiful landing pages in minutes"할 수 있다고 홍보합니다 . 제공되는 것은 복사해 붙여 넣는 텍스트일 뿐, 실행 환경은 아닙니다. CMS도, 호스팅도, 빌드 시스템도 함께 제공되지 않습니다.

카탈로그는 용도별로 정리되어 있습니다. 랜딩 페이지, 히어로 섹션, 포트폴리오, 에이전시, SaaS, 이커머스, 3D, Web3/크립토가 있고, 전용 "Scroll Landing Page" 템플릿과 애니메이션이 들어간 "Backgrounds" 섹션도 있습니다 . 프롬프트에는 무료인 "Copy" 또는 유료 "Go Unlimited" 티어의 "Premium" 표시가 붙어 있으며, 2026년 7월 기준으로 숫자가 명시된 가격 페이지는 색인되지 않았습니다 .

비즈니스 로직은 좁고 솔직합니다. 디자인 의도를 브리프에 미리 담아 Claude Code, Lovable, v0 같은 코딩 에이전트가 평범한 기본 출력보다 나은 결과를 내게 만드는 것입니다. "기능은 하지만 밋밋한" 결과와 "에이전시급" 결과 사이의 간극이 MotionSites가 수익화하는 지점입니다. MotionSites는 프롬프트를 팔고, 실제 제작은 사용자의 후속 에이전트가 맡습니다.

MotionSites 브리프를 복사하기 전에

무언가를 붙여 넣기 전에 네 가지를 먼저 갖춰야 합니다. MotionSites가 제공하는 것은 텍스트뿐이기 때문에, 설정의 빈틈은 모두 사용자의 문제가 됩니다. 필요한 것은 (1) 붙여 넣은 브리프를 받아들이는 후속 에이전트, (2) React 프로젝트 스캐폴드, (3) 에이전트가 가져올 의존성에 대한 이해, (4) 브리프가 대신해 줄 수 없는 디자인 판단입니다.

• 제작을 맡길 에이전트. 기준 타깃은 Claude Code지만 Lovable이나 v0도 쓸 수 있습니다. MotionSites는 의도만 미리 정리해 주기 때문에 특정 에이전트에 묶이지 않습니다 .
• React 스캐폴드, 또는 에이전트가 만들도록 허용할 준비. Next.js 14와 Vite는 모두 확인된 타깃입니다. Claude Code는 코드베이스를 읽고, 파일을 수정하며, 필요하면 초기화 명령도 실행합니다 .
• GSAP과 Framer Motion은 사실상 필수 의존성으로 들어온다고 봐야 합니다. 미리 설치할 필요는 없지만, 생성된 package.json에 자동으로 추가됩니다. 들어올 것이라는 점은 알고 있어야 합니다 .
• 사용자가 직접 책임져야 하는 디자인 결정. 색상 팔레트, 브랜드 보이스, UX에 실제로 도움이 되는 애니메이션 선택은 사용자의 몫입니다. 에이전트가 일반적인 브리프만 보고 이런 것들을 알아서 만들어 주지는 않습니다.

MotionSites 브리프를 GSAP 스크롤 애니메이션으로 바꾸는 방법

브리프를 실제로 동작하는 애니메이션으로 바꾸는 과정은 네 단계의 루프입니다. 템플릿을 고르고, 사용하는 스택과 함께 Claude Code에 넘기고, 에이전트가 컴포넌트를 생성하게 한 다음, 배포 전에 로컬에서 검수합니다. 브리프는 첫 수일 뿐입니다. 코드 생성은 에이전트가 하고, QA는 사용자가 합니다. 구체적인 흐름은 다음과 같습니다.

1. 템플릿을 골라 복사합니다. MotionSites 카탈로그를 열고 전용 "Scroll Landing Page" 같은 템플릿을 고른 뒤 Copy를 누릅니다. 무료 티어에서는 "Copy"로 표시된 일부 프롬프트를 사용할 수 있고, 전체 카탈로그는 유료 "Go Unlimited" 티어 뒤에 있습니다. 공개 랜딩 화면에는 숫자로 된 가격이 게시되어 있지 않습니다 .
2. 내 맥락을 앞에 붙인 뒤 붙여 넣습니다. 브리프를 Claude Code의 첫 메시지로 넣되, 먼저 저장소 맥락과 목표 스택을 앞에 붙입니다. 그래야 에이전트가 일반적인 기본값이 아니라 실제 환경에 맞춰 스캐폴딩합니다.

Stack: React 18 + Vite (or Next.js App Router).
Existing repo: components live in /src/components, Tailwind configured.
Use GSAP ScrollTrigger for scroll timelines, Framer Motion for enter/exit.

[paste MotionSites brief below]

3. 에이전트가 내놓은 결과를 읽습니다. Claude Code는 코드베이스를 읽고, 파일을 수정하고, 명령을 실행하는 에이전트형 도구입니다 . 결과물은 사용자가 소유하는 평범한 소스 코드입니다. 컴포넌트는 타임라인을 위해 ScrollTrigger.create에 scrub과 pinning을 연결하고, 진입 및 종료 상태를 위해 motion.div에 whileInView와 AnimatePresence를 함께 씁니다 . 런타임도, 종속도 없습니다. 어디에나 호스팅할 수 있습니다.
4. 로컬에서 검수한 뒤 푸시합니다. Lighthouse를 실행하고, prefers-reduced-motion이 지켜지는지 확인하며, Vercel이나 Netlify에 올리기 전에 중급 사양 모바일 기기에서 렌더링을 확인합니다.

보고된 상한선은 실제이지만 조건이 붙습니다. 한 실무자는 전체 화면 히어로, 스크롤 트리거 기반 분해/재조립, 애니메이션 숫자 카운터, 임베드 영상이 들어간 Ferrari F1 다크 테마 랜딩을 약 10분 만에, 생성 크레딧 약 0.72달러(이미지 0.09달러 + 영상 0.63달러)로 조립했습니다 .

"핵심 애니메이션 3~4개를 고르고, React cleanup에는 useGSAP을 쓰며, scrub에는 ease:'none'을 적용하고, 항상 prefers-reduced-motion 체크를 추가하라" — motion-framer skill의 프로덕션 레시피 (source: freshtechbro/claudedesignskills).

GSAP 스크롤 관리: 효과는 줄이고, 미디어는 가볍게, 움직임 감소 설정은 존중하기

스크롤 관리가 제대로 된 페이지와 버벅이는 페이지의 차이를 만듭니다. 프롬프트로 생성한 결과물은 이 지점에서 예측 가능한 방식으로 자주 실패합니다. 가장 많이 보고되는 실패는 과한 애니메이션입니다. 에이전트가 효과를 추가하기는 쉽지만 나중에 원인을 진단하기는 어렵기 때문에, 페이지마다 서로 다른 애니메이션은 3–4개로 제한하고 나머지는 덜어내세요.

미디어 예산도 지켜봐야 합니다. 비디오 배경 위에 Three.js 캔버스가 얹히고, 그 위에 무거운 ScrollTrigger 작업까지 겹치면 중급형 Android 기기에서는 페이지가 기어가듯 느려집니다. 효과를 쌓은 뒤가 아니라 쌓기 전에 Lighthouse 성능 상한선을 정해두면, 제거 비용이 아직 낮을 때 회귀를 잡을 수 있습니다. GSAP의 ScrollTrigger는 스크롤 타임라인에서 검증된 표준이며 대부분의 사용 사례에서 무료로 쓸 수 있지만 , 프레임 예산까지 대신 관리해주지는 않습니다.

접근성과 Core Web Vitals는 모두 움직임 감소 설정을 존중하는지에 달려 있습니다. 모든 키프레임 선언에 @media (prefers-reduced-motion: reduce)를 추가하고, 해당 사용자에게는 GSAP 타임라인을 조건부로 비활성화하세요. React에서는 useEffect가 아니라 useGSAP으로 ScrollTrigger를 구동해야 언마운트 시 정리가 정확히 실행됩니다. 또한 스크럽되는 타임라인에는 ease:'none'을 설정해 빠른 스크롤 속도에서 드리프트가 생기지 않게 하세요 .

useGSAP(() => {
  const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (reduce) return; // 타임라인 전체를 건너뜀

  gsap.to('.hero', {
    scrollTrigger: { trigger: '.hero', scrub: true },
    ease: 'none',      // 스크럽에는 이징 없음 — 드리프트 방지
    yPercent: -30,
  });
}, { scope: container });

2026년 스크롤 애니메이션 도구 비교: Framer AI, Webflow, v0

2026년에 스크롤 애니메이션 도구를 고를 때 핵심은 하나의 절충입니다. 얼마나 세밀하게 모션을 제어할 수 있는가, 그리고 코드를 내보내 소유할 수 있는가입니다. Framer AI는 소스 접근 없이 캔버스 네이티브 모션을 만드는 데 가장 강하고, Webflow는 타임라인 기반 GSAP 제어와 코드 내보내기를 제공합니다. v0는 애니메이터로서는 가장 약하지만 풀스택 생성기로는 가장 좋습니다. MotionSites + Claude Code는 내보낼 수 있고 세션당 비용이 가장 낮은 경로이지만, QA는 직접 책임져야 합니다.

Framer AI는 모션을 네이티브 언어처럼 다룹니다. 스크롤 효과, 호버 상태, 마이크로 인터랙션을 소스에 손대지 않고 캔버스에서 다룰 수 있으며, React 18 호환 코드 컴포넌트도 지원합니다 . 비용은 완전한 플랫폼 종속입니다. 개발팀에 넘길 수 있는 깔끔한 코드 내보내기는 없습니다.

Webflow는 가장 프로덕션 지향적인 비교 대상입니다. Interactions 시스템은 프레임 단위 제어를 위한 네이티브 GSAP 통합과 함께 타임라인 기반 스크롤 애니메이션을 제공하며, AI는 프롬프트로 섹션, CMS 컬렉션 아이템, React 코드 컴포넌트, 애니메이션 히어로를 생성합니다. HTML/CSS 내보내기도 가능합니다. Vercel의 v0는 호스팅형 Claude Code 워크플로에 가장 가깝습니다. 고품질 React + Tailwind + shadcn/ui를 생성하고 Vercel에 원클릭 배포할 수 있습니다 . 다만 애니메이션만 놓고 보면 가장 약합니다. 리뷰어들은 캐러셀 진입 애니메이션이 없고, 다단계 폼 단계 사이 전환이 없으며, 스켈레톤 상태도 빠져 있다고 보고합니다. 그래서 2026년의 우회 방법은 v0 출력물에 GSAP 또는 Framer Motion 레이어를 이어 붙이는 것입니다 .

MotionSites + Claude Code 영역은 구독 종속이 없고 실행당 비용이 가장 낮습니다. 하지만 CMS 연결, SEO 메타데이터, 폼, 접근성 점검, QA를 모두 직접 맡아야 하는 선택지이기도 합니다 . motion-framer 스킬 작성자들은 한계를 분명히 말합니다.

"핵심 애니메이션 3–4개를 고르세요 — Claude Code는 디자인 도구가 아니며 시각적 결과물에서 Framer와 경쟁하지 않습니다" — freshtechbro/claudedesignskills motion-framer skill (source: claudedesignskills).

구체적으로 정리하면 이렇습니다. 가장 빠르게 다듬어진 캔버스가 필요하고 코드를 만질 일이 없다면 Framer를 쓰세요. 내보내기와 타임라인 제어가 필요하다면 Webflow가 맞습니다. 먼저 풀스택 앱을 만들고 나중에 모션을 더하려면 v0를 쓰세요. 레포를 직접 소유하고 빌드당 몇 센트 수준으로 비용을 낮추고 싶다면 MotionSites 브리프로 Claude Code를 구동하세요. 대신 빌더 구독에서 아낀 만큼의 QA 시간을 반드시 예산에 넣어야 합니다.

자주 묻는 질문

MotionSites AI는 웹사이트 빌더인가요?

아닙니다. MotionSites는 빌더가 아니라 프롬프트와 브리프 라이브러리입니다. 텍스트 자산만 제공하며 런타임, CMS, 호스팅은 없습니다. 실제 사이트는 해당 브리프를 붙여 넣는 하위 에이전트, 즉 Claude Code, Lovable, v0 등이 생성합니다. MotionSites 자체 홈페이지도 이 제품을 무언가를 렌더링하거나 호스팅하는 플랫폼이 아니라 랜딩 페이지를 만들기 위한 "ready-to-use prompts"로 설명합니다 . Framer나 Webflow의 경쟁자라기보다, 코딩 에이전트를 위한 선행 디자인 의도라고 보면 됩니다.

MotionSites 브리프로 만든 Claude Code 결과물에는 어떤 애니메이션 라이브러리가 쓰이나요?

보통 두 가지입니다. 컴포넌트 단위 애니메이션에는 Framer Motion(motion.div, whileInView, AnimatePresence 종료 전환, 제스처 및 호버 인터랙션)이, 스크롤 타임라인에는 GSAP ScrollTrigger가 쓰입니다. 에이전트가 React 프로젝트를 스캐폴딩할 때 둘 다 package.json에 자동으로 들어갑니다. 오픈소스 claudedesignskills motion-framer 스킬은 React 정리를 위한 useGSAP와 스크럽 연동 타임라인을 위한 ease:'none'까지 포함해 두 라이브러리의 프로덕션 레시피를 문서화합니다 .

Framer AI나 Webflow AI에서 소스 코드를 내보낼 수 있나요?

Webflow는 깔끔한 HTML/CSS 내보내기를 지원하므로, 팀이 시각적으로 빌드한 뒤 코드와 함께 빠져나올 수 있습니다. Framer는 그렇지 않습니다. Framer 호스팅에 묶이며 일반적인 저장소 형태의 소유권도 더 제한됩니다 . Claude Code 결과물은 또 다릅니다. Claude Code는 실제 파일을 수정하고 git과 직접 작업하므로, 사용자가 소유하고 어디든 푸시할 수 있는 일반 소스 코드가 나옵니다 . 이식성이 중요하다면 MotionSites + Claude Code 경로나 Webflow 내보내기 모두 폐쇄형 생태계에 갇히는 일을 피하게 해줍니다.

MotionSites 가격은 얼마인가요?

공개 가격은 색인되어 있지 않습니다. 실시간 검색에서도 MotionSites 랜딩 영역에서 가격이 적힌 페이지는 찾지 못했습니다 . 개별 프롬프트에는 무료 "Copy" 티어가 있고, 전체 카탈로그에는 유료 "Go Unlimited" 티어가 있지만 구체적인 숫자는 공개되어 있지 않습니다. 2026년 7월 7일 확인된 대안 가격을 참고로 들면, Framer Basic은 연간 결제 기준 월 $10입니다 . Webflow Basic은 연간 결제 기준 월 $15입니다 .

MotionSites 튜토리얼의 "$10K agency website" 주장은 정확한가요?

측정된 근거라기보다 마케팅식 표현으로 보는 편이 맞습니다. 실무자 빌드 사례에서 보고된 생성 크레딧 비용은 약 $0.72($0.09 이미지 + $0.63 비디오)였고, "$10K website"라는 문구는 이 수치를 기준으로 대비를 크게 잡은 표현입니다 . 하지만 결과물 품질은 전적으로 프롬프트 역량과 사용자의 디자인 판단에 달려 있으며, MotionSites는 그 상한선을 뒷받침할 Lighthouse 결과, 접근성 감사, 모바일 스크린샷, 재현 가능한 Claude Code 실행 결과를 공개하지 않습니다 . $3,000-$10,000 비교는 보장이라기보다 조건부 벤치마크로 읽어야 합니다.

이 글이 도움이 되셨다면, 새 글이 올라올 때마다 이메일로 받아보세요.

구독하기