메뉴

수식

수식과 변수를 사용하면 실제로 작동하는 완성도 높은 프로토타입을 제작할 수 있습니다. 수식은 인터랙션에 논리적인 흐름을 추가할 수 있는 표현식입니다. 비밀번호 유효성 검사부터 장바구니 품목 수 계산, 총 계좌 잔액 계산에 이르기까지 수식을 사용하면 이 모든 것이 가능해집니다.

ProtoPie의 수식 기능을 사용하면 레이어 속성에 접근하고, 연산을 수행하며, 텍스트 변환 및 고등 수학과 같은 작업을 위한 광범위한 함수를 활용할 수 있습니다.

수식은 수식 입력 필드를 사용하여 추가합니다. 필요에 따라 레이어 속성, 함수, 변수를 포함하기만 하면 됩니다. 빠른 참조가 필요하신가요? + 아이콘을 클릭하여 사용 가능한 레이어와 변수를 살펴보세요.


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

팁: Labs에서 Improved Formula Input Field(개선된 수식 입력 필드)를 활성화하면 수식 내에 사용된 변수가 활성화된 씬에서만 사용할 수 있는 로컬 변수인지, 아니면 모든 씬에서 사용할 수 있는 전역 변수인지 신속하게 식별할 수 있습니다.


{'_type': 'localeString', 'en': 'An icon indicating the variable scope appears when typing out a variable name.'}

수식을 처음 접하시나요? 걱정하지 마세요! ProtoPie의 수식을 최대한 활용하는 데 도움이 되는 동영상 강의와 문서를 준비했습니다.

  • 구문(Syntax) — 여느 언어와 마찬가지로 수식에도 고유한 규칙과 원칙이 있습니다. 첫 수식을 자신 있게 작성할 수 있도록 구문을 배워보세요.

  • 레이어 속성(Layer properties) — 다양한 레이어 속성에 접근하여 인터랙션을 멋지게 구현해 보세요. 레이어 속성을 마스터하는 것은 동적인 프로토타입을 만들기 위한 첫걸음입니다.

  • 함수(Functions) — 특정 작업을 수행하는 사전 정의된 임포트 수식을 활용해 보세요. 함수는 데이터를 처리하고 결과를 도출하여 프로토타입을 더욱 강력하게 만들어 줍니다.

  • 활용 사례(Use cases) — 수식을 효과적으로 사용할 수 있는 실용적인 예시를 살펴보세요. 실제 시나리오에서 배우고 지식을 자신의 프로젝트에 적용해 보세요.

수식과 변수의 차이점

수식과 변수는 조화롭게 작동하여 프로토타입을 향상시킵니다. 이 둘의 관계를 간략하게 설명하면 다음과 같습니다.

변수: 변수는 값을 담는 편리한 "바구니"라고 생각하면 좋습니다. 데이터를 저장하고 불러올 수 있어 프로토타입 전체에서 정보를 쉽게 재사용할 수 있습니다. 변수는 독립적으로 사용하거나 수식과 결합하여 사용할 수 있습니다. 예를 들어, 수식을 사용하여 변수에 저장된 값을 불러올 수 있습니다.

수식: 수식은 결과를 계산하고 "반환"하는 표현식입니다. 동적인 인터랙션을 제작할 수 있는 강력한 도구이며, 연산을 수행하고, 텍스트를 처리하고, 다양한 작업을 수행하는 데 사용할 수 있습니다. 수식에는 저장된 값에 접근하기 위해 변수를 포함할 수도 있습니다.

수식과 변수의 시너지 효과를 통해 프로토타입을 한 단계 더 발전시킬 수 있습니다. 변수는 수식에서 사용할 수 있는 값을 저장하며, 수식은 여러 씬에서 다시 사용하기 위해 변수 내에 저장할 수도 있습니다.

요약하자면, 수식과 변수는 서로를 보완하여 프로토타입 개발 프로세스에 유연성과 효율성을 제공합니다.

변수에 대해 자세히 알아보세요.

기초 학습하기

수식이 다소 어렵게 느껴질 수 있지만, 생각보다 쉽게 접근할 수 있습니다. 몇 가지 수식만 사용해도 누구나 동적인 인터랙션을 만들 수 있습니다!

이 비디오 튜토리얼에서는 ProtoPie를 사용하여 매력적인 인터랙션을 만드는 방법을 배웁니다. 씬 내 레이어의 위치에 관계없이 하나의 사각형 레이어를 다른 사각형 레이어의 위치로 이동하는 방법을 데모를 통해 확인해 보세요.

레이어 속성간단한 연산에 대해 자세히 알아보세요.

예제로 연습하기

탭 바 만들기

반응이 동적으로 동작하게 하려면 고정된 값 대신 수식을 사용해 보세요. 이 비디오 튜토리얼에서는 수식을 사용하여 간단한 탭 인터랙션을 애니메이션화하는 방법을 보여줍니다.

레이어 속성간단한 연산에 대해 자세히 알아보세요.


{'_type': 'localeString', 'en': 'formula menu'}

입력 레이어의 텍스트 사용하기

수식을 사용하여 변수에 저장된 텍스트 정보를 표시할 수도 있습니다. 이 비디오 튜토리얼에서는 간단한 수식을 사용하여 텍스트를 입력하고 다른 곳에 표시하는 방법을 보여줍니다.

입력 레이어레이어 속성에 대해 자세히 알아보세요.


{'_type': 'localeString', 'en': 'formula input'}

실제 활용 사례를 찾고 계신가요? 수식의 실제 활용 사례에서 자세히 알아보세요.