Use Cases

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

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

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

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

다음 ProtoPie 커뮤니티에서도 유저들이 Formula와 Variable을 사용한 예제들을 찾을 수 있습니다.

Validating an Email Address

텍스트에 특정 글자나 키워드가 포함되었는지의 여부를 확인할 수 있습니다. 아래 예제의 경우, indexOf Function을 사용해 "@" 기호의 존재를 확인하여, 이메일 형식이 갖춰졌는지 확인할 수 있습니다.

[object Object]

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

사용된 Function: indexOf

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

Minimum password length

비밀번호를 입력 시 최소 글자 수를 설정해야 할 때가 있습니다. 아래 예제의 경우, length Function을 사용해 입력된 값이 설정한 길이의 글자 수를 넘도록 제작할 수 있습니다.

[object Object]

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

사용된 Function: length

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

Showing & Hiding a Password

비밀번호가 제대로 입력되었는지 확인해야 할 때가 있습니다. 인풋 레이어의 텍스트 속성을 사용하면 입력한 값을 가리거나 표시할 수 있습니다.

[object Object]

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

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

Countdown Timer

카운트 다운 타이머를 제작할 때, Text Response를 사용하면 타이머 시간에 따라 표시되는 숫자를 변하게 할 수 있습니다.

[object Object]

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

사용된 Function: number

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

Random Shuffle

설정한 값 중에서 글자 혹은 숫자를 무작위로 추출하여 표시할 수 있습니다.

[object Object]

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

사용된 Function: right, left, randomInt

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

Checking a Bank Account Balance

은행 계좌 잔고를 조회할 때처럼, 자동 계산이 가능하도록 설계할 수 있습니다. 특정한 값을 초과하거나 미달되지 않도록 설정해둘 수 있습니다.

[object Object]

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

사용된 Function: sign

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

Expanding a Card in a List

스크롤 값과 상관없이 목록에서 원하는 레이어를 선택했을 때 해당 레이어가 펼쳐지도록 설계할 수 있습니다.

[object Object]

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

사용된 Function: toLayerX, toLayerY

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

Back To Top