변수 강의의 Part 1에서 우리는 변수 작동 방식에 대한 아주 단순한 데모를 다뤘습니다. 이제 한 단계 더 나아가 보겠습니다.
준비물
이 튜토리얼을 따라 하려면 이 샘플 파이를 다운로드하고 Studio에서 여세요:
배울 내용
이 튜토리얼을 마치면 다음을 배우게 됩니다:
변수를 만들 때 “이 씬에만”과 “모든 씬에”의 차이
예상대로 작동하지 않을 때 문제를 해결하는 방법
변수 사용의 한계
완료 시간: ≤15분
다른 씬에서 변수 사용하기
사용자가 Next를 클릭했을 때 이름만 표시하는 대신, 다음 씬으로 Jump하여 적절한 인사를 보여줍시다. 마지막으로 저장한 진행 상태의 Pie 파일을 여세요.
Tap 트리거의 동작을 변경하세요. Text Response를 제거한 다음(클릭하고 키보드에서 Delete를 누르세요) Jump Response를 추가하세요.
protopie_welcome 씬을 선택하고 원하는 전환 효과로 Jump를 설정하세요. 새롭고 멋진 Smart Jump 전환을 사용해 보지 않겠어요? (더 많은 예시 보기
.)
씬 팔레트에서 protopie_welcome 씬을 클릭해 편집할 수 있도록 여세요.
이 화면이 시작될 때 사용자에게 이름으로 인사하도록 만들고 싶습니다. Start 트리거를 추가하세요.
Name이라는 레이어에 Text Response를 추가하세요. Content 아래에서 Formula를 선택하세요. Formula 아래의 상자를 클릭해 ∫x 아이콘이 나타나도록 하고 Formula 입력 상자를 확장하세요.
"Hi, " + name + "!"를 Formula 상자에 입력하세요. 지난 강의에서 살펴본 것과 같은 방법으로 변수를 삽입할 수 있습니다.
ProtoPie가 “name”이라는 단어에 빨간 물결 밑줄을 그은 것이 보이시나요? 이는 ProtoPie가 이 씬에서 사용할 수 있는 “name” 변수를 찾지 못했기 때문입니다. 빨간 물결 밑줄은 변수와 수식을 다룰 때 정말 유용한 도구입니다. 이것이 무언가를 수정해야 한다는 첫 번째 संकेत입니다.
곧 보게 되겠지만, 문제의 원인은 다른 곳에 있습니다. 그러니 지금은 OK를 클릭해 수식을 확정하세요. ProtoPie는 수정이 필요한 문제가 있음을 나타내기 위해 Formula를 계속 호박색으로 강조 표시합니다.
기억하시겠지만, 첫 번째 예제에서는 새 변수를 만들고 이 씬에만을 선택했습니다.
즉, 우리가 만든 변수는 오직 생성한 씬에서만 사용할 수 있다는 뜻이었습니다. 우리는 이 변수를 여러 씬에서 다시 사용하고 싶습니다. 따라서 변수를 만들 때 모든 씬에를 선택했어야 합니다.
이제 돌아가서 그것을 수정해 봅시다.
편집할 수 있도록 Scenes 패널에서 input 씬을 클릭하세요. 그런 다음 왼쪽 아래 Variables 패널에서 name 변수를 클릭하세요. 변수를 모든 씬에 변수로 바꾸는 방법이 없다는 것을 알게 될 것입니다. 이 옵션은 변수를 만들 때만 선택할 수 있습니다. 변수는 삭제한 뒤 다시 만들어야 합니다.
+컨트롤을 클릭해 새 변수를 만드세요. 이번에는 모든 씬에를 선택하세요. 다시 한 번 새로 만든 변수의 이름을 name으로 바꾸세요.
💡 팁: 이전에 사용했던 것과 정확히 같은 이름을 다시 사용하세요. 그렇지 않으면 해당 변수를 사용하는 모든 Trigger와 Response가 깨집니다.
오른쪽 상단에서 변수를 Text 유형으로 설정하세요.
이제 이 작업을 위해 필요한 것은 모두 끝났습니다. 다시 미리 보기를 해 봅시다. 이름을 입력하고 Next를 탭하세요. 다음 씬에서 이름으로 인사를 받게 될 것입니다.
문제 해결
위와 같이 작동하지 않는다면 어떻게 해야 할까요? 문제를 정확히 찾아내는 데 도움이 될 몇 가지 단계를 소개합니다.
Trigger와 Response의 호박색 강조, 그리고 Formula의 빨간 물결 밑줄을 확인하세요. 이것들은 무언가를 수정해야 한다는 분명한 신호입니다.
이 경우에는 변수 이름을 잘못 입력했습니다. nme라는 이름의 변수를 찾을 수 없기 때문에 ProtoPie가 밑줄을 표시합니다.
변수가 모든 씬에서 사용되도록 설정되어 있는지 확인하세요. 변수 이름 옆 아이콘이
all-scene변수의 경우에는 채워져 있고,this-scene변수의 경우에는 윤곽선만 있습니다. 또한all-scene변수는 모든 Scenes의 variables 패널에 표시되지만,this-scene변수는 생성된 Scene에만 표시됩니다.
변수에서 기대한 값이 보이지 않는다면 디버그 기능을 켤 수 있습니다. variables 팔레트에서 변수 위에 마우스를 올리면 오른쪽에 무당벌레 아이콘이 나타납니다. 그것을 클릭하면 씬에 초록색 상자가 나타납니다(다시 클릭하면 꺼집니다). Pie를 미리 보면 현재 변수 값을 보여 줍니다.
초록색 디버그 상자를 씬 안에서 드래그해 원하는 위치에 놓을 수 있습니다.
미리 보기에서는 입력할 때 변수 값이 업데이트되는 것을 볼 수 있어야 합니다.
변수가 업데이트되지 않는다면 첫 번째 Scene의 Detect Trigger를 확인해 Your name 텍스트 레이어의 text 속성으로 설정되어 있는지 확인하세요.
또한 Assign Response가 다음과 같이 설정되어 있는지도 확인하세요:
위의 모든 것이 정상이라면
second scene으로 전환해 변수를 올바르게 사용하고 있는지 확인해 봅시다. 다음과 같이 구성된 Text Response가 있는 Start Trigger가 있어야 합니다:
두 씬 사이에 애니메이션 전환을 사용하고 있다면, 두 번째 씬에 인사가 반영되기 전에 아주 짧은 지연이 보일 수 있습니다. 그런 경우 protopie_welcome 씬의 Start Trigger를 확인하세요. Options for Multiple Scenes가 Start After Jump로 설정되어 있다면 이를 Start With Jump로 변경하세요. 이렇게 하면 전환 애니메이션이 완료된 후가 아니라 시작될 때 Start Trigger 아래의 Responses가 실행됩니다.
변수 사용 시 한계
변수를 사용할 때 알아 두어야 할 몇 가지 고려 사항이 있습니다.
이미 올바른 유형 설정에 대해 이야기했습니다. 저장하려는 정보와 유형이 호환되지 않으면 예상치 못한 결과가 나올 수 있습니다.
변수가 하나의 씬에만 사용할 수 있는지 또는 모든 씬에 사용할 수 있는지 설정하는 것의 중요성도 이야기했습니다. 나중에 이를 변경할 수는 없으므로 변수를 어떻게 사용할지 미리 아는 것이 중요합니다. 확실하지 않다면 “모든 씬에”를 선택하세요. 가장 유연하게 사용할 수 있습니다.
변수 이름에는 공백을 사용할 수 없습니다. 프로그래밍 경험이 있다면 이는 당연하게 느껴질 수 있지만, 그 외의 사람들에게는 중요한 세부 사항입니다. 유효하지 않은 이름을 변수에 지정하려고 하면 ProtoPie가 경고합니다.
변수 이름에 여러 단어를 사용해 더 설명적으로 만들고 싶다면 사용할 수 있는 일반적인 규칙이 몇 가지 있습니다.
여러 단어를 밑줄
-문자로 구분합니다. 예:first_name,shoe_lace_color. 이것은 때때로 snake case 또는 pothole case라고 불립니다.추가 단어의 첫 글자를 대문자로 씁니다. 예:
firstName,shoeLaceColor. 이것은 일반적으로 camel case로 알려져 있습니다.
“쉽기만 한 “ + type_of_pie + “ 파이!”
이제 Pie에서 약간의 정보를 저장하기 위해 변수를 사용하는 방법을 알게 되었습니다. 또한 여러 씬에서 변수를 사용하는 방법도 배웠고, 예상대로 작동하지 않을 때 사용할 수 있는 유용한 문제 해결 기술도 배웠습니다.
리소스
이 튜토리얼 영상에서는 $touchX, $touchY와 같은 ProtoPie의 내장 변수와 이를 프로토타입에서 사용하는 방법을 배웁니다.
이 튜토리얼 영상에서는 한 씬에 변수를 저장한 다음, 다른 씬에서 사용하기 위해 이를 가져오는 방법을 배웁니다.
마스크와 체인을 사용해 원형 슬라이더 만들기 노브를 제어하여 사용자는 원형 슬라이더의 값을 변경하고, 이에 따라 퍼센트 값의 변화를 볼 수 있습니다.
데스크톱 웹용 반복 스크롤 캐러셀 만드는 방법 스크롤 트리거, 변수, 조건을 사용해 데스크톱 웹용 반복 스크롤 캐러셀을 만드는 방법을 배웁니다.
컴포넌트를 사용해 장바구니의 총 결제 금액 계산하기 이 강의에서는 이커머스 앱에서 총 결제 금액을 계산하기 위해 스테퍼 컴포넌트를 사용하는 방법을 배웁니다.
