ProtoPie vs. 시리즈: Proto.io
ProtoPie와 Proto.io의 차이점에 대해 알아보세요.
*Brunch 내 오류로 인해 몇몇 gif는 사진으로 대체되었음을 알려드립니다.
요약
▶ Proto.io(영문)는 프로토타이핑을 처음 시작하기에 적합한 툴입니다. 하지만 고도화된 인터랙션 기능이 부족하여 hi-fi 프로토타이핑 툴로 분류하기엔 어려울 수 있습니다.
▶ Proto.io는 탐색이 어렵고, 웹 기반 플랫폼이므로 속도가 느릴 수 있습니다. 또한, 디자인 미리보기 기능이 복잡합니다. 모든 프로토타입은 Proto.io 클라우드에 저장되는데, 구독을 취소하면 접근이 불가능합니다.
▶ 반면 ProtoPie는 풍부한 인터랙션, 하드웨어 및 소프트웨어 연동을 제공하며 다른 팀에게 인터랙션 디자인을 원활하게 전달할 수 있습니다.
Hi-fi 프로토타입을 제작 디자인 팀은 아이디어에 생명을 불어넣고, 초기 단계에서 가정을 테스트하고, 중요한 사용자 피드백에 따라 디자인을 최적화할 수 있습니다. 따라서 프로토타이핑은 디자인 프로세스의 중요한 단계로, ProtoPie 및 Proto.io 와 같이 빠르게 프로토타이핑을 구현할 수 있는 툴이 반드시 필요합니다.
그러나 어떤 프로토타이핑 툴이 어떤 팀, 어떤 상황에서 더 맞는 툴일까요?
이번 아티클에서는, ProtoPie와 Proto.io의 차이점에 대해 알아보겠습니다.
구체적으로 이번 아티클에서는 아래 내용에 대해 다룰 예정입니다.
▶ ProtoPie에 대해
▶ Proto.io에 대해
▶ Proto.io 사용의 한계점
▶ ProtoPie 사용 시 이점
▷ 스마트 장치의 기본 센서를 사용한 프로토타입
▷ 기본 키보드 및 input layer를 사용한 초현실적인 프로토타입
▷ 음성 기능이 추가된 인터랙션
▷ 멀티터치 제스처로 터치스크린 기능 활용 최대화
▷ ProtoPie의 Interaction Recording으로 정확한 디자인 의도 표시
▷ 하드웨어 및 소프트웨어 호환 가능
▶ ProtoPie와 Proto.io, 어떤 툴을 사용해야 할까요?
ProtoPie에 대해
ProtoPie는 모바일, 데스크톱, 웹 및 IoT 장치에서 사용될 UI/UX 디자인 아이디어를 가장 쉽게 hi-fi 프로토타입으로 전환할 수 있는 툴입니다. ProtoPie는 MacOS 및 Windows에서 실행이 가능하며, Player 앱은 iOS 및 Android에서 실행이 가능합니다.
하지만 이는 단순히 저희만의 의견이 아닙니다. 한 고객은 ProtoPie를 "사용하기 쉬운 인터페이스와 점진적인 학습 곡선으로 디자인 커뮤니티에서 사랑받는 유연하면서도 강력한 프로토타이핑 툴"이라고 언급하였습니다.
우리의 미션은 창의적인 사람들이 상상력을 발휘하고 눈에 띄도록 돕는 것입니다. 광범위한 formulas 및 variables 라이브러리를 사용하여 새로운 인터랙션을 처음부터 끝까지 제작할 수 있습니다. 기본 click-through부터 실제 앱의 환경처럼 보이고, 느끼고, 작동하는 hi-fi 프로토타입까지 모든 것을 구현할 수 있습니다. 구현된 프로토타입은 휴대폰, 컴퓨터, 자동차 또는 게임 콘솔에서 테스트할 수 있습니다.
ProtoPie Studio InterfaceProto.io에 대해
Proto.io는 코드 없이 드래그 앤 드롭 UI(사용자 인터페이스)를 사용하여 다양한 템플릿, 이벤트 및 인터랙션을 제공하는 툴입니다.
본래 모바일 프로토타이핑을 위해 디자인되었지만, 이후 사용자가 화면 인터페이스로 모든 앱에 대한 프로토타입을 제작할 수 있도록 확장되었습니다. Proto.io는 워크플로에서 비슷한 인터랙션 및 transition간의 스텝을 구현하기에는 적합한 툴입니다. 그러나 ProtoPie 만큼 현실적인 효과를 구현하는 데는 기능적으로 충분하지 않습니다.
Proto.io 사용의 한계점
Proto.io는 프로토타이핑 기능을 다수 제공하지만, ProtoPie에서처럼 래피드 프로토타이핑을 하기엔 다소 무리가 있습니다. 왜 그럴까요?
툴 사용의 어려움
Proto.io는 다양한 기능을 제공하는 강력한 웹 응용 프로그램입니다. 그러나 모든 것이 드래그 앤 드롭, 버튼 클릭 및 목록에서 값을 선택하여 작동하기 때문에, 필요한 설정을 찾는 것이 다소 복잡할 수 있습니다.
또한, 프로젝트의 요구 사항에 비해 너무 많은 기능이 있다고 느껴질 수도 있습니다. 기능적인 풍부함이 장점이 될 수도 있지만, 실제로는 필요한 것을 빠르게 찾지 못하기 때문에 디자인 프로세스가 느려지고 복잡해 집니다. 디자인 워크플로우에서 나머지 프로세스를 지연시키는 래피드 프로토타이핑 툴은 큰 도움이 되지 않겠죠?
Proto.io의 인터페이스느려지는 로딩 속도
Proto.io는 웹 응용 프로그램이므로 사용하기 쉽지만 작업 속도가 느려질 수도 있습니다. 웹 기반이므로 내부 네트워크 상태 또는 인터넷 대기 시간이 작업에 영향을 줄 수 있습니다. 일부 사용자는 브라우저에서 열리기 때문에 종종 매우 느릴 수 있다고 불평합니다.
반면에 ProtoPie에는 자체 데스크톱 앱이 있습니다. 즉, 인터넷에 연결하지 않고도 ProtoPie Studio에서 프로토타입 작업을 할 수 있습니다.
Live Preview (브라우저)의 부재
ProtoPie에서는 작업하는 동안 항상 파이를 확인할 수 있고, 클릭 한 번으로 미리 보기 창을 띄울 수 있습니다. 또한 작업 중인 파이 옆에 열어 둘 수도 있습니다. 변경 사항은 동시에 반영되므로 저장하는 데 시간을 낭비할 필요가 없습니다.
그러나 Proto.io로 미리 보기를 하는 것은 보다 복잡합니다. 미리보기로 새 웹 브라우저 탭을 열기 전, 먼저 프로토타입을 저장해야 합니다. 따라서 번거롭지만 미리보기를 위해 계속 브라우저 탭을 바꿔야 합니다.
구독 취소 시 프로토타입 접근 불가
모든 프로토타입은 Proto.io 웹 플랫폼 내 저장이 되므로, 접근성 부분에서는 편리한 점이 있습니다. 언뜻 보기에는 큰 문제가 아닌 것처럼 보일 수 있지만, 구독을 취소하게 되면 저장된 프로토타입에 접근할 수 없게 됩니다.
그러나 ProtoPie를 사용하면 프로토타입이 클라우드에 저장되기 때문에 구독 취소 후에도 언제든지 접근이 가능합니다.
여기를 통해 ProtoPie Cloud에 대해 자세히 알아보세요.
ProtoPie 사용 시 이점
이전에 ProtoPie가 더 우수한 래피드 프로토타이핑 툴이라고 언급했습니다. 다음 내용을 통해 ProtoPie가 왜 더 우수한 툴인지, 그리고 ProtoPie만의 강력한 기능에 대해 더 자세히 알아보세요.
스마트 장치의 기본 센서를 사용한 프로토타입
ProtoPie는 microphone, tilt functionality, compass, 3D touch, proximity sensor, gyroscope 등 스마트 장치의 모든 센서를 사용할 수 있습니다.
스마트폰과 태블릿에 있는 최신 기능을 활용하는 다양한 hi-fi 프로토타입을 제작이 가능합니다. 카메라를 사용하여 사진 촬영을 모방하거나, 들어오는 소리에 이퀄라이저가 응답하도록 하거나, 장치를 기울이면서 360도 인터랙티브 파노라마를 만들 수 있습니다. ProtoPie는 핸드폰 센서에 접근이 가능하여, 더욱 현실적인 프로토타입 구현이 가능합니다.
기본 키보드 및 input layer를 사용한 초현실적인 프로토타입
ProtoPie 내 탑재된 키보드 기능을 통해, 스마트폰의 기본 키보드를 사용하여 타이핑 인터랙션을 만들어 보세요.
프로토타입에 text input을 추가하면 실제 앱에서 타이핑하는 것과 동일한 환경을 구현할 수 있습니다. 양식으로 로그인 환경의 프로토타입을 만들거나, 오류 메시지를 감지하도록 입력을 설정하는 기능 등을 제작할 수 있습니다.
Google image 검색 프로토타입을 통해 ProtoPie를 사용하여 현실적이고 고도화된 프로토타입을 구현하는 방법에 대해 알아보세요.
또한 layer(영문)를 적용하는 방법에 대해 알아보세요.
음성 기능이 추가된 인터랙션
ProtoPie의 voice 기능은 이해관계자에게 대화형 UI의 가치를 보여줄 수 있는 좋은 방법입니다.
이 기능을 사용하면 STT(음성-텍스트) 및 TTS(텍스트 음성 변환) 기능을 통해 사실적인 보이스 인터랙션을 추가할 수 있습니다. 예를 들어, ProtoPie에서 만든 음성 프로토타입은 음성 명령을 선택하여 응답하거나 텍스트를 큰 소리로 말할 수도 있습니다.
ProtoPie의 대화 디자인 및 voice 인터랙션 기능을 사용하여 접근성 목적, 음성 검색, 음성 도우미, 받아쓰기 앱 등을 위한 현실적인 프로토타입을 쉽게 만들 수 있습니다. 단순한 화면 터치 이상의 경험을 구현해 보세요.
아래 영상을 통해 ProtoPie의 voice 기능을 사용하여 만든 음성 번역 앱 프로토타입을 확인해 보세요.
여기(영문)를 클릭하여 voice 기능 사용법에 대해 더 알아보세요.
멀티 터치 제스처로 터치스크린 기능 활용 최대화
모바일, 태블릿 또는 TV에 관계없이 오늘날 우리가 사용하는 대부분의 장치에는 터치스크린이 있습니다. ProtoPie의 멀티 터치 제스처를 사용하면 터치스크린 장치용으로 제작된 앱을 쉽게 만들 수 있어, 한 손가락 또는 두 손가락으로 태핑, 드래그 및 미는 동작을 할 수 있습니다.
게임 프로토타입을 통해 멀티 터치 제스처가 어떻게 작동되는지 확인해 보세요.
ProtoPie의 Interaction Recording으로 정확한 디자인 의도 표시
Interaction Recording, 핸드 오프 이상의 기능.
ProtoPie를 사용하면 엔지니어를 위한 인터랙션 스펙을 자동으로 생성하여 정확한 디자인 의도를 표시 및 공유할 수 있어, 더 이상 자세한 스펙 문서를 작성하는 데 시간을 낭비하지 않아도 됩니다.
ProtoPie의 Interaction Recording은 가이드라인 역할을 하며, 엔지니어가 프로토타입의 상호 작용을 실제 프로덕션에 적용할 때 기초를 제공합니다. 엔지니어는 개발과 관련된 모든 인터랙션 스펙(예: duration, delay 및 easing)을 쉽게 찾을 수 있습니다. 디자이너는 프로토타입의 의도된 시나리오 중 하나를 기록하여 Interaction Recording을 만들 수 있습니다. 이 프로세스를 통해 인터랙션의 흐름, 인터랙션이 서로 작동하는 방식, 각 인터랙션이 전체적인 체계에 어떻게 맞는지 확인할 수 있습니다.
엔지니어에게 정확한 인터랙션 기록을 제공함으로써, 보다 효율적으로 희망하는 인터랙션을 정확히 구현할 수 있게 됩니다.
한 사용자에 따르면, 이는 "CSS 코드뿐만 아니라 애니메이션과 관련된 정확한 값, 즉 기록을 내보낼 수 있기 때문에 개발자의 업무 프로세스의 효율성을 증대시킬 수 있습니다."
하드웨어 및 소프트웨어 호환 가능
ProtoPie는 소프트웨어 프로토타입이 하드웨어 장치와 완벽히 통신할 수 있도록 합니다. 여러 장치, 디스플레이, 하드웨어 및 API와 관련된 다양한 실제 시나리오를 프로토타입으로 제작할 수 있습니다.
현재 ProtoPie는 자동차, 스마트워치, 게임, 모바일 및 태블릿 그리고 TV & 프로덕션 관련 솔루션을 가지고 있습니다. 그러나 상상을 뛰어넘는 프로토타입을 구현하는 사용자도 있습니다. 한 예로, Project MARCH는 ProtoPie를 사용해 외골격 로봇을 개발하였습니다.
Project MARCH가 ProtoPie를 사용하여 어떻게 미션을 성취했는지 궁금하다면, 여기를 클릭해 확인해 보세요!
ProtoPie Connect는 아두이노 보드와의 serial communication(영문) 또한 지원하여, 아두이노에서 작업하는 유저들이 하드웨어 전반에 걸쳐 프로토타이핑을 할 수 있도록 합니다.
ProtoPie를 사용한 아두이노 프로토타이핑(영문)에 대해 더 알아보세요.
ProtoPie와 Proto.io, 어떤 툴을 사용해야 할까요?
Proto.io는 프로토타이핑 기능을 개선하는 데 훌륭한 툴임은 의심의 여지가 없습니다. 드래그 앤 드롭 인터페이스, 수백 개의 기성 템플릿 및 component를 통해 프로토타이핑의 기초를 배우려는 디자이너에게 좋은 옵션입니다.
하지만 대부분의 디자이너는 기본적인 것을 넘어 최상의 결과를 원합니다. 그들은 제한 없이 상상 속의 아이디어를 현실로 바꾸고 싶어 합니다. 이를 위해서는 ProtoPie가 꼭 필요합니다.
ProtoPie는 최고 중의 최고를 고집하며, 프로젝트가 경쟁에서 우위를 점하기를 원하는 유저들을 위한 툴입니다. ProtoPie는 디자이너가 최고의 자아를 표현할 수 있도록 함으로써, 이해관계자의 상상력을 포착하는 hi-fi 프로토타입 구현이 가능합니다.
“ProtoPie는 속도의 단순함과 힘의 복잡성 간의 완벽한 균형을 지닌 프로토타이핑 툴입니다. 짧은 시간 안에 개념적 검증, 협업 및 개선을 위해 완벽하게 작동하는 프로토타입 버전을 제작하고 배포할 수 있습니다.”
ProtoPie에 대해 더 알아보기
ProtoPie 글로벌 커뮤니티에 오늘 가입하여 프로토타이핑을 한 단계 업그레이드 하세요. 또는 유저로부터 더 많은 소식을 듣고 싶다면 ProtoPie의 디스코드 채널(영문)을 확인해 보세요.
