FramerX로 인터랙션 구현하기
오늘의 영상 : 코드 없이 Framer X로 프로토타이핑하기
이 글은 Ami song님의 '코드 없이 Framer X로 프로토타이핑하기' 영상을 보고 내용을 간단하게 요약 및 제 생각을 적은 글입니다.
Summary
1. 단축키
- Cmd+R : 이름 바꾸기
- Cmd+9 : Focus 확대
- Cmd+D : 복사
2. 기능
1) Frame & Add Frame : Group 기능과 유사, Element들을 체계적으로 관리 가능
2) Store : 이미 만들어진 다양한 컴포넌트들을 다운 받아서 Drag & Drop으로 손쉽게 사용 가능
- iPhone X Kit : 아이폰 X Status Bar, HomeButton
- Icon Generator : 아이콘 생성기 (버그가 있는 듯...? 아이콘의 한 부분이 잘려서 보이는 현상이 있음)
- Design Hunt : 각종 이미지 랜덤으로 사용 가능
- Unsplash : 우측 Search 옵션에서 검색해서 손쉽게 사진 찾기 가능
- Profile : 프로필 사진 제공, Grid & List 모드, Region 설정 가능
- Grid : 우측 옵션에서 Rows, Colums, Padding 등 설정한 그리드에 맞게 영역 설정 가능 / Design Hunt와 연결 시켜서 사용
- iOS Kit : iOS 컴포넌트 모음 (Detach From Master을 눌러야 수정 가능)
3) Overflow : Hide 기능으로 원하는 도형 모양으로 잘라줌
4) Create Component : 마스터 컴포넌트가 되면서 우측에서 체크 후 편집 가능. 마스터에서 파생된 컴포넌트들은 기존 마스터 컴포넌트가 수정되면 똑같이 수정이 됨.
5) Stauts Bar는 우측 옵션에서 Light, Dark 설정 가능
6) Graphic의 Drawing Mode 안에서는 Element들 Group 가능
7) Scroll : 스크롤할 영역을 지정한 다음, 만들어 놓은 Frame에 연결해주면 스크롤 적용됨. 우측 옵션에서 Direction으로 스크롤 방향 설정 가능.
8) Link : 화면 연결 기능. Target, Transition(Modal, Overlay, Push 등) 설정 가능
9) Stack : 자동적으로 위치 잡아줌. Align이나 Padding, Gap 등을 조절 가능.(아주 편리한 기능)
Note
- 최근에 프로토타이핑 툴을 이것저것 알아보다가 FramerX를 발견! 튜토리얼을 따라서 Behance 앱을 만들어 보았다. Ami Song님이 아주 친절하게 FramerX를 빠르게 습득할 수 있도록 Tutorial을 만들어 놓으셔서 덕분에 근사한 프로토타입을 만들 수 있었다.
- 사실 예전에 Framer을 써본 적이 있다. CoffeScript라는 문법으로 코드를 짜서 프로토타이핑을 했던 그 시절과 달리 지금은 Store라는 기능이 생겨서 미리 만들어진 컴포넌트를 이용해 위의 영상처럼 왠만한 Transition들을 손쉽게 구현할 수 있게 되었다. (Store 정말 마음 든다...)
- 당시 그 코드라는 장벽을 이겨내지 못하고 프레이머를 지웠던 1인으로써 Store는 앞으로 계속 (꼭) 활성화 되고 발전 되면 좋겠다 싶은 기능이다. 그렇다고 FramerX가 코드로 구현하는 기능을 버린 것도 아니니 나같은 코알못 유저도 붙잡아 둘 수 있는 매력 포인트가 생긴 것 같다. 프로토파이를 결제할까 했던 사람으로써...진지하게 FramerX를 고민 중이다.
- 튜토리얼을 보면 알겠지만 굉장히 쉽고 간단하게 완성도 있는 프로토타입을 만들 수 있다.
사실 실제 업무에서 보여줄 Transition은 맡고 있는 업무가 정말 혁신적이고 실험적인 프로젝트가 아닌 이상 + 시간이 많지 않은 이상 FramerX의 기본 기능만으로도 간단하게 충분히 원하는 것을 보여줄 수 있다고 생각된다.
- 다만, 내가 궁금한 것은...저렇게 만들어진 프로토타입을 개발자 분들에게 보여줄 때 어떻게 커뮤니케이션을 하느냐이다. 디자이너가 어떤 모습을 원하는지 이해는 하겠지만 단순히 저렇게 보여주기만 해서 개발자 분들에게 실질적으로 도움이 되는 부분이 뭘까? 하는 생각이 든다. 그래서 수치적인 부분들을 어떻게 알려줄 수 있을지가 궁금하다. 혹시 저런 Transition이나 마이크로 인터랙션 부분에서 프로토타이핑과 함께 개발자분들과 어떤 식으로 소통하고 계신지 경험담을 댓글로 알려주시면 감사드리겠습니다! 도움이 많이 될 것 같아요.
