프로토파이(Protopie) - 01.토글(Toggle)로 Condition 이해하기

 

---

Condition

Range / Chain / Condition을 이용하면, 조건부 인터랙션을 구현할 수 있다. 그중 Condition은 특정값을 기준으로, 조건부 리스폰스를 실행시킬 수 있다. 아래와 같이 'a초과, a이상, a미만, a이하, a와 같다, a와 같지 않다'의 조건 설정이 가능하다. 기준이 되는 a는 오브젝트의 속성 값과 함수, 그리고 숫자를 추가할 수 있다.

 

 

 

 

 

---

01

토글의 기본 요소인 Oval와 Rectangle를 생성하고, Container로 그룹핑한다.

 

 

 

 

 

02

토글버튼은 Tab 했을 때 이루어지는 인터랙션이기 때문에, Oval와 Rectangle로 구성된 Container에 Tab 트리거를 추가한다.

 

 

 

 

 

03

토글의 상태는 On과 Off 두 가지이기 때문에, 두 개의 Condition 설정이 필요하다.

먼저 Off의 조건을 설정하기위해, Tab 하단의 + 버튼을 눌러서 'Condition'을 추가한다. 이때, 고려되어야 할 것은 다음과 같이 두 가지다.

 

- 1. Oval의 위치가 변경되어야 한다.

- 2. Background의 컬러가 변경되어야 한다.

 

 

첫 번째 조건인 'Oval의 위치 변경'을 충족하기 위해, Oval에 Move 트리거를 추가한다. Off 되어있을 경우, 왼쪽으로 Oval가 이동해야 하므로, 그에 맞게 x값을 설정한다. 딜레이나 반복 설정은 필요 없으므로, 제외한다.

 

 

두 번째 조건인 'Background 컬러 변경'을 충족하기 위해, Rectangle에 Color 트리거를 추가한다. Off 상태의 Background를 #272A 31로 설정했다.

 

 

그다음, 가장 중요한 Condition을 설정한다. 토글의 On 상태일 경우 Oval의 x값이 56이므로, Oval의 x가 10과 같지 않을 때 (즉, On일 경우를 말한다.) 위와 같은 변화가 일어나야 한다. 따라서 Condition의 설정은 'Oval의 x가 10과 같지 않다.'가 된다. 이 개념이 헷갈릴 수 있는데, Condition이 일어나기 직전의 상태를 고려한다고 생각하면 쉬워진다.

 

 

 

 

 

04

다음으로 On의 조건을 설정하기 위해, Tab 하단의 + 버튼을 눌러서 'Condition'을 또 하나 추가한다. 이때도, 고려되어야 할 것은 Off의 상태와 동일하게 두 가지이다.

 

- 1. Oval의 위치가 변경되어야 한다.

- 2. Background의 컬러가 변경되어야 한다.

 

 

위와 같이 위치와 컬러에 대한 트리거가 설정되었다면, Condition을 설정해야 한다. 토글의 Off 상태일 경우 Oval의 x값이 10이므로, Oval의 x가 10과 같을 때 (즉, Off일 경우를 말한다.) 위와 같은 변화가 일어나야 한다.따라서 Condition의 설정은 'Oval의 x가 10과 같다.'가 된다.

 

 

 

 

 

이 모든 것이 설정되었다면, Preview로 아래와 같은 인터랙션을 확인할 수 있다. (처음에 Condition 설정의 개념이 이해되지 않아서 헤매다가, 인터랙션이 이루어지는 것을 보고 감동의 눈물을 흘렸다.)

 

 

 

 

 

---

결론

Condition은 '트리거를 하는 순간, 하위의 리스펀스들이 실행되는 조건'이다. 복수의 조건 설정도 가능하며, 조건에 따른 분기 처리된 인터랙션을 제작함에 있어서 활용도가 높다. 개념을 적용해서 응용하기가 생각보다는 어려울 것 같다. 다양한 기본 요소들의 인터랙션 구현을 통해 습득해봐야겠다.

 

 

 

 

-

참고 링크

https://www.protopie.io/ko/learn/

ProtoPie - Learn ProtoPie in 1 hour

https://medium.com/hyuk/%ED%94%84%EB%A1%9C%ED%86%A0%ED%8C%8C%EC%9D%B4-advanced-1-dff558326ea5

프로토파이 Advanced 1.