프레이머를 사용해 원하는 인터랙션 구현하기

최근 디자인 업계에서 프로토타이핑에 대한 열기가 뜨겁다고 한다. 디자이너들이 본인이 만든 디자인에 대한 프로세스를 보여주기 위해 프로토타입에 많은 관심을 보여주고 있기 때문이다. 그 중에서도 프레이머는 아래와 같은 다양한 장점으로 많은 사용자들의 선택을 받고 있다.

• 하이 피델리티(High Fidelity) 툴

프레이머는 하이 피델리티(High Fidelity) 툴이다. 피델리티(Fidelity)란 실제와 얼마나 유사하게 프로토타입을 구현해낼 수 있는가 하는 척도로 프레이머를 사용하면 실제와 상당히 비슷한 프로토타입을 구현할 수 있다. 

• 다양한 플랫폼 사용 가능 

프레이머를 사용하면 모바일과 PC, TV 등 다양한 플랫폼의 프로토타입 작업을 진행할 수 있다. 또한 프레이머 코드를 작성하면서 화면 우측으로 결과물을 실시간으로 확인할 수 있을 뿐만 아니라 폰 쉐어링이나 전용 뷰어 등을 통해 작업 결과를 모바일로도 바로 확인할 수 있다는 점도 큰 장점이다. 

• 디자인 파일 임포트 

프레이머는 스케치나 포토샵 등의 연동을 지원하고 있어 사용이 편리하다.

• 활성화된 커뮤니티

페이스북 프레이머 커뮤니티에는 전세계의 프레이머 유저들이 만든 프레이머 샘플이 남아 있다. 궁금한 점이나 필요한 정보가 있을 경우 프레이머 커뮤니티에 질문을 올리거나 검색하면 도움을 얻을 수 있다.

• 나만의 코드 라이브러리

처음 코드를 사용해 작업하다보면 간단한 인터랙션 구현에도 많은 코드가 필요하기 때문에 다른 툴에 비해 느리게 진행된다고 느낄 수 있다. 하지만 작업을 하다 보면 나만의 코드 라이브러리가 만들어지고 그것이 매우 유용하다고 느끼게 될 것 이다. 이전에 만들어 둔 코드와 애니메이션 등을 복사해서 사용할 수 있게 때문에 자주 사용하는 인터랙션 구현 속도가 점점 빨라진다.

  

『Framer for Designer』 is a fantastic way to get started with Framer. It’s thorough, simple and walks you through the basics of Framer, from start to finish.

 

Benjamin Den Boer(Framer Team Product Designer)

 

프레이머는 강력한 툴이지만, 그 능력을 제대로 사용하기까지는 시간과 노력이 들어갑니다. 특히 코드라는 것은 디자이너들에겐 아직도 쉽게 느껴지지 않는 재료일 것입니다. 『디자이너를 위한 프레이머』는 충실한 예제를 중심으로 그 길을 차근차근 안내합니다. 같은 시선에서 바라보기에도 흔한 기술서에서 놓치는 부분도 꼼꼼하게 짚고 넘어가므로 따라가며 배우기에 안심이 되는 책입니다.

 

최민상(구글, 인터랙션 디자이너)

 

빠르게 변화하는 IT 환경에서 좀 더 나은 결정을 하기 위해 프로토타이핑은 필수적인 요소가 됐습니다. 이 책은 많은 프로토타이핑 툴 중에서도 하이피델리티 프로토타이핑을 할 수 있고 많은 국내 유저를 보유하고 있는 프레이머에 대한 기능 소개부터 프레이머에서 사용되는 커피스크립트에 대한 기초도 함께 설명하고 있어 비개발자도 쉽게 접근할 수 있습니다. 실제 현업에서 사용할 수 있는 다양한 예제가 포함돼 있어 코드로 만들어 내는 프로토타입의 매력을 느낄 수 있습니다.

 

안지용(토스, UI 디자이너)

 

프레이머는 버전이 올라가면서 상당히 많은 기능을 제공하고 해당 사용법을 온라인 문서로 제공하고 있습니다. 처음 시작하는 사람들에게는 어느 문서를 어떻게 시작해야 할지 어려울 수 있는데, 이 책에서는 입문자를 위한 가이드가 잘 구성돼 있습니다. 다양한 예제와 더불어 책 뒷부분에 다양한 실무 팁이 있는데, 이 또한 매우 유용한 내용이어서 프레이머 작업 시 두고두고 사용하면 좋을 것 같습니다. 프로토타이핑에 앞서 코드를 배우에 이렇게 좋은 툴은 따로 없는 듯합니다.

 

이준원(네이버, 디벨로퍼)

 

디자인 프로세스가 변하면서 프로토타이핑 툴이 각광받고 있습니다. 그중 커피스크립트를 사용하는 프레이머는 높은 자유도를 가지고 있으며, 실제 앱과 가장 유사한 경험을 줄 수 있기 때문에 실무에서 활발히 활용됩니다. 이 책은 프레이머의 전반적인 기능과 개념들을 간단한 예제와 함께 제공해 코드를 모르는 디자이너들도 큰 어려움 없이 간단한 프로토타입을 만들 수 있게 도와줍니다. 두 저자 또한 디자이너이므로 눈높이에 맞춘 쉬운 설명이 초보자들에게 좋은 길잡이가 될 것입니다. 또한 후반부에 실려 있는 실무 팁 부분은 프레이머의 잠재력을 엿볼 수 있는 내용들로, 코드 베이스 프로토타이핑 툴이 왜 강력한지 새삼 실감할 수 있을 것입니다.

 

이정영(라인, 인터랙션 디자이너)

코드 기반?

 ‘프레이머’는 쉬운 사용법과 높은 퀄리티로 많은 사용자들의 관심을 얻고 있다. 하지만 프레이머로의 입문을 망설이게 하는 가장 큰 이유는 코드를 기반으로 하고 있다는 점일 것이다. 

프레이머는 자바스크립트의 단점을 보완하기 위해 만들어진 커피스크립트를 기반으로 하며, 자바스크립트를 지원하는 모바일 프로토타이핑 툴이다.

기존에 코드를 접하거나 사용해보지 않은 사람에게 모든 작업을 코드로 진행하는 프레이머는 그림의 떡처럼 느껴질지도 모른다.

.

디자이너 출신으로 처음부터 코드를 익히며 느꼈던 코드에 대한 거부감을 누구보다 잘 아는 저자들이 코드를 모르는 초보자들을 위해 프레이머에 대한 모든 것을 친절히 설명하고 있다.

저자들은 프레이머의 설치부터 시작해 코드의 기초를 차근차근 설명한다. 코드 화면과 그에 따른 결과 이미지를 각 내용마다 삽입해 하나 하나 따라하다 보면 자연스럽게 프레이머의 기능을 익힐 수 있을 것이다.

또한 실무에서 프레이머를 사용하기 위한 노하우를 다루는 실무 팁을 수록해 초보자도 실제 업무에 프레이머를 활용하는 방법을 쉽게 익힐 수 있게 했다.

그동안 코드가 어려워서 프레이머를 멀리 했던 사람들이 있다면 이 책을 읽어 보길 바란다. 이 책이 프레이머를 처음 접하는 독자들에게 친절한 안내자 역할을 충실히 해줄 것이다.