첫 시간은 기본 개념부터 배우고자 한다. 프로토타입이 처음인 사람도 있고, 이 Meetup을 통해 기대하는 바가 다를 수 있기 때문이다.
들어가면서…
Prototyping = Event + Animations
나는 프로토타이핑을 이벤트와 애니메이션의 조합이라고 단순하게 정의하고 싶다. 물론 작업 순서도 동일하다. 원하는 프로토타이핑은 원하는 UI component에 이벤트가 있을 때 애니메이션으로 반응하면 되기 때문이다. 동일하게 우리는 Framer에서도 원하는 component에 event를 주고 animation을 줄 것이다.
CoffeeScript (링크)
Framer에서는 CoffeeScript라는 프로그래밍 언어를 사용한다. 코딩이 처음인 사람은 진입장벽이 있겠지만, 그렇게 어렵지 않다. 우리나라 초딩들도 조금 배우면 코딩들 다 잘하더라. 그리고 GUI 디자이너 몇몇분에게 가르쳐 보았는데, 100% 이해를 못 하시겠지만, 원할 때 원하는 코딩을 찾아서 다 구현하더라. 걱정말고 공부하면 된다.
프로토타이핑을 하기 위한 3 단계 작업
Framer에서는 아래와 같은 순서로 작업하면 된다.
- Design (Sketch, Photoshop or Framer Design 창)
- Import (Sketch와 PS로 작업한 경우)
- Add events and animations
Framer Basic #1
뭔가 시작하기 전에 개념을 잡고 갔으면 한다. 그러나 열심히 설명을 했지만 많이들 이해할 수 없을 것이다. 반복이 생명이다. 반복하다 보면 익숙해 지고, 어느덧 알고 있거나 알고 있다고 착각할 수 있겠지.
Layer
Sketch, PS와 같이 Framer에서도 기본이 layer이고, layer의 조합이 group이다.
Layout, Hierarchy
Layer, group은 계층이 있고, 위에 있는게 밑에 있는 것을 가리게 된다. Framer에서는 group을 frame이라고 부른다.
Animations
Position, scale, visibility, color, radius 등 UI Component의 모든 속성을 변화시킬 수 있다.
강의 및 실습
Layer & Animations
Design 창에서 shape, text, frame으로 layer 만들고, 원하는 animation을 넣어본다. (Framer 링크)
FlowComponent
View전환 시 Built-in 기능인 FlowComponet를 사용한다. (Framer 링크)
# Create FlowComponentflow = new FlowComponent# Show the layerflow.showNext(layerA, animate: true)
습작들…
수업 후 본인의 습작을 공유하는 멋진 분의 것이다. 회사 디자인 보안에 문제가 안 되는 것을 올려보고, 자랑도 해보자.
