[베타] ProtoPie MCP를 만나보세요! 자세히 보기

[베타] ProtoPie MCP 공개! 자세히 보기

Introducing ProtoPie

시작하기

첫 번째 프로토타입 제작하기

ProtoPie 생태계

ProtoPie Studio 인터페이스

Import

시작하기

Adobe XD에서 가져오기

Figma에서 가져오기

Sketch에서 가져오기

프로토파이 지니 (ProtoPie Genie)

Basic Elements

컨테이너

기기

레이어

미리보기 창

장면

스크롤/페이징

단축키

시스템 상태 표시줄

Triggers & Responses

이징 (Easing)

주석

응답

타임라인

트리거

Formulas

시작하기

함수

레이어 속성

구문

수식 활용 사례

Variables

시작하기

Variables

정의된 변수

변수 활용 사례

AI

시작하기

AI 상호작용 생성

AI 문서 Q&A

AI 패널 인터페이스

최상의 결과를 위한 팁

ProtoPie MCP

시작하기

Studio MCP 소개

Studio MCP 설치 및 설정

Code MCP 소개

Code MCP 설치 및 설정

Dev View

Auto Layout

시작하기

오토 레이아웃 속성

Components

시작하기

컴포넌트 가이드

구성 요소 편집

중첩된 컴포넌트

메시지 보내기 및 받기

Interaction Libraries

시작하기

상호작용 라이브러리 관리

도서관 회원 관리

Voice Prototyping

시작하기

수신 응답

음성 응답

사용 사례

음성 명령 트리거

Connecting Devices

blokdots 연결 중

모바일 기기 연결

ProtoPie Cloud

시작하기

프로토타입 관리

스토리지 관리

프로토타입 공유

ProtoPie Player

プロトタイプのテスト

글꼴 관리

오프라인 테스트

Wear OS용 ProtoPie Player

Teams

시작하기

편집기 및 뷰어

팀 온보딩하기

프로젝트

팀 소유자 및 팀 관리자

Handoff

시작하기

상호작용 기록 생성

통화 녹음 관리

녹화 페이지

User Testing

시작하기

제품 소개

테스트 룸 생성하기

외부 연동

테스트 세션 관리

테스트 결과 및 분석

ProtoPie Cloud에서의 사용자 테스트

ProtoPie Connect

시작하기

API 플러그인

아두이노 플러그인

blokdots 플러그인

커넥트 임베디드

사용자 정의 레이어 통합

사용자 지정 플러그인

기기 연결

게임패드 플러그인

IFTTT 플러그인

로지텍 G29 스티어링 휠 플러그인

プロトタイプのテスト

기능 비교

Unity 플러그인

ProtoPie Enterprise

시작하기

조직 설정

서비스 관리자

단일 로그인 (SSO)

Security

제품 소개

접근 제어

데이터 전송, 저장 및 백업

침해 사고 대응

네트워크 및 ProtoPie Player 앱 보안

물리적 보안

리스크 관리

메뉴

Introducing ProtoPie

시작하기

첫 번째 프로토타입 제작하기

ProtoPie 생태계

ProtoPie Studio 인터페이스

Import

시작하기

Adobe XD에서 가져오기

Figma에서 가져오기

Sketch에서 가져오기

프로토파이 지니 (ProtoPie Genie)

Basic Elements

컨테이너

기기

레이어

미리보기 창

장면

스크롤/페이징

단축키

시스템 상태 표시줄

Triggers & Responses

이징 (Easing)

주석

응답

타임라인

트리거

Formulas

시작하기

함수

레이어 속성

구문

수식 활용 사례

Variables

시작하기

Variables

정의된 변수

변수 활용 사례

AI

시작하기

AI 상호작용 생성

AI 문서 Q&A

AI 패널 인터페이스

최상의 결과를 위한 팁

ProtoPie MCP

시작하기

Studio MCP 소개

Studio MCP 설치 및 설정

