[ProtoPie School] Variable 기초
Variable을 사용하여 더욱 현실적인 프로토타입을 구현하세요.
▶ 이전 학습내용이 궁금하다면? 여기를 클릭!
▶ 어떤 내용을 배울지 한눈에 보고 싶다면? 여기를 클릭!
ProtoPie의 가장 큰 강점 중 하나는 프로토타입에 variable를 사용할 수 있다는 것입니다. 이번 아티클에서는 variable의 기능, 사용법, 그리고 사용할 때 알아야 할 몇 가지 특정 고려 사항에 대해 알아보겠습니다.
시작하기 전에
이번 튜토리얼을 따라가기 위해서는, 아래 샘플 Pie 파일을 다운로드하고 Studio에서 파일을 엽니다.
Variable Pie 다운로드
학습할 내용
학습 목표
▶ Variable의 명칭의 유래와 기능에 대해 알아보기
▶ ProtoPie에서 variable과 함께 사용할 수 있는 데이터 유형 살펴보기
사
소요 예정 시간: ≤10분
Variable이란?
Variable은 프로그래밍 용어로, 이름, 숫자, 색상 값 등과 같은 작은 정보를 저장할 수 있습니다. Variable에 저장된 내용은 프로토타입의 필요에 따라 변경되거나, 다른 버전으로 존재할 수 있습니다. 이런 변동성 때문에, 해당 용어를 "variable"이라고 부르는 것입니다.
예를 들어, 사용자 경험 시작 부분에 "name"이라는 variable에 "Leah"라는 이름을 저장했다가 나중에 "Bern"이라는 이름을 대신 저장하기로 바꿀 수 있습니다.
ProtoPie는 언제든지 variable에 저장된 내용을 변경할 수 있는 기능을 제공합니다.
Variable의 유형
ProtoPie에서 variable을 구현할 때, variable에 포함될 정보 유형을 지정해야 합니다.
ProtoPie에서는 세 가지 유형을 허용합니다.
▶ 숫자 - 정수 또는 십진수 (예: 25, -403, 3.14)
▶ 텍스트 - 영숫자 문자 시퀀스 (예: Jeff, 40 Bay Street, auston@mapleleafs.com)
▶ 색상 - 16진수 색상 값 (예: #FF0000)
여기서, 선택하는 variable의 유형이 중요한데요.
Number variable의 경우, 숫자 기반 정보로만 설정하거나 업데이트할 수 있고, Text variable은 텍스트 기반 정보로만 설정하거나 업데이트할 수 있습니다. 예를 들어, Jeff는 숫자가 아니기 때문에, Number variable로 설정할 수 없습니다. 따라서 variable을 추가 시 저장할 정보의 종류를 염두에 두어야 합니다.
프로 팁: 연산이나 수학적인 기능을 구현하는 경우, Number가 가장 적합한 유형입니다. 텍스트 기반 (이름, 주소, 이메일 등)의 경우 Text 유형 변수를 사용하십시오 . 디자인 시스템 색상 팔레트 같이 색상 값을 저장하려면 Color를 사용하세요.
Pie에서는 복수의 variable을 만들 수 있습니다. 따라서 숫자와 텍스트에 대한 variable이 필요한 경우, 각 아이템에 대한 별도의 variable 구현이 가능합니다.
간단한 예제
예제 파이를 살펴봅시다. 첫 번째 scene에는 이름 입력을 요청하는 양식이 있습니다. Simple greeting이라는 빈 텍스트 레이어도 볼 수 있는데요. Your name 레이어에 입력하는 모든 것을 저장할 수 있는 variable을 만들고, 사용자가 Next를 탭하면 간단한 Simple greeting 레이어에 입력된 variable의 값이 나오도록 설정해 보겠습니다.
Studio의 인터페이스 왼쪽 하단에 있는 Variable 패널을 찾습니다. 기본적으로 최소화 되어있는데, 한 번 클릭하여 패널을 확장합니다.
+ 아이콘을 클릭하여 새 variable을 추가하면, 아래 두 가지 옵션이 제공됩니다.
For All Scenes
For This Scene
위 두 옵션의 차이점은 잠시 후 더 자세히 알아보겠습니다.
우선 For This Scene을 선택해 봅시다.ProtoPie는 variable1이라는 변수를 만듭니다. 하지만 이번 프로젝트에서는 이 이름은 크게 의미가 없으니, 프로젝트에 더 의미있는 이름을 지어 봅시다. 사용자 이름을 저장하는 데 사용할 것이므로, 해당 variable을 "name"으로 저장합시다. variable1을 두 번 클릭하고 “name”으로 이름을 변경합니다.
이제 해당 변수를 사용할 차례입니다. 사용자가 Your name 텍스트 상자에 입력 하는 내용을 감지하고, 입력된 값을 name variable의 값으로 설정해 봅시다.
Your name text 레이어에 Detect trigger를 추가합니다.
Text property를 변경 내용 관찰 대상 property로 선택합니다.
Assign response를 추가합니다. Variable을 업데이트하거나 새 값을 할당할 때마다 Assign response를 사용합니다.
Select Variable 드롭다운에서 방금 만든 name variable을 선택합니다.
Variable에 새 값을 할당하기 위해서는, Formula를 사용해야 합니다. Formula 상자에서 지정된 값은 곧 variable에 할당되는 값입니다. Formula 상자를 클릭하고 ∫x 아이콘을 표시합니다.
Formula 입력 상자에서 ⊕ 아이콘을 클릭하고, Your name이라는 레이어를 선택합니다. 마침표를 입력하여 레이어의 모든 속성을 나열합니다. 아래로 스크롤하여 Text를 선택하고, OK를 클릭합니다.
Formula에 대해 자세히 알아보려면 여기를 클릭하세요.
이 프로세스의 마지막 단계는 사용자가 Next를 탭할 때, name variable의 값을 표시하는 것입니다.
Next button 레이어에 Tap trigger를 추가합니다.
Simple greeting 레이어에 Text response 추가합니다.
Content에서 Formula를 선택합니다.Formula 아래의 상자를 클릭하여 ∫x 아이콘을 표시하고, Formula 입력 상자를 확장합니다.
그 후, Formula 입력 상자에 name을 입력하고 OK를 클릭합니다.
잘 적용되었는지 확인해 보겠습니다. 상자에 이름을 입력하고 Next를 탭해봅시다.
"Next" 버튼 아래에 무엇이 표시되었나요? 이름 혹은 "0"이 표시되었나요?
Variable의 유형이 잘못 설정되었을 때의 결과를 보여드리고자, 스텝 하나를 의도적으로 생략했는데요.
여기서 우리가 원하는 결과는 숫자가 아닌 텍스트 형태이니, 유형을 변경해야 하겠죠.
Variables 패널에서 name variable을 클릭합니다.
오른쪽 상단에서 variable의 유형을 설정할 수 있습니다.
기본적으로 ProtoPie는 새 변수를 만들 때 Number를 선택합니다. Your name 텍스트 상자에 이름을 입력하면 Number 유형과 호환되지 않는 텍스트가 입력됩니다. 유형을 Text로 변경합니다.
이 컨트롤에서는 초기 값을 설정할 수도 있습니다. 하지만 여기서는 초기 값이 필요 없으므로, 공란으로 남겨두도록 하겠습니다. 그러나 향후 작업 시 경험이 시작될 때 특정 값을 가진 variable에 특정 값을 설정해야 하는 경우, 이 상자에 설정하시면 됩니다.
지금까지 설정한 내용을 다시 확인해 보겠습니다.
이제 의도했던 결과물을 확인할 수 있을 것입니다.
Variable 에 대한 더 자세한 내용은 다음 아티클에서 더 자세히 알아보겠습니다.
곧 뵈요! :)
더 많은 팁이 필요하다면? 언제든 연락주세요!
