Framer Advanced 1.
변수, 반복문, 배열
지금까지 Framer와 CoffeeScript에 대해서 많은 내용들을 살펴보았습니다. 차근차근 꾸준히 연습했다면 아마도 간단한 인터랙션 프로토타입을 만들 수 있다는 사실에 재미를 느끼는 분들이 있을 것 같습니다.
이런 화면도 이제는 쉽게 만들 수 있을 것입니다.
layerA = new Layer
x: 0, y: 0
width: 750, height: 1334/4
backgroundColor: “#ffa000”layerB = new Layer
x: 0, y: layerA.maxY
width: 750, height: 1334/4
backgroundColor: “#ffc107”layerC = new Layer
x: 0, y: layerB.maxY
width: 750, height: 1334/4
backgroundColor: “#ffecb3”layerD = new Layer
x: 0, y: layerC.maxY
width: 750, height: 1334/4
backgroundColor: “#03a9f4”
만약에 이렇게 만든 리스트의 높이를 변경하고 싶다면 어떻게 해야 할까요? 기존 방식대로라면 각 레이어의 높이값을 일일이 수정해야 할 것입니다. 물론 수정해야 할 값이 한 두 개라면 그리 오래 걸리지 않을 것입니다. 하지만 수십, 수백개라면?
변수 Variable
위와 같은 상황에서 활용할 수 있는 것이 바로 변수(variable) 입니다.
변수 [變數]
1.어떤 정세나 상황의 가변적 요인
2.[수학] 어떤 관계나 범위 안에서 여러 가지 값으로 임의로 변할 수 있는 수
예를 들어 매일 음식을 먹지만, 그 종류는 한식, 중식, 일식 등 다양할 것입니다. 이 때 서로 달라지는 음식의 종류를 일종의 변수라고 할 수 있습니다.
음식 = 한식
‘음식’을 먹는다. = 한식을 먹는다.음식 = 일식
‘음식’을 먹는다. = 일식을 먹는다.변수 이름 = 값
변수를 적용해서 위의 코드를 재구성해 보겠습니다.
layerHeight = 1334/4layerA = new Layer
x: 0, y: 0
width: 750, height: layerHeight
backgroundColor: “#ffa000”layerB = new Layer
x: 0, y: layerA.maxY
width: 750, height: layerHeight
backgroundColor: “#ffc107”layerC = new Layer
x: 0, y: layerB.maxY
width: 750, height: layerHeight
backgroundColor: “#ffecb3”layerD = new Layer
x: 0, y: layerC.maxY
width: 750, height: layerHeight
backgroundColor: “#03a9f4”
이렇게 하면 모든 레이어의 높이값에 변수로 지정한 “layerHeight”의 값이 적용됩니다. 따라서 layerHeight의 값만 변경하면 모든 레이어에 변경된 값이 적용되게 됩니다.
반복해서 입력되는 동일한 값들은 이렇게 변수를 통해 한꺼번에 적용할 수 있습니다.
반복문 For Loop
위의 코드에서 볼 수 있듯이, 같은 형태의 레이어가 여러번 반복해서 등장하는 경우가 종종 있습니다. 처음에는 “복사+붙여넣기”를 통해 해결할 수 있지만, 변수에서 예를 들었던 것처럼 반복 작업에도 한계가 있기 마련입니다.
이럴 때, 반복문(for loop)를 사용하면 반복 작업을 크게 줄일 수 있습니다.
for i in [0 . . 반복하려는 횟수 — 1]
레이어이름 = new Layer#i는 iteration을 의미하며, 반복문에서 일반적으로 사용함. 원하는 다른 이름으로 해도 무관함#가로로 반복하려면 x: (레이어 넓이 + 레이어 간격) * i
#세로로 반복하려면 y: (레이어 높이 + 레이어 간격) * i
왜 반복하려는 횟수 — 1 인가요?
컴퓨터는 숫자를 0부터 세기 시작합니다. 따라서 [0..3] 이라고 하면 0, 1, 2, 3 이렇게 총 4번을 반복하게 됩니다. 이것은 매우 중요한 개념이니 꼭 기억하는게 좋습니다.
이 개념이 헷갈린다면 다른 대안도 있습니다.
for i in [0 . . . 반복하려는 횟수]
레이어이름 = new Layer이렇게 점을 세번 찍으면 반복하려는 횟수만큼만 숫자를 입력하면 됩니다. 어느쪽이든 결과는 동일하기 때문에 본인이 헷갈리지 않고 편하게 쓸 수 있는 방법을 택하면 될 것 같습니다.
반복문을 이용해서 위의 코드를 재구성 해보면 다음과 같습니다.
layerHeight = 1334/4for i in [0 . . 3]
layer = new Layer
width: 750, height: layerHeight
x: 0, y: layerHeight * i
backgroundColor: “#ffa000”
배열 Array
하지만 반복문을 이용한 위의 코드에서도 한 가지 문제가 있습니다. 반복해서 같은 크기의 레이어를 적절히 잘 배치하게 되었지만, 각 레이어의 색깔마저도 모두 똑같아져 버린 것입니다.
만약 원하는 레이어를 선택하여 각각 다른 속성값을 적용할 수 있다면, 반복문을 더욱 효과적으로 사용할 수 있지 않을까요? 그래서 보통 반복문은 배열(array)과 함께 사용하는 경우가 많습니다.
layerHeight = 1334/4layers = []for i in [0 . . 3]
layer = new Layer
width: 750, height: layerHeight
x: 0, y: layerHeight * i layers .push(layer)#layers = []은 layers라는 이름의 빈 배열을 만든 것
#push는 ()안에 있는 것들을 빈 배열 안에 순서대로 추가하는 것#한 번에 하나씩 i에 해당하는 값이 종료될 때까지 반복해서 추가하게 되므로, push는 반복문 안에 위치해야 함
이렇게 하면 반복문으로 만든 레이어들이 빈 배열 안에 채워지게 되며, 배열 내 순서를 이용해서 원하는 레이어를 선택할 수 있게 됩니다.
layerHeight = 1334/4layers = []for i in [0 . . 3]
layer = new Layer
width: 750, height: layerHeight
x: 0, y: layerHeight * i layers .push(layer)layers[0].backgroundColor = “#ffa000”
layers[1].backgroundColor = “#ffc107”
layers[2].backgroundColor = “#ffecb3”
layers[3].backgroundColor = “#03a9f4”
여기서 주의해야 할 점이 바로 앞에서 언급했던 “순서” 입니다. 앞에서도 설명했듯이 컴퓨터는 0부터 세기 시작하기 때문에 첫번째 레이어가 “layers[0]”이 되는 것입니다.
Advanced
이번 포스팅의 제목처럼 변수, 반복문, 배열은 기초에서 약간 벗어난 내용이라고 느낄 수 있습니다. 그렇기 때문에 완벽히 이해하고 활용하기까지는 시간이 조금 걸릴 것이라고 생각합니다.
만약 변수나 반복문, 배열의 개념이 너무 어렵고 막연하게 느껴진다면 우선은 지금 하던 방식대로 코드를 작성하는 것이 좋을 것 같습니다. 처음부터 구조적으로 깔끔한 코드를 작성하려면 시간도 오래 걸릴 뿐더러, 재미도 반감될 것이기 때문입니다.
너무 조급하게 생각하지 말고, 천천히 느긋하게 하던대로 하다보면, 변수를 알게 되고, 또 조금 지나서 반복문을 알게 되고, 또 얼마 지나서 배열을 알게 될 것입니다.
그전까지는 Framer 기초 관련 포스팅들을 참고하면 도움이 될 것입니다. 링크를 한 번 더 안내하는 것으로 이번 포스팅을 마칩니다.
