Framer Advanced 2.
조건문
지금까지 포스팅을 통해 이야기 한 내용들은 다음과 같습니다.
하지만 이 내용들만 가지고는 구현하지 못한 부분들이 분명 있을 것이라고 생각합니다. 일차원적인 움직임은 쉽게 구현할 수 있지만, 인터랙션이 조금만 복잡해지면 금방 난관에 봉착하게 됩니다.
예를 들어 이런 인터랙션을 구현한다고 생각해보면..
특정 위치까지 스크롤 하면 더 이상 스크롤 되지 않거나, 특정 위치 이후로는 이미지를 확대하는 등, 특정 상황을 만족하면 정해진 동작을 수행해야 하는 경우가 있습니다. 이런 복잡한 인터랙션은 어떻게 구현해야 할까요?
조건문 If
상황에 따라 다른 동작을 수행하기 위한 방법으로 조건문(if)을 사용할 수 있습니다. 설명을 위해 Drag 할 수 있는 레이어를 하나 만들어 보겠습니다.
layerA = new Layer
x: 0, y: 0
width: 300, height: 300
backgroundColor: “blue”
layerA.draggable.enabled = true만약 특정 위치부터 레이어의 색깔을 변경하고 싶다면, 다음과 같이 조건문을 추가할 수 있습니다.
layerA = new Layer
x: 0, y: 0
width: 300, height: 300
backgroundColor: “blue”
layerA.draggable.enabled = truelayerA.onDragMove ->
if this.x >150
this.backgroundColor = “red”#만약(if) 이 레이어의 x값이 150보다 크면, 이 레이어의 배경색은 빨강이다.
this는 어디서 나온 건가요?
특정 레이어에 이벤트를 추가했을 때, 해당 레이어가 또 한번 언급되는 경우, 레이어 이름을 반복해서 적지 않고 “this”로 대체할 수 있습니다. 반복 작업을 줄여주는 또 하나의 꿀팁~!!
언어 및 플랫폼에 따라 다르지만, 웹을 기준으로 볼 때에
이벤트 밖에서 this 값을 체크해보면 UI 전체를 이루는 Window값이고,
이벤트 안에서의 this 값은 이벤트를 수신하기 위해 등록한 객체를 가리킵니다.
이는 기능을 수행하는 주체를 나타내기도 합니다.https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
이제 위의 코드를 실행해보면 일정 범위 이상 Drag 했을 때, 색깔이 변하는 것을 확인할 수 있습니다.
그런데 한 번 바뀐 색깔이 돌아오지 않아요.
컴퓨터는 주어진 명령을 훌륭히 수행해 냅니다. 그런데 주어진 명령’만’ 수행한다는 것이 문제가 될 때도 있습니다.
위의 코드에서 “x값이 150보다 크다”는 조건은 있지만, 다른 조건이 입력되지 않았으므로 레이어 색깔이 한 번 변하는 것으로 컴퓨터는 할 일을 다 한 것입니다.
색깔을 다시 바꾸고 싶다면, 조건을 추가하면 됩니다.
layerA = new Layer
x: 0, y: 0
width: 300, height: 300
backgroundColor: “blue”
layerA.draggable.enabled = truelayerA.onDragMove ->
if this.x >150
this.backgroundColor = “red” else if this.y >500
this.backgroundColor = “green” else
this.backgroundColor = “blue”#if (조건A) : 만약 (조건A)이면 ~ 하고
#else if (조건B) : (조건A) 아니고 (조건B)면 ~ 하고
#else : 그것도 아니면 ~해라.
이제 추가로 입력한 코드를 실행해 보면 위치에 따라 다양하게 색깔이 변하게 됩니다.
두 번째 조건인 y > 500 에 해당하는데, 초록색으로 바뀌지 않는 경우가 있네요?
컴퓨터는 추가한 모든 조건을 “순서대로” 충실하게 수행합니다. 따라서 두 번째 조건(y>500)에 해당하더라도 첫 번째 조건(x>150)을 만족하는 상황이라면 계속해서 처음 명령을 수행하게 되는 것입니다.
만약 y > 500 일 때, 곧바로 색깔을 바꾸고 싶다면, 조건문을 수정해야 합니다.
#조건문 안에 조건문 넣기
layerA.onDragMove ->
if this.x >150
this.backgroundColor = “red” if this.y >500
this.backgroundColor = “green”#두 조건을 한 번에 추가하기
layerA.onDragMove ->
if this.x >150
this.backgroundColor = “red” else if this.x >150 && this.y >500
this.backgroundColor = “green”#조건이 많아질수록 헷갈릴 수 있으므로, 가급적 조건들을 미리 정리해서 하나씩 차근차근 코드로 옮기는 것을 추천합니다.
조건문에서 사용되는 기호들(비교연산자)
# A가 B보다 (A는 B와)크다 A > B
작다 A < B
이상 A >= B
이하 A <= B
같다 A == B
같지 않다 A != B
# 둘 이상의 조건을 함께 쓸 때,그리고 A && B
또는 A || B&& : A와 B가 모두 참인 경우 이하 내용 적용
|| : A 또는 B 중 하나만 참인 경우에도 이하 내용 적용
연산자와 관련한 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators에서 확인할 수 있습니다.
example
조건문을 활용하면 어느정도 복잡한 인터랙션도 구현할 수 있게 됩니다. 그런 까닭에 가장 빈번하게 사용하는 코드 중 하나가 바로 조건문이 아닐까 합니다. 그만큼 편리하고 또 중요한 개념이므로 자주 써보고 익히는 것이 필요합니다.
아래는 조건문을 활용한 카드 UI 예제입니다. 많이 연습해서 조건문을 내 것으로 만들어 보시기 바랍니다 !!
