1.2 framer 시작하기 - 2
지난번에는 framer 라이선스와 플랜, 인터페이스, insert, import에 대해 알아보았다. 이어서 나머지 기능들에 대해 알아보자. (지난 이야기는 https://brunch.co.kr/@fish-soul/3)
3. Docs
Docs는 도움말 색인이라고 볼 수 있다. 단축키는 cmd+d. 모르는 것이 있으면 이 docs를 참고하면 된다. (영어라서... 솔직히 감으로 때려 맞추고 있다...) 검색 기능이 있기 때문에 코드 단어나 연관된 검색어를 입력하면 된다.
4. Inspector
조사관, 감독관이라는 의미를 지닌 inspector는 주로 오류를 잡아낼 때 사용하는 것 같다. (지난번에 있었던 fraemr meetup seoul에서 발표자였던 김정민 님의 말씀으로는 개발자가 아니면 때려 죽어도 모르는 부분이라고...) 메뉴바에 있는 inspector를 클릭하면 아래와 같은 새창으로 상세한 내용을 확인할 수 있다.
inspector 메뉴를 사용하지 않더라도 코드입력 인터페이스 하단에서도 간략한 오류 확인이 가능하다. 상세한 내용을 보려면 하단 오류 메세지 앞에 있는 아이콘을 클릭해도 된다.5. Snippet
Snippet은 (작은) 정보라는 의미로 framer에서는 자주 쓰이는 코드나 예제를 불러올 수 있다. 불러온 코드를 커스터 마이징하여 손쉽게 사용이 가능하다. 처음부터 코드를 작성하는 건 어렵지만, 기존에 있는 코드를 수정할 수 있는 정도의 레벨이라면 활용하는 것이 좋을 것 같다.
6. Mirror
Mirror는 모두가 예상하는 대로 모바일 앱과 연동할 수 있는 기능이다. 같은 와이파이에 접속해 있는 등 조건이 있는데 사실 나는 연동이 잘 안돼서 작업 중인 프로토타입을 미러링 하는 데는 거의 쓰지 않는다. 하지만 다른 사람이 작업한 프로토타입 링크를 받았을 때 보기 위해서 핸드폰에 앱은 설치해두고 있다.
이미지 출처 : https://framerjs.com/getstarted/preview/7. Cloud
최근 업데이트로 생긴 Cloud 서비스. 정말 정말 이런 서비스! 너무 기다렸다. 기존에 이 cloud 자리에는 share 메뉴가 있었는데 다른 사람에게 프로토타입을 공유할 때 쓰던 메뉴다. share를 클릭하면 framer 웹서버로 업로드되어 웹에서 확인할 수 있는 링크를 제공해주었다. 하지만 내가 작업해서 공유한 프로토타입의 웹 link를 일일이 기억할 수도 없고 찾을 수도 없어서 다시 share를 눌러 업로드해야만 해서 용량이 클 경우에는 시간적인 불편함이 있었다.
이미지출처 : https://framerjs.com/getstarted/cloud/그런데 최근 업데이트로 cloud 서비스가 안착했다. cloud는 share기능에 내가 업로드한 프로토타입들을 모아서 보여주도록 진화했다. 기존의 share에서 제공하던 웹 링크뿐만 아니라 설명을 추가와 버전 관리도 할 수 있어 넘나 편한 것!
자세한 내용은 아래 링크에서 확인하자.
https://framerjs.com/getstarted/cloud/
8. Present
발표 시에 사용할 수 있는 프레젠트 모드. 업무 할 때 프로토타입은 디자이너와 개발자 간의 커뮤니케이션을 돕기도 하지만 아무래도 제안할 때 사용하는 일이 많아서 이 프레젠트 모드가 꽤나 유용한 것 같다. 프레젠트 모드를 사용하면 디바이스 프리뷰 화면이 전체 화면으로 전환된다.
9. Device & Rotation & Hand
프로토타입을 디바이스 목업에 넣어 볼 수 있는 화면이다. 애플 워치부터 TV, 애플부터 삼성까지 디바이스 타입뿐만 아니라 제조사까지 다양하게 목업을 제공한다.
디바이스 목업에서 rotaion 메뉴를 이용해 가로, 세로 변경할 수 있다.
Hand를 클릭하면 손으로 쥐고 있는 핸드폰 목업을 사용할 수 있다.
인종차별없는 framer.10. Reload
디바이스 프리뷰 새로고침 할 수 있다. 보통은 코드가 바뀌면 자동으로 새로고침 되지만, 코드가 바뀌지 않은 상태에서 다시 첫 화면으로 돌아가고 싶을 때 등에서 사용할 수 있다.
11. Zoom
디바이스 프리뷰의 화면 비율을 나타낸다.
메뉴바에 있는 모든 메뉴를 살펴보았다.
다음 편에서는 이제 지금까지 작업해왔던 프로토타입을 기준으로 코드 등에 대해 알아볼 예정이다.
아무래도 내가 공부했던 방식을 기본으로 하기 때문에 코드를 일일이 열거하면서 하진 않을 것 같다. 처음 스터디할 때도 docs와 Get Started(https://framerjs.com/getstarted/guide/)에 있는 순서대로 따라 쓰며 공부를 했었는데 그게 나한테는 영- 맞지 않는 방법이었다. 우선 목차대로 하는 건 재미가 없었다. 재미가 없으니 정확히 어디에 써야 할지 응용력도 떨어질 뿐 아니라 머리에도 안 들어왔다.
그래서 내가 택한 방법은 'framer 예제 모작하기', 'gif 모작하기'
'framer 예제 모작하기'는 framerJS 사이트의 Gallary 에 있는 예제들을 다운로드하여서 코드를 그대로 베끼는 방법인데 베끼기라 쉽고 구조 파악이나 어떤 코드가 무슨 역할을 하는지 이해하기가 쉽다.
'gif 모작하기'는 'framer 예제 모작하기'의 상위 방법이라고 할 수 있는데 만들고 싶은 gif를 찾고 그걸 똑같이 내가 코드를 작성해보는 방법이다. 'framer 예제 모작'과는 다르게 참고할 코드가 없으므로 '어떻게 하면 이렇게 만들 수 있을까' 스스로 방법을 모색하며 응용력이 생긴다.
단점은 체계와 근본이 없어진 부작용이 생긴다는 건데 (;_;) 이번 시리즈를 만든 목적은 이전보다는 '체계'와 '개념'을 세우는 것이므로 기존에 했던 작업에 스크립트에 대한 원리적인 내용을 공부하고 덫붙여보려 한다. 계획만큼 성공적이기를...!
instagram: https://www.instagram.com/fish0422/
facebook : https://www.facebook.com/fish0422
blog : http://blog.naver.com/fish0422
