[베타] 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 AI는 디자인에서 명확하게 정의된 기존 요소를 참조할 수 있을 때 가장 잘 작동합니다.

먼저 요소 준하기

  • AI에 요청하기 전에 필요한 모든 레이어(텍스트, 도형, 이미지 등)를 생성해 두세요

  • 의도한 동작을 반영하는 초기 콘텐츠를 포함하세요

    • 예: 카운터 표시를 위한 "0", 토글 레이블을 위한 "OFF"

설명이 포함된 레이어 이름 사용하기

  • 레이어의 용도를 반영하도록 이름을 변경하세요

    • ✓ "Text 1" 대신 "counterDisplay"

    • ✓ "Rectangle 3" 대신 "submitButton"

  • 명확한 이름 지정을 통해 AI가 귀하의 의도를 이해하여 오류를 줄일 수 있습니다

@ 멘션 사용하기

더 높은 정밀도를 위해 @ 멘션으로 레이어를 직접 참조하세요:

  • ✓ "tap 시 @submitButton을 회색으로 변경해 줘"

  • ✗ "제출 버튼을 회색으로 변경해 줘"

동작을 명확히 요청하기

수정 전: "카운터를 만들어 줘."

수정 후: "Start 트리거가 작동하면 카운터 변수를 늘리고 이를 @counterDisplay 텍스트 레이어에 표시해 줘."

인터랙션은 구체적으로 명시하기

  • 트리거 지정: "tap 시", "drag 시", "scroll 시" 등

  • 시작 및 종료 상태 정의: 시작 및 종료 값(위치, 불투명도, 크기 등)을 명확히 정해 적어주세요

  • 타이밍 포함: 필요한 경우 지속 시간(duration), 지연 시간(delay) 또는 이징(easing) 곡선 등을 지정해 주세요

동작을 쪼개어 단계별로 진행하기

  • 한 번의 요청으로 모든 것을 다 해결하려고 하지 마세요. 여러 번에 걸쳐 간단한 요청들로 세분화하여 진행하는 것이 좋습니다

  • 이전 결과물을 수정하도록 AI에 이어서 추가로 요청해 보세요

결과 확인하기

  • 프로토타입을 미리보며 동작을 확인하세요

  • 에지 케이스(예외 상황)가 있는지 생성된 공식을 다시 한 번 검증하세요

  • AI는 첫 번째 초안 버전을 생성하며, 마지막 프로토타입의 정교한 동작 완성은 크리에이터의 몫입니다