이전에 ProtoPie의 고급 기능 중 하나인 — 수식(Formulas)을 소개했습니다. 수식은 언제든지 바뀔 수 있거나 처음에는 알 수 없는 정보와 함께 작업할 수 있게 해줍니다. 기억하신다면, 우리는 수식을 사용해 검색어를 만들고, 그것을 이용해 Google 이미지 검색을 실행했습니다. URL의 대부분은 미리 알 수 있었지만, 개별 검색어는 사용자에게 입력하라고 요청한 것이었습니다. 이 알 수 없는 정보를 처리하기 위해, 사용자가 검색어를 입력한 후에 실시간으로 URL을 만들기 위해 수식을 사용해야 했습니다.
오늘 수업에서는 몇 가지 기본 예제로 시작하겠습니다.
준비물
이 튜토리얼을 따라하려면, 이 예제 Pie를 다운로드하여 Studio에서 여세요.
배울 내용
이 튜토리얼을 마치면 다음을 배웠을 것입니다:
수식을 사용하고 싶을 수 있는 이유
ProtoPie의 내장 변수를 사용하여 수식을 만드는 방법
텍스트를 연결하는 수식을 만드는 방법
소요 시간: ≤10분
왜 수식을 사용하나요?
많은 상호작용에서는 정적인 값을 사용해도 충분합니다. 이 버튼을 탭하면 Scene 2로 이동하고, 오브젝트를 위로 던지면 화면 위쪽 바깥의 어느 지점으로 이동합니다. 하지만 꽤 자주, Pie가 발생하기 전까지는 알 수 없는 다양한 입력에 반응해야 하는 경우가 있고, 해당 입력의 세부 사항은 매번 달라질 수 있습니다. 예를 들어, 화면의 임의의 위치를 탭하면, 다시 탭했을 때 내가 탭한 위치의 좌표는 아마도 달라질 것입니다.
첫 번째 예제에서는 바로 이 상황을 다뤄보겠습니다.
오브젝트를 사용자의 터치 지점으로 이동하기
위에서 다운로드한 예제 Pie를 여세요. Pie에는 세 개의 Scene이 있습니다. 아직 Scene 1,에 있지 않다면, Studio 왼쪽 상단의 Scenes 목록에서 Scene 1 - Touch Move 아이콘을 클릭합니다.
이 Scene에는 두 개의 레이어가 있습니다. 검은색 배경 도형과 노란색 별입니다. 사용자가 화면을 탭하면 좌표를 캡처한 다음, 사용자가 터치한 정확한 지점으로 별을 이동시키고 싶습니다. 배경 레이어는 화면의 너비와 높이를 모두 덮고 있으므로 터치 이벤트를 받는 데 사용하겠습니다.
Background 레이어에 Tap 트리거를 추가합니다.
Star 레이어에 Move 응답을 추가합니다.
Move Response의 이전 예제에서는 오브젝트가 이동할 명시적인 픽셀 좌표를 입력했습니다. 이 경우에는 아직 사용자가 화면의 어디를 터치했는지 알 수 없습니다. 터치가 발생하는 시점의 X 및 Y 좌표를 캡처해야 합니다.
ProtoPie에는 터치 지점과 같은 이벤트의 세부 정보를 캡처하는 여러 내장 메커니즘이 있습니다. ProtoPie에서는 이를 미리 정의된 변수라고 부릅니다. 변수라는 용어가 익숙하지 않아도 걱정하지 마세요. 변수는 다음 레슨에서 자세히 다룰 예정입니다. 지금은 변수란 정보를 저장하는 데 사용된다는 점만 알면 됩니다. 여기서는 가장 최근의 터치 이벤트의 X 및 Y 좌표를 저장하는 두 개의 미리 정의된 변수인 $touchX와 $touchY를 사용합니다.
Move 응답을 클릭합니다. 속성 패널에서 X 위의 상자를 클릭합니다. 상자 오른쪽에 작은 ∫x 아이콘이 나타나는 것을 볼 수 있습니다.
∫x 아이콘을 클릭합니다. 이를 통해 수식을 입력할 수 있습니다. 변경될 수 있는 정보를 다룰 때는 수식을 사용합니다.
수식 상자에 $touchX를 입력합니다. ProtoPie는 이 텍스트를 녹색으로 표시하여 변수를 사용하고 있음을 알려줍니다.
수식을 적용하려면 OK를 클릭합니다.
**💡 ****Pro-tip: **수식 입력을 마친 뒤 OK 버튼을 클릭하세요. 입력한 후 수식이 사라졌다면, 아마 이 단계를 잊었기 때문일 수 있습니다.
Y 위치도 똑같이 하되, 이번에는 Formula로 $touchY를 사용합니다.
미리보기로 확인해 보세요. Scene의 아무 곳이나 클릭하면 Star가 즉시 클릭한 위치로 이동해야 합니다.
ProtoPie의 미리 정의된 변수를 모두 보고 싶다면, 수식 입력 상자 오른쪽 끝에 보이는 작은 물음표 아이콘을 클릭하면 쉽게 찾을 수 있습니다.
그러면 수식 문서가 있는 브라우저 창이 열립니다. 왼쪽 사이드바에서 Variables → 미리 정의된 변수.로 이동합니다.
텍스트 결합
이전 예제에서는 미리 정의된 변수 $touchX와 $touchY처럼 단일 정보 조각만 사용해 수식을 만들었습니다. 하지만 수식을 사용해 여러 정보 조각을 함께 조합할 수도 있습니다.
Pie에서 Scene 2 - Greeting을 엽니다. 이 Pie에는 약간의 안내 문구, 입력 필드, 그리고 빈 텍스트 필드가 있습니다. 사용자가 이름을 입력하고 Return 키를 누르면, 입력한 이름으로 ProtoPie가 인사해 주면 좋겠습니다.
Scene 시작 시 입력 필드에 포커스가 가도록 합시다. Start 트리거를 추가합니다.
Name 입력 레이어에 Focus 응답을 추가합니다. Focus In이 선택되어 있는지 확인합니다.
Name 입력 레이어에 Return 트리거를 추가합니다.
Greeting 레이어에 Text 응답을 추가합니다.
사용자의 이름은 입력하기 전까지 알 수 없으므로, 인사말 텍스트를 동적으로 구성하기 위해 수식을 사용해야 합니다. Text Response에서는 명시적인 텍스트 대신 수식을 사용할 수 있습니다. Content, 아래의 드롭다운 목록에서 Formula.를 선택합니다.
드롭다운 아래의 상자가 바뀌고, 클릭하면 익숙한 ∫x 아이콘이 보입니다.
우리는 "Hello, NAME"라고 읽히는 인사말을 만들 것이지만, NAME은 사용자가 Name 필드에 입력한 내용으로 바꿀 것입니다. 인사말은 두 부분으로 구성됩니다:
알려진 부분: Hello,
알 수 없는 부분: NAME
우리는 인사말을 두 부분으로 구성할 것입니다.
따옴표까지 포함하여 아래에 보이는 그대로 정확히 입력합니다:
"Hello,"
텍스트를 따옴표로 감싸면, 여기서처럼 따옴표 안에 포함된 내용을 정확히 출력하라고 ProtoPie에 지시하는 것입니다. 프로그래밍에서는 이를 리터럴 문자열이라고 합니다. 우리는 영어를 쓰므로 이것을 정적 텍스트라고 부르겠습니다. ProtoPie는 이 정적 텍스트를 주황빛을 띤 붉은색으로 표시합니다.
정적 텍스트 뒤에 더 많은 텍스트를 이어 붙이도록
+문자를 입력합니다.
Name 입력 레이어에 입력된 내용을 포함하고 싶습니다. ProtoPie는 입력된 텍스트를 자동으로 레이어의 속성으로 저장합니다. 우리는 이 속성에 수식에서 접근하고 싶습니다. Formula 입력 상자의 오른쪽 끝 근처에 나타나는 ⊕ 아이콘을 클릭합니다. 그러면 Scene의 모든 레이어가 표시됩니다. Name 레이어를 선택합니다.
ProtoPie가 레이어 이름을 초록색으로 강조 표시합니다.
이 레이어의 속성에 접근하려면 점
.문자를 입력합니다. 사용 가능한 모든 속성 목록이 표시됩니다. 아래로 스크롤하여text속성을 선택합니다.
수식을 적용하려면 OK를 클릭합니다.
미리보기로 확인해 보세요. 입력 상자에 이름을 입력하고 Enter를 누릅니다.
잘 되었지만, 아직 완벽하진 않습니다... "Hello,"와 "Jeff" 사이에 공백이 없습니다. ProtoPie에 공백을 추가하라고 말하지 않았기 때문입니다. 수식을 수정해 봅시다.
Text Response에서 Formula 상자를 클릭하여 ∫x 아이콘을 표시합니다.
정적 텍스트 부분을 수정하여 쉼표 뒤, 그리고 닫는 따옴표 앞에 공백을 포함시킵니다. 정적 텍스트를 작성할 때는, 따옴표 안에 포함된 모든 내용, 공백까지도 ProtoPie가 정확히 출력한다는 점을 기억하세요.
∫x 아이콘을 클릭하여 수식을 표시합니다.
이번에는 인사말 끝에 느낌표를 추가해 ProtoPie가 조금 더 반갑게 인사하도록 해봅시다. 추가
+문자를 사용해 더 많은 텍스트 조각을 이어 붙일 수 있습니다. 다음과 같이 수식 끝에 정적 텍스트"!"를 추가합니다:
변경 사항을 적용하려면 OK를 클릭합니다.
다시 미리보기 해봅시다. 이번에는 인사말에 공백이 포함되고 끝에 느낌표가 있어야 합니다.
잘하셨습니다! ProtoPie의 수식은 텍스트 결합에서 끝나지 않습니다. 다음 레슨에서는 수식을 사용해 ProtoPie로 간단한 계산을 해보겠습니다. 그때 뵙겠습니다!
