디지털 서비스에서 인터랙션은, 서비스 전체의 인상을 좌우할 수도 있을만큼 중요한 부분입니다.

그렇기에 과거에는 인터랙션을 개발의 영역으로 많이 생각했지만, 이제는 기획자와 디자이너도 함께 고민하는 경우가 많은데요,

프레이머는 개발 언어에 대한 이해가 없는 사람도 디테일한 인터랙션을 구현할 수 있는 훌륭한 툴입니다.

물론 개발자 분들에게도 빠른 시간에 인터랙션의 느낌을 확인할 수 있는 멋진 프로토타이핑 툴이구요.

플린토/인비전 등의 Flow를 빠르게 확인하기 위한 툴들도 있지만 훨씬 더 높은 자유도를 제공한다는 점에서 다들 프레이머의 매력에 푹 빠지실거에요. 스케치와의 연동도 매우 좋구요.

프레이머에 대한 소개는 이 정도로 하고, 이 책의 장점에 대해 소개를 한다면요,

첫번째는 실제 인터랙션을 구현하는 과정에 기반하여 설명되어 있다는 점입니다.

프레이머 홈페이지의 Docs를 참고하면 여러 코드들과 함수들이 설명되어 있는데요,

물론 그걸 완벽하게 숙지하면 좋긴 하겠으나 어떤 상황에서 어떻게 각 코드가 쓰이는지 알기가 어렵기 때문에 한계가 있습니다.

그러나 이 책은 단순히 coffeescript(프레이머의 언어)에 대한 설명이 아니라 스크롤, 페이징, 사이드메뉴, 플로팅 버튼, 슬라이더 등 예제 기반으로 설명이 되어있어서 훨씬 따라가기가 쉽습니다. 

물론 처음에 책을 훑어보면 코드가 나열되어 있는 모습에 지레 겁을 먹을 수도 있지만,

차근차근 따라하면 대부분의 예제를 무리 없이 완성시킬 수 있습니다.

인상깊었던 부분은 구현 과정에서 초보자가 할 수 있는 실수도 같이 짚어준다는 점입니다.

그래서 더 친절하고, 사고의 흐름에 맞게 책이 작성되었다는 느낌입니다.

(물론 가끔 어려운 코드가 튀어나와서 당황할때도 있지만, 어려운 부분은 또 어렵다고 미리 말해주십니다^^;;)

두번째는 실제 작업을 해볼 수 있도록 Framer코드 샘플 및 PSD파일까지 다운로드가 가능합니다.

인터랙션을 구현하려면 그 기반이 되는 디자인 파일이 있어야 하는데, PSD파일을 제공하므로 매우 편합니다.

아마 책만 보다보면 머릿속에 남는 것이 하나도 없을 수도 있습니다, 이해도 어렵구요.

컴퓨터와 책을 같이 놓고 하나하나 코드를 실제 작성해보시는 방법을 추천드립니다.

저의 경우 설령 책에 있는 코드를 그대로 옮길 지라도, 제가 직접 인터랙션을 구현한 뒤 정답 코드와 비교해보는 방식을 사용했습니다.

이렇게 하다보면 나중에는 책을 보지 않고도 기본적인 코드는 작성할 수 있는 수준이 됩니다.

답을 먼저 보기보다는 시간이 걸리더라도 자력으로 먼저 할수있는데까지 해보고, 막히는 부분에서 책을 보는걸 추천드립니다. 코드는 작성하는 사람에 따라 스타일이 다를 수 있기 때문에, 책에 실린 코드가 꼭 정답은 아니니까요.

마지막으로는 초판인 책이라 그런지 약간의 오타 등이 있긴 하나, 사이트를 통해 지속적으로 수정 내역이 안내된다는 점입니다.

물론 다음번 인쇄에서는 오타가 전혀 없는 완벽한 버전이 되길 기대해봅니다^^

아직도 프레이머가 어려울까봐 시작을 못하셨다면 이 책을 통해 바로 시작해보세요!

저도 개발 언어에 무지했으나 이 책을 통해 프레이머와 친해졌으니까요, 대신 이 책만으로 마스터할 수 있는 툴은 아니므로 꾸준한 연습과 공부가 필요할 것 같아요.

포토샵과 같은 다른 오래된 툴과 달리 프레이머는 비교적 최신 툴이라 국내에 관련 서적이 거의 없어서 항상 아쉬웠는데요, 이 책을 필두로 앞으로 더 많은 좋은 프레이머 책들이 나오길 바래봅니다.

