1부에서 수식을 사용해 텍스트를 연결하는 방법을 배웠습니다. 이제 더 깊이 들어가 조금 더 복잡한 계산을 해볼 것입니다.
준비물
이 튜토리얼을 따라 하려면 이 예제 Pie를 다운로드한 다음 Studio에서 여세요.
배울 내용
이 튜토리얼을 마치면 다음을 배울 수 있습니다:
수학 계산을 수행하는 Formula를 만드는 방법
Functions 소개
완료 시간: 15분 이하
텍스트에서 수학 계산으로
같은 Pie를 사용해 Scene 3 - Calculate를 여세요. 이 Scene에는 두 개의 입력 필드와 네 개의 버튼이 있습니다. 우리가 원하는 것은 사용자가 각 필드에 숫자를 입력한 다음, 수행하고 싶은 계산을 선택하는 것입니다. 여기서는 덧셈, 뺄셈, 곱셈 또는 나눗셈입니다. Pie가 원하는 계산을 수행한 뒤 결과를 버튼 아래에 표시하도록 할 것입니다.
Add 레이어에 Tap 트리거를 추가합니다.
Result 레이어에 Text 응답을 추가합니다.
다시 한 번 아직 알 수 없는 입력값을 다루고 있으므로 Formula를 사용하겠습니다. Content. 아래 드롭다운에서 Formula를 선택하세요.
그 아래 상자를 클릭하면 익숙한 ∫x 아이콘이 보일 것입니다. 이를 클릭해 Formula 입력 상자를 펼치세요.
이전처럼 Formula 상자 오른쪽 끝 근처에 나타나는 ⊕ 아이콘을 클릭하고
Number 1레이어를 선택하세요.
이 레이어의
text속성에 접근하고 싶습니다. 점.문자를 입력하면Number 1레이어의 모든 속성이 표시됩니다. 아래로 스크롤해 text.를 선택하세요.+를 입력해 ProtoPie에 덧셈을 하겠다고 알려주세요. ⊕ 아이콘을 다시 클릭한 다음 이번에는Number 2레이어를 선택하세요..을 입력하고text속성을 선택하세요.
OK를 클릭해 Formula를 적용하세요.
이제 미리 보기를 해봅시다. 두 입력 필드에 숫자를 입력하고 + 동작 버튼을 클릭하세요.
음... 작동하지 않네요, 그렇죠? 두 숫자를 더해 합계를 보여주는 대신 ProtoPie는 두 숫자를 하나로 이어 붙였습니다. 제 예시에서는 5 + 6이 11이 아니라 56이 나왔습니다!
왜 이런 일이 생겼을까요?
1부에서 기억하실 수 있듯이, Formula에서 + 문자는 ProtoPie에 텍스트를 이어 붙이고 싶다고 알려주는 데 사용되었습니다. 헷갈리게도, 두 숫자를 산술적으로 더하고 싶을 때도 같은 문자가 사용됩니다. ProtoPie는 어떤 작업을 하려는지 똑똑하게 추측하려고 하지만, 이 경우에는 잘못 판단했습니다. 이름에서 짐작할 수 있듯이 ProtoPie는 Number 1과 Number 2 필드의 text 속성을 숫자가 아닌 텍스트로 취급하고 있으며, 따라서 두 개의 텍스트 조각을 이어 붙이려는 것으로 간주합니다.
이를 해결하려면 ProtoPie가 text 속성을 어떻게 처리해야 하는지 명시적으로 알려주면 됩니다. 이를 위해 Function이라는 것을 사용할 수 있습니다. Function은 미리 정의된 지시사항 집합을 뜻하는 멋진 이름입니다. 우리가 원하는 것은 ProtoPie에 text 속성을 숫자로 처리하라고 알려주는 것입니다.
∫x 아이콘을 클릭해 Formula를 수정하세요. Formula 입력 상자 오른쪽 끝에 있는
?아이콘을 클릭해 브라우저에서 Formula 문서를 여세요.
왼쪽 패널에서 Formulas → Functions.로 이동하세요.
여기에는 ProtoPie에서 사용할 수 있는 모든 Functions가 나와 있습니다. 이 튜토리얼을 마치면, Formulas에서 사용할 수 있는 모든 Functions를 한 번씩 살펴보세요.
아래로 스크롤해 Type Conversion 섹션에서
number(source:TEXT)함수를 찾으세요.
모든 함수는 비슷한 형식을 가집니다:
함수의 이름, 여기서는
number함수에 입력으로 전달하는 하나 이상의 매개변수이며, 대괄호로 감싸져 있습니다(예:
(source:TEXT)). 이는 이 함수가 하나의 매개변수를 받으며, 그 매개변수는 텍스트 형식이어야 한다는 뜻입니다. 함수가 여러 매개변수를 받는 경우 쉼표로 구분합니다(예:format(value:NUMBER,format:TEXT)는 숫자 하나와 텍스트 하나, 총 두 개의 매개변수를 받습니다).함수가 실행된 뒤 어떤 종류의 정보를 돌려주는지(예:
-> NUMBER).
우리는 텍스트를 숫자로 바꾸고 싶으므로, 이 함수는 우리가 필요한 일을 정확히 해줍니다! 텍스트를 입력받아 숫자로 변환합니다.
이 방식으로 Formula를 수정하세요.
다시 미리 보기를 해보고, 문제가 해결되었는지 확인해봅시다.
빙고!
이제 남은 버튼들에 대해서도 비슷한 상호작용을 만들기만 하면 됩니다. 앞의 모든 단계를 그대로 반복해도 되지만, 더 빠른 방법은 이미 해둔 작업을 복제한 뒤 특정 동작에 맞게 수정하는 것입니다.
Tap 트리거를 클릭해 선택한 뒤, 마우스 오른쪽 버튼을 클릭하고 Duplicate를 선택하세요.
💡 팁: Mac에서는 cmd + D, Windows에서는 ctrl + D를 누르면 같은 작업이 됩니다.
다음으로 넘어가기 전에, 이제 이름이 같은 Tap Trigger가 두 개 있습니다. 더 이해하기 쉽도록 이름을 바꿔봅시다. Trigger의 레이블을 두 번 클릭해 첫 번째 것은 Tap Add로, 두 번째 것은 Tap Subtract로 바꾸세요.
복제한 Trigger를 수정해 Subtract 버튼과 함께 작동하도록 하고, 뺄셈 동작을 수행하게 해봅시다.
Tap Subtract Trigger를 클릭해 선택하고, Subtract 레이어와 다시 연결하세요.
그 아래의 Text Response를 클릭하고, 덧셈 대신 뺄셈을 하도록 Formula를 수정하세요.
+문자를-로 바꾸면 됩니다.
곱셈과 나눗셈 동작도 이와 동일하게 두 번 더 해보세요. 이제 키보드에 곱하기 문자가 없고 나누기 문자도 없다는 것을 눈치채셨을 겁니다. 프로그래머들은 오래전에 곱셈은 *로, 나눗셈은 /로 표현하는 방식으로 이 문제를 해결했습니다. Formula는 각각 다음과 같아야 합니다:
Formula: 곱셈
Formula: 나눗셈
미리 보기를 해보면, 숫자에 대해 네 가지 동작 모두를 실행할 수 있어야 합니다. 숫자를 다른 값으로 바꾸더라도 수학은 여전히 잘 작동할 것입니다. 이것이 바로 Formula를 사용하는 힘입니다!
공백에 대한 참고
위의 Formula에서는 연산자(+, -, *, /는 모두 연산자라고 합니다) 주변에 공백을 사용하지 않았습니다. Formula가 더 복잡해질수록 읽기 어려워질 수 있습니다. 다음과 같은 Formula를 이렇게 다시 쓰는 것은 전혀 문제 없습니다:
이렇게요(* 문자 주변의 공백에 주목하세요):
둘 다 완전히 같은 일을 하지만, 두 번째 것이 조금 더 읽기 쉽습니다. 사실 공백은 다른 많은 곳에도 넣을 수 있습니다. 예를 들어 이것도 문제없습니다:
ProtoPie는 이것이 무엇을 뜻하는지도 꽤 똑똑하게 알아냅니다:
하지만 공백이 중요한 경우도 몇 군데 있습니다. 우리는 이미 "Hello,"와 "Hello, "의 차이를 다뤘습니다. 또한 다음처럼 해보면:
ProtoPie는 이것을 좋아하지 않을 것입니다. 변수 이름에는 공백이 들어갈 수 없습니다. ProtoPie는 이를 세 개의 서로 다른 변수를 사용하려는 것으로 해석하지만, 그 어떤 것도 찾을 수 없습니다. ProtoPie는 문제 구간 아래에 빨간 지그재그 밑줄을 그어 도움을 주려 합니다. Formula에서 문제가 생기면, 빨간 지그재그 밑줄을 확인하는 것이 가장 먼저 할 일입니다.
"자, 됐어요! " + Type of Pie``.text + " Pie!"
이제 Formula를 사용해 Pie를 얼마나 생생하게 만들 수 있는지 잘 이해하셨을 것입니다. 정적인 값에만 머물 필요는 없습니다. ProtoPie의 거의 어디에서나 Formula를 사용할 수 있기 때문입니다. ∫x 아이콘만 찾으면 됩니다. Formula를 활용해 경험을 한 단계 더 끌어올릴 수 있는 여러 방법을 직접 탐색해보세요!
관련 콘텐츠
롱 프레스와 수식을 사용해 확장되는 이미지 오버레이 만들기 이 튜토리얼에서는 관련 ProtoPie formulas와 triggers를 사용해 확장되는 이미지 미리보기를 만드는 방법을 배웁니다.
ProtoPie의 Formula 기능으로 입력 스테퍼 프로토타입 만들기 ProtoPie로 입력 스테퍼를 손쉽게 프로토타이핑하는 방법을 배워보세요. 이를 위해 필요한 모든 요소, formulas, 조건을 단계별로 살펴봅니다.
스크롤에 반응하는 고정 헤더를 만드는 가장 쉬운 방법 스크롤 방향에 따라 앱의 헤더를 표시하거나 숨기고 싶었던 적이 있나요? 간단한 조건과 formula를 사용해 이를 구현하는 방법을 소개합니다.
