Framer Basic 1.

레이어, 상태값, 이벤트, 애니메이션

CoffeeScript ?

Framer에서는 CoffeeScript를 활용해 코딩을 하게 됩니다. 웹에서 두루 사용되는 ‘JavaScript’라는 언어가 있는데, 이를 좀 더 편하게 사용할 수 있도록 한 것이 바로 CoffeeScript 입니다.

웹 기반 기술이라는 것이 포인트라고 할 수 있습니다. 따라서 웹에서 가능한 대부분의 형태를 구현할 수 있으며, 마찬가지로 웹에서 불가능한 것들은 제약을 받게 됩니다.

CoffeeScript에 대해 궁금한 분들은 http://coffeescript.org/ 에서 자세한 정보를 확인할 수 있습니다.
­

­

­


Layer + States + Events

레이어를 만들고, 상태값(States)을 추가하고, 이벤트(Events)를 설정하는 것이 인터랙션을 만드는 가장 기본적인 방법이라고 할 수 있을 것입니다.

상태값을 추가한다는 것은 ‘당장 바뀌지는 않지만 미래에 적용했으면 하는 상태’를 추가하는 것을 의미합니다. 이렇게 추가한 상태값은 ‘이벤트’를 통해 적용할 수 있습니다.
이벤트는 ‘특정 상황이 발생하면 무엇 무엇을 해라’ 라고 할 때에 그 ‘특정 상황’을 가리키는 것으로, 일종의 트리거(trigger)라고 할 수 있습니다.

1. 레이어 만들기

우선 레이어를 만들어 보도록 하겠습니다. 좌측 상단의 Insert 버튼을 통해 레이어를 만들면 코드를 입력하지 않고도 쉽게 레이어를 만들 수 있는 장점이 있습니다. 하지만 조금만 익숙해지면 직접 코드를 입력하는 방법이 훨씬 편하게 느껴질 것입니다.

레이어 이름 = new Layer

직접 코드를 입력할 때에는 철자와 띄어쓰기 및 대소문자에 주의해야 합니다. 이는 코딩에 있어서 가장 기본적인 주의사항 입니다.

또한 각 레이어는 속성(property)을 가지게 됩니다. 위치, 크기, 색상 같은 기본적인 것부터 밝기, 투명도, 기울기 등 매우 다양한 것들까지 속성값으로 지정할 수 있습니다.

layerA = new Layer
x: 100
y: 100
width: 300
height: 300
backgroundColor: “yellow”
레이어의 다양한 속성들은 http://framerjs.com/docs/#layer.layer 에서 확인할 수 있습니다.

Q. 왜 어떤 것은 = 을 쓰고, 어떤 것은 : 을 쓰나요 ?

“~는 ~다” 라고 새롭게 선언할 때 = 을 씁니다. 따라서 “layerA는 새로운 레이어다.” 라고 할 때, “layerA = new Layer” 라고 쓰게 됩니다.

그리고 한 번 선언한 이후에, 그에 대한 자세한 내용을 서술할 때에는 : 을 씁니다. 따라서 “layerA의 x값은 100이다.” 라고 할 때, x값을 추가하기 위해 “x: 100” 라고 쓰게 됩니다.

대신 : 을 쓸 때는 들여쓰기가 필요합니다. 들여쓰지 않을 때는 선언한 내용을 한 번 더 써야 하며, 이 때는 : 이 아니라 = 을 씁니다.

참고.
당장은 이렇게 이해하더라도 큰 무리가 없지만, 앞으로 계속 코딩을 하다 보면 좀 더 정확한 이해가 필요할 수 있습니다.
(이퀄) = 은 뒤의 값을 앞으로 넘겨주는 (대입하는) 것이며, (콜론) : 은 ‘속성-값’(key-value)을 짝지을 때 사용합니다.
https://en.wikipedia.org/wiki/Equals_sign#Usage_in_mathematics_and_computer_programming
https://en.wikipedia.org/wiki/Colon_(punctuation)#Computing
override
들여쓰지 않고 = 을 써도 값을 추가하거나 변경할 수 있어요.

2. 상태값 추가하기

상태값(States)으로 입력할 수 있는 것은 처음 레이어를 만들었을 때, 추가했던 속성과 같습니다. 위치나 크기, 색상, 투명도 등 다양한 값들을 지정할 수 있습니다.

layerA.states.add
상태값 이름 : 원하는 상태

