프로토파이 Advanced 2.
변수와 함수
언제까지 넘겨짚어야 하나
지난 번에 살펴보았던 조건부 인터랙션을 구현할 때에는 리스폰스가 실행되는 구간이나 특정 기준값을 지정해야 한다. 하지만 그때마다 어림 짐작으로 숫자를 입력하고, 프리뷰로 확인하고, 다시 숫자를 조정하고… 이런 과정을 반복하기 일쑤였다.
조금 더 우아한 방법은 없을까 고민하던 찰나에 프로토파이 3.9 버전 업데이트에서 드디어 Variable과 Formula가 등장했다. 이 두 가지를 조합하면 특정 오브젝트의 상태값을 지속적으로 확인할 수 있어 조건부 인터랙션의 범위나 기준값을 정하는 데에 유용하게 활용할 수 있다.
동적인 상태값 확인하기
오브젝트의 상태값을 그때 그때 읽어 오려면 일단 변수를 추가해야 한다. 좌측 레이어 패널 하단에 있는 Variable의 + 버튼을 눌러 변수를 추가한다. 추가하기 전에는 해당 변수를 모든 씬에서 사용할 지, 현재 씬에서만 사용할 지를 선택할 수 있으며, 추가한 후에는 우측 패널의 상세 설정에서 해당 변수가 숫자, 문자, 색상 중 어떤 형식의 값을 사용할 지 선택할 수 있다.
변수에 할당된 값을 브리뷰에 표시하려면 Variable 목록에서 원하는 변수명 우측에 있는 아이콘을 누르면 된다. 아무리 보아도 디버깅에서 따온 아이콘 모양임에 틀림없다. 🐞
변수를 추가하고 나서는 Detect 트리거를 추가하고 확인할 오브젝트와 속성을 선택한다. 그 다음 Assign 리스폰스를 추가하면 되는데, 여기서는 타겟 오브젝트가 아닌 방금 만들었던 변수를 타겟으로 선택한다.
그리고 또 하나 새롭게 등장하는 것이 바로 Fomula 이다. 비어있는 입력창을 보고 무엇을 입력해야 할 지 몰라 당황스러울 수 있겠지만, 망설이지 말고 입력창을 선택해 보자. 그러면 우측에 𝑓𝑥 버튼이 나타난다. 이것은 함수를 쉽게 입력할 수 있도록 도와주는 확장 기능이라고 할 수 있다. 𝑓𝑥 버튼을 눌러보면 또 하나의 입력창이 나타나는데, 여기서 + 버튼을 통해 이미 생성한 변수나 오브젝트를 간편하게 선택할 수 있다.
설명이 길어져서 뭔가 어렵고 복잡할 것 같지만, 낯선 개념이 등장해서 그리 느껴지는 것일 뿐, 실제로 사용해보면 어렵지 않게 익숙해질 것이다. 가로 방향으로 드래그 하는 오브젝트 A의 x값을 실시간으로 확인하는 과정을 예로 들어 보면 다음과 같다.
1. 변수 v 추가하고 화면에 표시
2. Detect 트리거 추가하고 A의 x 값을 참조하도록 설정
3. Assign 리스폰스 추가하고 변수 v를 선택한 후, Fomula에서 A.x 선택
위의 방법을 사용하면 지난 차수에 만들었던 조건부 인터랙션에서의 기준값도 쉽게 확인할 수 있다. 변수에 스크롤 컨테이너의 스크롤 값을 지속적으로 할당하는 것이다.
가변적인 수치 입력하기
이외에도 Formula를 활용하는 대표적인 사례가 있다. 탭 메뉴 A, B, C가 있다고 가정해 보자. A의 위치는 x: 0, B의 위치는 x: 100, C의 위치는 x: 200 이다. 그리고 각 메뉴를 탭 하면, 인디케이터가 각각의 x값으로 이동한다. (move to x: 0, 100, 200)
여기까지는 아무런 문제가 없다. 하지만 불가피하게 메뉴 B, C의 순서를 바꿔야 하는 상황이 생긴다면, 이 때에도 인디케이터가 제대로 작동할 수 있을까? 순서를 변경했기 때문에 B의 위치는 x: 200, C의 위치는 x: 100 이 된다. 하지만 인디케이터는 B를 탭했을 때 x: 100으로, C를 탭했을 때 x: 200으로 이동하게 되어 선택한 메뉴를 제대로 표시해 줄 수 없다.
이것은 리스폰스에 절대적인 수치값을 입력했기 때문에 발생하는 문제이며, Formula를 통해 해결할 수 있다. 각 메뉴에 대한 리스폰스에서 move to에 x의 수치값 대신, A.x/B.x/C.x를 입력한다. 이렇게 하면 메뉴의 위치가 어디에 있든 인디케이터는 반드시 선택한 메뉴의 위치로 이동할 수 있다.
다양한 활용 사례
대표적인 사례들을 설명했지만, 그 밖에도 Formula를 활용하는 방법은 무궁무진하다. 트리거를 입력할 때마다 일정한 값을 더하거나 뺄 수도 있고, 메모 앱처럼 입력한 텍스트를 목록에 계속 추가할 수도 있고, 수식을 통해 비선형적인 움직임을 만들 수도 있으며, 터치 가속도를 측정해서 왼손/오른손 여부를 예측하는 데 활용할 수도 있다. 자유롭게 상상할수록 활용법은 더욱 다양하게 변주될 것이다.
새삼스레 이제와서 국영수
어떤 함수를 써야할 지 망설여진다면 우선 프로토파이 홈페이지를 찾아가 보자.
하지만 여기서 설명하는 내용들은 어디까지나 기본적인 사용법이므로 원하는 인터랙션을 구현하기 위한 답을 제시해주지 못할 수도 있다. 이럴 때 필요한 것이 바로 국영수(!)가 아닐까?
우리같은 코알못(코딩을 알지 못하는)에게 프로토파이의 Variable과 Formula는 ‘최소한의 코딩, 혹은 코딩의 인터페이스화’라고 할 수 있으므로, 수학적인 감각이 있다면 조금 더 수월하게 활용할 수 있을 것이다. 그리고 구글신께 영어로 질문하면 항상 답을 주시기 때문에 자주 활용하도록 하자.
아래 예시는 타이머를 만들기 위해 숫자를 시간으로 변환하는 방법을 검색했던 내용이다.
“how to convert number to time javascript”
Ready Set Go
단기간의 스터디를 진행하면서 참여자 모두가 학습한 툴을 능숙하게 다룰 수 있도록 하기는 쉽지 않다. 특히나 회사에서 내부적으로 진행하는 스터디라면 대체로는 불가능 하다고 보는 게 맞을 것이다. 업무와 미팅이라는 변수는 의도했거나 예상한대로 할당되지 않는 경우가 많다.
하지만 분명한 것은 ‘이렇게도 할 수 있구나, 한 번 해봐야지’ 정도로 최소한의 의욕은 불러일으킬 수 있었다는 사실이다. 스터디에 참여하지는 않았지만 뒤늦게 호기심이 생겨 스터디 자료를 보면서 스스로 학습하는 분도 있었다.
프로토파이 스터디 시리즈를 쓰게 된 이유도 여기에 있다. 처음에는 복습을 원하는 팀원들을 위해 시작했지만, 지금은 조금 더 많은 사람들을 출발선으로 데려올 수 있지 않을까 하는 기대도 갖고 있다.
자, 그럼 출발선에서 한 걸음 앞으로 나가려는 분들을 위해 마지막 과제를 공유하며 이쯤에서 스터디를 갈무리 하려 한다. 모두들 즐거운 프로토타이핑 하시길. 🤟
