[ProtoPie School] Formula 기초1
Formula를 사용하여 더 다이나믹한 인터랙션을 추가해봅시다.
▶ 이전 학습내용이 궁금하다면? 여기를 클릭!
▶ 어떤 내용을 배울지 한눈에 보고 싶다면? 여기를 클릭!
이전에는 ProtoPie의 고급 기능 중 하나인 Formula를 소개드렸습니다. Formula를 사용하면 언제든지 변경될 수 있거나 처음에 알려져 있지 않은 정보를 가지고 작업할 수 있습니다. 이전에 수식을 사용하여 Google 이미지 검색을 실행하는 데 사용한 검색 쿼리 작성한 것, 기억하시나요? 대부분의 URL은 이미 정해져 있지만, 개별 검색어는 사용자에게 입력하도록 요청한 부분이었습니다. 이 알려지지 않은 정보를 수용려면, 검색어 입력과 동시에 실시간으로 URL을 작성하기 위해 Formula를 사용해야 합니다.
이번 아티클에서는 Formula의 기본 예제를 살펴보도록 하겠습니다.
시작하기 전에
이번 튜토리얼을 위해 아래 샘플 Pie 파일을 다운로드하고 Studio에서 파일을 엽니다.
학습할 내용
학습 목표
▶ Formula를 사용해야 하는 이유 탐색
▶ ProtoPie 내 탑재된 variable을 사용한 Formula 구현
▶ 텍스트를 결합하는 Formula 구현
소요 예정 시간: ≤10분
Formula를 사용하는 이유?
많은 인터랙션의 경우, 고정된 값으로도 원하는 결과를 얻을 수 있습니다. 예를 들어, 버튼을 누르면 Scene 2로 넘어가거나, 물체를 위쪽으로 돌리면 화면 상단의 어느 지점으로 이동하는 등의 결과 도출이 가능합니다. 그러나 상황에 따라 Pie가 알려지지 않은 다양한 입력 사항이 응답해야 하는 경우가 있습니다. 또한, 이 인아웃의 세부사항은 항상 달라질 수 있습니다. 예를 들어, 임의의 위치에서 화면을 탭한다고 가정해 봅시다. 만약 다시 화면을 탭한 경우, 탭한 위치의 좌표가 다를 수 있습니다.
첫번째 예시에는 이 시나리오에 대해 알아보도록 하겠습니다.
사용자의 터치 포인트로 Object 이동
위에서 다운로드한 샘플 Pie를 엽니다. 해당 Pie에는 세 가지 Scene이 있습니다. 아직 Scene 1이 생성되지 않은 경우, Studio의 왼쪽 위에 있는 장면 목록에서 Scene 1 - Touch Move의 아이콘을 클릭하세요.
이 Scene에는 검은색 배경과 노란색 별, 이렇게 두 개의 레이어가 있습니다. 사용자가 화면을 탭하여 좌표를 캡처한 다음, 별을 사용자가 터치한 정확한 지점으로 이동하려고 합니다. Background Layer를 사용하여 전체 화면 너비와 높이를 커버하는 터치 이벤트를 수신합니다.
Background 레이어에 Tap trigger 추가합니다.
Star 레이어에 Move response 추가합니다.
Move response의 이전 예시에서는 Object가 이동할 위치에 대한 명확한 픽셀 좌표를 했었는데요. 이번 케이스에서는 사용자가 화면을 터치한 위치를 아직 알 수 없습니다. 여기서는 터치한 두 포인트의 X,Y 좌표를 캡쳐해야 합니다.
ProtoPie에는 터치 포인트와 같은 이벤트의 세부 사항을 캡처하는 다양한 기본 탑재 메커니즘인 Predefined Variables가 있습니다. Variable라는 용어에 대해서는 추후 더 자세히 살펴볼 예정이니, 지금 낯설더라도 걱정하지 마세요. 지금은 variable이 약간의 정보를 저장하는 데 사용된다는 것만 이해하고 있으면 됩니다. 이를 위해 가장 최근의 터치 이벤트의 X 및 Y 좌표를 저장하는 $touchX 및 $touchY, 이렇게 두 개의 Predefined Variables를 사용합니다.
Move response를 클릭합니다. Properties 패널에서 X 위의 상자를 클릭하면, 상자 오른쪽에 작은 ∫x 아이콘이 나타납니다.
∫x 아이콘을 클릭하고, 수식을 입력할 차례입니다. 변동 가능한 정보를 추가하기 위해 수식을 사용합니다.
Formula 상자에 $touchX를 입력합니다 . ProtoPie는 이 텍스트를 녹색으로 표시하여 변수를 나타냅니다.
OK를 클릭하여 수식을 커밋합니다.
프로 팁: 수식 입력이 완료되면 OK 단추를 클릭합니다. 이 단계를 생략하면, 수식 입력 후 수식이 사라집니다.
Y 위치에 대해서도 동일한 작업을 수행해봅시다. 이번에는 $touchY를 수식으로 설정해 봅시다.
잘 적용되었는지 확인해 봅시다. Scene의 아무 곳이나 클릭하면 클릭한 위치로 별이 즉시 이동해야 합니다.
ProtoPie의 Predefined Variables를 모두 보려면 수식 입력 상자의 오른쪽 끝에 있는 작은 물음표 아이콘을 클릭하세요.
클릭과 동시에 Formula 설명서에 대한 브라우저 창이 열립니다. 왼쪽 사이드바에서 Variables → Predefined Variables로 이동합니다.
텍스트 결합
이전 예제에서는 주어진 정보를 활용해 Predefined Variables인 $touchX 와 $touchY를 만들어 보았는데요. 이제 Formula를 사용하여 필요한 정보들을 수집해 보겠습니다.
Pie에서 Scene 2 - Greeting을 엽니다. 이 Pie에는 지침 텍스트, 입력 필드 및 빈 텍스트 필드가 있습니다. 사용자가 자신의 이름을 입력하고 Return을 누를 때 ProtoPie가 입력한 이름으로 인사하도록 설정해 봅시다.
Scene의 시작 부분에 입력 필드가 강조되도록 설정해 봅시다. Start trigger 추가합니다.
Name 입력 레이어에 Focus response를 추가하고, Focus In이 선택되어 있는지 확인합니다.
Name 입력 레이어에 Return trigger를 추가합니다.
Greeting 레이어에 Text response를 추가합니다.
이름이 입력되기 전까지는 정보를 알 수 없으므로, 수식을 사용하여 인사말 텍스트를 동적으로 구성해야 하는데요. 이 때, Text Responses를 사용하면 명확한 텍스트 대신 수식을 사용할 수 있습니다. Content 하단 드롭다운 목록에서 Formula를 선택합니다.
드롭 다운 아래의 상자가 변경되고 클릭하면 ∫x 아이콘이 표시됩니다.
"Hello, NAME" 이라는 인사말을 추가할텐데요, NAME을 사용자가 이름 필드에 입력한 내용으로 설정할 것입니다. 이 인사말에는 두 부분이 있습니다.
▶ 고정된 부분: Hello
▶ 고정되지 않은 부분: NAME
위와 같이 인사말을 두 부분으로 구성해볼 텐데요.
따옴표를 포함하여 표시되는 대로 정확하게 "Hello,"를 입력합니다.
위와 같이 텍스트를 따옴표에 추가하는 경우, 안의 내용을 정확하게 출력하도록 ProtoPie에게 명령하는 것입니다. 프로그래밍에서 이는 literal string으로 알려져 있는데요, 여기서는 편의상 정적 텍스트라고 부르겠습니다. ProtoPie는 이 주황빛이 도는 적색으로 정적 텍스트를 표시합니다.
+ 문자를 입력해봅시다. 이것은 ProtoPie에게 정적 텍스트에 더 많은 텍스트를 결합하고 싶다는 것을 알려줍니다.
Name 입력 레이어에 입력된 내용을 포함하려고 합니다. ProtoPie는 입력한 텍스트를 레이어의 속성으로 자동으로 저장합니다. 수식에서 이 속성에 액세스하려고 합니다. Formula 입력 상자의 오른쪽 끝 근처에 ⊕ 아이콘을 클릭하면 Scene의 모든 레이어가 표시됩니다. Name 레이어를 선택합니다.
ProtoPie는 레이어 이름을 녹색으로 표시합니다.해당 레이어 속성에 액세스하려면 점을 입력하여, 사용 가능한 모든 속성 목록을 확인합니다. 아래로 스크롤하여 text 속성을 선택합니다.
OK을 클릭하여 Formula를 커밋합니다.
잘 적용되었는지 확인해볼 차례입니다. 입력 상자에 이름을 입력하고 Enter를 눌러봅시다.
앗, "Hello"와 "Jeff"사이에 공백이 없네요. 이는 ProtoPie에게 공간을 추가에 대한 명령을 추가하지 않았기 때문인데요. 수식을 수정해봅시다.
Text response에서 Formula 상자를 클릭하고, ∫x 아이콘을 표시합니다.
쉼표 뒤에 공백을 포함하되, 닫는 인용 부호 앞에 공백을 포함시키도록 고정된 텍스트 부분을 수정합니다. 고정된 텍스트를 작성할 때, ProtoPie는 공백 포함 따옴표 사이에 있는 내용을 정확히 출력한다는 점, 잊지 않으셨죠?
∫x 아이콘을 클릭하여 수식을 표시합니다.그리고 하나 더, 인사말 끝에 느낌표를 추가하여 반가운 감정을 추가해 보겠습니다. + 아이콘을 클릭하고 텍스트를 추가하기만 하면 됩니다. 다음과 같이 수식 끝에 정적 텍스트 "!" 를 추가합니다.
OK를 클릭하여 변경 사항을 커밋합니다.
지금까지 설정한 내용을 확인할 차례입니다. 이번에는 인사말에 사이에 공백이 있어야 하고, 느낌표로 끝나야 합니다.
원하는 결과물이 나왔죠!
ProtoPie의 Formula 를 사용하면 텍스트 결합 외에도 다양한 기능들을 구현해볼 수 있습니다.
다음 아티클에서는 ProtoPie를 사용해 숫자를 다루는 방법을 배워보겠습니다. 다음 시간에 또 만나요!
