short talk on framer js

1. framer js A/S 톡
wilson

2. framer js?
• js 기반 인터렉션 프로토타이핑 툴
• js 알아야 해!
• coffeescript도 지원
• 이미지 리소스는 psd나 sketcher에서 바로 가져옴
• 포토샵 등에서 잡아둔 group 별로 리소스 생성

3. 데모를 보면서 꿈과 환상
을 키워보자
http://examples.framerjs.com/#animation-basics.framer

4. 프로토타이핑
• 대게 우리가 얘기하는 프로토타이핑은 (내 맘대로 분류)
• 화면 프로토타이핑: 손그림, ppt, balsamiq,
omnigraffle wireframe 등
• 네비게이션 프로토타이핑: ppt, 스샷 디바이스에 올려
서, pop 등
• 인터렉션 프로토타이핑: framer, origami 등
https://hackdesign.org/toolkit/interaction-design

5. 인터렉션 프로토타이핑 왜 하나?
• 이게 과연 될까? 유용할까? 에 대한 실험을 그나마 적은
비용으로 할 수 있다
• 개발자에게 정확한 느낌을 알려줄 수 있다.
• 화면 전환 애니메이션을 좀 더 밝고 경쾌한 느낌으로
통통 튀듯이… <= 뭔 소리야!

6. 그럼 어떤 도구를?
• origami
• GUI 기반
• 초기에 비용은 적게 들지만 차라리 코드로 짜는 게 쉬워보일 정도
로 복잡해 지기 쉬움
• framer.js
• js 코드 기반
• 코드를 짜야해서 초기 러닝커브가 깊지만 코드만 잘 짜면 + 복붙
신공

7. framer.js
• framer 자체는 자바스크립트 라이브러리
• fb 내부 도구를 들고나와 오픈소스 화
• js 친척 언어인 커피스크립트를 쓸 수도 있음
• 개발자 왈: js보다 더 함축적이고 배우기도 쉽다고 함

8. 도구 호환
http://framerjs.com/learn.html#importing

9. framer studio
• 돈 받고 파는 framer.js 작성 도구
• 라이브 프리뷰, 문법 강조, 자동완성, 코드 조각 샘플 제
공, psd/sketch 결과물 임포트

10. 예상 질문
• 남들도 쓰나요?
• dropbox carousel 만들 때 사용함
• 디자인 프로세스에 아예 녹여놨음(어느 회산진 까먹..)
• 여튼 잘 나가는 미쿡 회사들은 많이 사용한다 함
• 배우기 어렵지 않을까요?
• (나도 안해봤지만…) 대게 원하는 코드는 남의 것 복붙으로 얼추 해결되지 않을까.
• 주변 개발자를 꼬셔보시면? (개발자 입장에서도 앱 만드는 거 보다 훨씬 덜 수고스러우니 환영할지도?)
• framer studio 꼭 필요할까요?
• 임포트는 꼭 studio 아니어도 될 듯. js/coffeescript 문법 강조 도구는 많음
• 그래도 바로 옆에서 preview 볼 수 있고, 도구도 굉장히 열심히 업데이트하고 있으니 심각하게 framer.js 를 쓸
조직이라면 하나 사 두는 것도 나쁘지 않을 듯.
• 50명 이상이라면 사이트 라이선스로.

11. 예상 질문#2
• 만든 건 어디서 돌려보나요?
• 웹 브라우저만 돌아가면 어디서든.
• 그래픽 리소스, 임포트가 답인가요?
• 복잡해지면 그냥 이미지 드래그드랍으로 개별 작업하는 게 편할 수도 있다고 들었음
(framer studio 기준)
• 한 페이지 넘어가는 것도 작업 가능한가요?
• 가능하지만 복잡… 어차피 웹이니 하이퍼링크를 쓰는 것도 고려해 볼 수 있을 듯. 하지만
목적이 페이지 내 인터렉션 테스트이니 걍 페이지 단위로 하는 게 맞지 않나? (내 생각)
• 문서화는 잘 되어있나요?
• 개발자들이 도구 만드느라 정신없어서 문서화가 좀… 예제 위주로 익히는 게 더 빠를 듯

12. 더 알고 싶다면
• vimeo framer channel
• https://vimeo.com/channels/framer
• framer js
• https://www.facebook.com/groups/framerjs/
• framer js korea
• https://www.facebook.com/groups/511309105667409/
• framer js 한국어 버전 (번역 중)
• http://framerjs-kor.appspot.com/

13. 끝!