프로토타이핑 with Framer .js— 소개
푸로페셔널 인터랙션 디자인
최근까지도 글을 읽어 주시는 분들께.
2015년, 글을 쓸 당시 저는 일반적인 기획자 수준보다는 많은 개발 경험이 있었기 때문에
자바스크립트가 익숙한 편이었고 es6 문법으로 BrowserSync 사용해 빌드하는 스크립트를 짜 사용했습니다.
사실 그래서 그때의 Framer Studio가 저에겐 필요없었어요.
그렇게 쓰면서, 솔직히 쉽다 말은 해도 어느정도 문턱이 있는 도구로 생각했지요.
문제는 React나 Angular로 웹앱을 만드는 시간과 Framer.js로 원하는 그림을 그리는 것의 시간이 그렇게 큰 차이가 없었어요.
욕심내서 정교하게 만들다보면 Framer도 꽤 긴 코드를 작성하게 되니까요.
직접 코드로 웹을 만들 수 있는 제 입장에서 사실 Framer는 좀 애매했습니다.
하지만 글 발행 후 2년이 지나면서 많은 변화가 있었습니다.
Design Tool이 추가되어버렸습니다.
아주 친절한 코드 스니펫들, Sketch 파일에서 레이어를 가져오는 방식의 개선들.. 등등.
최근의 업데이트를 보면서 느낀 것은
"이제 정말 비개발자에게도 부담스럽지 않은 수준이 되었구나" 였습니다.
예전과 달리 정기 구독 형태의 구매 방식으로 바뀌어서 좀 안타깝긴 하지만..
예전에는 소개글로 "좋다" 정도를 말씀드렸다면
이제는 좀 달라졌어요.
"굉장히 좋습니다"
소개에 앞서
왜 필요한가는 굳이 자세히 얘기하고 싶지 않다.
이 글은 Framer 를 사용해본 경험과 선택의 이유가 궁금하거나 유사 도구와 비교해보려는 사람에게 Framer 를 소개하기 위한 글이다.
프로토타이핑 도구들.
프로토타이핑을 위한 수십개의 도구가 이미 서비스 중이고 이전과 달리 정말 일에서 사용할만한 수준을 갖춘 도구들도 많다. 이름이 알려지기 시작한 몇몇 회사의 서비스들은 쓸만한 기능 뿐만이 아니라 사용 지원과 기능 업데이트까지 활발하게 이뤄지기 때문에 그냥 믿고 써도 될 정도.
다들 목표는 비슷한 편이고, 제작 과정에 들어가는 노력이 다를 뿐 결과물의 수준도 비슷하게 만들 수 있다. 다만 도구의 형태는 많이 다른 편인데 크게 나눠 세가지 특징으로 분류할 수 있겠다.
1. Flow Based Tools (Quartz Composer)
2. Code Based Tools (Framer)
3. Just Drawing Tools (Invision, Atomic, Pixate, Proto.io…)
새로 생겨나는 도구들은 대부분의 3번이다. 얼마전까지만해도 PPT에서 쓰던 애니메이션 도구만 쓰기 편한 정도로 구현하고 “Codeless” 를 강조한 그저그런 서비스들이었지만, 근래들어서는 타임라인에 상태 같은 걸 넣은 본격적인 모습이다. 마치 예전에 쓰던 Flash를 다시 보는 듯 하다.
가장 최근에 눈여겨 본 서비스들. 참 알차게 많이도 넣어놨다.
위 링크로 들어가면 프로토타이핑 도구 리스트를 볼 수 있다. 뭔가 좀 오타쿠 같지만 위 사이트에 소개된 도구의 절반 이상을 사용해봤다. 소개되지 않은 도구들 몇몇에는 국내에서 만든 네이버의 프로토 나우와 카카오의 오븐, 개인적으로 눈여겨보고 있는 JDlab의 아이유 에디터 등이 있다. 어도비에서도 2016년 봄에 새 도구를 내놓는다고 한다.
뭘 쓸까 고민해봤다.
좋은 도구들이 많이 생겼기 때문에 선택의 고민도 꽤 커졌다. 각 도구들에 대한 소개와 비교글도 많다. 각각 장단점이 있고 예전과 달리 이제는 수준이 상향평준화 되었다.
하나 골라 사용해보기 위해 좀 더 기준을 좁혀봤다.
1. Flow Based Tools은 제외 > 겉으로 보기에 이것들은 “Codeless” 해 보이지만 결과적으로는 실제 코딩을 하는 것과 다름없다. 어차피 이런 종류의 문서 작업을 위해서는 시각화된 프로그램의 흐름을 머릿속에 그려놓고 있어야 한다. noflojs 와 같이 본격적인 도구가 아니고서야 코드를 직접 짜는 것보다 불편하다.
2. 협업/공유가 쉬워야 함 > 만드는 게 편하기만해서는 소용 없고. Pixate 같은 전용 앱을 필요로 하거나 Form 처럼 맥이 필요하다거나 하면 제외. URL 링크 공유로 웹브라우저에서 열람할 수 있는 것이 가장 좋다. APK 를 직접 빌드해서 공유하는 것도 나쁘지 않다.
여기까지는 꽤 많은 도구가 남는다. 좀 더 추려내자면
1. 자유도 > “ease” 와 “ease-in” 정도 고르자고 이런 도구 사용하는 거 아니다. 전부 내 마음대로 움직여야 한다.
2. 러닝커브 > 이까짓거 좀 움직여보겠다고 크고 길게 배우고 싶지 않다.
3. 돈 > 대부분 정기 구독 형태의 서비스가 많다. 회사의 지원을 받는다면 문제 없지만, 프로토타이핑과 반복 개선 같은 문화가 없다면 PPT 이외의 도구를 사용하는데에 대한 이해를 구하기가 힘들다. 굳이 내 돈으로라도 사고 싶다면 한번 구매로 사용 가능한 서비스가 좋겠다.
4. OS > 맥에서만 굴러가는 도구는 제외한다. 맥북 프로를 쓰고 있긴 하지만 들고 다니긴 무겁다. 같이 일하는 사람들이 맥을 쓰는 경우도 많지 않다.
물론 내 맘대로 만들 수 있는데 러닝커브가 낮은 경우는 아직 없다. 결국 선택을 하게 되는 두 갈림길이 있는데. “사용이 쉽다” 로 포장한 어설픈 도구와 “표현이 자유롭다” 로 포장된 쓰기 어려운 도구, 두 가지다.
선택해보자면,
1. 사용이 쉬운 도구 : Invision
2. 표현이 자유로운 도구 : Framer
짧은 시간에 만들어 간단한 리뷰 정도 진행할 때는 Invision 정도가 편하다. 사용법 숙지 같은 것도 필요 없고 제공되는 부가 기능들도 좋다. 좀 더 정교한 인터렉션이 필요할 때가 Framer 를 쓸 때다. 개인적으로는 러닝커브가 크더라도 좀 더 강력한 도구가 좋다. 사실 다른 분야와 비교해서 별 것 아닌 러닝커브이기도 하다.
http://www.slideshare.net/cmccann77/design-research-prototyping
골라놓고 보니 다른 사람들도 비슷했나보다. 설문조사를 해보니 Invision + Framer 사용자가 절반 이상이라고 한다.
Framer Studio
Framer Studio 는 커피스크립트를 사용하는 Code Based Tool 로 아주 간단하게 제작한 프로토타입을 공유 가능도록 웹에 올려 호스팅까지 해준다. 때문에 브라우저만 있으면 열람이 가능하다. 다른 도구에 비해 커뮤니티가 활발하게 조성되어 있고 표현 가능한 움직임의 자유도도 높다. 가격은 구독 형태가 아니라 라이센스 구매 $99.
개발자가 꽤 적극적으로 커뮤니티에서 활동하고 있고 프로그램 업데이트도 활발하게 지원하고 있다. 프로그램 구매 후에도 이것저것 바뀐 것이 참 많다.
아직까지는 가장 높은 수준의 구현을 가장 적은 러닝커브로 제작할 수 있는 도구다.
크게 세부분으로 나뉘어져 있는데 좌측은 코드, 중간은 만들어진 레이어들의 리스트, 우측은 구현된 프로토타입이다. 코드 입력을 하면 일정 시간 이후에 프로토타입이 새로고침 된다. 작은 것 하나하나 수정할 때마다 반영되기 때문에 바로바로 확인하며 작성할 수 있다.
사실 Framer Studio 의 주요 기능은 한 개의 커피스크립트 파일에 대한 코드 편집기와 여기에 입력한 코드가 포함된 빈 HTML 페이지를 보여주고 있는 것에 지나지 않는다. 입력한 코드가 변경될 때마다 그냥 웹페이지를 새로고침하는 것이다.
Framer Studio를 굴리는 가장 중요한 것은 Framer.js로, 프로토타이핑을 위한 여러 편의 도구들 (레이어나 스크롤 객체부터 이벤트 리스너와 각종 편의 도구) 을 제공하는 오픈 소스 프로젝트이다.
물론 부가적인 기능으로 작성한 프로토타입을 공유할 수 있도록 업로드/호스팅 해주는 기능과 Sketch나 Photoshop 에서 작성한 리소스를 가져오는 기능이 아주 유용하다. 사실 이것 때문에 구매했었다.
Framer.js?
처음 봤을 때에는 오픈 소스 프로젝트라는 말도 없고, Github Repository에 가봐도 Framer Studio 에 대한 설명만 있기 때문에 Framer.js 사용을 위해서는 Framer Studio가 필수인 것으로 착각할 수 있겠지만, 아니다.
Framer Studio 는 Framer.js 를 좀 더 사용하기 편한 환경으로 만들어주는 “유료 코드 편집기” 이고 Framer.js 는 그냥 가져다 쓸 수 있는 자바스크립트 프레임웤 같은 것. 예를 들자면 jquery 같은 거다.
결론적으로 Framer.js 를 사용해서 프로토타이핑을 하기 위해서는
$99를 결제하지 않아도 된다.
Mac, OSX가 아니어도 된다.
평범한 HTML+CSS+JS 이기 때문에 웹에 띄워서도 편집할 수 있다. 실제로 누군가 만들어서 띄워놨다. 아래 사이트를 들어가보면 몇 가지 부가 기능이 제외된 Framer Studio 를 볼 수 있다.
실제로 작성하려면.
Framer.js 는 개발자가 아닌 사람도 쓸만한 정도로 굉장히 쉽게 쓰여져 있고 안내 문서도 잘 만들어져 있는 편이다. 안내 문서를 읽고 숙지해서 쓴다기 보다는 그냥 필요할 때마다 검색해서 보면 된다.
적당한 샘플을 골라서 코드 복사해다 붙여넣는 것으로 시작해도 편하다. 홈페이지에 샘플도 꾸준히 늘어나고 있고, 커뮤니티에도 사람들이 만든 것들이 꽤 많이 올라오고 있다.
아주 간단하게 작성 예를 보자면,
layer = new Layer
x: 100
y: 100
width: 100
height: 100
..라고 써넣는 것으로
이런 사각형을 얻을 수 있다.
이제 여기에 뒷배경색이라던지, 이미지 같은걸 넣어주면 그럴싸한 모습으로 바뀌게 된다. Framer Studio 를 쓰면 Photoshop 이나 Sketch 에서 작업한 고대로 가져와 붙여주기 때문에 일이 매우 쉬워진다.
원하던 모습이 갖춰졌으면 이제 움직여볼 차례.
animation = new Animation
layer: layer
properties:
x: 400
animation.start()
요런 식으로 써주고 나면 옆으로 움직인다. 그냥 바로 움직인다.
뭔가 인풋이 없었는데도 바로 움직이는 것이 이상하다. 뭔가 눌러줘야 움직이는게 좋겠다 싶을 때는 이런식으로 써준다.
layer.on Events.Click, ()->
animation.start()
이제 저 조그만 사각형을 눌러야 움직이는걸 볼 수 있다.
사용 안내 문서에 친절하게 안내되어 있고 코드 가독성도 좋아서 처음 접한 사람도 읽어보면 뭔지 예상할 수 있을거다.
사실 여기까지는 다른 GUI 도구들에 비해 특별히 더 나은 점은 없다. 비교적 쉽게 이미지 넣고 크기 잡고, 움직이는 좌표 정도 잡는 것으로는 비슷비슷한데 어째서 코드를 직접 치는 어려움을 감수해야하나? 라는 의문이 들 때는. 수십개의 레이어에 상태를 기록하고 이벤트를 할당해 알맞게 배치하는 과정을 GUI 도구로 만드는 것을 생각해보면 된다. 복잡해질수록 당연히 코드를 직접 치는게 편하다.
덤으로 Gulp 같은 Build Task 를 만들어 사용하는데 어려움이 없는 사람이라면 윈도우에서 Framer Studio 와 유사한 환경을 만들어 돌릴 수 있다. Framer Studio가 지원하지 않는 Babel 을 끌어다 쓰거나 Module Import, SASS 같은 것도 쓸 수 있는 장점도 있겠고.
겪어본 후 알게된 장/단점.
1. 코드를 직접 쳐야 한다. 자바스크립트를 다뤄본 사람에겐 장점. 아닌 사람에겐 단점이 되겠다.
2. 훌륭하지만 쉽진 않다. 다른 도구에서는 불가한 세심한 배려가 가능하지만, 다른 도구처럼 간단하게 만들어지질 않는다. 실제 구현시에 개발자가 어떤 고민을 하게 될지 예상한 설계까지 해야 한다.
3. 웹에서 볼 수 있다. 하지만 자바스크립트로 동작하기 때문에 코드 작성할 때 브라우저 호환성까지 걱정해야 한다. 아무나 편하게 보자고 웹에 올리는데 고생해서 다 돌아가게 만드느냐 아니면 그냥 IE는 버리느냐..
4. 프로젝트 구성원의 이해가 필요하다. 그냥 PPT에 “푸슝푸슝” 같은 설명이 더 편한 사람들에게 들이밀어봐야 쓸데 없고 생산성도 없다.
마치며.
이런 도구들이 조금 애매한 것이, 누가 다뤄야 하느냐는 것이다.
이제껏 내가 겪은 현업에서는 프로토타이핑 대신 와이어프레임에 의성어 의태어로 설명해가며 개발자의 센스에 기도하는 수밖에 없었다.
이런 프로토타이핑에는 나 같은 기획자나 디자이너가 이제껏 만들던 기획 문서나 포토샵으로 그렸던 그림엔 생각치 못했던 설계와 고민이 많다. 단순히 “사라진다” 라고 표현했던 설계에는 “offset과 opacity 의 조정” 같은 상세 설계가 빠져있다.
디자이너가 코드를 다루는 것이 최선이겠지만 “Codeless” 한 프로토타이핑 도구들이 쏟아져 나오는 것을 보면 코드를 다루는 일에 부담감을 가지는 사람들이 많다는 것을 알 수 있겠고.
Framer 는 코드가 필요하지만 잘 작성된 문서와 쉬운 사용법으로 러닝커브가 낮으면서도 가장 강력한 수준의프로토타이핑이 가능하다.
써보면 참 좋다. 참 좋은데..
