AI 홈페이지 제작, Webflow로 초안부터 출시까지

AI 홈페이지 제작에 Webflow AI를 활용하면 사업 개요만으로 여러 페이지를 갖춘 편집 가능한 웹사이트를 만들고, 문구와 섹션, 콘텐츠까지 다듬을 수 있습니다. 창업자나 소규모 에이전시에 중요한 변화는 작업의 출발점입니다. 페이지를 하나씩 직접 조립하기 전에 사이트 초안부터 검토할 수 있습니다. 다만 무엇을 제공할지, 어떤 근거를 제시할지, 언제 공개할지는 여전히 사람이 결정해야 합니다.

Webflow는 2026년 2월 5일 개편을 통해 사이트 생성 과정에 여러 페이지로 구성된 구조, 스타일, 애니메이션, 기본 디자인 시스템을 통합했습니다. Enterprise를 포함한 모든 고객 등급에서 Dashboard의 New site를 통해 이용할 수 있습니다. 빌더를 사용할 수 있다고 해서 요금제의 페이지 수 제한까지 없어지는 것은 아닙니다. Webflow 출시 소식.

AI 홈페이지 제작, 작업에 맞는 툴부터 고릅니다

Webflow AI는 여러 툴이 갖춰진 작업실이라고 생각하면 이해하기 쉽습니다. 사이트 빌더는 초기 구조를 잡고, 에디터 안의 툴은 개별 요소를 다듬습니다. MCP는 Model Context Protocol의 약자로, 외부 AI 어시스턴트가 Webflow 사이트 안에서 툴을 사용할 수 있도록 연결합니다.

Webflow가 자체 AI 기능을 Webflow AI라는 이름으로 묶어 제공하지만, 각 기능을 시작하는 위치와 방식은 다릅니다. AI 기능 개요, 빌더 이용 조건, MCP 개요.

Workspace 설정에서 Webflow AI를 켭니다

Workspace Owner 또는 Admin이 해당 Workspace를 열고 Workspace settings → General에서 Enable Webflow AI를 켜야 합니다. Enterprise에서는 맞춤 역할로 Use Webflow AI 권한을 제어할 수도 있습니다. 팀원에게 옵션이 보이지 않으면 Workspace의 활성화 설정과 해당 팀원의 역할을 모두 확인합니다. Webflow 관리자 설정 안내.

사이트 생성, 섹션 디자인, 상황별 도움말에는 Webflow AI 크레딧이 소모되지 않습니다. 문구 생성, CMS 항목 생성, AI 코드 컴포넌트, AI SEO 작업에는 크레딧이 소모됩니다. 크레딧은 Workspace 전체에서 공유하며 작업에 따라 사용량이 달라집니다. 현재 Webflow 요금 안내에 표시된 별도 유료 부가 상품은 연간 결제 기준 월 $20에 매월 2,000크레딧을 제공합니다. 크레딧 사용 규칙, Webflow 요금 안내.

AI 웹사이트 만들기: 프롬프트부터 세 페이지 사이트 게시까지

전환 목표가 분명한 소규모 서비스 비즈니스를 예로 들어보겠습니다. 가상의 브랜드 디자인 업체 Cedar Studio는 프로젝트 문의를 받는 것이 목표이며, 사이트는 홈, 서비스, 문의 페이지로 구성합니다.

이 글은 공식 문서를 바탕으로 구성한 절차 안내이며, 직접 사용해 본 테스트는 아닙니다. 이 글을 위해 Webflow 테스트 사이트를 게시하지 않았습니다. 아래의 수동 수정 항목도 실제로 발견한 결함이 아니라 점검해야 할 사항입니다.

1. 세 페이지를 만들 수 있는 요금제를 준비합니다

유료 Workspace에서는 처음부터 세 페이지를 모두 생성할 수 있습니다. 무료 Workspace를 쓰고 있고 유료 Site 요금제도 없다면 홈과 문의 페이지부터 시작합니다. 사이트를 생성한 뒤 유료 Site 요금제를 추가하고, Pages 패널의 AI 페이지 생성 기능으로 서비스 페이지를 만듭니다. 최초 생성 시 유료 요금제는 최대 다섯 페이지, 유료 요금제가 없으면 두 페이지까지 지원합니다. 자동 생성되는 스타일 가이드는 두 페이지 제한에 포함되지 않습니다. 이 소개용 사이트를 자체 도메인으로 공개하는 데는 Basic이면 충분합니다. 빌더의 제한 사항, Site 요금제별 기능.

