brunch

매거진 ProtoPie School

라이킷 7 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by ProtoPie Nov 22. 2022

[ProtoPie School] Formula 기초2

Formula를 사용하여 다양한 연산을 진행해봅시다.

▶ 이전 학습내용이 궁금하다면? 여기를 클릭!
▶ 어떤 내용을 배울지 한눈에 보고 싶다면? 여기를 클릭!

지난 아티클에서는 Formula를 사용하여 텍스트를 결합하는 방법을 배워보았는데요. 이번에는 좀 더 복합적인 계산을 하는 방법을 살펴보겠습니다.

시작하기 전에

이번 튜토리얼을 따라가기 위해서는, 아래 샘플 Pie 파일을 다운로드하고 Studio에서 파일을 엽니다.

Formula 기본 Pie 다운로드

학습할 내용

학습 목표

▶ Formula를 사용하여 수학적 계산을 수행하는 방법 알아보기

▶ Functions 알아보기

소요 예정 시간: ≤15분

텍스트에서 수학적 계산까지

동일한 Pie를 사용하여 Scene 3 - Calculate을 엽니다 . 이 Scene에는 두 개의 입력 필드와 네 개의 버튼이 있습니다. 각 필드에 숫자를 입력 한 다음, 덧셈, 뺄셈, 곱셈, 나눗셈 등 원하는 계산을 해 보겠습니다. 그리고 Pie가 버튼 아래에 수식에 대한 결과를 표시하도록 합니다.

Add 레이어에 Tap trigger를 추가합니다.

Result 레이어에 Text response를 추가합니다.

지난 번과 마찬가지로 임의의 입력된 정보로 작업하고 있기 때문에, Formula를 사용하겠습니다.

Content 아래의 드롭다운에서 Formula를 선택합니다. 하단 상자를 클릭하면 ∫x 아이콘이 표시됩니다. Formula 입력 상자를 확장하려면 아이콘을 클릭하세요.
이전과 마찬가지로 수식 상자의 오른쪽 끝 근처에 나타나는 ⊕ 아이콘을 클릭하고 Number 1 레이어를 선택합니다.

이 레이어의 text 속성에 액세스해봅시다.

점을 입력하여 Number 1 레이어의 모든 속성을 표시하고, 아래로 스크롤하여 text를 선택합니다.
+ 를 입력하여 ProtoPie에게 추가 작업 수행을 알립니다.
⊕ 아이콘을 다시 클릭하고 이번에는 Number 2 레이어를 선택합니한 다음, 점을 입력하고 text 속성을 선택합니다.

OK를 클릭하여 수식을 커밋합니다.
지금까지 설정한 내용을 확인할 차례입니다. 두 입력 필드에 숫자를 입력하고 + 버튼을 클릭합니다.

앗.. 제대로 작동하지 않은 것 같죠? 하나 또는 두 개의 숫자를 더하고 합계를 제공하는 대신 두 숫자가 결합이 되었네요. 즉, 5 + 6은 11이 아니라 56이 되었습니다.

왜 이런 일이 발생했나요?

Part 1에서 말했듯, Formula의 + 문자는 텍스트를 결합하는데 사용됩니다. 그런데 혼란스럽게도, 두 숫자를 더하고 싶을 때도 사용됩니다. ProtoPie는 지능적으로 어떤 유형의 작업을 수행할지 추측하려고 시도하지만, 이 경우 잘못된 작업을 진행했습니다. 이름에서 알 수 있듯이 ProtoPie는 Number 1 및 Number 2필드의 텍스트 속성을 숫자가 아닌 text로 처리 하므로, 두 텍스트를 함께 결합한다고 인식합니다.
이런 경우, text 속성을 처리하는 방법을 명시해주면 이 문제를 해결할 수 있겠죠. 이를 위해 Function 이라는 것을 사용할 수 있습니다. Function는 기 정의된 명령 그룹을 일컫습니다. 여기서는text를 숫자로 처리해야 함을 알려주는 속성이 필요합니다.

∫x 아이콘을 클릭하여 수식을 수정합니다. Formula 입력 상자의 오른쪽 끝에 있는 ? 아이콘을 클릭하여 브라우저에서 수식에 대한 설명서를 엽니다.

왼쪽 패널에서 Formulas → Functions로 이동합니다.

ProtoPie 에서 사용 가능한 Function은 위와 같이 다양합니다. 이번 아티클 완독 후, 잠시 시간을 내어 Formula에서 사용할 수 있는 모든 Function을 살펴보세요.
Type Conversion 섹션까지 아래로 스크롤하여 number(source:TEXT) function을 찾습니다.

모든 function은 아래 형식을 따릅니다.

