Webflow MCP 2.0 공부 정리 | 에이전트한테 맥락을 전달하는 구조

Webflow 블로그에서 MCP 2.0 관련 글이 올라왔다. 요즘 MCP라는 단어가 자주 보여서 대충 흘려봤는데, 이번 건 좀 달랐다. “AI 에이전트가 마침내 당신의 자리에 들어설 수 있다”는 문구가 눈에 걸렸다. 디자이너 입장에서 살짝 신경 쓰이는 문장이기도 해서, 좀 더 꼼꼼히 읽어봤다.

MCP(Model Context Protocol)는 AI 에이전트가 외부 서비스를 직접 조작할 수 있게 해주는 프로토콜이다. Webflow가 자기들 플랫폼을 여기에 연결한 게 Webflow MCP인데, 1.0은 기본적인 읽기·쓰기 수준이었던 것 같고, 이번 2.0은 기능 범위가 꽤 넓어졌다.

1️⃣ 이게 뭐냐?

가장 눈에 들어온 건 CSS 변수 제어다. 디자인 토큰을 대화 한 번에 50개 이상 건드릴 수 있다고 나와 있었다. 모드(Mode) 생성이나 재정렬도 에이전트가 처리한다. 디자인 시스템 레벨의 작업을 텍스트 지시로 자동화할 수 있다는 게 처음엔 신기하게 느껴졌다.

컴포넌트 생성도 새로 추가됐다. 스크린샷을 주면 Webflow 컴포넌트로 만들어준다고 한다. Props, Variants, Slots 설정까지 포함해서. 문서에 적힌 내용 기준이라 실제 퀄리티는 모르겠지만, 방향 자체는 이해됐다.

에이전트 지시사항(Instructions)이라는 기능도 생겼다. 글로벌 Rules와 작업별 Skills 두 가지로 나뉘는데, Rules는 모든 상호작용에 적용되는 가드레일이고, Skills는 특정 작업을 위한 플레이북에 가까운 것 같다. Webflow의 디자인 원칙을 에이전트한테 미리 가르쳐두는 구조라고 이해했다.

브릿지 앱도 이번 버전에서 대부분 불필요해졌다. 이전엔 브라우저 탭을 계속 열어두고 실행해야 했는데, 2.0부터는 캔버스를 직접 건드릴 때만 필요하다고 한다.

2️⃣ 내가 든 생각

디자이너 입장에서 CSS 변수를 에이전트가 건드린다는 부분이 가장 인상적이었다. 디자인 토큰은 디자인 결정이 담기는 곳이라, 이걸 자동화 대상으로 본다는 게 조금 낯설었다. 대량 업데이트가 필요한 상황이라면 유용하겠지만, 의사결정 흔적이 흐릿해질 수 있겠다는 생각도 들었다.

👉🏻 Rules와 Skills 구조가 흥미로웠다. 에이전트한테 “이렇게 행동해라”를 선언하는 게 점점 중요한 작업이 되는 것 같다. 어떻게 보면 팀 온보딩 문서를 쓰는 것과 비슷한 일이기도 하다.

💡 여기서 드는 질문? Rules를 얼마나 구체적으로 정해두느냐에 따라 에이전트 결과물이 달라질 텐데, 그 기준은 어떻게 세우는 걸까?

스크린샷 → 컴포넌트 변환은 형태를 옮기는 거지 의미를 담는 건 아닐 것 같다. 내가 이해한 바로는, 어떤 컴포넌트를 만드느냐보다 어떤 원칙으로 만드느냐가 중요한 부분은 에이전트가 해결하기 어려운 영역에 남아있을 것 같다.

⭐️ 마지막으로, 디자이너 입장에서 공부하며 든 생각

정리해보니 MCP 2.0에서 새로 생긴 기능보다 중요한 건, 에이전트에게 맥락을 전달하는 구조가 생겼다는 쪽에 가까운 것 같다. Rules와 Skills가 그 구조다. 어떤 도구를 쓰느냐보다 에이전트에게 어떤 원칙을 심어두느냐가 결과를 가르는 일이 되어가고 있다는 게 이번 공부에서 가장 남은 생각이다.

---

참고 원문: Webflow MCP 2.0 is a big upgrade. Here’s what it can do.