프로토타이핑 proto.io 숫자 증가 감소 버튼

<숫자 증가 버튼>

먼저 UI Button과 Text 등의 컴포넌트를 사용하여 아래와 같은 인터페이스를 만듭니다.

이 인터페이스에서는 (+)버튼을 누르면 아래의 숫자가 1씩 증가하고, (-)버튼을 누르면 1씩 감소할 것입니다.

이를 구현하기 위해서는 먼저 증감할 값이 저장될 변수가 필요합니다. 현재 프로젝트에는 그 어떤 변수도 지정되어 있지 않습니다.

먼저 상단 메뉴에서 “(X) Variables”를 클릭합니다.

“+ NEW VARIABLE”을 클릭하고 다음과 같이 새로운 변수를 만듭니다(선언).
- Name : range_var
- Type : Numeric
- Value : 0
- Evaluate : check

Variables 창을 닫고 에디트 화면으로 돌아온 후, (+) 버튼을 클릭하고 인터랙션을 추가합니다.

- Title : inc num
- Trigger : Tap
- Action : Set variable
로 설정한 후 Variable Name을 클릭하면, 미리 만들어 놓은 “range_var (default: 0)” 변수가 풀다운 리스트에 나타납니다.

Variable Name : range_var (default: 0)로 설정한 후 그 아래의 항목들을 설정합니다.
- Value type : Custom value
- New Value : {range_var}+1

즉, 기본 변수 {range_var}에 +1을 더하는 {range_var}+1을 새로운 값으로 한다는 것입니다.

이제 이 새롭게 만들어진 값을 텍스트에 적용하는 인터랙션을 추가하기 위해 Callback을 체크합니다.
그리고 아래와 같이 텍스트를 수정하는 설정을 합니다. 슬라이더를 통해 값을 수정하는 방법((Change property)과 거의 같으며 마지막 Variable name만 이번에 만들어 놓은 “range_var (default: 0)”로 설정하면 됩니다.

프로젝트를 저장하고 프리뷰를 통해 (+) 버튼을 클릭할 때 숫자가 하나씩 늘어나는 것을 확인해봅니다.

<숫자 감소 버튼>

증가하는 기능을 이미 구현하였기 때문에 변수의 계산식만 바꿔주면 손 쉽게 구현할 수 있습니다.
(+) 버튼을 클릭하고, 현재 적용되어 있는 인터랙션 위치에서 마우스 오른 클릭을 하여, Copy interaction을 선택합니다.

(-) 버튼을 클릭하고, 인터랙션을 넣을 위치에서 마우스 오른 클릭을 하여 Paste in Interactions를 선택합니다.

(+) 버튼에 있던 인터랙션이 (-) 버튼에도 적용이 되었습니다.

인터랙션 편집 모드로 들어가서 Title을 “dec num”으로 수정하고 계산식의 “+”를 “-”로 고친 후 인터랙션을 저장합니다.

프로젝트를 저장하고 프리뷰를 통해 숫자의 증감을 테스트합니다.

<숫자의 범위 지정>

현재 증감되는 값은 양수, 음수 무한대라고 볼 수 있습니다. 이 변화하는 값의 범위를 지정해야 할 필요가 있기 때문에 인터랙션을 추가하여 {range_var}의 값의 범위를 정합니다.
먼저 (+)버튼을 클릭하고 인터랙션 편집 모드로 들어갑니다.

두 번째 인터랙션을 활성화하고 하단의 Callback을 체크하여 새로운 콜백 인터랙션을 추가합니다.

변수의 값이 새롭게 정의되기 때문에 Action을 “Set variable”으로 선택합니다.
그리고 먼저 이하의 속성들을 다음과 같이 설정합니다.
- Variable Name : range_var (default: 0)
- Value type : Custom value

이제 가장 중요한 New Value 값을 지정해야 하는데, 변수의 범위를 지정하는 조건문인 “If문”을 돌려야 합니다. 이 부분은 약간의 프로그래밍(자바스크립트) 지식이 있어야 하는 부분입니다.

New Value 란에 아래의 코드를 입력합니다. 입력란이 짧기 때문에 되도록이면 '메모장' 등의 텍스트 편집기에서 타이핑 한 후 복사해서 붙여넣는 것이 안전합니다(한글, 워드 등의 워드프로세서는 사용하지 않습니다).

{range_var}<0 ? 0 : {range_var}>9 ? 9 : {range_var}

이 코드는 {range_var} 변수가 0 보다 작으면 0으로, 9보다 크면 9로 고정한다는 뜻입니다.

값의 범위를 지정하는 인터랙션은 값이 출력되기 전에 동작이 되어야 하기 때문에 인터랙션의 위치를 드래그 & 드롭으로 두 번째 위치로 옮깁니다. 콜백 체크는 자동으로 수정됩니다.

프로젝트를 저장하고 (+) 버튼의 동작과 숫자의 변화를 테스트해 봅니다. 9 이상 숫자가 올라가지 않는 것을 확인할 수 있습니다.

같은 방법으로 (-) 버튼에도 인터랙션을 추가하고 0 이하로 숫자가 내려가지 않는 것을 확인해 봅니다.