Wix AI, Squarespace AI, 대부분의 AI 웹빌더가 만들어주는 건 '목업'이에요.
예쁘게 생성돼서 나오지만, 결국 내 라이브 사이트에 수동으로 옮겨야 해요. AI가 만든 결과물은 내 브랜드 색상도 아니고, 기존 컴포넌트도 아니고, 별도의 캔버스 위에 놓인 낯선 레이아웃이에요.
Framer 3.0 에이전트는 처음부터 내 라이브 사이트를 열어요. 그리고 거기서 직접 고쳐요.
다른 AI 빌더들과 뭐가 다른 건데요?
가장 큰 차이는 에이전트가 "어디에서 작동하는가"예요.
기존 AI 웹빌더들은 새로운 디자인을 생성해줘요. 하지만 그 결과물은 별도의 캔버스 위에 올라오고, 내 기존 사이트와는 분리된 상태예요. 레이아웃은 그럴듯하지만 기존 브랜드 색상, 폰트, 컴포넌트가 반영되어 있지 않죠.
Framer 에이전트는 반대로 동작해요. 에이전트가 처음 하는 일은 내 기존 사이트를 읽는 것이에요. 페이지 구조, 섹션 배치, 텍스트 스타일, 색상 시스템, CMS 컬렉션까지 — 다 파악한 다음에 그걸 기반으로 편집을 시작해요.
| 기존 AI 웹빌더 | Framer 에이전트 | |
|---|---|---|
| 작업 위치 | 별도 생성 캔버스 | 라이브 Framer 프로젝트 |
| 브랜드 반영 | 제한적 (템플릿 기반) | 기존 컴포넌트·스타일 그대로 |
| 편집 범위 | 콘텐츠 생성 위주 | 페이지·CMS·SEO·반응형 일괄 |
| 결과 적용 | 수동으로 복사·붙여넣기 | 브랜치 병합으로 바로 발행 |
| 외부 도구 연동 | 없음 | Claude Code, Cursor, Gemini CLI |
Framer 공식 설명을 그대로 빌리면, 에이전트는 "editing, not generating"에 초점을 맞추고 있어요. 새로운 사이트를 뚝딱 만들어주는 게 아니라, 이미 있는 걸 더 잘 만들어주는 게 목적이라는 거죠.
AI가 사이트를 날리면 어쩌죠
에이전트가 "페이지 전체 반응형 레이아웃 다시 잡아줘"라는 명령을 받는다고 생각해보세요. 근사한 기능이지만, 뭔가 잘못됐을 때 라이브 사이트가 망가지면 큰일이잖아요.
Framer 3.0은 이 문제를 브랜칭으로 해결했어요.
브랜칭이 뭔가요?
개발자들이 쓰는 git branch 개념을 디자이너·콘텐츠팀을 위해 구현한 거예요. 라이브 사이트를 복사해서 별도 브랜치를 만들고, 거기에서 AI 대규모 작업을 해요. 결과가 마음에 들면 병합(merge), 아니면 그냥 버리면 돼요. 라이브에는 전혀 영향이 없어요.
팀으로 일할 때 특히 유용해요. 디자이너가 브랜치에서 AI로 대규모 리디자인을 실험하는 동안, 마케터는 라이브에서 블로그 글을 올릴 수 있어요. 병렬 작업이 가능하고, 충돌도 없어요.
Framer가 직접 이걸 "Git branch model built for designers"라고 불렀어요. 에이전트와 브랜칭을 같이 쓰면 AI가 뭘 바꾸든 프로덕션은 건드리지 않아요.
Claude Code가 내 Framer 사이트를 편집한다고요?
Framer 3.0에서 개발자 입장에서 가장 흥미로운 기능이 있어요. External Agents, 즉 외부 에이전트 연동이에요.
MCP(Model Context Protocol)를 통해 Claude Code, Cursor, Codex, Gemini CLI 같은 외부 AI 도구가 내 Framer 프로젝트를 직접 편집할 수 있어요. 터미널에서 Claude Code로 사이트 SEO를 일괄 감사하거나, Notion 페이지를 가져다가 Framer CMS에 자동으로 넣거나, CSV 파일을 CMS 컬렉션으로 변환하는 작업이 가능해요.
가격도 변했어요. 에디터 시트 가격이 $40에서 $20으로 반값이 됐고, Scale 플랜은 없어지고 Basic과 Pro로 단순화됐어요. AI Credits는 무료 플랜 하루 500크레딧, Pro 플랜 월 3,000크레딧이에요.
커뮤니티도 통합했어요. Marketplace, Gallery, Feed, Awards, Contests가 한 탭 안으로 합쳐졌고, 마켓플레이스 사전 심사 과정이 사라졌어요. 2025년 한 해 크리에이터들이 받은 수익은 $6.5M — 전년 대비 200% 성장이에요.
Framer 에이전트 시작하는 법
- 에이전트 아이콘 열기
Framer 캔버스 우측 하단의 에이전트 아이콘을 클릭하면 채팅창이 열려요. 새 프로젝트든 기존 사이트든 바로 쓸 수 있어요. - AI 작업 전 브랜치 만들기
큰 변경 전에는 항상 브랜치를 먼저 만드세요. 메뉴 상단 "New Branch"로 생성하면 라이브 사이트는 그대로 유지돼요. 좁고 구체적인 명령일수록 결과가 좋아요. - 에이전트에게 편집 요청
자연어로 요청하면 돼요: "새 Pricing 섹션 추가해줘, 기존 컬러 시스템 써서", "홈 히어로 반응형 레이아웃 수정해줘", "블로그 CMS 만들고 기존 텍스트들 임포트해줘". - External Agents(MCP) 연결하기 (선택)
Claude Code나 Cursor를 쓰는 개발자라면 Framer 프로젝트 설정 → External Agents 탭에서 MCP URL을 복사해서 AI 도구에 붙여넣으면 돼요. - 브랜치 검토 후 병합
에이전트가 만든 결과물을 브랜치에서 확인하고, 마음에 들면 "Merge to Main"으로 라이브에 반영해요. 아니면 버리고 다시 시도하면 돼요.
에이전트 성과를 높이려면
색상 토큰과 재사용 컴포넌트로 디자인 시스템을 먼저 정리해두세요. 에이전트가 "기존 스타일로" 작업할 때 훨씬 정확해져요. "전체 리디자인해줘"보다 "About 페이지 반응형 깨진 부분 수정해줘"처럼 좁고 구체적인 명령이 좋아요.