2. 사업 개요를 프롬프트로 전달합니다

New site에서 AI Site Builder를 선택하고 다음과 같은 프롬프트를 입력합니다.

독립적으로 운영되는 숙박·외식업체를 고객으로 하는 소규모 브랜드 디자인 업체 Cedar Studio의 웹사이트를 만들어 주세요. 목표는 프로젝트 문의를 받는 것입니다. 홈, 서비스, 문의의 세 페이지로 구성해 주세요. 홈에서는 제공하는 서비스를 설명하고 작업 과정을 소개해 주세요. 서비스 페이지에서는 브랜드 전략, 비주얼 아이덴티티, 웹사이트 디자인을 설명해 주세요. 문의 페이지에서는 프로젝트 개요를 보내도록 안내해 주세요. 따뜻한 중성색 계열, 읽기 쉬운 짙은 글자색, 절제된 움직임을 사용해 주세요. 고객사, 추천 후기, 수상 이력, 가격, 성과를 지어내지 마세요. 주요 행동 유도 문구는 “프로젝트 상담하기”로 해 주세요.

이 프롬프트는 대상 고객, 제공 서비스, 방문자가 취할 다음 행동을 알려줍니다. 실제 사이트에 사용하기 전에는 가상의 내용을 확인과 승인을 거친 사업 정보로 바꿉니다.

3. 디자인을 생성하기 전에 구조를 확정합니다

구성안을 생성한 뒤 불필요한 페이지를 삭제하고 섹션을 배치합니다. 무료 Workspace로 시작했다면 요금제를 업그레이드한 후 서비스 페이지를 추가합니다. 완성할 사이트는 다음 목적에 집중합니다.

그다음 사이트를 생성합니다. 공통 테마를 다듬고 Webflow에서 작업을 이어갑니다. 빌더는 요청한 글꼴과 색상을 자체 테마 시스템에 맞춰 적용하므로, 브랜드와 정확히 일치하는지는 직접 확인해야 합니다. 사이트 생성 및 테마 설정 절차.

4. 우리 사업을 제대로 보여주도록 마무리합니다

초안은 편집할 재료입니다. 생성 결과가 미흡한 부분은 다음과 같이 직접 수정합니다.

가장 어려운 작업은 이 사업이 무엇을 정직하게 약속할 수 있는지 정하는 일인 경우가 많습니다. 보기 좋은 임시 문구가 그 판단까지 대신해 주지는 못합니다.

5. 검색 정보와 접근성을 점검합니다

Audit 패널을 열고 사이트 전체를 검토합니다. 누락된 이미지 설명, 페이지 제목, 검색 결과용 설명, 그리고 페이지 정보를 구조화한 스키마를 찾을 수 있습니다. AI가 생성한 제안도 실제 사업 정보와 맞는지 확인해야 합니다. 컴포넌트, 라이트박스, CMS 안의 이미지는 Audit 패널의 점검 범위에 포함되지 않으므로 대체 텍스트를 별도로 직접 확인해야 합니다. Audit 사용법과 점검 범위.

Cedar Studio에서 필요한 결과는 정확한 페이지 정보와 방문자가 문제없이 문의할 수 있는 동선입니다. 생성된 입력란을 채우려고 실제로 없는 서비스, 지역, 평점을 추가해서는 안 됩니다.

6. 스테이징에 게시한 뒤 자체 도메인으로 공개합니다

Publish를 열고 webflow.io 스테이징 주소만 선택해 게시합니다. 방문자 입장에서 홈, 서비스, 문의 페이지를 열고 문의 테스트를 다시 진행합니다. 문제가 있으면 수정한 뒤 스테이징에 다시 게시합니다.

