코드로 디자인한다. framer.js

1. 모바일 디자인과 프로토타이핑

모바일 시대가 열리면서 과거와는 달리 미디어 디자인에 있어 “인터랙션”이 매우 중요한 요소가 되었습니다. 단순히 예쁜 아이콘과 배경을 벗어나 사용자의 터치에 따라 재밌게 반응해야 하는 디자인이 필요하게 된 것이죠. 

앱을 조작하는 손맛(!)을 주기 위해 디자이너들은 터치하면 튕기는 아이콘, 좌우 스와이프에 따라 부드럽게 열리는 메뉴, 화면을 아래로 당기면 새로 고침 되는 페이지 등 다양한 인터랙션을 고민하고 있습니다. 

그런데 우리가 즐겨 쓰는 포토샵이나 파워포인트로는 이런 손맛을 설명하기 어렵습니다. 그렇다고 인터랙션을 일일이 동영상이나 움직이는 이미지(Animated gif)로 만들어 주기에는 너무 힘이 듭니다. 

그래서 등장한 도구들이 소위 프로토타이핑 도구라고 하는 Origami, Marvelapp, framerjs 등입니다. 대부분 모바일 디자인 작업을 대상으로 하고 그래픽 이미지에 터치, 화면전환, 동적인 효과들을 제공합니다. 특히 최근 오픈 소스로 공개된 Origami는 페이스북의 “Paper” 개발에 사용되어 큰 관심을 받았고, framerjs는 코드 기반의 빠른 프로토타이핑으로 관심을 받고 있습니다. 

국내 기획자, 디자이너, 개발자 사이에서도 프로토타이핑 도구에 대한 관심이 뜨겁습니다. 지난 8월 9일 Framer Meetup Seoul 이 열리기도 했는데요. 전 세계 framer meetup 중 가장 많은 사람이 참여했다고 하네요.

다양한 프로토타이핑 도구들

Framer.js Meetup Seoul

2. framer.js

스스로 혁신적인 프로토타이핑 도구라고 소개하는 framer.js는 포토샵이나 파이어웍스, 스케치 등으로 디자인한 이미지를 실제 구동되는 (것처럼 보이는) 앱으로 만들어주는 도구입니다. 아시다시피 모바일 웹이나 앱을 개발하기 전에 사용성 테스트를 위한 과정을 프로토타이핑이라고 하는데요. framer.js는 이것을 쉽고 멋지게 할 수 있도록 도와주는 도구입니다. 

오픈 소스는 framer.js는 그 이름에서 알 수 있듯이 Javascript(js) 라이브러리입니다. 즉, 이것을 내려받아 html, js 등을 요리조리 수정하면 그럴듯한 결과물이 나온다는 것이죠. 그런데 이렇게 파일을 직접 수정하는 과정을 디자이너에게 어려울 수 있는데요. 이런 고충을 해결하기 위해 화면을 보면서 직접 작성할 수 있는 framer studio를 제공합니다. 

framerjs로 만든 Facebook 예제

framerjs로 만든 Google Now 예제

3. 디자이너와 개발자 

그럼 프로토타이핑툴은 왜 필요할까요? 아니 프로토타이핑 과정은 왜 필요할까요? 우리가 모바일웹이나 앱을 만들 때, 기획에 따라 디자인이 만들어지고 이를 실제 구동하는 제품으로 만드는 과정을 거칩니다. 여기서 기획자-디자인-개발자 순서로 제품에 생명을 불어 넣는데요. 항상 결과가 좋은 것은 아닙니다. 디자이너가 “왼쪽에서 부드럽게 열리는 메뉴”를 그려주었는데  개발자는 “화면이 오른쪽에서 왼쪽으로 전환되는 구나”라고 생각할 수 있습니다. 기획자가 “팝업이 열리면서 화면이 블러 처리된다”라고 전달했지만 개발자는 “블러 사진 배경인 화면으로 이동한다”라고 해석할 수 있는 것이죠. 즉, 정적인 이미지로는 늘 소통의 문제가 발생할 수 밖에 없습니다. 

그리고 무언가 새로운 아이디어가 떠올라 실제로 어떻게 보이는지 보고 싶지만 확신은 없을 때, 우리는 그 아이디어 실현을 위해 같이 만들어 줄 팀원들을 설득하고 일정을 잡아야 합니다. 하지만 디자이너나 기획자가 쉽게 다룰 수 있는 프로토타이핑 도구가 있다면? 원하는 효과와 모션을 적절하게 만들어 보여줌으로서 정적인 문서로 인해 생기는 오해를 막아 더 효과적으로 작업할 수 있을 것입니다. 프로토타이핑 도구를 다루는데 다소 노력이 들더라도 소통의 문제로 잘못된 제품이 나오는 것보다는 낫겠죠. 

나의 소중한 아이디어를 검증하고, 구성원 서로 간의 소통을 도와주는 과정이 바로 “프로토타이핑”입니다. 

Web designer vs. Web developer (출처 : visual.ly)

4. 코드로 디자인 하세요 

framer studio를 다운받습니다. 설치형은 유료지만 15일간 무료로 사용하실 수 있습니다. 

화면의 왼쪽은 동작을 입력하는 에디터이고, 오른쪽은 보시다시피 실제처럼 구동되는 화면입니다. 왼쪽에 코드를 써서 이런저런 그래픽을 불러들이고 효과를 주면, 오른쪽에서 실시간으로 보고 사용해볼 수 있습니다. 아래는 간단히 만들어 본 예제입니다. 결과물은 여기서 확인하실 수 있습니다. 

코드를 직접 써야 하다니. 처음 접하는 분들에게는 다소 어려울 수 있습니다. 하지만 기초부터 조금씩 배워간다면 누구나 충분히 할 수 있습니다. 다양한 동영상 튜토리얼를 보면서 공부하거나 제공되는 예제를 복사, 붙여넣기 하면서 공부할 수 있습니다. 가까이에 개발자가 있다면 조금 도움을 청할 수도 있겠습니다. 서로를 위한 일이기 때문이죠. 

참조 

framer.js
Origami
Marvelapp
Framer Meetup Seoul
Viaul.ly

by 북극곰 발자국