Variables Use Cases

이 페이지에서는 Variable을 사용한 다양한 예제를 확인할 수 있습니다. 실제 작업에서 Variable을 어떻게 사용하는지, 혹은 인터랙션에 어떻게 적용하는지에 대해서 알아보십시오. 원하는 프로토타입을 다운로드 받아 인터랙션을 직접 만들어 볼 수도 있습니다.

Variables과 Formulas에 대한 자세한 사항은 링크를 참고하십시오.

다음은 이 페이지에서 찾을 수 있는 예제 목록입니다.

• Range slider
• Using data elsewhere
• Calculating the remaining balance
• Remembering what's in the shopping cart
• Timer
• On scroll sticky header
• Enabling a keyboard view
• Using the incoming speech

Formulas와 관련된 예제를 찾으신다면 다음 링크를 참고해주십시오.

다음 ProtoPie 커뮤니티에서도 유저들이 Variables과 Formulas를 사용한 예제들을 찾을 수 있습니다.

• ProtoPioneers Community
• ProtoPie on Discord
• 한국 ProtoPie 사용자 그룹
• ProtoPie YouTube channel
• ProtoPie Korea on Facebook
• ProtoPie Users on Facebook

Range Slider

레이어의 위치와 그 값을 연결시킬 수 있습니다. 아래 예제의 경우, 원형 레이어를 이동하면 그 위치의 최신 값이 자동으로 계산되어 Variable에 저장됩니다.

해당 프로토타입을 직접 만들어보실 수 있습니다.

이 프로토타입에 사용된 Chain Trigger, Detect Trigger, Function, 에 대한 자세한 사항은 링크를 참고해주십시오.

Using Data Elsewhere

인풋 레이어의 입력값을 Variable에 저장하면, 다른 Scene에서도 그 값을 사용할 수 있습니다. 이름, 비밀번호, 이메일 등 유저가 입력한 정보를 활용하고자 할 때 사용됩니다.

해당 프로토타입을 직접 만들어보실 수 있습니다.

이 프로토타입에 사용된 Detect Trigger, Start Trigger, Layer property에 대한 자세한 사항은 링크를 참고해주십시오.

Calculating the Remaining Balance

일정 금액을 송금할 때, 잔액이 자동 계산되도록 설계할 수 있습니다. 현재 잔액에서 송금하는 금액이 차감될 수 있게 연산을 활용해야합니다.

해당 프로토타입을 직접 만들어보실 수 있습니다.

이 프로토타입에 사용된 Arithmetic operation, Condition, Component에 대한 자세한 사항은 링크를 참고해주십시오.

Remembering What's in the Shopping Cart

장바구니에 상품을 담을 때, 선택된 상품들이 장바구니 페이지에 나타나면서 총 금액이 자동으로 계산되어야 합니다. 아래 예제를 참고하여 해당 인터랙션을 만들 수 있습니다.

해당 프로토타입을 직접 만들어보실 수 있습니다. Soda Design이 제작한 디자인입니다.

이 프로토타입에 사용된 Arithmetic operation, Function, Condition에 대한 자세한 사항은 링크를 참고해주십시오.

Timer

타이머에서 60초가 지나면 분이 추가되어야 합니다. 이를 위해서는 각 숫자 자리에 조건을 입력하면 됩니다. 이와 같은 맥락으로 카운트 다운 타이머를 만들 수도 있습니다.

해당 프로토타입을 직접 만들어보실 수 있습니다. Eduardo Sonnino가 제작한 디자인입니다.

이 프로토타입에 사용된 Arithmetic operation, Condition, Detect Trigger에 대한 자세한 사항은 링크를 참고해주십시오.

On Scroll Sticky Header

스크롤 시 특정 메뉴바의 위치를 조정할 수 있습니다. 아래 예제의 경우, $touchVelocityY를 이용해 스크롤 방향을 인식하여 메뉴바 위치를 조정하고 있습니다.

해당 프로토타입을 직접 만들어보실 수 있습니다.

이 프로토타입에 사용된 Predefined Variable, Detect Trigger에 대한 자세한 사항은 링크를 참고해주십시오.

Enabling a Keyboard View

키보드가 표시될 때, 특정 부분을 키보드 높이에 맞춰 조정할 수 있습니다. 아래 예제의 경우, $keyboardHeight를 이용해 그 높이가 자동 계산되도록 설계되었습니다.

해당 프로토타입을 직접 만들어보실 수 있습니다.

이 프로토타입에 사용된 Predefined Variable, Focus Trigger에 대한 자세한 사항은 링크를 참고해주십시오.

Using the Incoming Speech

Voice Command가 활성화 된 상태에서, $voiceTranscript을 이용해 음성 인식 기능을 사용할 수 있습니다. 인식된 내용을 읽게 하거나, Text Response를 사용해 텍스트로 표시할 수 있습니다.

해당 프로토타입을 직접 만들어보실 수 있습니다.

이 프로토타입에 사용된 Predefined Variable, Voice prototyping에 대한 자세한 사항은 링크를 참고해주십시오.