정식 공개 시에는 Site settings에서 자체 도메인을 연결하고 소유권을 확인한 다음, 게시 메뉴에서 해당 도메인을 선택합니다. 게시 후에는 공개된 세 URL과 문의 양식을 다시 확인합니다. 이 작업에는 적절한 게시 권한이 필요합니다. Webflow 게시 안내.

실무에서 달라지는 것은 작업 순서입니다. 직접 구축할 때는 구조, 스타일, 페이지 콘텐츠를 조립한 뒤 전체를 검토합니다. AI로 생성하면 전체를 검토하는 시점이 앞당겨집니다. 승인된 문구와 자료를 준비한 상태에서 사업 개요 작성, 초안 생성, 점검을 위한 작업 시간으로 두 시간 정도를 잡아두는 것을 권합니다. 이는 작업 계획을 위한 제안이며, 측정된 완성 시간이 아닙니다. 연동 문제나 브랜드 수정이 생기면 더 오래 걸릴 수 있습니다.

에디터 안의 Assistant에는 구체적인 작업을 맡깁니다

대상 범위가 작고 완료 기준이 분명한 프롬프트가 가장 유용합니다.

도움말이 필요하면 상단 바에서 Assistant를 열고 Webflow에 관한 구체적인 질문을 입력합니다. 이 모드는 Help Center를 바탕으로 답합니다. 현재 영어를 지원하며, 31일 동안 100개의 질문을 할 수 있습니다. 답변은 확인이 필요한 참고 안내로 받아들입니다. 상황별 도움말 사용 안내.

새 섹션을 만들려면 Add 패널에서 섹션을 캔버스로 끌어온 뒤 해당 섹션의 Assistant 기능을 엽니다. 적합한 레이아웃을 찾고 생성된 디자인을 선택해 실제 배치 상태에서 검토합니다. 기존 클래스와 변수를 재사용하거나 새 클래스를 만들 수 있습니다. 클래스는 이름을 붙여 관리하는 스타일이고, 변수는 여러 곳에서 공유하는 값으로, 디자인의 일관성을 유지하는 데 쓰입니다. 기존 클래스를 수정할 수는 없습니다. Webflow의 현재 섹션 디자인 문서에는 여전히 공개 베타로 표시되어 있으며, 일부 무료 템플릿과 AI 빌더로 만든 사이트에서만 사용할 수 있습니다. 생성 결과에는 이미지, 컴포넌트, 동적 콘텐츠가 포함되지 않습니다. 섹션 디자인 안내.

문구를 다듬으려면 디자이너가 지원되는 텍스트 요소를 마우스 오른쪽 버튼으로 클릭하고 Modify copy를 선택합니다. 예를 들어 “제공할 결과물에 관한 내용은 유지하고 새로운 주장은 추가하지 않으면서 이 문단을 줄여 주세요”라고 요청할 수 있습니다. 적용하기 전에 사실과 관련해 달라진 부분을 하나씩 검토합니다. 유료 Site 또는 Workspace 요금제가 필요합니다. 문구 편집 기능.

사이트 규모가 커지면 두 가지 기능이 더 유용해집니다. CMS를 사용할 수 있는 Site 요금제에서는 CMS Collection의 샘플 항목을 AI로 생성할 수 있습니다. 구조화된 콘텐츠 목록에 들어가는 개별 콘텐츠를 만드는 기능입니다. Assistant를 통해 계산기처럼 재사용 가능한 코드 컴포넌트를 만들 수도 있습니다. 코드 컴포넌트 작업에는 Designer 또는 Site Manager 역할이 필요하며, 게시하려면 Site와 Workspace 요금제에 관한 추가 조건도 충족해야 합니다. 데이터베이스, 인증, 비밀 키 관리 기능은 제공하지 않습니다. 프로젝트에 꼭 필요한 경우가 아니라면 기본적인 소개용 사이트 제작 과정에는 포함하지 않는 편이 좋습니다. CMS 이용 조건, 코드 컴포넌트 이용 조건.

사이트 전반을 작업할 때는 Claude를 연결합니다