예를 들어 이런 것들을 상태값으로 추가할 수 있습니다.

layerA.states.add
move: x: 300
hide: opacity: 0
spin: rotate: 300

Q. 왜 레이어 이름과 명령어 사이에 점을 찍나요 ?

. 은 앞 뒤 단어의 관계를 나타내는 우리말의 조사와 같은 역할을 합니다. 따라서 “layerA(의) 상태값(을) 추가한다.” 라고 할 때, “layerA.states.add” 라고 쓰게 됩니다.


3. 이벤트 만들기

이벤트는 흔히 트리거(trigger)라고도 하는데, 이 트리거는 제스처를 떠올리면 쉽게 이해할 수 있습니다. 터치, 스와이프 등 사용자가 입력하는 순간을 이벤트로 만들 수 있습니다.

layerA.on Events.트리거, ->
변경할 대상.states.switch(“상태값 이름”)

예를 들어 이런 식의 이벤트를 추가할 수 있습니다.

layerA.on Events.Click, ->
layerA.states.switch(“move”)

그리고 위에서 입력한 on Events.Click 은 이런 식으로 줄여서 표현할 수도 있습니다.

layerA.onClick ->
layerA.states.switch(“move”)
이벤트에 대한 자세한 내용은 http://framerjs.com/docs/#events.events 에서 확인할 수 있습니다.

실행해 볼까요 ?

여기까지 무사히 잘 따라왔다면 지금쯤 이런 코드가 완성되어 있을 것입니다.

layerA = new Layer
x: 100
y: 100
width: 300
height: 300
backgroundColor: “yellow”
layerA.states.add
move: x: 300
layerA.on Events.Click,->
layerA.states.switch(“move”)

노란색 레이어를 만들었고, 오른쪽으로 이동하는 상태값을 추가했으며, 클릭하는 순간 해당 상태값으로 변하게 됩니다.

이제 가벼운 마음으로 레이어를 클릭해보면..

드디어 움직이는 것을 만들었네요!!
드디어 움직이는 것을 만들었네요!!

Layer + Events + Animate

인터랙션을 만드는 또 다른 방법으로는 이벤트를 설정한 후, 애니메이션을 추가하는 방법이 있습니다.

layerA.on Events.트리거, ->
변경할 대상.animate
properties:
변경할 상태값

실제로 애니메이션을 적용하면 이런 모습이 됩니다.

layerA.on Events.Click, ->
layerA.animate
properties:
x: 300

위의 코드를 추가하고 레이어를 클릭해보면, 앞서 상태값을 추가했던 것과 동일한 인터랙션이 적용된 것을 확인할 수 있습니다. 이처럼 같은 인터랙션이라 할지라도 여러가지 방법으로 구현할 수 있으며, 경험이 쌓이다보면 점점 더 쉽고 효율적인 방법을 찾아가게 됩니다.


Q. 왜 계속해서 들여쓰기를 하게 되나요 ?

들여쓰기는 일종의 종속관계라고 생각하면 이해하기 쉬울 것 같습니다. 들여쓰기 한 코드가 그 윗줄에 있는 코드의 하위 내용이 됩니다. 이는 JavaScript에서 괄호를 통해 표현하던 것을 좀 더 간편하고 알아보기 쉽게 해주는 효과가 있습니다.

덕분에 Framer에서는 다른 언어들에 비해 상대적으로 기호를 적게 쓰면서 마치 글 쓰듯이 원하는 내용들을 써내려갈 수 있습니다.

참고.
들여쓰기를 꼭 해야만 하는 것은 아닙니다. 들여쓰기를 하지 않고 중괄호{}를 사용하면 그 안에서 (콤마),로 구분하여 같은 내용을 한 줄로 적을 수 있습니다.
https://en.wikipedia.org/wiki/Indent_style

Do it yourself

아마 위에서 언급한 내용들만 숙지하더라도 (코드가 길어지거나 유사한 코드를 반복적으로 입력하게 되겠지만..) 기본적인 인터랙션은 어렵지 않게 만들 수 있을 것입니다.

우선은 기본적인 코드를 이리저리 조합해 보는 것도 좋습니다. 깔끔한 코드가 멋진 인터랙션을 보장하지는 않습니다. 일단 만들어 보는 것이 중요하고, 재미를 느끼는 것이 필요합니다.

아래 사이트들이 재미를 찾는데 도움이 되었으면 합니다.