Claude × Webflow MCP 시작 가이드

Part 1 · 준비 단계

Claude 계정 만들기

Claude.ai에 접속해서 무료 계정을 만드세요.
Google 계정으로 바로 가입할 수 있어요.

claude.ai 무료로 시작 가능
‍

Webflow 계정 확인

올인웹으로부터 사이트 이전(Transfer)을 받은 뒤, Webflow 계정에 로그인이 되는지 확인해주세요.

이메일 초대 확인 필요‍

‍
▼
‍

Part 2 · Webflow MCP 연결

Claude 설정 열기

Claude.ai에 로그인 후, 화면 왼쪽 하단의 프로필 아이콘 → Settings 클릭
‍

Integrations 메뉴 클릭

설정 화면에서 Integrations 탭을 찾아 클릭하세요.
여기서 외부 서비스를 연결할 수 있어요.
‍

Webflow 검색 후 연결

검색창에 Webflow를 입력하면 Webflow 커넥터가 나와요.
Connect 버튼을 클릭하세요.
‍

Webflow 로그인 허용

Webflow 로그인 창이 열리면 내 계정으로 로그인 후,
Claude의 접근을 Allow (허용) 클릭하면 연결 완료!

최초 1회만 진행하면 돼요

‍
▼

‍

‍Part 3 · 실제로 사용해보기

Claude에게 말로 부탁하면 끝

새 대화를 열고 아래처럼 자연스럽게 말씀하시면 됩니다.
‍

이렇게 말해보세요

내 Webflow 사이트 목록 보여줘

블로그 글 목록 가져와줘

팀 소개 페이지에 새 팀원 추가해줘 — 이름: 홍길동, 직책: 마케터

제품 CMS에서 "신상품" 항목 내용 수정해줘

‍

주의사항

알아두세요

• 사이트 디자인 수정은 Webflow 에디터에서 직접 해야 해요
• CMS 콘텐츠(텍스트, 이미지 등) 관리에 가장 유용해요
• 중요한 변경 전에는 꼭 Webflow에서 백업을 확인하세요
• 잘 모르겠으면 올인웹에 먼저 문의해 주세요

MCP 서버를 사용하는 이유는 무엇입니까?

API 호출 작성 및 인증 관리는 이제 그만! 원하는 바를 자연어로 설명하기만 하면 AI 에이전트가 Webflow의 데이터 및 디자이너 API를 사용하여 구현을 처리합니다.

할 수 있는 일

Designer API 도구를 사용하여 캔버스에서 시각적 요소를 생성하고 수정하세요.

• 레이아웃 생성 : 적절한 브레이크포인트 설정을 통해 반응형 섹션, 컨테이너 및 그리드를 구축합니다.
• 스타일 요소 : 클래스 적용, CSS 속성 수정 및 디자인 변수 관리
• 구성 요소 구축 : 재사용 가능한 구성 요소 정의 생성
• 디자인 시스템 : 색상 구성표, 타이포그래피 크기 및 간격 시스템을 설정합니다.

• CMS 운영 : 컬렉션 생성, 필드 정의, 일괄 업데이트를 통한 항목 관리
• 자산 관리 : 폴더를 정리하고 파일 크기를 최적화합니다.
• SEO 최적화 : 페이지 전체의 메타 제목, 설명 및 오픈 그래프 태그를 업데이트하세요.
• 콘텐츠 감사 : 깨진 링크, 누락된 대체 텍스트 및 오래된 정보를 검사합니다.

• 콘텐츠 분석 : 블로그 게시물을 검토하고 트렌드를 파악하며 SEO 키워드를 활용한 새로운 주제를 제안합니다.
• 스타일 리팩토링 : 기존 스타일을 디자인 변수 및 최신 브레이크포인트 설정으로 마이그레이션
• 품질 보증 : 접근성, 성능 및 SEO 모범 사례에 대한 자동화된 검사를 실행합니다.
• 사이트 간 관리 : 여러 Webflow 프로젝트에 걸쳐 일관된 변경 사항을 적용합니다.

‍
제한 사항

MCP 서버는 모든 Webflow 개발자 도구를 자동화할 수 없습니다. 주요 제한 사항은 다음과 같습니다.

• MCP 서버는 아직 데이터 및 디자이너 API의 모든 엔드포인트에 접근할 수 없습니다.
• MCP 서버는 사이트 및 워크스페이스에 대한 접근을 제어할 수 없습니다.
• 사이트 디자인을 변경하려면 MCP 서버에서 MCP 브리지 앱이 실행 중이어야 합니다.
• MCP 서버는 새로운 현지화된 CMS 항목 생성을 지원하지 않지만, 기존 CMS 항목 및 정적 콘텐츠를 보조 현지 언어로 읽고 업데이트할 수 있습니다.

‍

이 가이드는 올인웹(ALLINWEB)이 제공합니다 · 문의: 올인웹 담당자에게 연락주세요

‍