MCP는 여러 페이지나 콘텐츠 항목에 걸친 작업에 유용합니다. Webflow 문서에 따르면 페이지와 레이아웃 편집, 스타일, 컴포넌트, CMS 관리, 게시를 지원합니다. Starter를 포함한 모든 Site 요금제에서 사용할 수 있지만, Reviewer 역할의 사용자는 연결할 수 없습니다. MCP 지원 기능.

Claude를 연결하려면 Chat 또는 Code 세션을 열고 더하기 메뉴에서 커넥터를 추가한 뒤 Webflow를 찾아 연결합니다. Webflow의 접근 권한 승인 절차를 따라 해당 사이트를 선택하고 Claude로 돌아옵니다. Claude는 기본적으로 작업을 실행하기 전에 승인을 요청합니다. Webflow의 Claude 연결 안내.

이번 예제에서는 다음과 같은 요청부터 시작할 수 있습니다.

이 사이트의 지침을 먼저 읽고 홈, 서비스, 문의 페이지를 검토해 주세요. 일관되지 않은 서비스명과 행동 유도 문구를 목록으로 정리해 주세요. 아래의 승인된 문구를 바탕으로 정확한 대체 문구를 제안해 주세요. 편집하기 전에 변경안을 보여주고, 게시는 제가 직접 하도록 남겨두세요.

직접 시도해 볼 수 있는 작업 예시이며, 특정 점검 결과를 보장하는 것은 아닙니다. 제안된 수정 사항을 실제 페이지와 직접 대조합니다.

이제 대부분의 MCP 작업은 Webflow 세션을 열어두지 않아도 실행할 수 있습니다. 캔버스에서 선택한 요소와 관련된 작업에는 여전히 MCP Bridge App이 필요합니다. 일반적인 MCP 사용에는 Webflow AI 크레딧 대신 외부 AI 툴의 요금제나 크레딧이 적용됩니다. 현재 MCP 작동 방식과 제한 사항.

실무 효과를 기준으로 살펴본 여섯 가지 활용법

효과를 기대할 만한 활용법에는 명확한 작업 요청과 결과를 판단할 담당자가 있습니다. 아래 내용은 제안하는 작업 방식이며, 고객 성과를 측정한 결과가 아닙니다.

이 작업의 바탕이 되는 기능은 Webflow 문서에 나오는 섹션 툴, Audit 패널, MCP 작업입니다. 제안한 효과를 얻을 수 있을지는 검토 과정에 달려 있습니다.

이를 바탕으로 만들어볼 만한 두 가지 서비스

사이트를 만들려는 수요와 제작·운영에 도움을 받으려는 수요가 모두 존재합니다. 2026년 10월 22일 조회한 DataForSEO의 미국 영어 검색량 추정치에 따르면 “ai website builder”의 월간 검색량은 33,100건입니다. 이는 넓은 제품군에 대한 관심을 보여줄 뿐, 범용 생성기를 하나 더 원하는 수요라는 뜻은 아닙니다.

가장 유망한 방식: 제작부터 공개·인계까지 맡는 서비스

승인된 콘텐츠와 검증된 문의 동선을 갖추고 직접 편집할 수 있는 Webflow 사이트를 원하는 창업자에게 반복해서 제공할 수 있는 서비스를 만듭니다. DataForSEO가 추정한 “webflow agency”의 미국 월간 검색량은 480건입니다. 도움을 구매하려는 관심을 보여주지만, 이와 정확히 같은 패키지를 원하는 검색자가 얼마나 되는지까지 알려주지는 않습니다.

판매 가능한 최소 구성은 특정 업종에 집중하고, 체계적인 사전 질문지로 요구사항을 받아 완성된 세 페이지와 편집 방법을 담은 녹화 안내를 제공하는 방식입니다. 에이전시는 AI로 초안을 만들되 콘텐츠의 정확성, 브랜드 표현, 공개 전 테스트는 직접 책임집니다.

주의할 점: 경쟁사도 비슷한 초안을 쉽게 생성할 수 있습니다. 경쟁력을 만드는 일은 업종을 이해하고 자료의 승인을 받아, 차질 없는 인계까지 책임지는 것입니다. AI 빌더 사이트를 바탕으로 재사용 가능한 에이전시 제작 체계를 설계하려면 Webflow의 Libraries 공유 제한도 먼저 확인해야 합니다. 빌더 제한 사항.

