정교한 인터랙션을 구현하고, 쉽게 공유할 수 있다는 장점 때문에 최근 Framer를 공부하려는 분들이 많은 것으로 알고 있습니다. 하지만 코드 기반의 툴이다 보니, 초반 진입 장벽이 높아 금방 포기하는 분들도 많을 것으로 예상합니다.

이에 따라 IxD LAB에서는 가급적 쉬운 설명으로 Framer-CoffeeScript-기초 활용법을 정리해보기로 했습니다.

 

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)을 짝지을 때 사용합니다.

 

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에서는 다른 언어들에 비해 상대적으로 기호를 적게 쓰면서 마치 글 쓰듯이 원하는 내용들을 써내려갈 수 있습니다.

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

 

 

Do it yourself

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

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

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