Webflow Claude Connector 공부 정리 | 자연어로 사이트 편집이 된다는 게 뭔지

Webflow 블로그에서 Claude Connector 발표가 있었다. Webflow와 Claude를 MCP(Model Context Protocol)로 연결해서 텍스트 명령만으로 사이트 작업을 처리하는 내용이었다. 처음에 제목만 봤을 때는 “AI 기능 하나 더 붙였나 보다” 싶었는데, 구체적인 사용 예시를 읽다 보니 생각이 좀 달라졌다.

내가 Webflow를 쓰면서 가장 피곤했던 건 반복성 작업이었다. 페이지마다 SEO 설정을 하나씩 확인하고, CMS 아이템을 하나씩 열어서 필드 채우고, 스타일이 틀어진 요소를 찾아다니고. 익숙해질수록 더 지루해지는 그런 종류의 일. 그걸 대화로 처리할 수 있다면 꽤 달라지겠다는 생각이 들었다.

1️⃣ 이게 뭐냐?

Claude Connector는 MCP 방식으로 Claude와 Webflow를 연결하는 도구다. Claude한테 “이 사이트 모든 페이지 SEO 타이틀 점검해줘”라고 하면, Claude가 직접 Webflow API를 호출해서 처리해주는 식이다. 기존에는 이런 작업을 하려면 Webflow 편집 화면 안에서 직접 움직여야 했는데, 외부에서 명령으로 처리하는 방식이 된다는 게 다른 점인 것 같았다.

원문에서 소개한 작업 유형은 다섯 가지였다. 사이트 전체 구조 파악, SEO 메타데이터 일괄 수정, CMS 필드 추가 및 역채우기, 스타일 일관성 유지, 새 컴포넌트 생성. 기능 목록보다는 이것들이 전부 텍스트 명령 하나로 처리된다는 게 핵심인 것 같았다.

가장 흥미로웠던 예시는 “읽기 시간” 필드였다. 블로그에 새 CMS 필드를 추가하고, 이미 등록된 글들의 읽기 시간을 자동으로 계산해서 채워준다. 이걸 수동으로 하면 글마다 직접 열어서 값을 입력해야 하는데, 그 과정이 통째로 없어지는 셈이다.

다만 원문에서도 “AI가 Designer 앱을 대체하지는 않는다”고 명시했다. Claude가 만들어준 컴포넌트는 Designer에서 계속 편집해야 하고, 최종 확인은 사람이 한다. 완전한 자동화보다는 반복 구간을 줄여주는 쪽에 가깝다는 인상이었다.

2️⃣ 내가 든 생각

디자이너 입장에서 보면, 이 도구의 의미는 반복에서 오는 피로감을 줄여준다는 데 있는 것 같다. 스타일 드리프트를 잡으러 요소마다 돌아다니거나, 페이지 수십 개의 메타데이터를 하나씩 수정하는 일. 이런 작업에서 AI에게 위임할 수 있는 범위가 생긴다는 건, 도구를 쓰는 방식 자체가 달라지는 이야기다.

👉🏻 그보다 더 궁금해진 건 “Webflow를 배운다”는 게 앞으로 어떤 의미가 될지였다. 지금은 컬렉션 구조를 직접 만들어보고, 설정을 하나하나 눌러보면서 감을 잡는 게 일반적인 학습 방식이다. AI가 그 과정 중 일부를 대신해주면, 도구에 대한 이해가 어디서 시작되어야 하는지도 달라질 것 같다는 생각이 들었다.

💡 “직접 설정할 줄 아는 것”과 “AI가 한 결과를 검토할 줄 아는 것”은 서로 다른 감각인데, 앞으로 어느 쪽이 더 필요해질까?
이게 아직 잘 안 풀린다. 둘 다 필요한 건지, 아니면 점점 한쪽으로 수렴하게 되는 건지.

3️⃣ 앞으로 어떻게 쓸까?

지금 당장 Webflow를 메인으로 쓰는 상황이 아니라 바로 테스트해보긴 어렵다. 일단은 이런 방향이 생겼다는 걸 알아두는 정도다.

나중에 Webflow 프로젝트를 다시 만질 일이 생기면, CMS 관련 반복 작업에서 먼저 써볼 것 같다. SEO 일괄 처리나 기존 아이템에 새 필드 채우는 작업은 수동으로 할 때 제일 힘든 부분이기도 해서, 거기서부터 시작하면 실제로 어느 정도까지 맡길 수 있는지 가늠이 될 것 같다.

⭐️ 마지막으로, 디자인 도구 관점에서 공부하며 느낀 점

이번에 공부하면서 Webflow 같은 노코드 도구에서 중요한 건 “각 설정이 어디 있는지 아는 것”이 아니라 “내가 원하는 결과를 어떻게 말로 설명할 수 있는지”라는 언어화 능력인 것 같다는 생각이 들었다.

---

참고 원문: 5 things you can do with Webflow and the Claude connector