＜이 글은 TECH@NAVER 서평 작성 이벤트에 응모하여 받은 도서를 읽고 작성했습니다.＞

모바일 서비스가 주류를 이루는 요즘, 빠른 서비스를 원하는 만큼 만드는 것도 빠르기를 원하는 추세이다.

최근에 이르러서는 파워포인트에 스토리보드를 그리고, 이를 디자이너가 시안으로 작업하고, 마크업 및 개발로 진행하는 과정을 기다려주지 않는다.

자연스럽게 바로 시안을 그리고, 이를 기반으로 개발을 진행하는 공정의 단축이 이루어졌다. 그런데 문제는 시안은 스토리보드처럼 친절하게 페이지 내에서 사용자의 인터렉션을 설명해 주지 않는 2차원 공간에서의 static한 이미지일 뿐이라는 것이다.

당연히 개발자는 이해하기 어려워졌고, 디자이너는 시안 작업 외에도 개발자에게 이를 일일이 설명해야하는 새로운 어려움을 겪게 되었다.

또한, 만들어놓은 시안이 실제 구현되었을 때 어떤 결과를 보여주고, 사용자의 경험은 어떤 평가로 돌아올 지 알 수 없게 되었다.

이런 문제점을 극복하기 위해 최근에는 많은 디자이너들이 프로토타이핑 분야에 집중적인 관심을 갖게 되었다. 

시험삼아 마크업이나 개발을 해 볼 수도 없는 노릇이고, 디자이너는 그들처럼 프로그래밍을 직접 할 역량을 갖춘 경우도 흔치 않은데 프로토타이핑 툴은 이런 디자이너의 고민을 단번에 해결해 주고 있다.

필요한 이미지를 등록하고 클릭 몇 번이면 미리 어떤 인터렉션을 하게 될 것인지, 어떤 Flow로 서비스가 진행될 것인지 점검할 수 있고, 개발자에게 긴 설명을 하지 않아도 되기 때문이었다.

그런데, 또 다른 문제가 생겨났다. 이번에는 많은 프로토타이핑 툴의 제약적인 인터렉션 라이브러리로 인해 디자이너의 창의력이 제한을 받게 된 것이다.

이에 Framer와 같은 프로토타이핑 툴이 생겨났다. 인터렉션의 자유도를 거의 개발 프로그램 수준까지 보장해 주는 멋진 프로토타이핑 툴인 것이다.

저자가 소개한 것처럼 Framer는 커피스트립트를 기반으로 해서 아주 높은 자유도를 갖고 디자이너의 깊은 상상력을 동원할 수 있으며, 포토샵과 같은 레이어 기반으로 되어 있어서 포토샵이나 스케치에서 작업한 디자인 결과물을 쉽게 import해서 인터렉션 작업을 진행할 수 있다.

이러다 보니 다른 프로토타이핑 툴에 비해 Framer는 전 세계적으로 높은 점유율을 가지고 있음에도 불구하고 국내 디자이너들에게 다소 어려운 툴이 되었다.

이 책은 Framer에 대해 어려움을 겪고 있는 디자이너들에게 보배와 같은 가이드가 될 것이라 기대된다.

스프린트라는 책을 쓴 GV의 Jake Knapp은 "신뢰할만한 사용자조사 결과를 얻기 위해서는 티나는 가짜를 보여주고 진짜라고 상상해보라고 해서는 안된다."고 했다. 다른 프로토타이핑 툴이 그저 툴을 익히기 위해 티나는 가짜를 만드는 연습을 알려주는 것과 달리, 이 책의 저자는 본인이 직접 수행한, 그리고 무엇보다도 독자들이 국내 서비스에서 가장 익숙하고 가장 빈번하게 접하는 NAVER 서비스를 사례로 두고, 실제 구현한 프로토타이핑 과정을 독자들과 공유하고 있다는 점이 큰 매력이다.

Jake Knapp은 "사용자가 가짜라고 인식하는 순간, (보여준 사람의 성의를 생각해서) 사용자는 좋은 이야기만 늘어놓게 된다."고 말하고 있다. 

책을 읽은 독자의 입장에서는 실제로 접하는 NAVER의 서비스를 기반으로 설명되는 각종 인터렉션과 프로토타이핑에 대한 설명은 그것이 진짜라고 느껴지는 그래서 더 몰입하는 경험으로 이어지며, 한 사람의 실무 담당자로서 내 업무에로의 적용 방향에 대한 상상의 장을 열어주는 바이블 같은 책이 될 수 있으리라는 기대가 생겼다.

