산업 분야

자동차

항공/우주

금융

게임

메디테크 (MedTech)

IoT

디지털 제품

활용 사례

기업용

개인용

팀용

교육용

주요 특징

하드웨어 및 시스템 통합

ProtoPie MCP

멀티 디바이스 프로토타이핑을 위한 ProtoPie

인터랙션 로직을 위한 ProtoPie

개발자 인수인계

ProtoPie AI

New

User Testing

플러그인

Figma

Sketch

Adobe XD

인사이트 & 영감

블로그

eBook

고객 성공 사례

이벤트 및 웨비나

ProtoPie 갤러리

제품 학습 및 지원

프로토파이 스쿨

ProtoPie 다운로드

프로덕트 도큐멘테이션

커뮤니티

산업 분야

자동차

항공/우주

금융

게임

메디테크 (MedTech)

IoT

디지털 제품

활용 사례

기업용

개인용

팀용

교육용

주요 특징

하드웨어 및 시스템 통합

ProtoPie MCP

멀티 디바이스 프로토타이핑을 위한 ProtoPie

인터랙션 로직을 위한 ProtoPie

개발자 인수인계

ProtoPie AI

New

User Testing

플러그인

Figma

Sketch

Adobe XD

인사이트 & 영감

블로그

eBook

고객 성공 사례

이벤트 및 웨비나

ProtoPie 갤러리

제품 학습 및 지원

프로토파이 스쿨

ProtoPie 다운로드

프로덕트 도큐멘테이션

커뮤니티

메뉴

Studio MCP란 무엇인가요?

Studio MCP는 ProtoPie Studio 내부에서 로컬 MCP 서버를 실행하여 Claude Desktop, Claude Code, Codex 등의 AI 클라이언트가 현재 열려 있는 프로토타입을 읽고 제어할 수 있도록 합니다. 채팅 프롬프트를 통해 AI에게 인터랙션을 검사하거나, 새로 빌드하거나, 캔버스를 캡처하도록 요청할 수 있습니다.

할 수 있는 일

  • 프롬프트로 레이어, 레이아웃 및 인터랙션 작성 — 레이어를 생성, 수정, 배치 및 스타일링하여 화면을 빌드하거나 개선할 수 있습니다. 예를 들어 버튼에 Tap 트리거를 추가하거나 탭하면 카드가 뒤집히는 화면을 만들 수 있습니다.

  • 자체 라이브러리 사용 — ProtoPie 라이브러리의 에셋과 컴포넌트를 사용하여 화면을 제작할 수 있습니다.

  • 프로토타입 검증 — 프로토타입이 예상대로 작동하는지 확인하고 인터랙션이나 플로우의 문제를 식별할 수 있습니다.

  • ID로 특정 요소 지정 — 레이어, 씬, 변수, 컴포넌, 트리거, 리스폰스 또는 기타 요소 ID를 사용하여 AI 에이전트에게 생성하거나 편집할 대상을 정확하게 지시할 수 있습니다.

요구 사항

  • ProtoPie Studio 10.3.0 이상 (MCP 서버는 10.3.0 버전부터 탑재됩니다).

  • AI 클라이언트와 ProtoPie Studio가 동일한 컴퓨터에서 실행되어야 합니다.

  • ProtoPie Pro 또는 Enterprise 요금제.

어떤 클라이언트를 연결해야 하나요?

연결이 완료되면 사용 경험은 동일하며, 연결 방식만 다릅니다. 사용자의 환경에 맞는 방식을 선택하세요.

클라이언트

추천 대상

연결 방법 (요약)

Claude Desktop (채팅)

코드와 터미널을 피하고 싶은 디자이너 — 가장 쉬운 방법

Labs에서 Claude Desktop에서 열기를 클릭 → 확장 프로그램(.mcpb) 설치 → 자동으로 연결됨

Claude Code (터미널 CLI 또는 Claude Desktop의 Code 탭)

코드 에디터나 터미널 사용이 익숙한 디자이너 및 디자인 엔지니어

claude mcp add 명령 실행

Codex / Cursor / VS Code / 기타

이미 다른 MCP 클라이언트를 사용 중인 사용자

명령어 또는 설정을 통해 엔드포인트 등록


Studio MCP 설치 및 설정 방법 알아보기