Framer MCP 사용법: Codex·Claude·Cursor로 사이트 안전하게 편집하기

10월 23, 2026

Framer MCP는 Codex, Claude, Cursor 같은 외부 AI 도구를 Framer 프로젝트에 연결해 페이지, 레이아웃, 콘텐츠, CMS를 편집하게 하는 공식 원격 MCP 서버다. 예전처럼 로컬 브리지 프로그램을 계속 실행할 필요가 없고 Framer 편집기를 열어 두지 않아도 된다. 다만 연결한 Framer 계정의 권한으로 작동하며, 명시적으로 게시를 요청하면 라이브 사이트도 바꿀 수 있다. 따라서 설치보다 중요한 것은 대상 프로젝트를 정확히 지정하고, 브랜치에서 변경하고, 사람이 검토한 뒤 게시하는 흐름을 먼저 정하는 것이다.

핵심 요약

지원 조건: 원격 Streamable HTTP MCP와 OAuth를 지원하는 AI 클라이언트
공식 서버 주소: https://mcp.framer.com/mcp
접근 범위: 로그인한 Framer 계정이 접근 가능한 프로젝트와 그 계정의 권한
안전한 기본값: 전체 프로젝트 링크 지정 → 작은 읽기 작업 → 브랜치 편집 → 반응형·CMS 검토 → 마지막에 게시
출시 시점 제한: Framer MCP는 현지화 워크플로를 지원하지 않으며, 이 작업은 기존 로컬 @framer/agent 방식이 필요하다.

무엇이 달라졌나: 내장 Agent와 로컬 CLI 사이의 원격 연결

Framer 안의 내장 Agent는 Framer에서 바로 작업하는 방식이다. 반면 Framer MCP는 이미 쓰고 있는 Codex, Claude Code, Cursor, Pi, Windsurf 같은 외부 도구에서 Framer 프로젝트를 목적지로 연결한다. 파일, 스크립트, 조사 자료, 다른 API처럼 AI 클라이언트가 가진 도구와 Framer 작업을 한 대화에서 조합할 수 있다는 점이 핵심이다.

기존 External Agents는 로컬에서 @framer/agent 브리지를 실행하는 방식이다. 새 MCP는 Framer가 호스팅하는 원격 서버와 OAuth로 연결하므로 별도 로컬 브리지가 필요 없고, 데스크톱·브라우저·지원되는 모바일 클라이언트에서도 사용할 수 있다. Framer는 새 MCP를 권장 방식으로 안내하지만 기능이 완전히 같지는 않다. 특히 현지화는 아직 로컬 CLI만 지원하므로 기존 작업을 바로 폐기하기보다 필요한 기능을 먼저 비교해야 한다.

외부 AI 도구의 요청이 OAuth 권한 확인을 거쳐 Framer 페이지와 CMS를 수정하고 검토 브랜치에서 승인된 뒤 게시되는 흐름 — 외부 에이전트의 요청은 계정 권한 안에서 페이지·구성 요소·CMS를 바꾸며, 브랜치 검토와 게시 승인을 별도 단계로 두는 편이 안전하다.

시작 전 준비사항

Framer 프로젝트와 권한을 확인한다. 테스트용 프로젝트나 복제본을 준비하고, 연결할 계정이 편집 권한을 갖는지 확인한다. 연결 후에는 이 계정이 접근할 수 있는 다른 프로젝트도 대상이 될 수 있으므로 개인 계정과 운영 계정의 범위를 구분하는 편이 좋다.
지원 클라이언트를 고른다. 클라이언트가 원격 Streamable HTTP MCP와 OAuth를 지원해야 한다. ChatGPT/Codex, Claude/Claude Code, Cursor는 공식 디렉터리나 마켓플레이스에서 바로 연결할 수 있고, 다른 클라이언트는 수동 서버 등록을 이용한다.
첫 작업의 성공 기준을 적는다. 예를 들어 “홈페이지를 예쁘게 바꿔 줘”보다 “기존 색·타이포·버튼 컴포넌트를 재사용하고, 데스크톱·태블릿·모바일에서 가격표가 겹치지 않으며, 게시하지 말고 브랜치에 남긴다”처럼 대상과 검토 기준을 정한다.
되돌릴 지점을 만든다. 라이브 프로젝트에서는 에이전트에게 먼저 브랜치를 만들라고 요청한다. CMS 대량 변경이라면 변경 대상 항목과 필드를 표로 먼저 출력하게 하고 승인 전에는 쓰기 작업을 하지 않도록 지시한다.

연결 방법: 디렉터리 설치 또는 원격 서버 수동 등록