프로토타이핑 툴로 만들어지는 것이 지나치게 높은 시각적 완성도나 서비스의 온전한 구조를 모두 반영할 필요는 없지만, 프로토타이핑 결과물을 놓고 협의하는 상대방의 입장에서 거의 진짜라고 느껴지는 정도의 완성도는 필요하다는 측면에서 Framer가 갖는 매력은 크지만 디자이너의 입장에서는 어렵다는 약점이 있다.

이런 약점을 메워주고 친근하고 실용적으로 접근할 수 있게 이 책이 많은 도움이 될 것이라 생각된다.

디자이너뿐만 아니라 기획자들에게도 더 효율적이고 생산적인 협의를 위한 매력적인 도구로 Framer를 추천하며, 이 책으로 조금이라도 더 쉽게 접근해 보길 희망한다.

＜이 글은 TECH@NAVER 서평 작성 이벤트에 응모하여 받은 도서를 읽고 작성했습니다.＞

기획자 중에서도 프로토타이핑을 하고 싶은 사람들이 꽤 많을 것이라고 생각한다. 기획 의도라는 것이 단순히 기능과 화면의 나열로 다 표현될 수 없는 것이고, 기획한 컨셉에 따라 키 페이지의 인터랙션 정도는 디자이너/개발자와 커뮤니케이션하기 위해 직접 만들어보고 싶은 것이 기획자의 마음이기 때문이다. 처음에는 해외 웹을 뒤지며 레퍼런스들을 찾았으나, 내 마음에 쏙 드는 레퍼런스를 찾는 것도 많은 시간이 걸리는 일이다. 그래서 결국 직접 만들어보자! 하는 마음으로 이런저런 툴들을 건드려 보다가, 완벽히 자유로운 구현에 욕심이 나서 덜컥 프레이머를 구입해 놓고 선뜻 사용하기 어려워 묵히고 있던 차에 좋은 책을 만나게 되었다. 사실 이 책도 그렇고 많은 프로토타이핑 책들이 주요 독자를 디자이너로 상정하고 있다. 하지만 나는 기획자이기 때문에, 기획자의 입장에서 이 책을 읽고 활용해보려고 노력했다.

프로토타이핑을 하려는 사람들이 고민하게 되는 첫 단계는 어떤 툴을 사용할것이지를 선택하는 것이고, 두 번째는 선택한 툴을 프로젝트의 어느 단계에서 어느 정도 시간을 들여 활용할지에 대한 문제일 것이다. 1장에서는 수 많은 프로토타이핑 툴들 중 프레이머가 어떤 특징과 장/단점을 가지고 있는지 소개하고, 디자이너가 왜 프레이머를 배우면 좋은지, 네이버 디자이너인 필자가 실제로 왜 프레이머를 배우게 되었고 네이버에서 어떻게 활용하고 있는지의 내용으로 이루어져 있어 프레이머라는 이 만만치 않은 툴을 왜 배워야 하는지, 배워서 어디에 써먹을 수 있을지에 대한 의문을 어느 정도 해소시켜 준다. 기획자 입장에서는 '왜 디자이너가 프레이머를 배워야 하는가'로 대상이 한정된 부분이 조금 아쉬웠다. 하지만 여기에서 언급된 이유들 중 정확한 인터랙션 가이드를 개발자에게 줄 수 있다는 점을 제외하고, 모바일 시대 인터랙션이 중요한 브랜딩 요소이며, 인터랙션을 잘 활용하는 것이 서비스의 UX에 큰 영향을 준다는 점은 기획자에게도 동일하게 프레이머를 배워야 하는 이유일 것이다. 틴더처럼 인터랙션이 UX의 차별화 포인트가 되는 앱을 기획할 때에는, 인터랙션을 고려하지 않고 기획하긴 어렵기 때문이다. 물론 인터랙션을 만들기 전 기본 재료가 되는 디자인 리소스의 경우 기획자는 직접 만들기 어렵다. 하지만 요즘엔 충분히 잘 구성된 OS별 디자인 에셋들이 웹에 많이 풀려 있어 기획자도 기본적인 구조는 스케치 등으로 쉽게 만들 수 있으니, 충분히 프레이머를 활용할 수 있다고 생각한다.

좋았던 점 중 하나는 예제로 들어가기 전 코드의 기본 문법과 변수, 조건문, 배열과 반복, 함수 등 코드를 처음 다뤄야 하는 사람들이 필수적으로 배워야 하는 개념들에 대해 잘 설명해 두었다는 점이다. 이런 기본적인 개념들은 생각보다 검색해도 잘 나오지 않거나, 너무 어렵게 설명되어 있는 경우가 많다. 이 책에서는 그런 기본 개념들을 먼저 짚어주고 실제 따라할 수 있는 코드 예제를 보여 주어, 개념을 잡고 예제를 한 번 쭉 따라하면 코드가 구성되는 원리를 이해하고 이후에 직접 인터랙션을 만들 때에도 어렵지 않게 응용할 수 있도록 했다. 

