UX/UI 디자이너라면 한 번쯤은 들어왔을 프로토파이는 가장 빠르고 손쉽게 코딩 없이 프로토타입을 만들어주는 툴이다.
이 툴이 대단하고 특별한 게 한국인이 만든 툴이라는 점이다. 디자이너에게 익숙한 어도비, 피그마, 스케치, 프레이머, 인비전, 오르가미, 마블, 윔스칼 등등 대부분의 디자인 기반 툴들은 외쿡산이지만 프로토파이는 한국산이라는 것! 여기서 일단 1점 먹고 들어간다.
네이버, 구글 출신의 김수 인터랙션 디자이너가 한국에서도 디자인 소프트웨어의 성공 사례를 만들고 싶어서 창업을 하신… 창업 배경에 고개를 끄덕이게 되고 응원하게 되는 그런 툴이다.
프로토파이 창업 스토리가 궁금하다면 아래의 퍼블리 글을 참고하길 바란다. (퍼블리 회원이 아닐 경우엔 일부만 제공될 수 있다.)
단순히 프로토파이가 made in Korea라서 대단하기보단 해외에서도 쉬운 프로토타입으로 입소문이 나고 있고 많은 모바일 기반 디자인 회사에서 쓰고 있다. 기본적인 프로토타입은 어도비 XD나 피그마, 인비전으로 진행했고 평소 웹 기반의 디자인을 주로 하는지라 프로토파이를 쓸 일이 거의 없었다. (프로토파이에서도 웹 프로토타입을 지원하지만 웹보단 모바일에서 더 강력한 성능을 가졌기에.)
그러던 중 최근에 프로토파이로부터 1년 무료 사용권을 제공받았다.
그리하여 프로토파이를 한 번도 써보지 않고 다소 기계치인 디자이너의 입장에서 이 소프트웨어가 얼마나 사용하기 쉬운지를 다소 거친 느낌으로 써내려 가보려고 한다.
우선 프로토파이 공식 홈페이지에 들어가면 프로토타입으로 제작했다고 믿기 어려울 만큼 고도의 기능이 구현되어 있다. 개발의 영역이라고 생각했던 부분들이 프로토타입으로 인해 디자인의 영역으로 옮겨가게 된 것이다.
여기서 들었던 첫 번째 질문: 정말 프로토파이가 쉬울까?
그동안 프로토타입은 어도비 XD, 피그마, 인비전, 혹은 마블을 주로 사용하였다. 필자가 하는 작업의 영역 자체가 인터랙션을 많이 요구하지 않는 분야이기 때문에 위에 언급한 도구들을 쓰면서 불편함을 느낀 적이 없는 것은 사실이다.
하지만 디자이너들은 핫한 도구들이 있으면 한 번 써보고 싶고, 그런 걸 써야 대세에 편승한다는 느낌이 있는 터(최근에 급성장한 피그마처럼) 프로토파이에 대한 궁금증은 꾸준히 있어 왔다.
그래서 오늘의 리뷰는 프로토파이가 얼마나 쉬운지, 초초초 초기 허들, 접근성에 대해 다뤄보려고 한다.
‘쉽다는’ 정의는 주관적이지만 이 글에서 말하는 ‘쉽다’는 아무런 설명서를 보지 않더라도 파일 설치에서부터 화면을 불러오고 툴의 기능들을 직관적으로 보았을 때 인지할 수 있는지, 특별한 튜토리얼이 없어도 바로 사용할 수 있는지의 기준으로 삼았다.
1. 프로토파이 설치
웹사이트에서 자신의 컴퓨터 사양에 맞는 프로그램을 찾아 다운을 하고 설치를 하는 일반 과정으로 쉽고 간편하다.
2. 프로토파이 화면 불러오기
앱을 설치하면 컴퓨터에 프로토파이 전용 프로그램이 생긴다. 프로그램을 클릭하면 아래와 같은 화면을 만나게 된다.
포토샵처럼 오른쪽에는 새 파일, 혹은 기존의 파일을 불러올지를 선택하는 버튼이 있고 왼쪽에는 프로토파이의 기본적인 기능 5개가 보인다. 각 기능 위에 마우스 커서를 대면 어떤 식으로 움직이는지가 보이고 각 기능을 클릭하면 바로 그 기능을 구현해 놓은 창으로 넘어가게 된다.
일단 목표는 아무것도 없는 new pie나 기존의 작업하던 파이(여기서는 파일을 파이로 부르기로 하자)를 열었을 때 얼마나 좌우 아이콘들의 기능이 직관적으로 보이고 기능을 바로 써먹을 수 있는지를 보는 것이기 때문에 우선 ‘new pie’를 클릭해 보았다.
‘new pie’를 클릭하면 왼쪽에는 포토샵처럼 커다란 팔레트가 보이고 오른쪽에는 미리 보기 기능이 보인다. 새 창을 열면 작업을 할 화면이 보이고 그걸 실시간으로 보여주는 모바일 혹은 웹 창이 오른쪽에 보인다. 내가 작업하고 있는 것을 바로 볼 수 있게 해주는 기능에서 플러스 1점 추가.
디바이스 크기는 상단 중앙의 버튼을 클릭하면 모바일 사이즈를 선택할 수 있는 팝업창이 뜬다.
왼쪽 상단의 image, media, shape, text, container도 포토샵, 피그마에 익숙한 디자이너라면 직관적으로 알 수 있는 아이콘들이다. 왼쪽 상단에 보이는 아이콘도 마우스 커서를 갖다 대면 어떤 기능인지 보여준다.
현재 프로토파이는 스케치(Sketch), 어도비 XD, 피그마(Figma)에서 작업한 문서의 import가 모두 가능하다. 그리하여 최근에 진행하고 있는 사이드 프로젝트의 피그마 파일을 한 번 불러와보기로 한다.
왼쪽 상단의 import를 클릭하면 피그마, 어도비 xd, 스케치 아이콘이 보인다. 그중 나는 피그마를 선택해 파일을 불러왔다.
여기서 아쉬운 점!
프로토파이에서 피그마 파일을 바로 불러올 수 있다는 자체는 매우 감격스럽지만 피그마에 저장되어 있는 파일이 많을수록 내가 불러오고 싶은 파일을 불러오는 속도가 매우 느리다.
피그마에서 제플린으로 연동하는 것도 스케치나 어도비 XD에 비해 월등히 느린 것처럼 프로포파이에서도 피그마 파일을 불러오기 위해선 상당한 인내심이 필요하다.
☞ 2021년 1월 업데이트
최근 프로토파이는 피그마에 플로그인을 출시했다.(2020년 12월) 과거보다 훨씬 빠른 속도로 피그마에서 프로토파이로 파일을 불러올 수 있게 되었다!!
자, 이렇게 기존의 파일을 불러왔다.
여기까지는 정말 쉽다.
그렇다면 실제 프로토타입 구현은 어떻게 진행해야 할까?
화면에서 <예쁜 고양이 월드컵>을 선택해 보았다. 그러자 오른쪽에 피그마와 비슷한 형식의 툴들이 보이기 시작했다.
Position이 있고 Size와 Rotation, Origin이 보인다. 그 아래로는 Constraints와 Opacity, Radius, Fill, Border 등 UX 디자이너라면 쉽게 접했을 툴들이 차례대로 보인다.
여기까지는 괜찮다. 아무런 튜토리얼을 보지 않고 프로토파이 파일을 설치하고 일반적인 디자인 툴을 실행하는 것과 별반 다르지 않다.
그렇다면 실제 프로토타입 구현은 어떻게 진행될까?
필자가 현재의 파일에서 구현하고 싶은 인터랙션은 현대카드 앱처럼 커다란 카드를 아래에서 위로 하나씩 넘기는 인터랙션을 주고 싶었다.
자… 그럼 어디서부터 해야 할까?
여기서부터 막히기 시작했다. 피그마라면 오른쪽 상단의 프로토타입 버튼을 클릭하고 원하는 파일을 선택하고 지정하고 끌어다 놓는 형식을 할 텐데 프로토파이에선 하나의 파일만 보인다.
아무것도 없는 새 파이에서 작업을 하는 것이 아니라 이미 완성된 Hi-fi wireframe에서 인터랙션을 넣는 기능이 생각보다 어려웠다. 피그마와 어도비에 익숙해 있지만 인터랙션 기능들은 단번에 알아보기 힘들었다.
잠시 두리번거리다 프로토파이에서 말한 오른쪽 상단에 <Add Trigger> 버튼을 발견했다.
Trigger 버튼을 클릭하자 이제야 온갖 종류의 인터랙션 기능들이 보이기 시작했다.
그런데 여기서 또 봉착한 문제.
원하는 기능을 선택하고 클릭했지만 그동안 어도비 XD, 피그마에서 보았던 프로토타입 기능과 많이 달랐다. 플러스 버튼을 누르니 하위 개념으로 버튼이 내려오고 뭔가가 더해진다. 어디서 무엇을 선택하고 시작점을 어떻게 잡아줘야 하는데 튜토리얼 없이 아무런 지식이 없는 상태에선 바로 알아차리가 힘들었다.
여기서 얻은 주관적인 결론
1. 프로토파이는 포토샵, 기존의 UX 디자인 툴과 비슷한 환경을 제공한다. 프로토파이의 설치와 파일 열기, 다른 파일 가져오기, 전체적인 프로그램 환경은 기존의 디자인 툴과 유사해서 특별한 교육 없이도 직관적으로 알 수 있다.
2. 실제 인터랙션을 구현하는 것은 피그마와 어도비 XD에서 했던 것과는 많이 다르다.
3. 기존의 디자인 툴보다 더 많은 인터랙션 기능을 제공한다.
4. 아무런 배경 지식 없이 화려한 인터랙션을 구현하는 것은 쉽지 않다.
5. 미디어 매체, 매거진 등 정적인 영역의 UX 디자이너들에겐 사용도가 높지 않을 것 같다.
6. 사용 난이도는 중급 이상으로 봐야 한다. 일반 디자인 툴을 다루는 스킬보다 더 높은 스킬이 필요하다.
이번 시간은 어찌 보면 프로토파이 문 앞에서 서성이다가 쓴 리뷰가 되겠다.
다음 리뷰에서는 프로토파이 자체에 들어있는 기본 인터랙션 기능과 튜토리얼 영상을 습득한 후 인터랙션을 재현했을 때 어느 정도 구현이 가능한지를 다뤄보겠다.
헤일리님이 브런치에 게재한 글을 편집한 뒤 모비인사이드에서 한 번 더 소개합니다.
