brunch

매거진 Framer 초보탈출기

라이킷 36 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 유나 Dec 23. 2016

1.1 framer 시작하기 - 1

License

우선 https://framerjs.com/에서 free trial 버전을 다운로드하여 한 달 정도 시범적으로 사용할 수 있고 그 후에는 결제를 해야 한다. 내가 구매했던 시기(2016년 2월)를 기준으로 설명하면 1개의 라이선스 당 2대의 기기 설치가 가능하다. 어떤 용도로 사용하든 1년 치 사용료를 지불하는 방법 하나만 있었는데 지금은 pro, plus, enterprise 이렇게 3가지 플랜으로 나눠졌다. pro는 영구적으로 사용은 가능하지만 프로그램 업데이트는 1년 간만 가능한 플랜이고 plus는 팀을 위한 것이라고는 하나 adobe cc처럼 매달 정기적으로 금액을 지불하는 플랜이라고 보는 게 편할 것 같다. 마지막으로 enterprise는 기업을 위한 플랜이다. (근데 또 어느새 가격이 올랐다... 내 라이선스 만료가 다가오고 있는데... ;_;)

framer 사이트에 고지된 각 타입별 금액 (2016년 12월 23일 기준)

학생은 학생증이던 재학증명서든 증빙할 수 있는 자료를 메일로 보내면 50% 할인해주는 것으로 알고 있다. (나도 학생 하고 싶다. 학생 만세!)

라이선스와 플랜에 관련하여 더 궁금한 사항은 https://framerjs.com/pricing/ 여기를 참조.

Interface

framer를 실행했을 때 첫 화면

framer를 실행하면 위와 같은 화면이 나온다. (벌써 v78이다. 정말 자주 업데이트가 되고 가끔은 시도 때도 없이 업데이트가 된다고 생각될 때도 있었다. 업데이트가 되면 구버전에서 만들어놓은 프로토타입들을 업데이트해야 하고 가~끔 업데이트 버전으로 저장을 해도 코드가 안 맞아서 작동이 안 되는 경우가 생기는데 그럴 땐 솔직히 좀 짜증 난다...)

디자인이 참 깔끔하다. 블랙&화이트로 구역을 나누었고 왼쪽 블랙 배경 영역은 framer에 대한 기본 예제 4가지의 썸네일과 시작하는 사람들을 위한 가이드 링크(https://framerjs.com/getstarted/guide/), 페이스북 커뮤니티 링크(https://www.facebook.com/groups/framerjs/)가 있다. 검색창에 키워드를 입력하면 페이스북 커뮤니티의 글에 대한 검색 결과가 구글 사이트를 통해 나온다.

오른쪽 화이트 배경 영역은 최근 사용한 프로토타입의 리스트가 있고 새 프로토타입(cmd+n)과 프로토타입 열기(cmd+o) 메뉴가 있다.

새 프로토타입을 하던 프로토타입 열기를 하던 첫 화면과 마찬가지로 블랙 & 화이트+그레이로 3 분할된 화면이 나온다. 굉장히 많은 업데이트로 10개월 전과는 다르게 편리해진 점이 굉장히 많다. 무엇보다도 auto code 기능이 생겨 한결 작업 속도가 빨라졌다. (auto code에 대한 상세한 내용은 http://blog.framerjs.com/posts/introducing-the-new-framer.html#_ga=1.201872985.993884861.1468890395 참조.)

블랙 영역에 코드를 입력하면 입력된 코드에 따른 상태를 화이트 영역에 preview로 볼 수 있다. 그리고 그 중간에 위치한 그레이 영역은 포토샵에서 레이어 패널처럼 레이어가 쌓인 순서를 보여주기도 하고 때로는 auto code를 위한 설정창이 되기도 한다.

왼쪽은 레이어의 상태, 오른쪽은 auto code 설정창. auto code에선 filter 까지 조율이 가능하고 설정창은 그림에 보이는 아이콘을 클릭하면 된다.

이제 조금 더 디테일하게 인터페이스를 뜯어보도록 하자.

framer 메뉴바. 상단 메뉴는 생각보다 심플하다. 왼쪽부터 순서대로 살펴보겠다.

1. Insert

insert는 auto code 기능 중 하나로 자동으로 코드를 생성해준다. 기본 레이어나 이미지 레이어를 삽입할 수 있고 배경색 지정도 자동으로 가능하다. 레이어가 있다면 레이어에 애니메이션을 주거나 state, event 등의 기능도 코드를 일일이 타이핑하지 않아도 코드를 생성해준다.

2. Import

스케치나 피그마, 포토샵에서 작업된 그래픽 파일을 불러오는 기능이다. 저장된 파일을 지정하여 불러오는 것이 아니라 실행되고 있는 파일을 싱크 맞추듯 import 하기 때문에 반드시 불러오고자 하는 파일이 실행되어 있어야 한다. 그렇지 않으면 import 버튼이 비활성화되어 작동하지 않는다.

그리고 벡터 기반인 스케치와 피그마는 불러올 그래픽의 배수를 선택할 수 있다. 모바일 작업 시 framer는 디바이스의 원 사이즈를 그대로 사용하므로 스케치나 피그마에서 x1으로 작업을 했다면 각 디바이스에 맞게 배수로 불러와야 한다. 예를 들어 iphone 7 기준으로 스케치에서 375 사이즈로 작업한 파일을 framer로 import 할 때는 @2x로 설정해야 한다. 그러나 스케치에서 750으로 작업했다면 @1x를 선택하면 된다.

스케치를 실행 중이므로 활성화 되었지만 포토샵은 비활성화처리 되었다. (피그마는 온라인 서비스라 예외인 것 같다.

디자인 파일을 import 할 때 유의할 점은 움직임을 줘야 하는 요소는 반드시 그룹으로 지정되어 있어야 한다는 것이다. 그룹으로 지정되지 않은 요소들은 모두 하나의 이미지로 통합되어 import 되기 때문이다. 자세한 내용은 아래의 이미지를 보자.

예시는 지금 내가 개인 프로젝트로 진행 중인 파일의 초안을 불러와봤다. 스케치 레이어 화면을 보면 HEADER라는 그룹 안에 BtnMore와 BtnFontList만 그룹으로 지정하고 나머지는 그룹화하지 않았다. 이 파일을 framer로 import 하면 레이어가 보이는 공간에 그룹으로 그룹화하지 않은 요소들은 보이지 않는 것을 알 수 있다. 프로토타이프 파일의 폴더에서 import 된 소스를 찾아보면 그룹화하지 않은 요소들이 하나의 이미지로 통합된 것을 볼 수 있다.