다음으로 유망한 방식: 진단에서 수정까지 이어지는 유지관리 서비스

누락 사항을 찾는 데서 끝나지 않고 검토를 거친 수정까지 마무리해 주는 서비스를 만듭니다. DataForSEO가 추정한 “website seo audit”의 미국 월간 검색량은 320건입니다. 이는 더 넓은 시장의 수요 신호이며, Webflow만을 대상으로 한 구매자 수가 아닙니다.

첫 서비스 구성은 Webflow 점검, 수정 제안 목록, 검토 후 게시를 묶는 형태가 될 수 있습니다. MCP는 정해진 범위 안의 콘텐츠 수정을 돕고, 사람은 사업 관련 주장과 최종 페이지를 검증합니다. 합의한 작업을 끝까지 완료하고 책임지는 서비스를 판매합니다.

주의할 점: 설명란을 채운다고 검색 순위가 보장되지는 않으며, 자동 점검에도 사각지대가 있습니다. Webflow의 Audit 패널도 일부 위치의 이미지는 점검하지 않습니다. 유용한 서비스라면 이런 빈틈까지 확인하고 검색 성과를 보장하는 약속은 피해야 합니다. Audit 점검 범위.

Webflow AI로도 해결되지 않는 부분

새 Webflow 사이트의 기반을 만들고 마무리 작업에 시간을 들일 수 있을 때 빌더를 사용합니다. 이미 맞춤 제작한 사이트가 있다면 지원되는 에디터 내 툴이나 MCP부터 활용합니다. 어느 쪽도 에이전트에게 모든 제어 권한을 주지는 않습니다. MCP는 일부 요소 설정과 CMS 바인딩 설정을 아직 지원하지 않으며, 섹션 생성 기능은 기존 클래스를 다시 작성할 수 없습니다. MCP 제한 사항, Assistant 제한 사항.

새 프로젝트의 기반으로 App Gen을 사용하는 것도 피합니다. Webflow는 개발을 일시 중단했으며 사용 중단을 계획하고 있다고 밝히고 있습니다. 현재 AI 기능 개요.

아직 플랫폼을 고르는 단계라면 Webflow와 Framer 비교로 플랫폼 차이를 살펴보고, Framer AI에서 AI 작업 방식을 확인합니다. 더 넓은 후보군은 AI 웹사이트 빌더 비교를 참고합니다.

Webflow는 AI 툴인가요?

Webflow는 AI 툴을 내장한 웹사이트 플랫폼입니다. 사이트 빌더가 초기 사이트를 만들고, 다른 기능이 문구, 섹션, 콘텐츠, 지속적인 운영 작업을 돕습니다. MCP는 접근을 허용한 사이트에 외부 어시스턴트를 연결합니다. Webflow AI 개요.

AI로 웹사이트를 만들 수 있나요?

네. Webflow 빌더는 설명을 바탕으로 편집 가능한 웹사이트를 생성합니다. 다만 승인된 사업 정보, 정상 작동하는 링크와 양식, 게시 전 점검은 여전히 필요합니다. 위의 세 페이지 예제를 문서에 근거한 작업 절차로 따라 해볼 수 있습니다. Webflow 빌더.

Webflow는 정말 무료인가요?

Webflow AI와 MCP를 이용할 수 있는 무료 Starter 요금제가 있지만, 정적 페이지는 두 개로 제한됩니다. 이 글의 자체 도메인을 사용하는 세 페이지 예제에는 유료 Site 요금제가 필요합니다. 추가 AI 크레딧은 별도로 선택 구매할 수 있습니다. Webflow 요금 안내.

이번 주에 바로 할 일: 승인된 서비스 소개 문구, 실제 이미지, 문의를 받을 곳을 준비합니다. 홈, 서비스, 문의 페이지의 초안을 만든 뒤 정식 공개 전에 스테이징에서 문의 접수까지 이어지는 전체 동선을 완성합니다.

이 작업 방식을 비즈니스에 맞게 구축하고 싶다면 사이트와 자동화의 범위를 정하는 일부터 도와드릴 수 있습니다.