Code MCP 소개

Code MCP 설치 및 설정

Dev View

Auto Layout

시작하기

오토 레이아웃 속성

Components

시작하기

컴포넌트 가이드

구성 요소 편집

중첩된 컴포넌트

메시지 보내기 및 받기

Interaction Libraries

시작하기

상호작용 라이브러리 관리

도서관 회원 관리

Voice Prototyping

시작하기

수신 응답

음성 응답

사용 사례

음성 명령 트리거

Connecting Devices

blokdots 연결 중

모바일 기기 연결

ProtoPie Cloud

시작하기

프로토타입 관리

스토리지 관리

프로토타입 공유

ProtoPie Player

プロトタイプのテスト

글꼴 관리

오프라인 테스트

Wear OS용 ProtoPie Player

Teams

시작하기

편집기 및 뷰어

팀 온보딩하기

프로젝트

팀 소유자 및 팀 관리자

Handoff

시작하기

상호작용 기록 생성

통화 녹음 관리

녹화 페이지

User Testing

시작하기

제품 소개

테스트 룸 생성하기

외부 연동

테스트 세션 관리

테스트 결과 및 분석

ProtoPie Cloud에서의 사용자 테스트

ProtoPie Connect

시작하기

API 플러그인

아두이노 플러그인

blokdots 플러그인

커넥트 임베디드

사용자 정의 레이어 통합

사용자 지정 플러그인

기기 연결

게임패드 플러그인

IFTTT 플러그인

로지텍 G29 스티어링 휠 플러그인

プロトタイプのテスト

기능 비교

Unity 플러그인

ProtoPie Enterprise

시작하기

조직 설정

서비스 관리자

단일 로그인 (SSO)

Security

제품 소개

접근 제어

데이터 전송, 저장 및 백업

침해 사고 대응

네트워크 및 ProtoPie Player 앱 보안

물리적 보안

리스크 관리

커스텀 플러그인

Enterprise 플랜에서만 사용 가능합니다.

ProtoPie Connect에는 API, IFTTT, Logitech G29 스티어링 휠, Arduino, Gamepad, blokdotsUnity를 포함하여 사전 설치된 여러 플러그인이 제공됩니다.

또한 Enterprise 플랜의 사용자는 자체 커스텀 플러그인을 업로드하여 프로토타입을 ProtoPie Connect를 통해 Socket.IO를 지원하는 모든 하드웨어, API 또는 앱에 연결할 수 있습니다.

커스텀 플러그인 만들기

ProtoPie Connect에서 커스텀 연동은 커스텀 플러그인과 브리지 앱을 사용하여 수행할 수 있습니다. 그러나 브리지 앱 대신 커스텀 플러그인을 사용하는 것이 좋습니다. 커스텀 플러그인 파일은 이식 가능하므로 작업하기 쉽고 팀원 간에 공유하기가 더 편리합니다.

커스텀 플러그인을 만드는 방법은 다음과 같습니다.

  1. 코드를 작성하거나 기존 브리지 앱을 재사용합니다.

  2. pkg를 사용하여 브리지 앱을 단일 실행 가능한 바이너리 파일로 컴파일합니다.
    Index.js 파일은 여러 타겟에 대해 컴파일할 수 있습니다 (자세한 내용은 여기를 참조하십시오).

  • Mac ARM의 경우 pkg -t node16-macos-arm64 index.js

  • Mac Intel의 경우 pkg -t node16-macos-x64 index.js

  • Windows의 경우 pkg -t node16-win-x64 index.js

    1. 실행 파일을 빈 디렉터리에 복사하고 이름을 plugin으로 변경합니다. metadata.json 파일을 만들고 플러그인의 이름 { "name": "name of the plugin" }을 추가합니다.

    2. 파일(.zip)을 압축합니다. 이제 커스텀 플러그인을 사용할 준비가 되었습니다!


