프로토파이로 타이머 만들기
3.91버전 업데이트 간단 사용기
프로토파이가 3.9버전으로 업데이트 되었고, 바로 다음날 3.91버전으로 또 한 번 올라갔다. 변수와 수식 입력이 가능하다는 이야기에 괜히 반갑기도 하고 기대도 되어서 가볍게 한 번 살펴보았다. (요즘 왠지 이것저것 간단 리뷰 위주로 글을 쓰게 되는 것 같은 느낌적인 느낌 ;;;;;)
타이머 만들기
예전에 개인 작업으로 프레이머를 사용해 음악 플레이어를 만들어 본 적이 있었는데, 당시에 골칫거리는 재생 시간을 표시하는 것이었다. 1초 간격으로 숫자를 증감시키는 것은 쉬웠으나, 그 숫자를 시간 포멧으로 변경하기 위해서 구글신께 도움을 간청했던 기억이 있다.
약간의 수식과 조건문이 필요한 작업이었고, 이것을 이번에 업데이트 된 프로토파이로 만들어 볼 수 있을까? 하는 생각이 들었다.
우선 텍스트 레이어에 숫자 0을 써서 넣고, 리셋 버튼과 시작 버튼을 추가한다. 시작 버튼을 눌렀을 때 숫자가 1씩 증가하도록 하려면, 수식 입력과 반복 설정이 필요하다.
우측 패널에서 content > Formula 를 선택하면 전에 없던 새로운 필드가 나타난다. 여기서 수식 입력이 가능하다.
텍스트 레이어에 입력한 값은 문자로 인식하기 때문에 우선 문자를 숫자로 변환한 후에 1을 더해주고, 이것을 원하는 시간 간격만큼 무한히 반복하게 하면 된다.
문자를 숫자로 변환하기 위해서는 아래와 같이 입력해 준다.
number(`레이어`.text)
Variable
증가하는 숫자를 시, 분, 초로 쪼개기 위해서는 변수를 활용할 수 있다. 좌측 하단에 variable을 추가하면 우측 패널에서 숫자, 문자, 컬러를 선택하여 변수로 추가할 수 있다.
변수를 숫자로 쓰더라도 시, 분, 초를 쪼개는 데에는 별 무리가 없지만, hh:mm:ss 타입으로 만들기 위해서 문자를 쓰기로 한다. (변수를 숫자로 할 경우 h:m:s 로 표시된다)
Detect & Assign
이번에 새로 추가된 detect 트리거를 사용해 증가하는 숫자를 계속해서 체크해가며 시, 분, 초 쪼개기를 할 수 있다.
우선 detect 트리거를 선택하고, 레이어의 text를 선택한다.
그리고 assign 리스폰스를 추가하여 방금 만든 변수들을 활용한 수식을 입력하도록 한다. 우선 첫번째로 ‘시간’ 쪼개기
시간은 증가하는 숫자를 1시간(3600초)으로 나눈 다음 소수점 이하를 버리면 된다.
floor(`레이어`.text / 3600)
‘분' 쪼개기
분은 증가하는 숫자에서 시간으로 떨어지는 숫자를 빼고, 1분(60초)으로 나눈 다음 소수점 이하를 버리면 된다.
floor((`레이어'.text - (변수'시간' * 3600)) / 60)
‘초' 쪼개기
초는 증가하는 숫자에서 시간으로 떨어지는 숫자와 분으로 떨어지는 숫자를 빼면 된다.
`레이어`.text - (변수'시간' * 3600) - (변수'분' * 60) 
이제 variable을 화면에 표시해서 수식이 제대로 입력되었는지 확인해보자. 좌측 하단에서 추가한 각 변수 옆에 벌레 아이콘을 클릭하면 변수들이 화면에 표시된다. 아마도 debug의 bug에서 따온 아이콘인듯?
Condition
처음 변수를 만들었을 때, hh:mm:ss 타입을 위해 문자를 선택했었다. hh:mm:ss 타입이란 시, 분, 초가 10보다 작을 때, 01, 02, 03 … 으로 표시하는 방식이다. 이를 위해 condition을 활용해 또 한 번 수식을 입력한다.
시, 분, 초를 쪼개기 위해 입력했던 수식들을 각각 조건으로 입력하고 10보다 작은 경우에 각 변수들 앞에 문자 “0” 을 추가하도록 하면 된다.
Condition: 시
floor(`레이어`.text / 3600) < 10Assign: 변수'시간'
“0” + 변수'시간'Condition: 분
floor((‘레이어'.text - (변수'시간' * 3600)) / 60)Assign: 변수'분'
“0” + 변수'분'Condition: 초
`레이어`.text - (변수'시간' * 3600) - (변수'분' * 60)Assign: 변수'초'
“0” + 변수'초'
hh:mm:ss
이제 변수를 통해 계산한 시간 포멧을 텍스트로 표시해 보자. 일정 간격으로 증가하는 숫자는 잠시 숨겨두고, 결과값을 표시하기 위한 텍스트 레이어를 추가한다. hh:mm:ss 타입으로 표시하기 위해 기본 텍스트는 “00:00:00”을 입력했다.
그런 다음, detect 트리거를 통해 증가하는 숫자를 체크하면서, text 리스폰스를 통해 열심히 시, 분, 초 쪼개기를 하고 있는 변수들을 결과 텍스트에 넣어주면 된다.
변수`시간` + “:” + 변수`분` + “:” + 변수`초`
여기까지 하고 나면 프리뷰에서 드디어 우리가 흔히 보던 타이머의 숫자를 확인할 수 있다. 흡족해하면서 셀프 쓰담 다섯 번 정도 해준다.
나머지 기능들
핵심은 숫자를 시간 포멧으로 변환하는 것이어서, 이미 원하는 기능은 모두 확인했다. 프로토파이 짱짱맨!!! 하지만 어차피 타이머를 만들기로 한 거, 끝까지 해보기로 한다.
시작 버튼을 누르고 나면, 해당 버튼을 정지 버튼으로 바꾸도록 한다. 처음 만든 tap 트리거에 color, text 리스폰스를 추가하여 버튼의 색상과 레이블을 변경할 수 있다.
그리고 만약 정지 버튼으로 변경된 경우에 버튼을 탭하면 타이머가 멈추도록 한다. condition을 추가한 후, 버튼 색상이 빨간색인 경우에 아까 숨겨두었던 레이어의 숫자 증가를 멈추고, 버튼 색상과 레이블을 원래대로 되돌린다.
리셋 버튼을 탭하면 타이머를 멈추고 초기 상태로 되돌리도록 한다. tap 트리거를 추가한 후, 정지 버튼을 탭하는 경우와 마찬가지로 설정하고, 숨겨둔 레이어의 텍스트를 “0”으로, 결과값 레이어의 텍스트를 “00:00:00”으로 변경한다.
그간 프레이머를 통해 코드 기반의 프로토타이핑만 경험하다가 프로토파이의 트리거/리스폰스 + 변수/수식 방식을 접해보니 신선한 충격으로 다가왔다. 복잡한 인터랙션을 생각보다 간단하게 게다가 몹시 리얼하게(!) 만들 수 있었다. 특히 이번에 추가된 변수와 수식은 여러모로 유용하게 쓰일 것 같다.
항상 좋은 제품을 만들기 위해 애쓰시는 스튜디오시드 여러분들의 수고에 정말정말 고맙다는 말씀을 드리며.
fin.
타이머의 자세한 사항은 아래 링크 참고 바랍니다.
겸사겸사 추가로 숫자를 입력 받아서 시간 포멧으로 변환하는 간단한 변환기를 만들어 보았습니다.