▶ Function의 이름(여기서는 number)
▶ 대괄호 안에 Function에 입력으로 제공하는 하나 이상의 매개 변수(예: (source: TEXT)).
이는 해당 function이 하나의 텍스트 형식의 매개 변수를 사용한다는 의미입니다. Function에 복수의 매개 변수가 사용되는 경우, 쉼표로 구분됩니다. (예: format(value: NUMBER,format:TEXT) 는 숫자와 일부 텍스트의 두 매개 변수를 사용합니다).
▶ Function 실행 후 다시 제공될 정보 유형 (예 : -> NUMBER).

여기서 텍스트를 숫자로 변환해야 하는데, 이 function 에서는 해당 작업을 하기 위해 필요한 것들이 다 있죠? 이제 텍스트를 가져와 숫자로 변환하기만 하면 됩니다.

위와 같이 수식을 수정합니다.
이것을 다시 미리보고 문제가 해결되었는지 확인해봅시다.

정답!

위에 보이듯 원하는 결과가 나왔죠?
이제 나머지 버튼에 대해 유사한 인터랙션을 수행해 보겠습니다. 처음부터 모든 단계를 다시 반복 할 수 있지만, 이미 수행 한 작업을 복제하고 특정 작업에 맞게 수정하면 작업을 더 빠르게 진행할 수 있겠죠?

Tap trigger 클릭 후, 마우스 오른쪽 단추를 클릭하고 Duplicate을 선택하세요.

프로 팁 : Mac의 cmd + D 또는 Windows의 ctrl + D를 누르면 동일한 작업을 할 수 있습니다.

계속 진행하기 전, 동일한 이름의 두 개의 Tap trigger가 있는데, 각자 이해하기 쉽도록 이름을 바꾸겠습니다.
각 Trigger의 레이블을 두 번 클릭하여 첫 번째 레이블의 이름을 Tap Add로,
두 번째 레이블의 이름을 Tap Subtract로 변경합니다.

중복된 Trigger를 빼기 버튼으로 수정하고, 빼기 작업을 수행해 봅시다.

Tap Subtract Trigger를 클릭하고, Subtract 레이어와 다시 연결합니다.

그 아래에 있는 Text Response를 클릭하고 formula를 더하기에서 빼기로 수정해 봅시다. + 문자를 -로 변경합니다.

곱셈 및 나누기를 실행하기 위해 동일한 작업을 두번 더 실행합니다. 지금쯤이면 키보드에는 곱셈 혹은 나눗셈을 위한 특정 키가 없음을 아실텐데요. 오래 전 프로그래머는 *를 사용하여 곱셈을, /를 사용하여 나눗셈을 진행했습니다.

진행 시 Formula는 아래와 같습니다.

Formula: 곱셈

Formula: 나눗셈

미리보기를 통해 네 가지 계산을 모두 실행할 수 있음을 확인할 수 있으며, 숫자를 변경하더라도 계산은 동일하게 진행됩니다. Formula의 강력함, 참으로 놀랍죠?

공백에 대한 메모

위 수식에서는 연산자 주위에 공백이 없었습니다. 여기서 연산자란, +, -, *, 및 /와 같은 부호들입니다. 수식이 복잡해지면 읽기가 더 어려워질 수 있는데요. 때문에 아래와 같이 수식을 수정해도 전혀 문제가 되지 않습니다.

아래와 같이 말이죠. (* 문자 주위의 공백에 유의하세요):

둘 다 같은 결과를 가져다 주지만, 두번째 수식이 좀더 가독성이 좋습니다. 실제로 다른 많은 위치에 공백을 추가 할 수 있습니다. 예를 들어 아래와 같은 수식에는 문제가 없습니다.

아래와 같이 더 많은 공백이 추가되어도 수식을 인식할 수 있습니다.

그러나 공백이 중요한 몇 군데가 있는데요. 우리는 이미 "Hello" 와 "Hello "의 차이점에 대해 살펴보았죠.

아래 작업을 실행해 봅시다.

ProtoPie에서 변수 이름에는 공백을 사용할 수 없습니다. 따라서 위와 같은 수식은 원하는 결과를 도출할 수 없습니다. 세 가지 다른 변수를 사용하려고 하나, 그 중 어느 것도 찾을 수 없다고 인식하기 때문입니다. 이런 경우, ProtoPie는 빨간색 지그재그로 문제 영역에 밑줄을 그어 도움을 제공합니다. 수식에 문제가 발생했다면, 빨간 밑줄에 있는 내용을 확인하여 문제 해결을 시작해 보세요.

Formula로 더욱 고도화된 Pie를 생성해 보세요!

ProtoPie에 탑재된 수식을 사용하여 더욱 현실적인 Pie를 구현하는 방법에 대해 알아보았습니다. Formula는 ∫x 아이콘 하나면 ProtoPie 어디에서든 찾을 수 있기 때문에, 반드시 고정값을 추가할 필요가 없습니다. Formula를 이용해 사용자 경험을 한 층 업그레이드 하는 방법에 대해 더 자세히 알아보세요!