읽을거리 · AI 디자인
프로토타입을 말로 만들고 코드로 넘긴다, 프로토파이 MCP에서 디자이너가 확인할 것
프로토파이가 MCP 지원을 공식으로 알렸다. Studio MCP는 열어 둔 프로토타입을 AI가 읽고 고치고, Code MCP는 완성본을 코딩 에이전트에게 넘긴다. 프로토파이 공식 글과 문서로 무엇이 되고 무엇이 확인되지 않았는지 정리했다.
프로토파이(ProtoPie)가 MCP 지원을 공식으로 알렸다. 프로토파이 블로그의 공식 지원 글 상단에는 날짜가 10월 7일로 적혀 있고, 페이지 정보에는 10월 15일로 되어 있다. 두 날짜가 달라 정확한 게시일은 확인하지 못했다.
인터랙션 프로토타입을 만들어 본 사람이라면 아는 장면이 있다. 버튼을 누르면 카드가 펼쳐지는 동작 하나를 위해 트리거를 붙이고, 응답을 고르고, 변수를 연결한다. 어렵지는 않은데 손이 많이 간다. 그렇게 완성한 프로토타입을 개발자에게 넘기면 "이 동작은 어떻게 구현하나요"라는 질문이 돌아온다. 프로토파이는 이 두 구간에 AI를 끼워 넣었다.
이번 글은 프로토파이의 공식 블로그 글과 문서를 따라가며, 무엇이 되는지와 아직 확인되지 않은 것을 나눠 적는다.
먼저 밝혀 둘 것. 나는 이 기능을 직접 써 보지 못했다. 아래 내용은 프로토파이가 공개한 글과 문서에 적힌 것이다. 가격, 사용 횟수 제한, 정확한 요금제별 범위는 공개된 글끼리 다르거나 적혀 있지 않았다.
MCP가 여기서 하는 일
MCP는 AI 도구가 다른 프로그램의 기능을 불러 쓰도록 이어 주는 약속이다. 프로토파이의 문서 표현으로는 두 개의 서버가 있고, 둘은 같은 프로토파이 계정을 쓴다.
- Studio MCP: 프로토파이 스튜디오에 AI를 연결해, 열어 둔 프로토타입을 읽고 고치게 한다. 스튜디오 안에서 로컬로 돌아가고, AI는 연결한 MCP 클라이언트 쪽에서 돌아간다.
- Code MCP: 완성한 프로토타입을 AI 코딩 에이전트가 읽고 코드로 다시 만들게 한다. 내 컴퓨터에서
npx로 실행하고, 읽기 전용이다.
정리하면 앞의 것은 만드는 쪽, 뒤의 것은 넘기는 쪽이다.
Studio MCP: 말로 시키고, 손으로 고친다
프로토파이 문서에 적힌 Studio MCP의 쓰임은 다섯 가지다.
- 열어 둔 프로토타입을 AI가 읽고 편집한다. 캔버스 화면을 캡처하게 할 수도 있다.
- 프롬프트로 레이어, 레이아웃, 인터랙션을 만든다. 예로 든 것은 버튼에 탭 트리거를 붙이는 일이다.
- 내 컴포넌트 라이브러리를 쓴다. 프로토파이에 이미 올려 둔 에셋과 컴포넌트로 화면을 짓는다.
- 프로토타입을 검증한다. 동작이 기대와 맞는지, 인터랙션이나 흐름에 문제가 없는지 살핀다.
- 요소의 ID로 정확히 짚는다. 레이어, 씬, 변수, 컴포넌트, 트리거, 응답의 ID를 복사해 프롬프트에 넣으면 된다. 공식 글의 예시는 "[요소 ID]의 인터랙션을 바꿔 줘" 꼴이다.
눈에 띄는 것은 두 가지다. 하나는 AI가 아무 부품이나 만들어 내는 게 아니라 내가 쓰는 컴포넌트 라이브러리에서 실제 인스턴스를 꺼내 쓴다는 점이다. 다른 하나는 ID로 대상을 지정한다는 점이다. "그 버튼"이라고 말했다가 엉뚱한 레이어가 바뀌는 일을 줄이려는 장치로 읽힌다. 이 해석은 내 것이고, 실제로 얼마나 정확한지는 공개된 시험이 없다.
프로토파이는 생성된 인터랙션이 스튜디오 안에서 계속 편집 가능하다고 적었다. AI가 만든 것을 처음부터 다시 만들 필요 없이 손으로 이어 고칠 수 있다는 뜻이다.
Code MCP: 프로토타입을 구현으로 넘긴다
Code MCP는 개발 쪽에 가깝다. 프로토파이 글은 이 기능이 "완성된 프로토타입을 AI 코딩 에이전트가 이해하고 구현 결과물을 만들도록 돕는다"고 설명한다. 공식 글에서 정식 지원한다고 밝힌 프레임워크는 일곱 가지다.
- React, React Native, Qt/QML, Flutter, SwiftUI, Compose, ArkTS
함께 소개된 Dev View는 프로토타입 전체, 씬 하나, 컴포넌트 하나, 레이어 하나를 골라 공유하는 기능이다. 개발자에게 "이 화면 전체를 보세요"가 아니라 "이 컴포넌트만 보세요"라고 범위를 좁혀 건넬 수 있다.
앞서 다룬 피그마 Specs도 링크 하나로 맥락을 코딩 에이전트에게 넘기는 구조였다. 같은 방향이지만 넘기는 내용이 다르다. Specs는 글과 시안으로 된 맥락이고, 프로토파이는 움직임이 담긴 프로토타입이다. 말로 설명하기 어려운 전환과 반응을 그대로 보여 줄 수 있다는 점이 프로토타입 쪽의 장점일 수 있다. 이것도 내 해석이다.
어떤 AI와 이어지나
프로토파이는 자체 모델을 주지 않고 쓰던 AI를 가져오는 방식(Bring Your Own Model)을 택했다. 7월 20일자로 표기된 소개 글은 Claude Code, Codex, Cursor, VS Code, Antigravity 같은 MCP 호환 클라이언트를 예로 들었고, 지원은 계속 늘어난다고 했다. Studio MCP 문서에는 Claude 데스크톱도 이름이 올라 있다.
조건도 몇 가지 있다.
- ProtoPie Studio 10.3.0 이상. MCP 서버가 이 버전부터 들어 있다.
- AI 클라이언트와 프로토파이 스튜디오가 같은 컴퓨터에서 돌아야 한다.
- 프로 또는 엔터프라이즈 요금제.
모델에 따라 결과 차이가 난다는 말도 7월 소개 글에 있다. 소넷급 모델은 단순한 작업에 잘 맞고, 오퍼스급 모델은 복잡한 인터랙션과 구현 작업에서 대체로 더 나은 결과를 낸다고 한다. 숫자나 시험 결과 없이 프로토파이가 밝힌 경험적 안내다.
도구가 연결되는 것과 원하는 결과가 나오는 것은 별개일 수 있다. 연결된 뒤에는 무엇을 시킬지 정하고 결과를 확인하는 일이 남는다. 프로토파이도 AI가 만든 것을 사람이 고치는 흐름을 전제로 한다.
요금제, 무엇이 확인되고 무엇이 아닌가
프로토파이의 공개 글들은 요금제를 서로 조금 다르게 적고 있다. 표로 나눴다.
| 글 | 적힌 내용 |
|---|---|
| 7월 20일자로 표기된 소개 글 | 베타이며 프로와 엔터프라이즈 사용자는 추가 비용 없이 쓸 수 있다 |
| 10월 공식 지원 글 | MCP Core(프로 요금제)에 Studio MCP, MCP Enterprise(엔터프라이즈 요금제)에 Studio MCP·Code MCP·Dev View |
| Studio MCP 문서 | 프로 또는 엔터프라이즈 요금제, 'MCP Core'로 제공 |
출처: ProtoPie 블로그: MCP 공식 지원, ProtoPie 블로그: 디자인에서 코드까지, ProtoPie 문서: Studio MCP
표에서 보듯 Code MCP를 프로 요금제에서 쓸 수 있는지는 글마다 다르게 읽힌다. 10월 글만 보면 엔터프라이즈 쪽에 묶여 있고, 7월 글은 베타 기간에 프로와 엔터프라이즈 사용자는 추가 비용이 없다고 했다. 다만 이 베타 범위에 Code MCP가 들어가는지는 글에 분명히 적혀 있지 않았다. 어느 쪽이 지금 기준인지는 공식 요금제 페이지에서 직접 확인하는 수밖에 없다. 공식 지원 글에는 가격도 적혀 있지 않았다.
아직 확인되지 않은 것
- 가격과 AI 사용량에 따른 제한. 공식 지원 글에는 없다.
- 프로 요금제에서 Code MCP를 쓸 수 있는지.
- 한국어 프롬프트로 시켰을 때의 정확도. 따로 공개된 시험이 없다.
- 실제 작업에서 AI가 만든 인터랙션을 얼마나 고쳐야 하는지.
- 일곱 개 프레임워크 각각에서 나오는 코드의 품질.
- 공식 글의 정확한 게시일. 페이지 안에서 날짜가 서로 다르다.
그래서 지금은
작은 인터랙션 하나로 시험해 보자. 버튼을 누르면 모달이 열리는 정도의 동작이면 된다. 프로 요금제와 스튜디오 10.3.0 이상이 있다면, 같은 동작을 손으로 만든 것과 말로 시킨 것의 소요 시간과 고친 횟수를 적어 두면 우리 팀에 맞는지 가늠할 수 있다.
컴포넌트 이름과 라이브러리부터 정리하자. Studio MCP는 내 라이브러리의 컴포넌트를 꺼내 쓴다. 이름이 뒤죽박죽이면 사람도 AI도 헷갈린다. 요소 ID를 복사해 프롬프트에 넣는 방식이라면, 레이어 이름을 알아볼 수 있게 두는 습관이 도움이 된다.
개발자에게 넘길 범위를 정해 두자. 화면 전체인지, 컴포넌트 하나인지 정하고 Dev View로 좁혀 건네는 연습이 필요하다. 규칙은 DESIGN.md나 가이드라인에, 움직임은 프로토타입에 두면 역할이 나뉜다.
쓰임별 AI 디자인 도구는 AI 디자인 툴에 모아 두었다.
출처: ProtoPie 블로그: MCP 공식 지원, ProtoPie 블로그: 디자인에서 코드까지, ProtoPie 문서: 시작하기, ProtoPie 문서: Studio MCP.