그리고 마지막에는 네이버 앱 개선을 위해 어떻게 프레이머를 활용했는지 실제 프로젝트 사례가 들어 있어, 프레이머를 하루라도 빨리 현업에서 활용하고자 하는 사람들에게도 좋은 가이드가 될 수 있을 것이다. 

요즈음엔 책이 아니어도 툴을 배울 수 있는 방법이 참 많다. 우리나라 웹에도 이런저런 활용법 글들이 꽤 많고, SNS내 커뮤니티도 있고, 그 외에도 해외 웹을 조금만 뒤지면 다양한 가이드들을 찾을 수 있다. 하지만 그렇게 파편화된 정보들을 통해 툴을 배우는 것 역시 어느 정도는 기초 지식이 있어야 가능한 일이지, 나와 같은 디자인/개발 쌩 비전공자들은 그런 식으로 배우기엔 속도가 무척 더디다. 하지만 이 책에는 프로토타이핑을 언제, 어떻게 사용할지부터 코드를 구성하는 기본 개념들, 따라해 볼 수 있는 예제, 마지막 실제 활용사례까지 포함되어 있어 지금까지 High Fidelity 프로토타이핑을 하고자 했지만 어디서부터 어떻게 시작해야 할지 막막했던 학생, 디자이너, 기획자 모두에게 유용할 것이다.

＜이 글은 TECH@NAVER 서평 작성 이벤트에 응모하여 받은 도서를 읽고 작성했습니다.＞

플랫폼 기획자로 지금까지는 대체로 웹서비스에 기반한 기획과 설계를 주로 해오고 있었다. 

하지만 모바일 서비스에 대한 업무가 점점 증가하면서 

웹과는 다른 환경을 기획/설계하는 부담감이 있었던게 사실이다. 

그렇다고 딱히 모바일앱과 관련한 기획 자료를 찾기도 어려웠다.. 그런 연유로 이책을 보게되었다.

모바일 앱 프로토타이핑은 기획자의 입장에서 작성한 책은 아니다. 

하지만 기획자도 Framer를 자유롭게 활용할 수 있도록 쉽게 가이드를 제공하고 있다.

책을 후루룩 보았을때는 책속에 잔뜩 적혀있는 code에 뜨악하였지만.. 한장한장 읽고 따라하며, 아하! 하는 깨닳음을 얻게 되었다고나 할까? ㅎㅎ

한번 읽고 책장속에 보관될 책이라기 보다는 나의 노트북 옆에 항상 함께하며, 

계속계속 찾게될 책이란 생각이 든다. 

기획의 입장에서 단순히 2D의 설계를 벗어나 

3D의 화면으로 예측하며 생각의 폭을 넓힐 수 있는 계기를 만들었다는 생각이다. 

모바일앱 기획자라면 한번쯤 도전해볼 만한 가치가 있는 책이다.

＜이 글은 TECH@NAVER 서평 작성 이벤트에 응모하여 받은 도서를 읽고 작성했습니다.＞

근 몇 년간 너무나도 다양한 프로토타이핑 툴들이 나오고 있지만 포토샵이나 스케치 처럼 아직 명확하게 이 분야에서 자리잡은 도구는 없는 듯 하다.

하지만 최근에서야 코딩이 필요없는 페이지 기반의 프로토타입 툴로는 인비전이나 마블, 코딩기반의 프로토타입으로는 프레이머로 좁혀지는 느낌인데, (물론 계속 좋은 툴들이 나타나고 있고 속단하기는 이를 듯..) 이 책은 프레이머라는 도구를 너무나도 잘 설명해주고 있는 책이다.

코딩을 잘 모르는 사람들도 코딩 예제들을 하나씩 따라 쓰다 보면 어느새 나도 모르게 완성되어 움직이고 있는 프로토타입을 볼 수 있다.

물론 프로토타입 Document에도 잘 설명이 되어 있긴 하지만, 익숙한 서비스를 사례로 잘 풀어주었거나 한글화되어 이해가 용이한 점은 프로토타입을 시작하고자 하는 기획자/UX/UI디자이너들에게 추천해주고 싶은 책이다.

