[연재 2] UI/UX Prototype 프로그램 선택

지난 글에서 Portotype 프로그램을 왜 사용하는지와 선택기준에 대해 짧게 언급했는데요.

오늘은 나에게 맞는 프로그램이 어떤 것이 좋을지 선택하는 시간을 가져 보겠습니다. 

본격적으로 시작하기 전에 먼저 아래의 이미지를 한번 보세요

출처 : https://medium.com/lucid-software-design/traversing-the-ux-prototyping-landscape-33edc700c1bd

기존에 많이 이용한 프로그램이 포토샵이나 일러스트 등의 그래픽 제작 위주의 프로그램이었다면

최근에는 화면의 움직임이나 코딩까지 가능한 프로그램들이 많아졌고 그만큼 선택의 폭도 넓어 졌습니다. 

위의 예시에서도 클릭(터치)으로 실제와 같이 움직이게 해 주는 프로그램만 15개나 되는 군요 

자 그럼 이렇게 많은 것들 중에서 나에게 맞는 것은 어떤것일까요?

최근에 출시된 프로그램 중 상당수는 웹 기반의 프로그램이 많습니다.  카카오의 오븐이나 해외에서 유명한 Axure 등이 대표적이죠.

이런 프로그램은 인터넷 기반으로 서비스를 제공하기에, 인터넷이 차단된 환경이나 폐쇄망 환경에서는 이용하기가 어렵습니다. 

그렇다면, PC 설치용 프로그램을 중심으로 검토를 해 보겠습니다. 

1.  Adobe XD 

최근에 가장 많이 언급되고 있는 프로그램이 Adobe XD 입니다. 

포토샵 이용자의 감소로 위기감을 느낀 Adobe에서 시장 점유율을 뺏기지 않기 위해 전폭적으로 투자하고 있는 프로그램이죠.

제가 이 프로그램을 접한지도 근 2년이 지난것 같습니다. 

처음에 프로그램을 접하고 심플하고 쉽게 이용할 수 있게 되어 있으며, 특히나 포토샵이나 일러스트에서 작업한 결과물을 쉽게 연동할 수 있는 막강한 장점을 가지고 있었습니다. 

그리고 최근에서 (비록 영어만 지원하지만) 음성 관련 UX 기능도 지원하게 추가 되었습니다. 

막강한 기능에 기존 제품과의 뛰어난 호환성 등의 장점을 가지고 있고, Adobe에서 직접 방문해서 설명하고 채택해서 이용하면 기술지원까지 이야기를 했지만 선택하지 않았습니다. 

그 제일 큰 이유는 화면의 이동이나 인터랙션은 쉽게 구성할 수 있으나, 결정적으로 데이터 입력을 구현할 수 없습니다. 

예를 들어 회원가입, 상품 가입, 상품구매 등 순차적으로 진행되는 일련의 과정에서 터치(클릭) --> 터치 --> 터치 순으로 진행은 가능하지만, 메일주소/휴대폰번호/개인정보/배송지정보 등의 개인이 필수로 입력해야 하는 항목에 대해서는 전혀 구현할 수 없습니다. 그냥 그림으로만 보는 것이죠.

그렇기 때문에서 사용자와 데이터 입력을 통한 상호작용을 목업으로 구현할 수 없습니다.

향후 이 부분만 구현된다면 아주 괜챦은 프로그램이 될 것이라 생각됩니다. 

2. ProtoPie

그 다음으로 검토한 프로그램이 ProtoPie제품입니다. 

지난해 프로젝트를 수행하는 업체에서 제안 및 임원보고시에 사용한 프로그램 이었습니다. 

“우리 서비스를 이용하면 디자이너는 코드를 짜는 대신에 퍼즐 조각을 맞춘다는 생각으로 디자인 작업을 하면 된다. 쉬운 디자인 툴로 디자이너들이 꽃을 피울 수 있도록 돕고 싶다”

스튜디오씨드(Studio XID)의 김수 대표는 “인터렉션 디자인의 ‘포토샵’ 같은 툴을 만들겠다”고 말했다. 그만큼 보편적이고 다양한 사람들이 쓸 수 있는 디자인 툴로 디자이너가 코드 한 줄 알지 못해도 스튜디오씨드(Studio XID) 의 프로토파이(ProtoPie)을 사용해 쉽게 원하는 UI를 구현할 수 있도록 하겠다는 것이다. [관련 인터뷰 보기 http://www.venturesquare.net/585415]

구글 출신 디자이너인 김수 대표가 만든 프로그램으로 모바일중심의 인터랙션 프로토타입에 매우 강점을 가지고 있는 프로그램입니다.
위의 그림에서 보듯이 "이걸(Object) + 탭(Trigger)하면 + 움직이게(Response) 해주세요" 이렇게만 활용하면 예상할 수 있는 인터랙션을 대부분 쉽게 구현할 수 있습니다. 또한 사용자와 사용자 간의 인터랙션 테스트를 할 수 있게, 2대의 디바이스를 이용한 상호 테스트도 가능합니다. 하지만 위에서 언급했듯이, 이 프로그램도 인터랙션 중심의 툴이다보니 확장된 기능을 활용하기에는 한계가 있습니다.

3. Just in mind

세번째 선택한 제품을 언급하기 전에, 검토한 다른 많은 제품이 있지만 설명은 생략합니다. 상당수가 유사한 기능을 가지고 있고 그 프로그램만의 특장점을 가지고 있는 것은 별로 없는듯 합니다.
(혹시 더 좋은 프로그램을 알고 있으면, 댓글로 남겨주시면 리뷰 후 소개해 드리겠습니다)

프로그램 설명에 앞서 아래 사이트를 먼저 참고하세요. 이전 글에서 소개한 디자인 스튜디오인 쿠퍼(Cooper)의 분석 : https://www.cooper.com/prototyping-tools 의 프로그램 비교 입니다.
원하는 조건을 선택하면, 선택 가능한 프로그램을 보여줍니다.
제가 원하는 기능과 용도를 선택하면 지금까지 출시된 프로그램 중에서 가장 좋은 프로그램을 추천합니다.

그 중에서 가장 좋은 평가를 받은 프로그램이 'Just in mind' 입니다.
국내에는 거의 알려지지 않은 프로그램이고 사용자도 없습니다. 

참 희안하죠. 해외에서는 유명한 Prototype 툴인데, 국내에 전혀 알려지지 않은 것이...

자 그럼 지금부터 이 프로그램이 왜 모든 프로그램을 제끼고 추천대상에 선정이 되었는지 하나씩 설명해 보겠습니다.
설명이 좀 길어질 수 있으니, 상세한 내용은 다음 글에서 이어서 진행하겠습니다.

• 프로그램명 : Just in mind

• 웹사이트 : https://www.justinmind.com/

• 프로그램 가격 : 1개월 무료 이용 후 매월 29달러(년간 결제시 월 19달러)

[관련글 보기]

2018/11/18 - [IT & SNS/UI&UX] - [연재 1] UI/UX 어떤 툴을 사용하시나요?

2018/11/25 - [IT & SNS/UI&UX] - [연재 2] UI/UX Prototype 프로그램 선택

2018/12/02 - [IT & SNS/UI&UX] - [연재 3-1] UI/UX Prototype 툴 선택 - Just in mind

2018/12/02 - [IT & SNS/UI&UX] - [연재 3-2] UI/UX Prototype 툴 선택 - Just in mind