Framer, 이거 대체 무슨 소린고.
코드 프로토타이핑.. 참 쉽죠?
본문은 Facebook Framer Korea 그룹 내의 이지훈(@llh62044217) 님의 강의를 토대로 작성되었습니다. 감사합니다.
포로토타이핑 툴의 존재를 알게 된 건 근 2년전, 쉽게 발문을 들이지 못했던 까닭은 Adobe의 프로그램과는 다른 간단하다면 간단하다고 할 수 있는 메뉴 UI와 생소한 구조, 그리고 어딘가 낯선 느낌적느낌 때문이었다.
메뉴가 정말 이것 뿐 인가요..?(image, layer, select.. 너희 다 어디갔니)
포로토타이핑 툴을 더 늦기 전에 알아야겠다고 느낀 것은 얼마 되지 않았는데, 그것은 이 툴을 알게 되면 대기업입사와 연봉올리기에 힘을 올.. 이 아니라 UI디자이너가 UX도 고려하여 동작, 인터페이스를 동시에 디자인을 하는 상호작용 디자인의 시대가 오고 말아버렸기 때문이다. 실제로 해외 디자인 에이전시에서는 물론 국내 벤처기업에서도 앱디자인을 할 시, 이제는 필수 활용 툴이 되어버렸다. 한 5년전만 해도 이렇진 않았던 것 같은데 말이다.
전세계 디자이너들을 들쑤시고 다니는 요 요물은 짠 하고 만들어내면 뿅 하고 보여주는 기괴한 매력을 갖고 있었던 것이다. 이런이런 모션을 하면 요렇게요렇게 보여줄거에요~ 이런거 어때요, 좋죠? 하고 개발자에게 보여주면 오 그것 참 멋지군요.. 하면서 나의 커뮤니케이션 능력을 높임과 동시에 간지를 보여줄 수 있는 멋지구리한 능력을.
그럼 왜 framer 입문 글 부터 올리는가.
사실 필자가 퍼블리싱 경력이 있어서 조금 만만해 쉬워 보였다는 것은 있다. 실제로 작업해보니 코드를 알아서 편할 수는 있어도, 모르는 사람이라도 그것을 이해하고 자신의 뜻에 맞게 디자인을 할 수 있다는 점에 놀랐기도 했지만, 그것보다 다른 프로토타이핑 툴과 비교했을 때, 어떤 하나의 동작이 코드화되어 개발자가 보기에 직관적이고, 작업자도 좀더 세밀하게 조정할 수 있다는 매력 때문이었다. 가깝고도 멀어보이는 framer, 일단 뒤져보기로 했다.
CoffeeScript를 아시나요?
커피인가, 스크립트인가. 라는 의문이 들었던 이 언어는, 자바스크립트에서 탄생한 언어로 개발자도 어려워 하는 스크립트를 보다 손쉬운 문법으로 사용할 수 있도록 나온 프로그래밍 언어라고 한다. 다시말해 코딩에 코자도 모르는 디자이너라 할지라도 문법을 이해할 수 있다면 작업이 가능한 디자이너를 위한 언어라 할 수 있다. 디자이너를 위해 이렇게 친절하게 만들어 줬다는데, 그렇다면 한번 도전 해 볼만 하지 않은가. 우선 주의점, 프레이머에 활용시 고려해야 할 점부터 보고자 한다.
커피스크립트를 사용할 시의 주의점
기존 자바스크립트와 다르게 문법 끝에 세미콜론(;)을 적지 않는것. (문법을 순서대로, tab으로 구분하여 읽기 때문에 불필요함.)
대소문자는 기존과 동일하게 구분함.
layer이름 설정시 다소 긴 문장은 사용을 권장하지 않음, 사용시 언더바(_)를 이용하여 연결. (이름에 스페이스바 금지)
framer 활용할 시
px, pt와 같은 기본 단위를 쓰지않음.
스크립트 영역 드래그 후, command + / 를 눌러 #주석과 같은 형태로 변형. 한줄짜리 스크립트에는 문장앞에 #을 붙일 것. (실제로 앱을 만들었을 시, 내가 어디에 무엇을 썼는지 기억이 안날 수 있는 문제, 개발자들과의 커뮤니케이션에 문제가 발생하지 않도록 주석처리가 중요하다. 이것은 퍼블리싱을 할때와도 비슷한 문제지만 이렇게 해주세요, 이것은 무엇입니다 하는 세심한 주석 하나가 디자이너와 개발자 사이를 더욱 평화롭게(?) 만들어 주기도 한다. )
어시스턴트(자동완성) 기능을 활용하면 작업효율이 높아진다. (필자는 editPlus를 쓰느라 하드코딩이 몸에 익었지만 어시스턴트가 자동지원되니 확실히 가볍고 속도가 빨라짐을 느꼈다.
이제 본격적으로 맨땅에 헤딩.
코드가 대부분이므로 집중요망..
1. 대지를 설정한다. (아트보드 설정)
디자인 탭 내의 아트보드를 클릭한 뒤 오른쪽을 살펴보아라, 내가 설정하고자 하는 다양한 기기가 상시 업데이트 되어 준비되어 있다. 이것을 클릭하면, 그 대지만큼 프리뷰에 보여준다.
아트보드 복사
아트보드를 클릭 한 뒤, command + option을 눌러 드래그하면 아트보드가 손쉽게 드래그된다.
2. 디자인-코드 패널과의 연결 (target 설정)
아티클을의 우측 서클버튼을 누르면 이름을 설정할 수 있는 창이 활성화 되며 'name in Code'라고 뜬다.
뭔가를 만들은 뒤, 코드패널을 보자. 뭔가가 보인다. 그런데 이 상태로만 작업을 시작한다면 디자인패널과 코드패널의 아티클들이 연결되지 않아 제대로 동작하지 않을 수 있다. 이 때 target 이라는 것을 설정해주면서 아티클의 이름도 동시에 삽입해주는 작업을 해야한다. 만약 이 작업을 하지 않는다면 백그라운드 요소로만 인식되어 버린다. 코드에서도 활성화를 시켜주자.
3. 코드 패널에서 이벤트 설정해주기.
코드 패널에서 보면 방금 전 이름을 설정해줬던 요소가 화이트로 활성화 되어 있는 모습을 볼 수 있다. 이제 이 요소가 움직이는걸 보고싶다, 할 땐 우측 메뉴 중 event를 눌러 방금 target을 설정한 요소에 마음에 드는 이벤트를 클릭해본다.
1) layerA.onClick (event, layer) ->
onClick를 선택했다면 다음과 같은 형태가 나타났을 것이다. 이것은 레이어A가 클릭됐을 때, 어떠한 이벤트를 보여줄 것이고, 레이어는 어떤 속성을 가질 것이다 라는 것을 의미한다.
2) 이때 이벤트가 활성화 될 상태(state)라는 것이 필요하다.
기본 상태와 변경되어야 할 상태(state)를 기존에 설정해주어 해당 상태로 전이하게 되도록 만들어주는 것이다. 슬슬 머리가 아파지려 한다.
기본상태
layerA = new Layer
width: 300
height: 300
backgroundColor: "Red"
borderRadius: 300
x: Align.center
y: Align.center
변경하고자 하는 상태 - 이름 "sad"
layerA.states.sad =
width: 80
height: 80
backgroundColor: "blue"
3) 이제 애니메이션을 줘보자.
위와 같이 전, 후의 상태를 설정해준 후 animate를 주면 된다.
내가 주고자 하는 액션(onclick시)
layerA.onClick (event, layer) ->
layerA.animate "sad"
다시말해, 레이어의 기본상태를 디자인이나 코드 패널에서 설정을 해준 뒤, 변경하고자 하는 상태를 적어 애니메이션(animate) 에 해당상태 "이름"을 적어주면 되는 것이다.
하지만 이 소스에서는 아쉬운점이 있다. 무엇이든 한번 더 클릭하면 원래상태로 돌아가는 ux 적인 사고가 있기 마련인데, 그것을 위해서는 animate 모션이 아닌 stateCycle을 활용하면 된다. stateCyecle은 말그대로 상태가 무한으로 도는 것으로 이벤트 시 해당 상태를 계속해서 보여주는 것을 의미한다. 그렇다면 다음 코드의 차이점은 무엇일까?
1. layerC.onClick (event, layer) ->
layerC.stateCycle("default","sad")
2. layerC.onClick (event, layer) ->
layerC.stateCycle()
1번은 기존의 상태 (default) 를 하나의 약속으로 하여 sad와의 상태를 번갈아가며 보여주는 것이고, 2번은 코드 상단에 지정 된 sad 외의 상태가 있다면 그것들을 순서대로 보여준 뒤 기존의 상태로 돌아가도록 만들어 주는 것이다.
하지만 상태가 애니메이션으로 변하는것, 다시 돌아오고 순환하는 것도 아닌 동작에 따른 세심한 설정이 필요할 때는 다음과 같은 이벤트를 준다.
layerC.onClick (event, layer) ->
layerC.stateSwitch("sad")
위 소스는 애니메이션이 아닌 '상태의 변화'를 의미한다. 클릭이 끝났을 시 즉각적으로 sad의 상태를 보여주는 것이다. 위 소스에서 animate와, stateCycle과, stateSwitch의 차이점을 명확하게 아는 것이 중요하다.
4) 이 때 한가지 옵션을 더해보자면,
event 문장에 지정 된 객체는 그 다음 문단에서 자신을 뜻할 때 this를 활용해도 된다.
layerC.onClick (event, layer) ->
this.stateCycle()
상태값 같은 것들의 문장이 길어져 단축시켜 보여주고 싶다면, #주석 을 상단에 더해준 후 우측마우스 fold 를 클릭하거나 edit - folding 을 눌러 숨김처리를 하면 좋다. 필요에 따라 확인하면 되니 말이다.
응용해보기.
1. 드래그 에니메이션.
1) 드래그를 설정하기 전에 드래그가 가능하도록 해주세요, 라는 설정값주기.
layerC.draggable.enabled = true 를 주면 간단하다. 그렇다면 true의 반대말은? false.
false를 주면 드래그가 되지 않는 것을 활용하여 가로, 세로 축을 제어할 수 있다.
layerC.draggable.horizontal = false - 가로 드래그 불가능
layerC.draggable.vertical = false - 세로 드래그 불가능
위를 활용하여 온오프버튼과 같은 것을 만들어줄 수 있다.
2) 드래그 시작, 드래그 끝난 후의 상태 설정해주기.
먼저, 위에서 했던 것 처럼 드래그 시작의 상태를 설정해보자.
layerC.states.Dragon =
width: 140
height: 140
shadowX: 40
shadowBlur: 60
다음과 같은 임의의 값을 만든 뒤,
event 패널의 DragStart 를 선택한 후 위에서 설정한 이름 "Dragon"을 입력해 준다.
layerC.onDragStart (event, layer) ->
this.stateSwitch("Dragon")
그리고 드래그가 끝났을 땐 원래상태로 돌아가게 해주려 아래와 같이 default 값으로 설정해준다.
layerC.onDragEnd (event, layer) ->
this.stateSwitch("default")
근데 이렇게만 한다면 아티클이 원래 상태 뿐 아니라, 원래의 위치로 돌아가게 되버린다. 이런 모양은 자연스럽지 않으므로 DragEnd 상태를 별도로 설정하여 드래그가 끝났을 시 원래의 위치가 아닌 해당 상태로 변경되도록 설정해준다.
layerC.states.DragEnd =
width: 200
height: 200
backgroundColor: "blue"
layerC.onDragEnd (event, layer) ->
this.stateSwitch("DragEnd")
이렇게 하면 안정적인 드래그애니메이션을 만들 수 있다.
2. 페이지 넘겨보기.
무언가를 클릭했을 때, 페이지가 넘어가는 모션은 UI / UX 디자인에서 많이 봤을 것이다.
이 애니메이션을 위해서는 페이지의 위치(x값), 투명도(opacity), 그리고 보여짐(visible)을 정확하게 이해하는 것이 중요하다.
1) 먼저, 페이지1을 클릭했을 때 이것이 사라지는 것처럼 보이게 해주자.
상태값 이름을 hidden이라 명명하면서, 투명도를 0으로 설정하고, 페이지의 위치 x좌표값을 디바이스의 가로너비(예시는 iPhone7 plus이므로 414 값) 만큼 마이너스(-)로 이동한다 설정하고. onClick시 이 상태를 불러오도록 해주면 될것이다.
page1.states.hidden =
opacity: 0
x: -414
page1.onClick (event, layer) ->
page1.animate "hidden",
time: 1.5
curve: Bezier.easeOut
- 여기서 time, curve 베지어 곡선을 넣는 것은 css3를 알면 쉽게 이해가능한데, 쉽게 말해 1.5초의 시간동안 easeOut곡선을 그리며 이동하도록 하겠다는 것을 말한다. 옵션이므로 생략이 가능하다.
2) 그리고 page1 의 hidden 애니메이션이 끝났을 때, page2를 보여주고자 한다면.
페이지가 바뀌는 것 처럼 보여주는 모션이다. page1이 나가면서 page2가 들어올 것이다. 다시말해 page1을 page2의 뒤로 숨기면서(placeBehind), page1이 보여지지 않도록 없애주고(visible = false), 그럼과 동시에 page1의 x값으로 옮겨줘야 할 것이다.
page2.states.xlocation =
x: page1.x
#페이지1이 에니메이션효과가 끝나면
page1.onAnimationEnd (event, layer) ->
page1.placeBehind(page2)
this.visible = false
page2.animate "xlocation"
여기서 page2의 x 위치를 page1의 x위치로 옮겨주는 것 뿐만 아니라 보여짐(visible)값을 false로 줘야 하는 이유는, 하나의 아트보드가 숨겨지는 처리를 해주지 않으면 그 뒤의 아트보드는 투명한 막을 올려진 것 처럼 어떠한 클릭도 할 수 없기 때문이다. 이렇게 하면 page1이 옮겨지면서 page2가 page1의 본래 x위치로 오는 모습을 볼 수 있을 것이다.
3) 비슷한 방법으로 사진 옮겨보기.
이미지가 롤링되는 것을 보여주는 모션이다. 우선 이미지가 옮겨진 상태(state)를 "go"라는 이름으로 정해준 뒤, 마찬가지로 x좌표값을 디바이스의 너비만큼 옮긴다고 설정해준다. 그리고 image_1을 클릭했을 때 "go"라는 이벤트가 실행되도록 해준다.
image_1.states.go =
x: -440
image_1.onClick (event, layer) ->
image_1.animate "go"
그리고 이미지가 옮겨짐과 동시에 다음 이미지가 들어오는 것을 상상해본다. 이미지가 들어왔을 때의 x 좌표의 위치는 0일 것이다. 이것을 "comein" 이라 명명한 뒤, image_1의 애니메이션이 시작됨과 동시에 image_2에 "comein"이 실행되도록 해주면 된다.
image_2.states.comein =
x: 0
image_1.onAnimationStart (event, layer) ->
image_2.animate "comein"
작업한 것 확인하기.
작업한 것을 확인하고 싶을때는 다음과 같은 방법이 있다.
pc - 메뉴바의 view - present를 눌러 바로 확인.
mo - 아이폰에서 Framer APP 다운받고 노트북과 같은 wifi로 설정.
너무 텅빈 화면으로만 보이는 것 같다, 싶을 땐 디바이스 화면 우측에 있는 햄버거 메뉴를 눌러 이미지를 입혀본다.
command + shift + d - Toggle Dvice 디바이스 모양을 입혀주는 동시에 기기쪽을 클릭하면 기종의 칼라도 동시에 설정해줄수 있다.
command + shift + h 손 모양을 입혀줄 수 있다.
여기까지, 프레이머를 입문하며 배웠던 기초문법, 아트보드 작성방법과 design, code 패널을 활용하여 애니메이션을 주는 것을 살펴보았다. 프레이머는 1년에도 수십번이나 업데이트가 될 정도로 바삐 돌아가는데, 이런것을 docs를 통해 살펴보면 좋다고 한다. 작성되는 코드는 입문자에겐 조금 낯설 수 있겠지만 그래도 규칙성을 파악하면 마냥 어렵지만은 않다는 점과 함께 익숙해지면 상세한 디자인이 가능하다는 장점이 있다. Framer 내의 event, state, animate 종류는 무지하게 많으며, 이런것을 하나하나 살펴보는 것은 결국 많은 디자인을 해보는 수밖에 없는데, 여러가지를 해보면 자연스럽게 숙지가 될 것이란 생각도 든다.