특히나 챕터가 끝날 때마다 간략하게 정리해주는 섹션은 큰 도움이 되었다.

다만 4,5장 부터는 어려운 개념이 나와 집중해서 끝까지 보는데 집중해야 하고 시간이 갑자기 오래 걸리는 어려움은 있을 수 있어도 점차 더 자세하고 친절한 설명으로 더 나아질 것이라 생각한다.

:)

＜이 글은 TECH@NAVER 서평 작성 이벤트에 응모하여 받은 도서를 읽고 작성했습니다.＞

디자인에 대해서는 무지한 SW 개발자로서, 종종 UI/UX 담당자들과 커뮤니케이션 할 때 어려움을 느끼곤 합니다. 대화의 기술이 부족해서일 수도 있으나, 막연하게 구두로 설명해야만 하는 미묘한 인터렉션이 분명 존재하는데 이런 것을 PPT나 이미지 같은 정적인 화면을 띄워 놓은 상태에서 얘기하다 보니 서로의 이해가 달라지는 지점이 가장 큰 게 아닌가 싶습니다.

이런 상황에서는 어찌 됐든 서로가 이해할 수 있는 커뮤니케이션 수단이 필요한 것이고, 프로토타이핑이라는 것이 가장 적절한 해결책이 될 것이라 상상하고 이 책을 펼쳐보게 되었습니다.

책을 읽어나가며 일관되게 느낀 점은, 이 툴을 사용할 주 사용자층을 개발자가 아닌 UX 디자이너에 집중하고 있기 때문에 디자이너가 이해할 수 있는 용어로 풀어쓰기 위해 부단히 노력하고 있다는 것이었습니다. 그래서 개발자가 볼 때는 몇 몇 부분은 과감하게 건너 뛰어도 될 것으로 보입니다.

그리고, 또 한가지 중요한 부분이 있습니다. 구글링을 통해 살펴 봤던 몇 가지 프로타이핑 사례들, 그리고 툴 사용 가이드 등과 다른 뚜렷한 장점이 이 책에 있는데 그것은 바로 네이버에서 실제 진행한 실사례를 툴 사용법과 함께 녹여냈다는 것입니다.

처음 프로토타이핑 툴에 대해 궁금해서 찾아본 것도 몇 년 전인데 그 간에 많은 툴들이 만들어졌고, 또 기존의 툴도 외형을 발전시켜 왔지만 개발자 입장에서 툴 사용법을 아무리 숙지해도 디자이너와 소통할 수준의 프로토타입을 만들기가 어려웠습니다.

하지만 이 책의 스토리 라인을 따라가다 보니, 디자이너들은 이 대목에서 이렇게 고민하고 프로토타이핑을 하는구나 하는 이해가 어렴풋이 생기는 느낌입니다.

디자이너에게는 훌륭한 툴 가이드, 개발자에게는 프로토타이핑이 이루어지는 스토리라인에 대한 이해를 도와주는 책이 아닐까 싶습니다.

＜이 글은 TECH@NAVER 서평 작성 이벤트에 응모하여 받은 도서를 읽고 작성했습니다.＞

이 책은 Framer를 통해 프로토타이핑하는 방법에 대해 설명합니다.

Framer는 CoffeeScript라는 프로그래밍 언어를 사용해야 하기 때문에 거부감이 들거나 두려움이 생길 수 있습니다.

도구 자체에서도 자동완성 기능을 지원하여 편의성을 더했고, UI를 통해서도 작업이 가능하긴 합니다.

책을 읽으면서 이러한 어려움에 대해서 저자가 충분하게 인지하고 있다는 느낌을 받았습니다.

프로그래밍에 대해서 감이 없는 독자라도 2장을 읽어본다면 기초를 잡을 수 있을 것이고,

후반부에서는 이해를 돕기 위해 최선을 다해 설명하고 있습니다.

내용은 전체적으로 짜임새 있게 잘 구성되었습니다. 기초부터 고급까지 순서에 맞게 구성되어있고 예제도 충분합니다.

한 가지 아쉬운 점은 책에 몇 가지 오류가 있으며, 이 부분에 대해서는 책 초반에 명시한 링크를 통해 오류를 확인할 수 있습니다.

꼭 책과 병행해서 살펴볼 것을 권합니다.

그 동안 Framer는 개발자에게 더 친숙한 도구였다고 생각합니다.

하지만 이 책을 통해 디자이너에게 더 친한 친구가 될 수 있을 것이라고 확신합니다.

＜이 글은 TECH@NAVER 서평 작성 이벤트에 응모하여 받은 도서를 읽고 작성했습니다.＞