[베타] 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 앱 보안

물리적 보안

리스크 관리

blokdots 및 ProtoPie

blokdots는 Arduino를 사용하여 인터랙티브 하드웨어 프로토타입을 빌드하는 데 사용되는 코드 프리 소프트웨어입니다. ProtoPie와 blokdots를 함께 사용하면 코드 한 줄 없이도 하드웨어와 소프트웨어 프로토타이핑 간의 격차를 해소할 수 있습니다.

이 통합은 모든 플랜에서 사용할 수 있습니다. 그러나 blokdots와 ProtoPie Connect를 함께 사용하면 3개 이상의 기기가 포함된 하드웨어-소프트웨어 인터랙션 생성 기능 등 새로운 가능성을 실현할 수 있습니다. ProtoPie Connect에서 blokdots 플러그인이 작동하는 방식에 대해 자세히 알아보세요.

ProtoPie를 blokdots에 연결하는 가장 간단한 에코시스템은 다음과 같습니다.

  • ProtoPie Studio - 인터랙션 제작용.

  • ProtoPie Player - 스마트 기기에서 프로토타입 실행용.

  • blokdots - socket.IO를 통해 Arduino와 프로토타입 간의 통신을 용이하게 합니다.


{'_type': 'localeString', 'en': 'blokdots_and_protopie_environment'}

준비하기

ProtoPie에서 blokdots를 사용하려면 다음이 필요합니다.

  • 데스크톱에 blokdots 앱이 설치되어 있어야 합니다.

  • Arduino 보드를 설정합니다. 지원되는 보드는 여기에서 확인하세요.

  • Arduino 보드를 노트북이나 PC에 연결할 USB 케이블.

  • blokdots pro의 무료 평가판 활성화.

Arduino를 blokdots에 연결하기

blokdots를 열고 Arduino 보드를 노트북이나 PC에 연결합니다.

왼쪽 상단에서 보드가 준비된 것을 확인하면 구성 요소 설정을 시작할 수 있습니다.

blokdots에서 구성 요소 설정하기

  1. Connect A New Component를 클릭하고 연결하려는 구성 요소를 선택합니다.

  2. 목록에서 사용 가능한 Grove 슬롯 또는 하드웨어 핀을 선택합니다.

  3. Set Component를 클릭합니다.

이 단계는 blokdots가 Arduino 보드의 어떤 구성 요소를 제어해야 하는지 알기 위해 필요합니다.


{'_type': 'localeString', 'en': 'blokdots wizard bg'}

blokdots를 통해 ProtoPie와 Arduino 연결하기

blokdots 앱을 사용하면 ProtoPie와 Arduino가 서로 메시지를 보낼 수 있습니다. 이를 실현하려면 다음을 수행해야 합니다.

  1. ProtoPie Studio에서 Send 및 Receive 설정

ProtoPie Studio에서 Receive 트리거Send 반응이 기기 간의 통신을 개시합니다. ChannelProtoPie Studio로 설정해야 합니다. MessageValue는 원하는 대로 설정할 수 있습니다.

  1. blokdots에서 조건 카드 생성

blokdots 구성 요소에 논리를 추가하려면 Project View의 메인 영역에 카드를 추가하고 구성해야 합니다. blokdots에는 “If This Then That” 카드와 “Mapping” 카드의 두 가지 유형의 카드가 있습니다.

최종 인터랙션은 ProtoPie PlayerArduino 사이에서 발생하므로, 두 가지의 결합을 통해 통신이 가능해집니다.

blokdots에서 ProtoPie로 메시지 받기

blokdots에서 ProtoPie로 메시지를 보내려면 조건 카드가 다음과 같은 구조를 가져야 합니다.

  • If 임의의 입력 하드웨어 구성 요소의 동작

  • Then ProtoPie Player메시지전송(send)해야 함 

아래의 스마트 홈 프로토타입 예시에서 Arduino 보드의 Potentiometer를 돌리면 ProtoPie Player에서 실행 중인 pie 파일에 표시되는 온도 학위(degree) 값이 변경됩니다.


{'_type': 'localeString', 'en': 'blokdots to protopie'}

blokdots로부터 메시지를 받으려면 아래와 같이 ProtoPie Studio에서 Receive 트리거를 사용하세요.


{'_type': 'localeString', 'en': 'receive_trigger_protopie_studio'}

ProtoPie에서 blokdots로 메시지 보내기

ProtoPie Studio에서 blokdots로 메시지를 보내려면 Send 반응을 사용하세요.


{'_type': 'localeString', 'en': 'send_response_protopie_studio'}

ProtoPie로부터 메시지를 받으려면 blokdots의 조건 카드가 다음과 같은 구조를 가져야 합니다.

  • If ProtoPie Player메시지수신(receiving)하는 중

  • Then 임의의 입력 하드웨어 구성 요소의 동작


{'_type': 'localeString', 'en': 'protopie to blokdots'}

인터랙션 테스트하기

인터랙션을 테스트하려면 다음을 수행하세요.

  1. ProtoPie Player를 blokdots와 연결합니다(현재는 iOS만 지원).

왼쪽 하단 모서리의 ProtoPie 아이콘 위에 마우스를 올릴 때 blokdots가 표시하는 QR 코드를 스캔하거나 IP 주소를 입력합니다. 설정이 완료되면 ProtoPie Player 구성 요소가 녹색으로 바뀝니다.


{'_type': 'localeString', 'en': 'connecting_player_with_blokdots'}
  1. ProtoPie Studio를 ProtoPie Player와 연결합니다.

ProtoPie Player를 연결하는 방법에 대해 자세히 알아보세요.

  1. blokdots에서 프로젝트를 실행합니다.

프로젝트 창 상단의 Run Project 버튼을 클릭합니다.


{'_type': 'localeString', 'en': 'run blokdots project'}

ProtoPie 및 blokdots 통합에 대해 자세히 알아보고 직접 테스트해보고 싶다면 이 단계별 튜토리얼을 확인해 보세요.

자주 묻는 질문(FAQ)

firmata-can-not-be-uploaded-on-blokdots-error

blokdots 앱에서 Firmata를 업로드할 수 없다는 오류 메시지가 뜹니다. 이것이 무슨 의미인가요?

blokdots와 통신하려면 Arduino 보드에 컴퓨터와 통신할 수 있도록 해주는 프로토콜인 Firmata를 플래싱해야 합니다. blokdots를 열고 Arduino를 연결하면 blokdots가 보드에 Firmata를 자동으로 플래싱합니다. 하지만 Firmata를 업로드할 수 없다는 오류 메시지가 나타나면 다음 단계를 따라 문제를 해결할 수 있습니다.

Arduino IDE 열기 → 파일(File) → 예제(Examples) → Firmata → StandardFirmata → 화살표 아이콘을 클릭하여 Firmata 업로드. 스케치가 컴파일되면 Firmata가 성공적으로 업로드되었다는 알림 메시지가 표시됩니다.


upload_firmata_arduino


upload_standard_firmata_arduino

arduino-board-not-detected-troubleshoot

내 아두이노 보드가 감지되지 않습니다. 어떻게 해야 하나요?

Arduino 애플리케이션의 포트 메뉴에 보드가 표시되지 않고 blokdots 애플리케이션에 “보드가 연결되지 않음” 메시지가 표시되는 경우, 다음 문제 해결 단계를 따르세요.

troubleshoot_arduino_board


troubleshoot_arduino_port