1. 공식 디렉터리에서 연결하기

ChatGPT 또는 Codex는 Framer의 ChatGPT Plugins 목록에서 Install Plugin, Claude는 Claude Directory에서 Connect to Claude, Cursor는 Marketplace에서 Add to Cursor를 선택한다. 새 브라우저 탭이 열리면 Framer에 로그인하고 표시되는 권한을 검토한 뒤 승인한다. 연결이 끝나면 새 대화에서 전체 Framer 프로젝트 링크를 함께 주고 접근 여부를 확인한다.

2. 다른 MCP 클라이언트에 직접 추가하기

클라이언트의 MCP 설정에서 원격 서버를 추가하고 아래 세 값을 입력한다. 메뉴 이름은 앱마다 다르지만 핵심 값은 같다.

Name: framer
Type: Streamable HTTP
URL: https://mcp.framer.com/mcp

저장 후 Connect 또는 이에 해당하는 버튼을 누른다. 브라우저에서 Framer 로그인과 OAuth 승인을 마치고, 클라이언트로 돌아와 Framer가 연결됨 또는 OAuth 활성 상태로 표시되는지 확인한다. 기존 대화가 서버 목록을 갱신하지 못하면 앱을 재시작하거나 새 대화를 연다.

Framer 공식 도움말의 Cursor MCP 수동 설정 위치와 서버 이름, Streamable HTTP 유형, 공식 서버 주소 — Cursor에서는 Customize → MCPs → New MCP Server에서 이름, Streamable HTTP 유형, 공식 서버 URL을 입력한다. 출처: Framer Help, 2026년 10월 23일 확인.

3. 쓰기 전에 읽기 작업으로 연결 확인하기

첫 요청은 변경 작업보다 목록 조회가 안전하다. 다음처럼 전체 프로젝트 링크를 포함해 요청한다.

이 Framer 프로젝트를 열고 편집하지 말고 다음만 알려 줘.
1) 페이지 목록과 각 URL 경로
2) CMS 컬렉션 이름과 주요 필드
3) 사용 중인 대표 색상·텍스트 스타일·버튼 컴포넌트
프로젝트: [전체 프로젝트 링크]

대상 프로젝트, 페이지, CMS 구조가 예상과 맞으면 연결이 정상이다. 다른 프로젝트를 열거나 프로젝트를 찾지 못하면 이름만 쓰지 말고 전체 링크를 다시 제공하고, OAuth에 사용한 계정이 그 프로젝트에 접근 가능한지 확인한다.

Framer MCP로 할 수 있는 일과 검토 지점

작업	가능한 범위	사람이 확인할 것
페이지·레이아웃	새 페이지 생성, 기존 레이아웃과 콘텐츠 수정, 데스크톱·태블릿·모바일 구간 작업	기존 스타일·컴포넌트 재사용, 브레이크포인트별 겹침, 링크 대상
CMS	컬렉션·항목 생성, 구조화 콘텐츠 수정, 클라이언트가 접근할 수 있는 자료에서 가져오기	슬러그 중복, 필수 필드, 날짜·작성자·이미지 매핑, 삭제 범위
SEO·품질 검토	메타데이터, 제목 구조, alt, 페이지 구조와 콘텐츠 문제 점검	검색 의도, canonical·리디렉션, 실제 이미지 설명, 과도한 일괄 변경
외부 자료 조합	AI 클라이언트가 접근하는 파일, API, 조사 결과를 Framer 작업에 활용	자료의 출처·최신성, 고객 데이터와 비밀정보, 연결 도구별 권한

안전하게 적용하는 세 가지 실전 예시

예시 1. 기존 디자인 시스템을 지키는 가격 페이지

목적: 새 가격 페이지를 만들되 기존 사이트와 다른 임의의 디자인이 생기지 않게 한다. 먼저 에이전트에게 프로젝트의 색상, 텍스트 스타일, 버튼·카드 컴포넌트를 읽고 재사용 계획을 요약하게 한다. 그다음 브랜치를 만들고 데스크톱·태블릿·모바일 구간을 모두 작성하되 게시하지 않도록 요청한다.

검토: 가격 숫자와 기능 목록뿐 아니라 버튼 링크, 모바일 표의 가로 넘침, 기존 헤더·푸터 연결, 컴포넌트가 복제본으로 흩어지지 않았는지 확인한다. 요구사항이 충족된 뒤에만 브랜치를 병합하거나 게시한다.

예시 2. CMS 콘텐츠 정리와 가져오기

