하나의 툴을 배우기 위해서
프레이머 혼자서 배우는 나만의 방식
첫 번째 글, 프레이머를 시작한 이유에서 프로토타입 툴을 배우려고 한 이유에 대해 이야기했다면, 이번에는 프레이머를 선택한 이유와 어떻게 익혀나가고 있는지에 대한 방법을 공유하고자 합니다.
프레이머를 선택한 이유.
현재 프로토타입 툴에 대한 관심도가 높아짐으로 인해 우리가 사용할 수 있는 프로토타입 툴이 많아졌습니다. (이에 관한 전반적인 Overview를 김지홍 님이 잘 정리해 주셨습니다 - Prototyping tool #5 )
이 수많은 툴 중 사용하고자 하는 목적, 난이도, 기능에 따라 자신에게 맞는 툴을 선택하면 된다고 생각합니다. 중요한 건 툴을 사용하는 스킬 자체를 높이는 것보다는 '필요한 결과물을 빨리 내놓을 수 있는가?', '자신의 생각을 효과적으로 표현할 수 있는가?'에 집중을 하였을때 더욱 더 집중도 있게 툴을 익힐 수 있는 것 같습니다.
그러한 것을 고려하였을 때, 제가 첫 번째 스터디 툴로 프레이머 툴을 선택한 이유는 아래와 같은 이유에서 선택을 하였습니다.
혼자서 스터디할 수 있는 자료가 많다.
커뮤니케이션할 수 있는 공간이 많다.
어느 정도 진입장벽을 낮추면 자신이 원하는 결과를 가장 잘 표현할 수 있는 도구이다.
'스케치와 연동이 잘된다', '미러링이 잘된다', '결과가 바로 반영된다' 등의 이유도 있을 수 있지만, 무엇보다 스스로 공부해야 하는 저에겐 공유가 잘되어 다른 사람의 코드를 쉽게 접근할 수 있다는 부분이 크게 다가왔습니다. 그리고 제가 프레이머로 당장 실무에서 사용한다기 보다(실무에서는 인비전과 같은 워크플로우의 형식이 더 잘맞았기에), 마이크로 인터렉션을 연구하는 것에 초점을 맞춰야했기 때문에 프레이머가 적합했습니다.
그래서 이번 기회에 그 어렵다는 코드도 살짝 공부할 겸, 인터렉션 디자인에 대한 스터디를 본격적으로 시작하게 되었습니다.
프레이머를 배우는 과정.
1단계. 프레이머 스터디 모집
아직도 일주일에 한 번씩 진행하고 있는 스터디 모임의 시작은 다시 생각해봐도 참 재미있습니다. 프레이머 스터디 모집에 대한 열망이 많았던 4월 어느 날, 우연히 준원님 (Framerjs korea 운영자)과 만나게 되었습니다. 1월에 Interaction Design Meetup에서 처음 뵌 이후로 정말 길거리에서 우연히 마주쳤었는데 몇 마디 나누다가 갑자기 제가 뜬금없이 스터디 선생님이 되어달라고 부탁을 하였고, 그 당시 스터디를 여러 개 운영하시고 계시던 준원 님은 그렇게 엉뚱한 저의 제안의 한치의 망설임도 없이 받아주셔서 우리의 스터디 모임은 시작되었습니다.(근데.. 이제는 준원 님이 스터디를 다 마친 상태라 아마 부탁 하신다 해도 어려운점 양해 부탁드립니다.)
준원님과 한 마지막 스터디 날 뒷풀이에서멤버 구성은 저의 전 직장 동료들과 그의 친구들인 디자이너로 구성되었고, 현재 준원님은 스터디를 같이 하고 있지 않은 상태이지만, 남아 있는 디자이너 멤버들끼리 일주일에 한 번씩 모여 프레이머 외에도 디자인에 대한 의견을 나누며 친목 겸 스터디 모임을 유지하고 있습니다. 원래 저의 성격은 절대로 그렇게 누군가에게 부탁을 하거나, 어디 모임을 간다거나 하는 성격이 아닌데 초면인 분에게 그런 부탁을 하다니.. 지금 생각해보면 어떻게 그랬지 하지만서도 디자이너보다 개발자의 시선과 가르침이 필요한 그때 간절한 마음에 용기가 났었나 봅니다.
그렇게 짧으면 짧은, 길면 긴 3개월의 시간 동안 기초에 대한 개념들이 많이 생겨났고, 많은 응원과 가르침을 준 준원 님에게 다시 한 번 감사의 인사를 드립니다.
2단계. 프레이머 동영상 강의
스터디를 할 때 다른 멤버들보다 내용에 대한 숙지가 빠르지 않아 Framerjs 홈페이지에 들어가 다른 자료들을 살펴보았습니다. 그러다 동영상 강의가 있다는 것을 보고 스터디에서 놓친 부분을 채워가며 동영상을 보며 저 나름대로 보충 수업(?)을 했습니다. 확실히 영상으로 코드의 순서를 확인하면서 따라하다 보니 개념을 알아가기에 좋았습니다. 그리고 udemy 사이트의 좋은 점은 업데이트된 부분에 대한 추가 강의도 한 번 결제하면 계속 볼 수 있기에 변화하는 프레이머도 쉽게 강의를 들으며 익혀나갈 수 있습니다.
Udemy - Framerjs 강의그렇게 영상과 스터디를 동시에 진행하면서 알았던 점은 코드의 작성법에 대한 정답은 없다는 점이었습니다. 다양한 방식으로 구현이 된 다는 점은 사실 결과만 중요한 디자이너들에게는 좋은 부분으로 다가 올 수 있습니다. 개발자에게는 짧게 구현되고 정리된 코드가 사용성에 영향을 미치지만, 우리는 아무리 코드를 복잡하게 써도 잘 작동만 되면 되다보니, 일단 개념을 익히고 나만의 코드 아카이브를 만들어 나가는 것이 중요하다고 생각했습니다. '복붙도 괜찮다!'라는 생각만 있으면 어려운 장벽을 하나하나씩 헤쳐나가는데 큰 도움이 될 것입니다.
유료사이트 : https://www.udemy.com/framerjs-prototyping-design-interaction-animation/
무료사이트 : http://youtu.be/WNZBcCfawII?list=PL9p5auxyrweMB6JVO24jFvW4NZufHacjz
3단계. 프레이머 튜토리얼로 개념 익히기
세상엔 너무나 좋은 사람들이 많기에! 프레이머에 대한 기본개념을 하나하나씩 가르쳐주시는 좋은 분들과 자신이 작업한 결과물을 공유해주시는 분들이 많습니다. 스터디와 강의 외적으로 개념 정리가 잘 되어 있는 글을 읽다보면 도움이 많이 받을 수 있습니다. 이미 많은 분들이 보셨겠지만 아직 제대로 시작을 못하신 분들에게 많은 도움이 되실 것이라 생각합니다.
A. 한국어 프레이머 튜토리얼
(1) 안지용 님의 디자이너를 위한 코드
5년 전 인턴생활에서 처음 인연을 맺게 된 지용님. 5년 전에도 남다름을 익히 알고 있었지만 이렇게 프레이머를 너무나도 친절해주시니 그의 재능이 더욱 빛날 수 밖에 없는 글입니다.(시리즈 #1~#6까지 있습니다)
(2) 장준혁 님의 프레이머 Framer Basic
제가 이 글을 접할 쯤에는 기본 개념을 어느 정도 깨우친 상태였었는데, 준혁님의 글을 읽고 나서 다시 한 번 개념 정립하는데 많은 도움이 되었습니다. 기본 요소부터 함수까지 프레이머 초급자에게 더할 나위 없이 명확하게 설명되어 있는 글을 만나 보실 수 있습니다.
(3) 이다윗 님의 Arrays in Framer
기본 개념에 대한 글과 예제도(3 Things to Get Started) 잘 정리되어 있지만, Array 개념을 익혀 나갈 때 읽었던 다윗님의 Array에 관한 글이 많은 도움이 되었습니다. 특히 인스타그램 예제로 코드 정리하는 법을 알게 되어 여러모로 유용하게 사용하고 있습니다.
(4) 이정영 님의 Learning Curve of JY
일찍부터 현업에서 프로토타이핑을 하시면서 많은 깨달음을 공유해주신 정영님께서 그동안 쓴 글을 모아 Medium Publication을 발행했습니다. framer에서 자주 발생하는문제와 tip을 Dropbox 문서에 잘 정리해주시기도 하셨으며, 특히 개발 플랫폼과 고려한 애니메이션에 대한 정리를 알기 쉽게 잘 정리해주셨습니다.
(5) 최민상님의 Framer
작성하신 년도를 보니 2014년. 지금보다 자료도 많지 않았던 황무지 시절에 프로토타이핑 툴에 관심을 가지고 분석하며, 한국 커뮤니티의 많은 사람들에게 전파시켰다는 점이 놀라지 않을 수 없습니다. radiofun님의 블로그 글은 프레이머 소개글 외에도 주옥같은 글들이 많습니다.
+ 그외 꾸준히 디자인 활동을 하고 계신 최민상님의 dribbble
B. 영어 프레이머 튜토리얼
(1) Framerjs Homepage / Books
framerjs 홈페이지와 Docs 및 E-book 을 통해 기본 개념부터 차례대로 익혀나가는 것도 방법이라 생각합니다. 일명 중고등학생때 들고 다녔던 영어 맨투맨과 수학의 정석이랄까요?
+ https://framerjs.com/getstarted/programming/#functions
4단계. 프레이머 파일 확인하기
전세계적으로 프레이머 커뮤니티가 활성되나 보니 난이도가 쉬운 것부터 어려운 것 까지 많은 프로토타입 예제들이 이 있습니다. 그 중에서 자신의 레벨에 맞는 프로토타입을 찾아 작업하기 쉬운 것부터 차근차근히 하나씩 따라하기 시작하면 자연스럽게 다음 작업에 대한 욕심이 생겨납니다.
그럼 프레이머로 작업된 프로토타입들이 있는 공간을 찾아봐야겠죠?
A. 포트폴리오 사이트
(1) Framerjs Archive
* 프레이머 갤러리 : http://framerjs.com/gallery/
* 프레이머 아카이브 : http://framerco.de/archive
* 50일 프레이머 프로젝트 : http://rmion.com/framer-js-in-100-days/
* edchao(개인디자이너) : http://thatedchao.com/published/2014/09/27/framer.html
* Framer 예제 : http://examples.framerjs.com/#facebook-newsfeed-photos.framer
* Lucky Charm behance : https://www.behance.net/gallery/42717053/Framer-js-Worker-advanced-prototypes
*100 days project : https://dribbble.com/FaridSabitov/projects/373594-100-days-with-Framer
(2) dribbble
* 김유경님 드리블 : https://dribbble.com/yukyungkim
-> 한 동안 드리블 및 페이스북 커뮤니티 사이트에 좋은 작업물을 꾸준히 공유해주신 유경님의 드리블입니다. 개인적으로 자극을 많이 주신 분이기도 합니다.
* 그외 드리블에서 Framer 검색을 통해 많은 예제들을 살펴볼수도 있습니다 : https://dribbble.com/search?q=framer
(3) pinterest
그리고 저는 드리블 및 다른 사이트를 통해 프레이머 파일이 공유된 사이트만 골라 핀을 하여 관리하고 있습니다.
https://kr.pinterest.com/yesleepin/framerjs/
B. 커뮤니티 사이트
그리고 커뮤니티 사이트에도 주옥같은 예제들이 많이 공유되고 있습니다. Tip 뿐만 아니라 어려운부분이 있을 때 질문을 하면 답변을 해주시는 분들이 있기에! 커뮤니티 사이트를 통해 프레이머의 실력을 쌓으시면 좋을 것 같습니다.
(1) Facebook - Framerjs Korea
https://www.facebook.com/groups/framerkorea
(2) Facebook - Framerjs 공식 페이지
https://www.facebook.com/groups/framerjs
지금까지 프레이머를 배울 수 있는 사이트 및 아카이브를 공유하였습니다. 하나의 툴을 배우기 위해서는 여러가지 방법이 있겠지만, 사실 마음가짐과 매일 반복해서 하는 수밖에는 없을 것입니다. 실제로 일을하면서 UI 디자이너가 프로토타입을 하는 일은 아직까지 많지 않은 것으로 알고 있습니다, 그렇기에 저와 같이 혼자 마음먹고 공부해야하는 분들이 많을 것으로 예상되는데, 그런점에서 제일 중요한건 지금의 실력보다도 끈기라 생각합니다.
그렇다면 칼과 재료를 준비한 셈이니 이제 직접 요리를 하는 일이 중요한 것이겠죠?
아직 저의 프레이머 수준은 라면 끓이는 수준밖에 되지는 않지만(if문 그이상 벗어나고 있지못해 슬픈요즘 ㅠ)., 그래도 라면 잘 끓이는 것도 요리라고 제가 익혀 나갔던 비법 아닌 비법에 대해서는 다음 글에서 공유하도록 하겠습니다.
