ProtoPie에서 사용할 수 있는 가장 강력한 기능 중 하나는 프로토타입에서 변수를 사용할 수 있다는 점입니다. 이 레슨에서는 변수에 대해 전반적으로 살펴볼 것입니다. 변수란 무엇인지, 어떻게 사용하는지, 그리고 변수를 사용하려고 할 때 반드시 알아두어야 할 몇 가지 사항을 다룰 예정입니다.
준비물
이 튜토리얼을 따라 하려면 이 샘플 파이를 다운로드한 뒤 Studio에서 열어 주세요:
배울 내용
이 튜토리얼을 마치면 다음을 배우게 됩니다:
변수가 무엇인지, 그리고 왜 “variable”이라고 불리는지
ProtoPie에서 변수와 함께 사용할 수 있는 데이터 유형은 무엇인지
예상 소요 시간: 10분 이하
변수란 무엇인가요?
단어 variable은 프로그래밍 용어입니다. 이름, 숫자, 색상 값 등 작은 정보를 저장하는 방법일 뿐입니다. 변수에 저장한 값은 필요에 따라 바뀔 수 있습니다 — 즉 vary, 할 수 있다는 뜻이며, 그래서 “variable”이라는 이름이 붙었습니다. 예를 들어, 경험의 시작에서는 “name”이라는 변수에 “Leah”라는 이름을 저장했다가, 나중에는 대신 “Bern”이라는 이름을 저장하도록 바꿀 수 있습니다. ProtoPie에서는 언제든 변수에 저장된 값을 변경할 수 있습니다.
변수 유형
ProtoPie에서 변수를 만들 때는 그 변수가 어떤 유형의 정보를 담을지 지정해야 합니다. ProtoPie는 세 가지 유형을 지원합니다:
Number - 정수 또는 소수, 예:
25,-403,3.14Text - 영숫자로 이루어진 문자열, 예:
Jeff,40 Bay Street,auston@mapleleafs.comColor - 16진수 색상 값, 예:
#FF0000
선택한 유형은 중요합니다. Number 유형 변수에는 숫자 정보만 설정하거나 업데이트할 수 있습니다. 마찬가지로 Text 유형은 텍스트 기반 정보만 설정하거나 업데이트할 수 있습니다. 예를 들어 Jeff를 Number 유형 변수에 설정할 수는 없습니다. Jeff는 숫자가 아니기 때문입니다. 따라서 변수를 만들 때 어떤 정보를 저장하고 싶은지 신중하게 생각해야 합니다.
💡 Pro-tip: 계산을 하거나 개수를 세려면 Number 유형이 가장 적합합니다. 이름, 주소, 이메일 등 텍스트 기반 정보에는 Text 유형 변수를 사용하세요. 디자인 시스템 색상 팔레트처럼 색상 값을 저장하려면 Color 유형 변수를 사용하세요.
파이 안에는 원하는 만큼 많은 변수를 만들 수 있습니다. 숫자를 저장할 변수가 필요하고 또한 텍스트를 저장할 변수도 필요하다면, 각각을 별도의 변수로 만들 수 있습니다.
간단한 예제
예제 파이를 살펴보세요. 첫 번째 씬에는 사용자가 이름을 입력하도록 요청하는 폼이 있습니다. 또한 Simple greeting.이라는 이름의 빈 텍스트 레이어도 있습니다. 사용자가 Your name 레이어에 입력한 내용을 저장할 변수를 만들고, 사용자가 Next를 탭하면 그 변수의 값을 Simple greeting 텍스트 레이어에 표시할 것입니다.
Studio 인터페이스의 왼쪽 아래에서 Variables 패널을 찾으세요. 기본적으로 접혀 있을 가능성이 큽니다. 한 번 클릭해서 패널을 펼치세요.
+아이콘을 클릭해 새 변수를 만드세요. 그러면 두 가지 옵션이 표시됩니다:For All Scenes
For This Scene
곧 이 두 옵션의 차이를 직접 보여드리겠습니다.
지금은 For This Scene을 선택하세요.
ProtoPie는
variable1이라는 이름의 변수를 만듭니다. 이 이름은 우리가 사용하려는 용도에 비해 그다지 의미가 없습니다. 그러니 더 의미 있는 이름으로 바꿔 봅시다. 사용자의 이름을 저장하는 데 사용할 것이므로 변수를 “name.”이라고 부르겠습니다.variable1을 더블클릭한 뒤 이름을 name.으로 변경하세요.
이제 이 변수를 사용해 봅시다. 사용자가 Your name 텍스트 상자에 입력한 내용을 감지하고, name 변수의 값을 입력된 내용으로 설정하고 싶습니다.
Your name 텍스트 레이어에 Detect 트리거를 만드세요.
변경 사항을 감시할 속성으로 Text 속성을 선택하세요.
Assign 응답을 추가하세요. 변수에 새 값을 업데이트하거나 할당할 때는 Assign 응답을 사용합니다.
Select Variable 드롭다운에서 방금 만든 name. 변수를 선택하세요.
변수에 새 값을 할당할 때는 Formula를 사용해야 합니다. Formula 상자에 무엇을 입력하느냐가 변수에 할당될 값입니다. Formula가 무엇인지 잘 모르겠다면 이전 레슨 고급 기능 - Formula 기본.을 확인해 보세요. Formula 상자를 클릭하면 **∫x ** 아이콘이 나타납니다.
Formula 입력 상자에서 ⊕ 아이콘을 클릭하고 Your name이라는 레이어를 선택하세요.
.문자를 입력하면 해당 레이어의 모든 속성이 표시됩니다. 아래로 스크롤하여 Text.를 선택한 다음 OK.를 클릭하세요.
이 과정의 마지막 단계는 사용자가 Next를 탭할 때 name 변수의 값을 표시하는 것입니다.
Next button 레이어에 Tap 트리거를 만드세요.
Simple greeting 레이어에 Text 응답을 추가하세요.
Content 아래에서 Formula를 선택하세요.
Formula 아래의 상자를 클릭해 ∫x 아이콘을 표시하고 Formula 입력 상자를 확장하세요. Formula 입력 상자에
name을 입력한 뒤 OK.를 클릭하세요.
이제 미리 보기를 해 봅시다. 상자에 이름을 입력하고 Next.를 탭하세요.
무슨 일이 일어났나요? 이름이 “Next” 버튼 아래에 나타났나요, 아니면 "0"이 보였나요?
위의 설명에서는 변수 유형이 잘못 설정되었을 때 어떤 일이 일어나는지 보여주기 위해 일부러 한 단계를 건너뛰었습니다. 이제 이 문제를 해결해 봅시다.
Variables 패널에서 name 변수를 클릭하세요.
이제 오른쪽 상단을 보세요. 여기에서 변수의 유형을 설정할 수 있습니다.
기본적으로 ProtoPie는 새 변수를 만들 때 Number를 선택합니다. Your name 텍스트 상자에 이름을 입력하면 텍스트를 입력하게 되는데, 이는 Number 유형과 호환되지 않습니다. 유형을 Text.로 변경하세요.
이 컨트롤에서는 초기 값도 설정할 수 있습니다. 지금은 초기 값이 필요하지 않으므로 비워 두겠습니다. 하지만 앞으로 작업할 때는 경험이 시작될 때 변수에 특정 값이 있어야 하는 경우가 있을 수 있습니다. 이 상자에서 값을 설정하면 됩니다.
다시 한 번 미리 보기를 해 봅시다.
이제 경험이 제대로 작동해야 합니다. 다음 레슨에서 한 단계 더 나아가 봅시다. 그때 뵙겠습니다!
