Formulas

Formula와 Variable을 이용하면 보다 역동적인 인터랙션을 만들 수 있습니다. Formula는 결과값을 추출하는 기능을 하며, 비밀번호 인증, 장바구니 담기, 계좌 잔고 조회 등의 프로토타입에 사용됩니다.

Formula를 통해 레이어 속성을 활용하거나, 간단한 계산을 하거나, 명령어 입력 및 고급 연산 등 여러 기능을 추가할 수 있습니다.

Formula Input은 수식을 작성할 수 있는 입력란입니다. 레이어 속성을 포함하여, Function 및 Variable을 원하는대로 추가할 수 있습니다. + 아이콘을 클릭하면 이용 가능한 레이어 및 변수를 확인할 수 있습니다.

Formula 기능이 처음이시라면, 아래의 예제를 확인해주십시오. 다음은 Formula의 여러 부분들로, 자세한 사항은 각 링크를 참고해주십시오.

• Syntax — Formula를 형성하는 하나의 규칙으로, 여러 요소를 활용하는 방법을 설명합니다.
• Layer properties — 특정 레이어의 속성을 Formula에서 활용하는 방법을 설명합니다.
• Functions — ProtoPie에서 설정해 둔 Formula입니다. 데이터를 입력하면 결과값을 추출하도록 설계되어 있습니다.
• Use cases — Formula가 사용된 예제들이 정리되어 있는 페이지입니다.

Difference Between Formulas & Variables

Formula와 Variable은 서로 밀접한 연관성을 갖지만 둘이 동일한 것은 아닙니다.

Variable은 사용하고자 하는 값을 '저장'하는 역할을 하며, Formula는 결과값을 '도출'하는 역할을 합니다. 도출된 결과값을 저장하고자 할 때 Variable을 사용할 수 있습니다. 반대로, Variable에 저장된 값을 활용하기 위해서는 Formula를 사용할 수도 있습니다.

하나의 Scene 안에서 특정 Formula를 여러 번 사용하고자 한다면, Variable에 Formula 자체를 저장하는 것도 가능합니다.

결과적으로 Formula에 Variable을 활용할 수 있으며, Variable에 Formula를 활용할 수도 있습니다.

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

Learning the Basics

Formula를 사용하는 것은 생각보다 쉽습니다. 이 기능을 활용하여 더욱 수준 높은 인터랙션을 완성해보십시오.

아래 동영상에서는 사각형 레이어가 다른 레이어의 위치를 참조하여 움직이도록 인터랙션을 설계하였습니다. 이 과정에서 활용된 Formula에 대해 알아보십시오.

레이어 속성 및 간단한 계산 기능에 대한 자세한 사항은 링크를 참고해주십시오.

Practicing with Examples

Making a Tab Bar

고정된 값이 아닌 수식을 활용하면 역동적인 인터랙션을 제작할 수 있습니다. 아래 예제는 Move Response에 각 메뉴 레이어의 X 좌표를 어떻게 적용하는지 설명하고 있습니다. 해당 Formula를 적용하면 원하는 메뉴를 탭할 때 블루 레이어가 이동하게 됩니다.

레이어 속성 및 간단한 계산 기능에 대한 자세한 사항은 링크를 참고해주십시오.

Using the Text from the Input Layer

Formula의 텍스트 속성을 이용하여, 인풋 레이어에 입력된 값을 텍스트 레이어에 표시할 수 있습니다. 아래 예제는 인풋 레이어의 텍스트 속성이 입력된 값을 참조하도록 설계되었습니다.

인풋 레이어 및 레이어 속성에 대한 자세한 사항은 링크를 참고해주십시오.

Formula의 더욱 다양한 예제는 다음 링크에서 확인하실 수 있습니다.