[LIVE] How To Build a Magnetic Knob with Arduino & ProtoPie. Register Now.

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 패널 인터페이스

최상의 결과를 위한 팁

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 패널 인터페이스

최상의 결과를 위한 팁

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 앱 보안

물리적 보안

리스크 관리

변수 활용 사례

다양한 활용 사례를 통해 변수의 실질적인 적용 방법을 살펴보세요. 다양한 변수 범위(Scope)와 데이터 타입, 시스템 정의 변수를 효과적으로 사용하는 방법과 이러한 변수들이 여러 트리거(triggers)리스폰스(responses)에서 어떻게 작동하는지 알아보세요. 프로토타입을 직접 사용해 보고 다운로드하여 인터랙션을 살펴보며 경험해 보세요.

변수(variables)성분 공식(formulas)에 대해 자세히 알아보세요.

아래에서 필요한 활용 사례를 찾아보세요:

수식 전용 활용 사례를 찾고 계신가요? 수식을 활용한 사례를 확인해 보세요.

다른 사용자들이 커뮤니티에 공유한 변수 및 수식에 대한 팁, 요령 및 솔루션을 확인해 보세요.

토끼 vs. 늑대 게임

토끼 vs. 늑대 게임 프로토타입에서 점수를 기록할 변수를 생성해 보세요.


{'_type': 'localeString', 'en': 'bunny-wolf-game'}

프로토타입을 직접 체험해 보세요.

모바일 게임 프로토타이핑 마스터클래스에서 자세히 알아보세요.

범위 슬라이더 (Range Slider)

핸들의 위치를 값의 범위와 연결합니다. 핸들을 드래그하여 이동하면 최신 값이 변수에 저장됩니다.


{'_type': 'localeString', 'en': 'range slider'}

프로토타입을 직접 체험해 보세요.

Chain 트리거, Detect 트리거, 그리고 함수(functions)에 대해 자세히 알아보세요.

다른 곳에서 데이터 사용하기

입력 레이어의 입력을 변수에 저장하고, 다른 씬(Scene) 등 다른 곳에서 사용해 보세요. 사용자가 입력하고 프로토타입 전체에서 사용하려는 이름, 비밀번호, 이메일 주소 등을 생각해 보세요.


{'_type': 'localeString', 'en': 'using data elsewhere'}

프로토타입을 직접 체험해 보세요.

Detect 트리거, Start 트리거, 그리고 레이어 속성(layer properties)에 대해 자세히 알아보세요.

잔액 계산하기

송금할 때 남은 잔액을 계산합니다. 실제 계산을 위해 현재 잔액에서 송금 금액을 빼는 산술 연산을 사용합니다.


{'_type': 'localeString', 'en': 'calculating the remaining balance'}

프로토타입을 직접 체험해 보세요.

산술 연산, 조건(conditions), 그리고 컴포넌트(components)에 대해 자세히 알아보세요.

장바구니 담기 구현하기

장바구니에 아이템을 추가하고, 추가된 아이템에 따라 장바구니의 총 금액을 동적으로 계산하여 표시합니다.


{'_type': 'localeString', 'en': 'shopping cart'}

Soda Design님이 제작한 프로토타입을 직접 체험해 보세요.

산술 연산, 함수(functions), 그리고 조건(conditions)에 대해 자세히 알아보세요.

타이머

60초가 지날 때마다 일반적인 타이머와 마찬가지로 1분이 추가됩니다. 하지만 원하는 형태의 어떤 타이머든 만들 수 있습니다. 그 반대인 카운트다운 타이머도 가능합니다.


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

프로토타입을 직접 체험해 보세요.

산술 연산, 조건(conditions), 그리고 Detect 트리거에 대해 자세히 알아보세요.

스크롤 시 상단 헤더 고정 (On-Scroll Sticky Header)

하나의 시스템 정의 변수인 $touchVelocityY를 사용하여 위아래 스크롤을 감지하고 이에 따라 고정 헤더의 위치를 세밀하게 조정합니다.


{'_type': 'localeString', 'en': 'scroll sticky header'}

프로토타입을 직접 체험해 보세요.

시스템 정의 변수Detect 트리거에 대해 자세히 알아보세요.

키보드 뷰 활성화하기

키보드가 아래에서 올라올 때, 키보드 높이에 맞추어 디자인 레이아웃을 이동시킵니다. 시스템 정의 변수인 $keyboardHeight를 사용하여 이러한 계산을 자동으로 수행합니다.


{'_type': 'localeString', 'en': 'enabling keyboard view'}

프로토타입을 직접 체험해 보세요.

시스템 정의 변수Focus 트리거에 대해 자세히 알아보세요.

음성 입력 데이터 활용하기

음성 명령 듣기가 활성화될 때마다 시스템 정의 변수인 $voiceTranscript를 사용하여 입력되는 음성을 활용합니다. Text 리스폰스를 통해 변환된 텍스트를 표시하거나 프로토타입이 이를 큰 소리로 읽도록 설정해 보세요.

프로토타입을 직접 체험해 보세요.

시스템 정의 변수보이스 프로토타이핑(voice prototyping)에 대해 자세히 알아보세요.