프로토타이핑 proto.io 다이얼 패드

0~9까지의 숫자 버튼을 탭하면 해당 숫자가 추가되어 출력되는 '다이얼 패드'를 구현해봅니다.

먼저 아래와 같이 Rectangle, Text, Button with Background 등의 라이브러리 아이템을 사용하여 아래와 같은 인터페이스를 만듭니다. 숫자 버튼은 우선 (1) 버튼과 (←) 버튼만 넣습니다. 나머지 숫자 버튼은 (1) 버튼을 복사하여 사용할 것입니다.

<숫자 버튼 제작>

버튼의 문자가 저장될 빈 변수를 작성하기 위해서 상단 메뉴의 (X) Variables를 클릭하여 변수 {passcode}를 생성합니다.

- Name : passcode

- Type : Text

- Value : 빈칸 그대로 둠

- Evaluate : check

(1) 버튼 (dial button 1)을 클릭하고 인터랙션을 다음과 같이 추가합니다.

- Title : 임의

- Trigger : Tap

- Action : Set variable

- Variable Name : passcode (default: empty)

- Value type : Custom value

- New Value : 아래의 자바스크립트 코드 입력 

"{passcode}".replace("undefined", "") + 1

이 코드는 문자형 변수 {passcode}에 + 뒤의 숫자를 붙이는 코드로, 변수가 문자형(Text)인 경우 "{변수}"처럼 쌍따옴표(더블 쿼테이션:double quotation)로 감싸는 것을 잊지 말아야 합니다. replace는 처음에 정의되지 않은 값(default : empty)이 출력되기 때문에 그 부분을 삭제하는 역할을 합니다.

콜백 인터랙션을 추가하여 실제로 Dial Number 의 내용이 변하도록 합니다.

- Action : Change property

- Screen : 현재 스크린

- Item : Dial Number

- Property : Text

- Value type : Read from variable

- Variable name : passcode (default: empty)

프로젝트를 저장하고 프리뷰 화면에서 (1) 버튼을 클릭해봅니다. 여러 번 클릭해보고 숫자가 뒤에 계속해서 붙는지 확인해 봅니다.

<삭제 버튼 제작>

이번에는 삭제 버튼 (←)을 클릭하고 인터랙션을 추가합니다.

기본적인 코드는 숫자 버튼과 다르지 않고 New Value에 들어갈 자바스크립트 코드만 다르기 때문에 (1) 버튼의 인터랙션을 복사해 와서 붙여넣기로 적용한 후 수정합니다.

- Title : delete dial number

- Trigger : Tap

- Action : Set variable

- Variable Name : passcode (default: empty)

- Value type : Custom value

- New Value : 아래의 자바스크립트 코드 입력

"{passcode}".length == 0 || "{passcode}" == "undefined" ? "" : "{passcode}".replace("undefined", "").substr(0, "{passcode}".length-1)

이 코드는 변수 {passcode}의 길이가 0 이거나 비어 있으면, 빈 칸 그대로 두고 그렇지 않으면 {passcode}의 길이를 하나씩 제거하는 코드라고 할 수 있습니다.

프로젝트를 저장하고, 프리뷰를 통해 숫자의 입려과 삭제를 테스트합니다. 아래에서는 (1) 버튼을 8번 누르고(Tap), 그 다음에 (←)버튼을 4번 눌렀습니다.

<나머지 버튼 제작>

(1)버튼을 복사(duplicate)해서 (2)~(0)까지의 버튼을 보기 좋게 배열합니다. 버튼을 복사할 때 마다 인터랙션에 들어가서 자바스크립트 코드 “+ 뒤의 숫자”를 해당 버튼에 맞게 수정하는 것을 잊지 않습니다.

마지막 버튼은 (0)번이므로 10으로 잘못 넣지 않도록 주의합니다.

프로젝트를 저장하고 미리보기로 테스트해 봅니다.

실제로 동작을 시켜보면 어떤 이유에서인지 첫 자리에 “0”이 들어가는 경우, 세 번째 숫자입력과 동시에 “0”이 사라지는 것을 볼 수 있습니다. 정확한 이유는 모르겠지만 아마도 외국의 경우 전화번호를 입력할 때 첫 자리 “0”이 생략되기 때문이 아닌가하고 예상해봅니다...;