변수 (Variables)

변수는 귀중한 정보를 담는 "바구니"로 설명할 수 있습니다. 나중에 사용할 수 있도록 이름, 비밀번호, 계정 잔액과 같은 다양한 데이터를 이 바구니에 저장할 수 있습니다. 변수 안의 값을 수정하여 동적인 인터랙션을 유연하게 만들고, 값이 어떻게 변하는지 감지할 수 있습니다.

변수를 처음 사용하시나요? 이 강력한 기능을 최대한 활용하려면 이 페이지의 예시를 확인해 보세요.

• 사전 정의된 변수 (Predefined variables) — 프로토타입에서 항상 액세스할 수 있는 변수 집합입니다. 저장된 값은 자동으로 업데이트됩니다.

• 활용 사례 (Use cases) — 변수를 활용한 유용한 실제 활용 사례 모음입니다.

변수와 수식의 차이점

수식과 변수는 프로토타입을 향상시키기 위해 원활하게 함께 작동합니다. 관계를 간략하게 요약하면 다음과 같습니다.

• 변수 (Variables): 변수를 값을 담는 편리한 "바구니"로 생각하세요. 데이터를 저장하고 불러올 수 있어 프로토타입 전체에서 정보를 재사용하기가 더 쉬워집니다. 변수는 단독으로 사용하거나 수식과 결합하여 사용할 수 있습니다. 예를 들어, 변수에 저장된 값을 불러오기 위해 수식을 사용합니다.

• 수식 (Formulas): 수식은 결과를 계산하고 "반환"하는 식입니다. 동적인 인터랙션을 만드는 데 강력한 도구입니다. 수식을 사용하여 계산을 수행하고, 텍스트를 조작하며, 다양한 작업을 수행할 수 있습니다. 수식에 변수를 포함하여 저장된 값에 액세스할 수도 있습니다.

수식과 변수의 시너지를 통해 프로토타입을 한 단계 더 끌어올릴 수 있습니다. 변수는 수식에서 사용할 수 있는 값을 저장하며, 수식 자체를 변수에 저장하여 여러 씬(scene)에서 재사용할 수도 있습니다.

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

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

변수 범위(Scope) 선택하기

선택할 수 있는 변수 유형에는 두 가지가 있습니다.

모든 씬 대상 (For All Scenes)

모든 씬 대상 변수는 프로토타입 내의 모든 씬에서 액세스할 수 있습니다. 씬 간에 데이터를 전달할 때 적합합니다. 예를 들어, 씬 A에서 모든 씬 대상 변수의 값을 수정하면 프로토타입 전체에서 해당 변수가 사용되는 모든 인스턴스에 변경 사항이 반영됩니다.

이 씬 대상 (For This Scene)

이 씬 대상 변수는 변수를 생성한 특정 씬에만 적용됩니다. 씬 A에서 작성된 경우 씬 B에서는 사용할 수 없습니다. 또한, 이 유형의 변수에는 수식도 저장할 수 있습니다.

데이터 타입 사용하기

변수에는 텍스트(text), 숫자(number), 또는 색상(color)의 세 가지 데이터 유형을 저장할 수 있습니다.

텍스트 (Text)

텍스트 변수는 텍스트 값을 저장하는 데 사용됩니다. 숫자를 값으로 사용하면 텍스트 변수는 이를 텍스트로 처리합니다.

숫자 (Number)

숫자 변수는 숫자를 저장합니다. 숫자가 아닌 데이터는 담을 수 없습니다.

색상 (Color)

색상 변수는 hex 색상 코드 값을 저장합니다. hex 색상 코드가 아닌 데이터는 담을 수 없습니다.

Assign & Detect 사용하기

변수는 일반적으로 Detect 트리거와 Assign 리스폰스를 사용하여 제어합니다.

Assign 리스폰스

변수에 새로운 값을 할당하는 데 사용됩니다. 텍스트, 숫자, 또는 색상 데이터 타입이 될 수 있습니다. 또한 이러한 값은 직접 입력하거나 수식을 통해 동적으로 생성할 수 있습니다.

Assign에 대해 자세히 알아보세요.

Detect 트리거

변수의 변경 사항을 감지하는 데 사용됩니다. 특정 변수에서 발생하는 모든 변경 사항을 기반으로 리스폰스를 트리거할 수 있습니다.

Detect에 대해 자세히 알아보세요.

변수 표시하기

변수 안의 값은 전용 디버거를 사용하여 ProtoPie Studio의 캔버스와 프리뷰 창에 표시할 수 있습니다. 변수 패널에서 변수 이름 옆의 버그 아이콘을 클릭하여 활성화할 수 있습니다. 이렇게 하면 변수에 저장된 값이 올바르게 업데이트되고 있는지 언제든지 확인할 수 있습니다.

기초 배우기

ProtoPie에서 변수로 인터랙션을 만드는 것은 생각보다 간단합니다. 이 영상에서는 변수를 사용하여 동적 애니메이션을 빠르게 만드는 방법을 보여줍니다.

예제로 연습하기

스피너 만들기

변수를 사용하여 조절 가능한 간단한 스피너를 애니메이션화할 수 있습니다. 이 예제에서는 변수 값을 1씩 증가시키거나 감소시키는 방법을 보여줍니다. 그런 다음 텍스트 레이어는 값이 변경될 때마다 변수 값을 표시합니다.

리플 효과 (Ripple Effect) 만들기

사전 정의된 변수를 사용하여 빠른 리플 효과를 애니메이션화해 보세요. 이 예시는 터치 이벤트가 발생하는 위치를 기반으로 리플 효과를 만드는 방법을 보여줍니다.

사전 정의된 변수에 대해 자세히 알아보세요.

실제 활용 사례를 찾고 계신가요? 변수가 포함된 몇 가지 실제 활용 사례와 함께 자세히 알아보세요.

실력을 한 단계 더 끌어올릴 준비가 되셨나요? ProtoPie 마스터클래스에 참여하여 프로토타입에서 변수의 강력한 기능을 활용해 보세요. 텍스트, 숫자, 색상 및 사전 정의된 변수를 사용하여 동적인 인터랙션을 만드는 방법을 배울 수 있습니다.

ProtoPie 마스터클래스에 참여하면 실력을 빠르게 향상시키고 고급 프로토타입을 손쉽게 제작할 수 있습니다. 실력을 업그레이드할 수 있는 이번 기회를 놓치지 마세요!