framerX 내용으로 재업예정( 게시글은 framerjs으로 구버전 내용 )

이제 framerX가 나와서 아래의 기술은 더이상 필요할 것 같지 않다.

framerX를 써보고 내용을 재업할 생각이다.

프레이머를 3주 정도 써본 느낌을 적어볼까 한다

물론 틀린 정보도 있을 것이다

도움되었던 페이지들..

Docs 한글

- http://framerjs.co.kr/docs

참고할 예제파일

 - http://framerjs.com.s3-website-us-east-1.amazonaws.com/examples/

기초 튜토리얼

Framer Cheat Sheet: Layer Styling

- https://medium.com/the-school-of-do/framer-js-cheat-sheet-layer-styling-42d6fd4a9558

Framer Cheat Sheet: States

- https://medium.com/the-school-of-do/framer-js-cheat-sheets-states-9509a807ef5a

Framer Cheat Sheet: Loops & Arrays

- https://medium.com/the-school-of-do/framer-cheat-sheet-loops-arrays-f5c3aaa802e9

Framer Cheat Sheet: Flow Components

- https://medium.com/the-school-of-do/framer-cheat-sheet-flow-components-f7ca94632227

Framer Cheat Sheet: Page Components

- https://medium.com/the-school-of-do/framer-cheat-sheet-page-components-f84532ae0eba

Framer Cheat Sheet: Scroll Components

- https://medium.com/the-school-of-do/framer-cheat-sheet-scroll-components-bd786368ecfc

Framer Cheat Sheet: Classes & Modules

- https://medium.com/the-school-of-do/framer-cheat-sheet-classes-modules-411f0a247a05

Framer Cheat Sheet: Utils.modulate

https://medium.com/the-school-of-do/framer-cheat-sheets-utils-modulate-b88e359fdcc6

Framer Cheat Sheet: Slider & Range sliders

https://medium.com/the-school-of-do/framer-cheat-sheets-slider-range-sliders-5b30b8f41a12

Framer Cheat Sheet: Utils

https://medium.com/the-school-of-do/framer-cheatsheet-the-versatility-of-utils-bed26e1614e2

장점

1. 스케치와 연동하기 좋다

2. 자바스크립트를 알면 좀더 빨리 익힐수 있다. 

( coffeescript 기반이라곤 하지만 머 어찌되었건 script 류 아닌가 ㅋ 하다보면 문법 금방 익히게 된다. 

웃긴게~~coffeescript 가 익숙해지고 난 후엔 javascript 문법이 간혹 짜증나곤 한다.  )

3. 로컬(내컴) 에서 결과물이 좋다? 흠

4. preview 제공 - 웹 ( url ) / 앱용 preview --> 개인적으로 이부분이 제일 맘에 든다.

5. 다양하고 디테일한 mouse event/emit 코드 제공

6. 자주 쓰이는 animate / scroll / page slide / slider / popover 등을 제공.

단점

1. 스케치파일 로드하여 활용시 

- png/텍스트필드 투명영역을 포함한 아이콘등을 버튼으로 사용한다면 반드시 마우스이벤트 영역을 

지정할 rectangle이 필요하다.  

스케치에서 쉐이프 투명영역으로 잡아도 소용없다 프레이머는 마우스 이벤트로써의 투명영역을 모조리 무시한다.

2. 사이즈별로 리사이즈작업이 별도로 필요하며 안드로이드와 아이폰 결과물이 다르다. 

특히 안드로이드에선 이미지 스케일 모션은 쥐약이다. grid 타입의 썸네일 이미지 모션은 거의 움직이지도 않는다.

3. PageComponent 와 ScrollComponent 혼용하여 적용할 경우 쉽지 않다. 

레이어 부모 자식간 관계를 확실히 알아두어야한다.

4. FlowComponent 의 커스텀 작업이 필요할때가 있는데 관련 api는 거의 없고 프레이머의 코어부분을 살펴봐야 알 수 있다

5. 스케치파일 로드하여 활용시 - 스케치파일에서 그룹폴더 그이하 폴더자체에 transform을 줄수 있는데 

그렇게 폴더자체에 transform이 적용되어 있다면 프레이머에서 아주 괴랄스런 모양을 확인 할 수 있다

무지하고 적응이 필요한 것들 

1. 스케치 파일용량이 클수록 프레이머 용량도 커지고 따라서 로딩속도도 느리다.

-> scene 별로 따로 작업하여 인터렉션이 4,5개가 적절한 듯하다. ( 스케치 파일을 import 하여 로드시 )

     만약 import를 안하고 전부 코딩으로만 진행한다면 scene10개까지는 거뜬하다. ( scene 1개당 인터렉션 5개 정도 )

2. 스케치파일 로드하여 활용시 - 만약 인터렉션이나 스케치 용량이 많다면 비디오를 안드로이드에선 거의 활용할 수 없다.

비디오 로드 자체가 안된다

-> 재주껏 용량 컨트롤을 잘해야 할듯

3. 스케치파일 로드하여 활용시 - 스케치상의 artboard 의 그리드 좌표점 0,0 으로 맞추어져 있지 않다면 

프레이머의 상대좌표 및 절대좌표의 설정이 어려워진다. 

-> 이건 스케치파일을 열고 해당 적용할 엘리먼트를 프레이머 디자인 모드로 copy & paste 하는게 나을 듯 싶다.

아니면 따로 이미지등으로 저장해놓고 로드해서 써도 될 듯 싶다.

삽질 후 약간의 깨우친 점

이번 project에 프레이머는 처음 해봤던 터라 더 삽질을 많이 했다.

- 디자인 파트에서 전달받은 모든 스토리가 담긴 스케치파일을 전부 로드하는 것 자체가 잘못이였다. ( 선행 학습 부족 )

- 공통 요소가 될 만 한 것들을 Class 설계 > 해당하는 Class에 필요한 아이콘 및 이미지를 따로 로드

   (배치한 리소스가 있고 모션을 적용해야 한다면 바로 states.A, states.B 등을 만들어 모션상태를 바로 정하면서 작업. 

     - 이런 점 때문에 자꾸 Flash가 떠오르곤 한다. 그때가 좋았는데.....ㅠㅠ )

- 그리드/썸네일 등의 복제 요소를 만들어 둔 Class 로 재생산.

- 공용 함수 / 공용 Animation 설계

- 프로토타입으로써 빠르게 작업을 원하는 것인데.....하다보니 위에서 나열한 것처럼 실제 개발같은 설계를 하게 된다.

 이럴거면 머하러 쓰지? 라는 생각을 하게 되지만 디자인에 있는 것들을 마크업해서 레이아웃 배치할 

생각을 하면 또 다시 그래도 프레이머가 낫지하기도 한다. 

아쉬운점....

- 이렇게 만들고 난 것을 진짜 실제 개발물로도 쓸수 있었으면 좋겠다는...

예전에 Flash 처럼 말이다. 이러면 안되는데...ㅠㅠ