목적: 스프레드시트나 조사 자료에서 새 글을 가져오기 전에 CMS 구조를 맞춘다. 에이전트에게 먼저 대상 컬렉션의 필드, 필수값, 현재 슬러그를 읽고 “생성·수정·건너뜀” 목록을 출력하게 한다. 중복 판단 기준과 날짜 형식을 사람이 승인한 뒤 쓰기 작업을 시작한다.

검토: 원본 자료와 CMS 항목 수, 슬러그, 대표 이미지, 날짜, 빈 필드를 비교한다. 대량 삭제나 기존 항목 덮어쓰기는 별도 확인 단계로 분리한다. 클라이언트가 다른 저장소나 API에도 연결돼 있다면 Framer에 필요한 데이터만 전달하도록 범위를 좁힌다.

예시 3. 게시 전 SEO·접근성 점검

목적: 페이지를 새로 만드는 대신 메타 제목, 설명, H1~H3 구조, 이미지 alt, 내부 링크 문제를 목록화한다. 처음에는 읽기 전용 보고서만 요청하고, 수정안을 페이지별로 나눠 검토한다. 승인한 항목만 브랜치에서 바꾸도록 한다.

검토: 자동 제안이 실제 페이지 내용과 일치하는지, 모든 이미지에 같은 키워드형 alt를 반복하지 않는지, 제목 구조가 시각적 크기만 보고 바뀌지 않았는지 확인한다. SEO 도구를 함께 연결했다면 그 도구가 제공한 데이터와 에이전트의 해석을 구분한다.

권한·게시·비용에서 놓치기 쉬운 점

권한은 Framer 계정을 따른다. OAuth 승인 화면만 안전장치로 생각하지 말고, 연결한 계정 자체의 프로젝트 접근 범위를 먼저 줄인다. 조직에서는 MCP나 플러그인 연결에 관리자 승인이 필요한지도 확인한다.
라이브 게시가 불가능한 것은 아니다. 기본적으로 변경은 프로젝트 또는 브랜치에 남지만, 사용자가 명시적으로 요청하면 에이전트가 게시할 수 있다. 프롬프트에 “검토 전 게시 금지”를 반복해 두고 최종 게시를 별도 요청으로 분리한다.
AI 사용량은 연결한 도구의 요금제나 크레딧을 따른다. Framer 공식 안내는 MCP 자체의 별도 가격을 명시하기보다 연결한 에이전트의 사용량 체계를 따른다고 설명한다. 팀에서는 여러 AI 도구에 비용이 분산될 수 있다.
외부 도구의 권한도 합쳐진다. 에이전트가 파일, SEO 서비스, 저장소에 접근한다면 Framer 권한만 검토해서는 부족하다. 민감한 고객 자료와 비밀키는 프롬프트나 CMS에 넣지 않는다.

자주 막히는 상황과 해결 순서

연결 메뉴에 Framer가 없다: 클라이언트가 원격 Streamable HTTP MCP와 OAuth를 지원하는지 확인하고, 공식 서버 URL을 오타 없이 직접 추가한다.
인증 창을 닫았다: 연결 또는 인증을 다시 시작한다. “Authentication complete”를 확인한 뒤 클라이언트로 돌아간다.
프로젝트를 못 찾거나 다른 프로젝트를 연다: 프로젝트 이름이 아니라 전체 링크를 제공한다. OAuth에 사용한 Framer 계정의 접근 권한을 다시 확인한다.
연결됐지만 도구가 보이지 않는다: 기존 세션을 닫고 새 대화를 시작하거나 클라이언트를 재시작한다. 조직 정책에서 MCP가 비활성화됐는지도 확인한다.
현지화 작업이 되지 않는다: 출시 시점의 Framer MCP 제한이다. 현지화가 필수라면 기존 @framer/agent 로컬 CLI를 유지한다.
결과가 디자인과 맞지 않는다: 막연한 재디자인 대신 재사용할 스타일·컴포넌트, 금지할 변경, 브레이크포인트, 검토 항목을 명시하고 작은 단위로 다시 요청한다.

마무리

Framer MCP의 장점은 사이트 편집을 특정 앱 안의 대화에 가두지 않고, 익숙한 AI 도구와 파일·조사·자동화 흐름에 연결하는 데 있다. 하지만 원격 연결이 쉬워진 만큼 계정 권한과 프로젝트 선택의 영향도 커졌다. 처음에는 읽기 작업으로 연결을 확인하고, 전체 프로젝트 링크와 명확한 완료 기준을 주며, 브랜치에서 반응형·CMS·링크를 검토한 뒤 게시하는 순서가 가장 현실적인 출발점이다.

English version: Read the English Framer MCP guide.

공식 자료

자료 확인일: 2026년 10월 23일

이 블로그 검색

스택핀치