AI한테 "운동화 브랜드 사이트 만들어줘" 한마디 했더니, 홈·About·Products·Blog·Contact 5페이지에 스크롤 애니메이션까지 붙어서 나왔어요.
v0이나 Lovable에 같은 프롬프트 넣으면 결과물이 좀 달라요. 사실 두 도구가 만들고 있는 게 애초에 다르거든요.
이게 뭔데?
Webflow가 2026년 2월 5일에 AI Site Builder를 다시 깔았어요. 작년 2월에 처음 베타로 풀렸을 땐 솔직히 좀 심심했거든요. 단일 페이지에 정적인 디자인, 그게 끝이었어요.
이번 업데이트로 바뀐 게 4가지인데, 핵심은 "한 프롬프트로 진짜 사이트 다 만들어준다"는 거예요:
- 멀티페이지 생성
초기 단계에서 최대 5페이지짜리 사이트 구조를 한 번에 만들어요. 홈·소개·제품·블로그·연락처 같은 표준 IA가 통째로 나옴. - 내장 애니메이션
스크롤 인터랙션, 호버 효과 같은 애니메이션이 생성 단계에서 같이 붙어요. 나중에 Webflow에서 디테일 조정. - 재설계된 생성 플로우
이전엔 테마부터 고르고 → 색·폰트 → 페이지 추가가 분리돼 있었는데, 이제 한 흐름으로 통합됨. - 엔터프라이즈 접근
대규모 팀이 같이 쓸 수 있게 권한·접근성이 확장됐어요.
그런데 우리한테 더 흥미로운 건 따로 있어요. 같은 카테고리 도구들이 만드는 결과물이 완전히 다르다는 점이거든요. 이게 이번 글의 핵심이에요.
잠깐, 비슷한 게 너무 많지 않나?
v0, Lovable, Bolt, Framer AI, Webflow… 죄다 "프롬프트로 사이트 만든다"고 말해요. 근데 직접 써보면 결과물 성격이 다르고, 그래서 적합한 사람도 달라요.
크게 둘로 갈라져요. 한쪽은 코드를 뱉어내는 그룹(v0·Lovable·Bolt)이고, 다른 쪽은 '편집 가능한 사이트'를 뱉어내는 그룹(Webflow·Framer)이에요. 이 차이가 어디서 오는지, 왜 중요한지 다음 섹션에서 풀게요.
뭐가 달라지는 건데?
가장 큰 갈림길은 "AI가 만든 결과물을 누가 계속 만질 거냐"예요.
| 코드 생성형 (v0·Lovable·Bolt) | 디자인 시스템 생성형 (Webflow·Framer) | |
|---|---|---|
| 출력물 | React/Next.js 코드 | 에디터에서 편집 가능한 사이트 |
| 편집 방식 | IDE나 v0 챗으로 코드 수정 | 비주얼 캔버스 드래그앤드롭 |
| 유지보수 주체 | 개발자 | 디자이너·마케터 |
| 버전 관리 | GitHub 직접 연결 | 자체 히스토리 |
| CMS·SEO | 직접 붙여야 함 | 기본 탑재 |
v0은 코드가 GitHub로 sync되고, 다른 React 프로젝트랑 통합돼요. 개발자 워크플로우에 들어가는 게 강점이에요. Lovable도 비슷한 결을 가지면서 "iterate on your creation with simple feedback"이라며 비개발자도 다룰 수 있다고 어필하고요. Bolt는 더 나아가서 백엔드·인증·DB까지 풀스택으로 짜준다고 주장해요.
반대로 Webflow는 결과물이 Webflow 사이트 그 자체예요. AI가 만든 결과물을 같은 회사의 비주얼 에디터에서 디자이너가 계속 만질 수 있어요. CMS 컬렉션, 디자인 시스템(컬러 토큰·타이포·간격), 호스팅까지 한 덩어리로 따라오고요. Product Hunt에서 사용자들이 가장 칭찬하는 게 "pixel-perfect control over responsive design"인데, 그 통제권이 AI 생성 후에도 유지된다는 의미예요.
Framer AI도 같은 진영이에요. Wireframer로 레이아웃을 만들고, AI Translate로 다국어를 처리하고, 결과물은 Framer 캔버스에서 계속 편집 가능해요. 둘의 차이는 Webflow가 CMS·복잡한 사이트 구조에 강하고, Framer는 더 가벼운 포트폴리오·랜딩 페이지에 강하다는 점.
그리고 Webflow가 살짝 영리한 게 하나 더 있어요. AI Site Builder 외에 AI Code Components를 따로 풀었거든요. 사이트 안에서 "가격 계산기 만들어줘", "검색 필터 추가해줘" 같은 인터랙티브 컴포넌트를 자연어로 생성할 수 있어요. 거기다 Claude·Cursor MCP 연결까지 지원해서, IDE에서 "이 사이트 SEO 메타데이터 다 수정해줘" 같은 명령도 가능하고요. AI를 한 군데가 아니라 워크플로우 곳곳에 뿌려놓는 전략이에요.
핵심만 정리: 시작하는 법
Webflow AI Site Builder는 베타에서 정식으로 풀렸고, Enterprise Workspace 제외 모든 고객이 접근 가능해요. Starter 무료 플랜에서 일단 만들어보고 호스팅 필요할 때 유료로 올리는 흐름이 일반적이에요.
- Webflow 대시보드에서 New Site 클릭
AI Site Builder 옵션이 첫 화면에 나와요. 기존 Webflow 계정이 있으면 같은 워크스페이스에서 그대로 시작. - 프롬프트는 구체적으로
"운동화 브랜드 사이트"보다 "한국 시장 타깃 러닝화 브랜드, 미니멀 톤, About·Products·Blog·Contact 페이지 필요"처럼 길게 쓸수록 결과가 좋아요. 톤·타깃·페이지 구조 3개는 최소. - 디자인 시스템부터 확인
생성이 끝나면 색 토큰·타이포 스케일·간격이 일관되게 잡혀 있는지 먼저 점검. 여기가 흔들리면 페이지 수정할수록 더 깨져요. - 애니메이션은 켜둔 채로 시작
처음부터 끄지 마세요. AI가 깔아둔 스크롤 인터랙션을 보고 어디가 과한지 빼는 식이 더 빠릅니다. - CMS·SEO는 그다음
Blog 페이지가 만들어졌다면 CMS Collection을 연결하고, SEO 메타데이터는 Claude MCP 커넥터로 한 번에 감사하는 방법도 있어요.
고려할 점
한국어 프롬프트는 가능하지만, 결과물 텍스트가 영문 위주로 나올 수 있어요. 한국어 카피는 후편집이 거의 필수. 또 Product Hunt 리뷰에 "learning curve steep for beginners"라는 지적이 자주 나오는데, AI Site Builder가 그 진입 장벽을 낮춰주는 진입로 역할을 해요. 다만 본격적인 커스터마이징은 여전히 Webflow 학습 곡선을 타야 합니다.
