[ProtoPie School] Variable 활용
Variable과 Formula를 사용하여 프로토타입을 업그레이드하세요.
▶ 이전 학습내용이 궁금하다면? 여기를 클릭!
▶ 어떤 내용을 배울지 한눈에 보고 싶다면? 여기를 클릭!
지난 시간에는 Variable을 사용하여 간단한 데모를 구현해 보았는데요.
이번 시간에는 한단계 더 발전된 프로토타입을 구현해 봅시다.
시작하기 전에
이번 튜토리얼을 따라가기 위해서는, 아래 샘플 Pie 파일을 다운로드하고 Studio에서 파일을 엽니다.
Variables Pie 파일 사용하기
학습할 내용
학습 목표
▶ Variable 생성 시 “For This Scene”과 “For All Scenes”의 차이 알아보기
▶ 문제 발생 시 해결하는 방법 알아보기
▶ Variable 사용 시 한계점 알아보기
소요 예정 시간: ≤15분
다른 scene에서 variable 사용
사용자가 Next를 클릭할 때, 이름만 표시하는 대신 인사말을 건네보도록 하겠습니다.
마지막으로 저장했던 Pie 파일을 엽니다.
우선 Tap trigger 클릭하세요. 그런 다음, Text response를 클릭하고 다음 키보드에서 Delete 키를 눌러 제거하고, Jump response을 추가합니다.
protopie_welcome scene을 선택하고 원하는 transition으로 Jump를 구성합니다. 여기서 Smart Jump transition을 사용해 보면 어떨까요? (Smart Jump 에 대한 더 많은 예시는 여기서 확인하세요.)
Scene 팔레트에서 protopie_welcome scene을 클릭하여 편집용으로 엽니다.
Scene이 시작될 때, 유저의 이름으로 인사를 하도록 설정해 보겠습니다.
우선 Start trigger를 추가합니다.
Name 레이어에 Text response를 추가하고, Content에서 Formula를 선택합니다. Formula 아래에 있는 상자를 클릭하여 ∫x 아이콘을 표시하고, Formula 상자를 확장합니다.
Formula 상자 안에 "Hi, ”+ name + “!”을 입력하세요. 지난 시간에 사용되었던 동일한 방법을 variable을 삽입할 수 있습니다.
“name”이라는 단어 아래 빨간색 밑줄, 확인하셨나요? 이것은 formula와 variable에 수정이 필요한 경우 나타납니다. 여기서는 이 scene에 사용할 수 있는 “name”이라는 variable을 찾을 수 없기 때문에 표시된 것입니다.
여기서 더 중요한 문제는 다른 부분에 있는데요. 우선 OK를 클릭하여 공식을 커밋하세요.
아래 이미지에 보이는 것과 같이, 수정이 필요한 부분이 호박색으로 표시되고 있습니다.
지난 예시에서 새 variable을 구현할 때 For This Scene을 선택했었죠. 즉, 이 variable은 variable이 만들어진 scene에서만 사용할 수 있다는 것입니다. 복수의 scene에서 variable을 재사용하려면, For All Scenes를 선택해야 합니다.
다시 돌아가서 고쳐 봅시다.
Scene 패널에서 input scene을 클릭하여 편집용으로 엽니다. 그런 다음 왼쪽 하단의 Variable 패널에서 name variable을 클릭합니다. 여기서, For All Scenes variable로 변경할 수 있는 방법은 없다는 것을 확인할 수 있을 텐데요. 이 옵션은 variable이 처음 생성될 때만 선택할 수 있기 때문입니다. 따라서, 이 경우 variable을 삭제하고 다시 만들어야 합니다.
+ 컨트롤을 클릭하여 새 variable을 생성합니다. 이번에는 For All Scenes를 선택합고, 다시 한 번 새 variable의 이름을 name으로 바꿉니다.
프로 팁: 여기서 새로 variable을 구현할 때, 이전과 똑같은 이름을 재사용하세요. 이름이 바뀌는 경우, 해당 variable에 추가된 모든 trigger 및 response의 작동이 중단됩니다.
오른쪽 상단에서 Variable을 Text type으로 구성합니다.이제 의도한 대로 잘 작동될 것입니다. 다시 프로토타입을 테스트해보도록 하겠습니다.
이름을 입력하고 Next를 탭합니다. 다음 scene 에서 입력한 이름으로 인사를 건네는지 확인해보세요.
문제 발생 시 해결하는 방법
만약 variable이 정상적으로 작동하지 않는다면?
정확한 문제 파악을 위해 취할 수 있는 몇 가지 단계는 다음과 같습니다.
Trigger 및 response의 호박색 하이라이트와 Formula에서 빨간색 밑줄을 찾아보세요. 이는 무언가 변경이 필요함을 명확히 보여줍니다.
여기서는 variable의 이름이 잘못 입력됐네요. ProtoPie는 nme이라는 variable을 찾을 수 없기 때문에 밑줄로 표시하였습니다.
Variable에는 For All Scenes와 For This Scene 옵션이 있습니다. For All Scene의 경우 모든 scene의 variable 패널에 나타나지만, For This Scene은 해당 variable이 생성된 scene에만 나타납니다.
Variable의 옵션이 For All Scenes에 사용되도록 설정되었는지 확인하세요.
Variable에 예상한 값이 표시되지 않는 경우 debug feature를 켜면 됩니다. Variable 팔레트에서 variable에 마우스 오버하면, 오른쪽에 무당벌레 아이콘이 보일텐데요. 클릭하면 scene에 녹색 상자가 나타납니다 (다시 클릭하면 꺼집니다).
Pie를 미리 보면 variable의 현재 값이 표시됩니다.
아래 이미지처럼 녹색 상자를 scene 주위로 드래그하여 편리한 위치에 배치할 수도 있습니다.
미리보기를 하면, 입력한 대로 variable 값이 업데이트된 것을 확인할 수 있습니다.
Variable이 업데이트되지 않는 경우, 첫 번째 scene의 Detect Trigger를 확인하고, Your name 레이어의 속성이 text로 설정되어 있는지 확인하세요.
또한 Assign Response를 확인하여 아래와 같이 구성되었는지 확인하세요.
위의 모든 부분들이 잘 설정되어 있다면, second scene으로 전환해서 variable을 제대로 사용하고 있는지 확인해 봅시다.
아래 보이는 것처럼, Text response가 포함된 Start Trigger가 구성되어 있어야 합니다.
두 scene 간에 애니메이션 전환을 사용하는 경우, 두 번째 scene에 인사말이 반영되기까지 매우 짧은 지연이 발생할 수도 있는데요. 이런 경우, protopie_welcome scene의 Start trigger를 살펴보세요. 여기서 Options for Multiple Scenes가 Start After Jump으로 설정된 경우, Start with Jump로 변경하세요.
이렇게 되면, Start Trigger 아래의 response가 transition 애니매이션 완료 후가 아닌 시작 시 작동됩니다.
Variable 사용 시 제한 사항
Variable을 사용할 때 알아두어야 할 몇가지 사항에 대해 간단히 살펴보겠습니다.
▶ 앞서 올바른 유형을 설정하는 것에 대해 언급했었죠. 저장하려는 정보와 유형이 호환되지 않는 경우 (예: 설정된 variable의 유형은 Number인데 text가 입력된 경우) 에러가 발생합니다.
▶ variable의 scene 적용 범위 설정에 대해서도 살펴보았습니다. 앞서 언급했듯, scene의 적용 범위는 추후 변경이 불가능하므로, 처음 설정 시 신중하게 설정해야 합니다. 잘 모르겠다면, 좀 더 유연하게 작업할 수 있는 For All Scenes를 선택하세요.
▶ Variable 이름에는 공백을 사용할 수 없습니다. 프로그래밍 경험이 있으신 분들께는 명확한 부분이지만, 비개발자에게는 중요한 부분일 것입니다. ProtoPie는 variable에 잘못된 이름이 지정되 경우 경고를 표시합니다.
Variable 에 단어를 사용하여 더 명확히 설명하고 싶은 경우, 아래 몇 가지 방안을 사용할 수 있습니다.
▶ first_name, shoe_lace_color처럼 단어를 밑줄 (_)로 구분합니다. 이를 snake case 또는 pothole case라고도 합니다.
▶ firstName, shoeLaceColor처럼 단어의 첫 글자를 대문자로 바꿉니다. 이것은 일반적으로 camel case로 알려져 있습니다.
Variable로 더욱 생동감 넘치는 프로토타입 구현하기
이번 시간에는 variable을 사용하여 Pie에 정보를 저장하는 방법을 배워보았습니다. 또한 여러 scene에서 variable을 사용하는 방법을 배웠고, 예상대로 작동하지 않을 때 사용할 수 있는 유용한 문제 해결 방법에 대해 알아보았습니다.
지금까지 ProtoPie School 시리즈를 구독해 주셔서 감사합니다.
다음에는 더 유용한 컨텐츠로 찾아오도록 하겠습니다!
학습 자료
프로토타입 문서: Predefined Variables
더 많은 팁이 필요하다면? 언제든 연락주세요!
