Formulas Use Cases
이 페이지에서는 Formula를 사용한 다양한 예제를 확인할 수 있습니다. Syntax, Layer properties, Functions가 실제 작업에서 어떻게 쓰이는 지 알아보십시오. 원하는 프로토타입을 다운로드 받아 인터랙션을 직접 만들어 볼 수도 있습니다.
Formulas와 Variables에 대한 자세한 사항은 링크를 참고하십시오.
다음은 이 페이지에서 찾을 수 있는 예제 목록입니다.
- Validating an email address
- Minimum password length
- Showing & hiding a password
- Countdown timer
- Random shuffle
- Checking a bank account balance
- Expanding a card in a list
Variables과 관련된 예제를 찾으신다면 다음 링크를 참고해주십시오.
다음 ProtoPie 커뮤니티에서도 유저들이 Formulas와 Variables을 사용한 예제들을 찾을 수 있습니다.
- ProtoPioneers Community
- ProtoPie on Discord
- 한국 ProtoPie 사용자 그룹
- ProtoPie YouTube channel
- ProtoPie Korea on Facebook
- ProtoPie Users on Facebook
Validating an Email Address
텍스트에 특정 글자나 키워드가 포함되었는지의 여부를 확인할 수 있습니다. 아래 예제의 경우, indexOf Function을 사용해 "@" 기호의 존재를 확인하여, 이메일 형식이 갖춰졌는지 확인할 수 있습니다.
해당 프로토타입을 직접 만들어보실 수 있습니다.
사용된 Function: indexOf
이 프로토타입에 사용된 Function, Condition, Focus Trigger에 대한 자세한 사항은 링크를 참고해주십시오.
Minimum password length
비밀번호를 입력 시 최소 글자 수를 설정해야 할 때가 있습니다. 아래 예제의 경우, length Function을 사용해 입력된 값이 설정한 길이의 글자 수를 넘도록 제작할 수 있습니다.
해당 프로토타입을 직접 만들어보실 수 있습니다.
사용된 Function: length
이 프로토타입에 사용된 Function, Condition, Focus Trigger에 대한 자세한 사항은 링크를 참고해주십시오.
Showing & Hiding a Password
비밀번호가 제대로 입력되었는지 확인해야 할 때가 있습니다. 인풋 레이어의 텍스트 속성을 사용하면 입력한 값을 가리거나 표시할 수 있습니다.
해당 프로토타입을 직접 만들어보실 수 있습니다.
이 프로토타입에 사용된 Layer property, Condition, Detect Trigger에 대한 자세한 사항은 링크를 참고해주십시오.
Countdown Timer
카운트 다운 타이머를 제작할 때, Text Response를 사용하면 타이머 시간에 따라 표시되는 숫자를 변하게 할 수 있습니다.
해당 프로토타입을 직접 만들어보실 수 있습니다.
사용된 Function: number
이 프로토타입에 사용된 Function, Layer property, Arithmetic operation에 대한 자세한 사항은 링크를 참고해주십시오.
Random Shuffle
설정한 값 중에서 글자 혹은 숫자를 무작위로 추출하여 표시할 수 있습니다.
해당 프로토타입을 직접 만들어보실 수 있습니다.
사용된 Function: right, left, randomInt
이 프로토타입에 사용된 Function, Start Trigger에 대한 자세한 사항은 링크를 참고해주십시오.
Checking a Bank Account Balance
은행 계좌 잔고를 조회할 때처럼, 자동 계산이 가능하도록 설계할 수 있습니다. 특정한 값을 초과하거나 미달되지 않도록 설정해둘 수 있습니다.
해당 프로토타입을 직접 만들어보실 수 있습니다.
사용된 Function: sign
이 프로토타입에 사용된 Arithmetic operation, Function, Condition에 대한 자세한 사항은 링크를 참고해주십시오.
Expanding a Card in a List
스크롤 값과 상관없이 목록에서 원하는 레이어를 선택했을 때 해당 레이어가 펼쳐지도록 설계할 수 있습니다.
해당 프로토타입을 직접 만들어보실 수 있습니다.
사용된 Function: toLayerX, toLayerY
이 프로토타입에 사용된 Function, Arithmetic operation에 대한 자세한 사항은 링크를 참고해주십시오.