[베타] 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의 수식 기능을 사용하면 레이어 속성에 접근하고, 연산을 수행하며, 텍스트 변환 및 고등 수학과 같은 작업을 위한 광범위한 함수를 활용할 수 있습니다.

수식은 수식 입력 필드를 사용하여 추가합니다. 필요에 따라 레이어 속성, 함수, 변수를 포함하기만 하면 됩니다. 빠른 참조가 필요하신가요? + 아이콘을 클릭하여 사용 가능한 레이어와 변수를 살펴보세요.


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

팁: Labs에서 Improved Formula Input Field(개선된 수식 입력 필드)를 활성화하면 수식 내에 사용된 변수가 활성화된 씬에서만 사용할 수 있는 로컬 변수인지, 아니면 모든 씬에서 사용할 수 있는 전역 변수인지 신속하게 식별할 수 있습니다.


{'_type': 'localeString', 'en': 'An icon indicating the variable scope appears when typing out a variable name.'}

수식을 처음 접하시나요? 걱정하지 마세요! ProtoPie의 수식을 최대한 활용하는 데 도움이 되는 동영상 강의와 문서를 준비했습니다.

  • 구문(Syntax) — 여느 언어와 마찬가지로 수식에도 고유한 규칙과 원칙이 있습니다. 첫 수식을 자신 있게 작성할 수 있도록 구문을 배워보세요.

  • 레이어 속성(Layer properties) — 다양한 레이어 속성에 접근하여 인터랙션을 멋지게 구현해 보세요. 레이어 속성을 마스터하는 것은 동적인 프로토타입을 만들기 위한 첫걸음입니다.

  • 함수(Functions) — 특정 작업을 수행하는 사전 정의된 임포트 수식을 활용해 보세요. 함수는 데이터를 처리하고 결과를 도출하여 프로토타입을 더욱 강력하게 만들어 줍니다.

  • 활용 사례(Use cases) — 수식을 효과적으로 사용할 수 있는 실용적인 예시를 살펴보세요. 실제 시나리오에서 배우고 지식을 자신의 프로젝트에 적용해 보세요.

수식과 변수의 차이점

수식과 변수는 조화롭게 작동하여 프로토타입을 향상시킵니다. 이 둘의 관계를 간략하게 설명하면 다음과 같습니다.

변수: 변수는 값을 담는 편리한 "바구니"라고 생각하면 좋습니다. 데이터를 저장하고 불러올 수 있어 프로토타입 전체에서 정보를 쉽게 재사용할 수 있습니다. 변수는 독립적으로 사용하거나 수식과 결합하여 사용할 수 있습니다. 예를 들어, 수식을 사용하여 변수에 저장된 값을 불러올 수 있습니다.

수식: 수식은 결과를 계산하고 "반환"하는 표현식입니다. 동적인 인터랙션을 제작할 수 있는 강력한 도구이며, 연산을 수행하고, 텍스트를 처리하고, 다양한 작업을 수행하는 데 사용할 수 있습니다. 수식에는 저장된 값에 접근하기 위해 변수를 포함할 수도 있습니다.

수식과 변수의 시너지 효과를 통해 프로토타입을 한 단계 더 발전시킬 수 있습니다. 변수는 수식에서 사용할 수 있는 값을 저장하며, 수식은 여러 씬에서 다시 사용하기 위해 변수 내에 저장할 수도 있습니다.

요약하자면, 수식과 변수는 서로를 보완하여 프로토타입 개발 프로세스에 유연성과 효율성을 제공합니다.

변수에 대해 자세히 알아보세요.

기초 학습하기

수식이 다소 어렵게 느껴질 수 있지만, 생각보다 쉽게 접근할 수 있습니다. 몇 가지 수식만 사용해도 누구나 동적인 인터랙션을 만들 수 있습니다!

이 비디오 튜토리얼에서는 ProtoPie를 사용하여 매력적인 인터랙션을 만드는 방법을 배웁니다. 씬 내 레이어의 위치에 관계없이 하나의 사각형 레이어를 다른 사각형 레이어의 위치로 이동하는 방법을 데모를 통해 확인해 보세요.

레이어 속성간단한 연산에 대해 자세히 알아보세요.

예제로 연습하기

탭 바 만들기

반응이 동적으로 동작하게 하려면 고정된 값 대신 수식을 사용해 보세요. 이 비디오 튜토리얼에서는 수식을 사용하여 간단한 탭 인터랙션을 애니메이션화하는 방법을 보여줍니다.

레이어 속성간단한 연산에 대해 자세히 알아보세요.


{'_type': 'localeString', 'en': 'formula menu'}

입력 레이어의 텍스트 사용하기

수식을 사용하여 변수에 저장된 텍스트 정보를 표시할 수도 있습니다. 이 비디오 튜토리얼에서는 간단한 수식을 사용하여 텍스트를 입력하고 다른 곳에 표시하는 방법을 보여줍니다.

입력 레이어레이어 속성에 대해 자세히 알아보세요.


{'_type': 'localeString', 'en': 'formula input'}

실제 활용 사례를 찾고 계신가요? 수식의 실제 활용 사례에서 자세히 알아보세요.