{'_type': 'localeString', 'en': 'compress-custom-plugins'}
  1. 커스텀 플러그인을 ProtoPie Connect로 가져와 터미널에서 실행합니다.


{'_type': 'localeString', 'en': 'protopie-connect-custom-plugin'}

커스텀 플러그인 예시는 여기에서 확인할 수 있습니다.

브리지 앱이란 무엇인가요?

브리지 앱은 Socket.IO를 지원하는 모든 하드웨어, API 또는 앱과 ProtoPie Connect 간의 통신을 가능하게 합니다. 브리지 앱은 이벤트를 포착하고, 서버로부터 데이터를 수신하며, 심지어 단일 애플리케이션으로 작동할 수도 있습니다.

사용자의 편의를 위해 GitHub에서 제공되는 이러한 브리지 앱들을 사용하고 맞춤 설정할 수 있습니다.

브리지 앱을 통해 하드웨어 연결하기

브리지 앱의 주된 역할은 하드웨어의 신호를 ProtoPie가 이해할 수 있는 언어인 Socket.IO 메시지로 변환하거나 그 반대로 변환하는 것입니다.

  1. 브리지 앱을 ProtoPie Connect에 연결합니다.

  2. 브리지 앱은 하드웨어 신호를 ProtoPie가 해석할 수 있는 Socket.IO 메시지로 변환합니다. 일반적으로 메시지는 다음과 같은 형식입니다.**
    **◦ {messageId: "HwEventName", value: "ValueAssociatedWithEvent"}

  3. ProtoPie Connect를 통해 이러한 메시지를 수신하는 프로토타입은 이에 따라 반응합니다. 일부 하드웨어는 양방향 통신을 지원하므로 프로토타입이 하드웨어에 메시지를 보낼 수 있습니다. 이는 브리지 앱이 Socket.IO 메시지를 하드웨어가 해석할 수 있는 신호로 변환할 수 있는 경우에만 가능합니다.

브리지 앱을 통해 API에 연결하기

브리지 앱을 통해 API에 연결하는 경우, 브리지 앱은 API 응답(예: JSON)을 개별 Socket.IO 메시지로 변환합니다.

예를 들어 프로토타입이 API로부터 날씨 데이터를 동적으로 가져와야 하는 경우 브리지 앱은 다음을 수행합니다.

  1. JSON 응답을 Socket.IO 메시지로 변환합니다.
    ◦ 예: {"weather": "sunny", "temperature-celsius": 30.5}

  2. ProtoPie Connect에 Socket.IO 메시지를 전송하면, ProtoPie Connect는 해당 메시지를 해당 프로토타입에 릴레이합니다.**
    **◦ {messageId: "weather", value: "sunny"},
    **◦ {messageId: "temperature", value: 30.5}

프로토타입에서 “weather”“temperature” 메시지를 받으려면 Receive trigger가 필요합니다. Receive trigger에 대해 자세히 알아보세요.

동일한 장치에서 브리지 앱 실행하기

기본적으로 이러한 브리지 앱의 대부분은 브리지 앱과 ProtoPie Connect가 동일한 컴퓨터에서 실행된다고 가정하므로 IP 주소 http://localhost:9981을 사용합니다.


{'_type': 'localeString', 'en': 'running-bridge-app-same-machine'}

다른 장치에서 브리지 앱 실행하기

브리지 앱과 ProtoPie Connect가 서로 다른 컴퓨터에서 실행되는 경우 IP 주소를 ProtoPie Connect의 서버와 일치하도록 변경할 수 있습니다.

  • ProtoPie Connect Desktop: 인터페이스 오프쪽 하단 모서리에서 서버 주소를 찾을 수 있습니다.


{'_type': 'localeString', 'en': 'ip-address-connect-desktop'}
  • ProtoPie Connect Embedded: 터미널에서 실행 직후 서버 주소를 찾을 수 있습니다.


{'_type': 'localeString', 'en': 'ip-address-embedded-systems'}