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

물리적 보안

리스크 관리

ProtoPie Connect에서 로지텍 G29 스티어링 휠 사용하기

ProtoPie Connect와 로지텍 G29 스티어링 휠 플러그인을 사용하여 고도로 현실적인 멀티 스크린 차량용 사용자 경험을 제작할 수 있습니다.

자동차 분야의 프로토타이핑을 위해 ProtoPie를 사용하는 방법에 대해 더 알아보기

정보의 흐름

아래의 이미지는 ProtoPie와 로지텍 G29 스티어링 휠 사이의 정보 흐름도를 나타냅니다.


{'_type': 'localeString', 'en': 'The information flow between Connect and G29.'}
  • 로지텍 G29 스티어링 휠은 ProtoPie Connect의 G29 플러그인으로 이벤트 및 값을 전달합니다.

  • G29 플러그인은 ProtoPie가 이를 이해할 수 있도록 전달받은 이벤트 및 값을 Socket.IO 메시지로 변환합니다.

  • ProtoPie Connect에 로드된 프로토타입은 이러한 입력을 전달받아 SendReceive 메시지를 통해 그에 맞는 반응을 보입니다.

생태계 구성

아래 그림은 ProtoPie Connect에서 G29 플러그인을 사용할 때의 일반적인 하드웨어 생태계 구성을 보여줍니다.

  • USB 포트와 WiFi/네트워크 기능이 내장된 1대의 디바이스

    • USB를 통해 로지텍 G29 스티어링 휠을 디바이스에 연결하고 디바이스에서 ProtoPie Connect를 구동합니다.


  • 로지텍 G29 스티어링 휠 1셋트 및 페달 (선택 사항)


  • 태블릿 2대 (iPadOS 혹은 Android) 또는 모니터 2대

    • 큰 화면에서 열려야 하는 프로토타입에 사용됩니다. (ProtoPie Connect의 웹 브라우저, 태블릿의 ProtoPie Player)


  • 스마트폰 1대 (iOS 혹은 Android)

    • 모바일 디스플레이에서 열려야 하는 프로토타입에 사용됩니다. (ProtoPie Player)

설치 및 셋업하기

아래 그림은 로지텍 G29 스티어링 휠과 ProtoPie로 만든 프로토타입 사이에 전달될 메시지를 처리하기 위한 권장 하드웨어 셋업입니다. 셋업을 완료하면 상단 동영상 속의 작동 영상과 같은 프로토타입 환경이 제작됩니다.


{'_type': 'localeString', 'en': 'Connect and G29 - the setup.'}
  • 프로토타입을 구동하기 위한 모니터 등 큰 디스플레이 2개와 스마트폰 1개를 준비합니다. (스마트폰, 태블릿, 모니터 모두 화면 디스플레이 역할을 할 수 있습니다.)

  • WiFi(동일 LAN선 공유)를 통해 ProtoPie Player앱과 ProtoPie Connect를 연결합니다.

  • ProtoPie Connect가 실행 중인 디스크톱에 USB 선을 이용하여 Logitech G29 스티어링 휠을 연결합니다.

  • ProtoPie Connect의 오른쪽 상단에 있는 Plugins 버튼을 클릭합니다.

  • 플러그인 목록에서 G29를 선택합니다.


{'_type': 'localeString', 'en': 'The G29 plugin in ProtoPie Connect.'}
  • PlayStation 버전의 G29를 소유하고 계신 분은, 기기에 탑재되어 있는 물리적 스위치를 통해 PS3와 PS4 모드를 상호 전환할 수 있습니다. 셋업 과정에서 스위치를 꼭 PS3 Mode에 위치하도록 셋팅해 주시기 바랍니다.


{'_type': 'localeString', 'en': 'PS3 mode in G29 steering wheel.'}
  • G29의 USB 코드를 컴퓨터에 연결합니다.

  • Run 버튼을 클릭합니다.


{'_type': 'localeString', 'en': 'Run the G29 plugin in ProtoPie Connect.'}
  • G29 스티어링 휠을 사용할 모든 준비가 끝났습니다.


{'_type': 'localeString', 'en': 'G29 plugin is now ready to use.'}

예제 살펴보기

스티어링 휠을 왼쪽으로 조향하기

스티어링 휠을 왼쪽으로 감아 ProtoPie Studio 레이어의 색상을 변경하고 회전해 보시기 바랍니다.


{'_type': 'localeString', 'en': 'Turning the Steering Wheel Left.'}
  • 로지텍 G29 스티어링 휠을 왼쪽 끝까지 감았을 때 발생하는 이벤트를 G29 플러그인이 ProtoPie가 학습하고 해석할 수 있는 메시지로 변환합니다.

  • ProtoPie Connect로 로드되어 탑재된 프로토타입은 이 메시지를 전달받고, 트리거된 조향 이벤트 값에 의해 레이어의 Color 및 Rotate 반응이 작동하게 됩니다.

스티어링 휠의 버튼 누르기

스티어링 휠의 삼각 버튼을 눌러 개별로 나누어진 두 프로토타입의 액션을 동시에 작동해 보시기 바랍니다.


{'_type': 'localeString', 'en': 'Pressing a Button on the Steering Wheel.'}
  • 로지텍 G29 스티어링 휠의 삼각형 버튼을 누르면 발생하는 이벤트를 G29 플러그인이 ProtoPie가 학습하고 해석할 수 있는 메시지 형태로 변환합니다.

  • ProtoPie Connect에 로드된 두 프로토타입은, 사용자가 인터랙션을 셋팅한 방식에 따라 이 메시지에 동시 반응하게 됩니다.

  • 예를 들어, 다른 한 프로토타입에서는 방향지시등 불빛이 점멸하게 되며, 동시에 또 다른 프로토타입에서는 "Emergency(비상 상황)"이라는 텍스트를 디스플레이에 띄우게 할 수 있습니다.