ProtoPie vs. 시리즈: InVision
ProtoPie와 InVision의 차이점에 대해 알아보세요.
*Brunch 내 오류로 인해 몇몇 gif는 사진으로 대체되었음을 알려드립니다.
요약
▶ InVision(영문) 은 UX 디자이너가 기본적이지만 실행 가능한 프로토타입을 빠르게 제작할 수 있는 프로토타이핑 툴입니다.
▶ 그러나 state과 결합된 애니메이션 및 인터랙션 관련 기능이 부족해, 복합적인 프로토타입을 구현하기에는 기능적으로 충분하지 않습니다. 또한 다른 외부 툴과의 연동 기능이 지원되지 않습니다.
▶ ProtoPie는 풍성하고 복합적인 인터랙션, 다중 소프트웨어 및 하드웨어 연동의 잠재력, 클라우드 기반 협업 잠재력을 지닌 hi-fi 프로토타이핑 툴입니다.
비즈니스의 움직임이 점점 가속화됨에 따라, UX 디자이너는 실현 가능하고 사실적이면서도 다수의 이해 관계자들에게 놀라움을 선사할 프로토타입을 보다 신속하게 제작해야 합니다. 이를 위해서는 반드시 래피드 프로토타이핑 툴이 필요합니다. 하지만 최고의 프로토타이핑 툴은 과연 무엇일까요?
지금까지 ProtoPie vs. 시리즈를 통해 ProtoPie와 다양한 프로토타이핑 툴 사이의 차이점에 대해 알아보았는데요.
이번 아티클에서는 ProtoPie와 InVision의 차이점을 아래에서 자세히 살펴보고자 합니다.
구체적으로 아래 내용에 대해 알아보도록 하겠습니다.
▶ InVision에 대해
▶ ProtoPie에 대해
▶ InVision 사용 시 기대할 수 있는 점
▷ Prototoype Mode 및 페이지간 연결
▷ Overlay
▷ Specs: 디자이너-개발자간 협업
▶ ProtoPie 사용 시 기대할 수 있는 점
▷ Sensor를 사용한 프로토타입 구현
▷ 음성 및 영상 파일 추가
▷ 터치스크린 기능 사용 최적화
▷ formulas 및 variables로 고도의 인터랙션 제작
▷ Plugin 으로 외부 프로토타이핑 툴과 연동
▶ ProtoPie vs. InVision: 나에게 맞는 툴은?
InVision 에 대해
InVision(영문)은 hi-fi 마이크로 인터랙션이나 정교한 상태 전환이 필요 없는, 정적 화면의 인터랙티브 프로토타입을 만드는 데 널리 사용되는 웹 기반 도구입니다.
InVision은 Sketch와의 유사성 덕분에 학습 곡선이 낮습니다. 디자이너가 정적 스크린샷을 업로드하고 가능한 쉽고 신속하게 클릭 가능한 프로토타입을 만들 수 있는 워크플로우를 제공합니다. 또한, 타임라인 애니메이션이 지원되며 인터랙션이 빠르고 이해하기 쉽습니다. 그러나 프로토타입이 점점 고도화될수록 성능이 일정하지 못하다는 약점이 있습니다.
ProtoPie에 대해
ProtoPie는 단 1의 코딩 없이도 모든 디지털 제품에 대한 hi-fi 인터랙티브 프로토타입을 빠르고 쉽게 제작할 수 있는 강력한 프로토타이핑 툴입니다.
ProtoPie의 한 사용자는 "다양한 구성 요소로 워크플로를 가속화하고 센서와 variable로 프로토타입의 품질을 최적화하는 강력한 툴"로 인정하였습니다. 또한, "Sketch, Adobe XD 또는 Figma 등 원하는 디자인 툴에서 사용자 지정 디자인을 가져올 수 있어, 언제 어디서나 데스크톱, 태블릿 또는 기타 플랫폼에서 프로토타입을 테스트할 수 있다”는 점도 높게 평가하였습니다.
ProtoPie Cloud에서는 프로토타입을 쉽게 공유할 수 있을 뿐만 아니라 유저 액세스 정보를 관리할 수 있습니다. 이렇게 ProtoPie를 통해 팀 내 협업 효율성을 높일 수 있으며, 반복 작업을 가속화시킬 수 있습니다.
본질적으로, ProtoPie는 독창적인 아이디어를 보다 깊이 있게, 현실적으로 표현하는 데 필요한 모든 기능을 탑재한 프로토타이핑 툴입니다.
한마디로, ProtoPie는 상상을 현실로 만들어줄 수 있는 유일무이한 툴입니다.
InVision 사용 시 기대할 수 있는 점
InVision은 프로토타이핑에 대해 다른 방식으로 접근합니다. State과 결합된 고도화된 인터랙션 및 애니메이션 대신, 화면 간의 연결성에 더욱 중점을 두고 있습니다. 화면을 업로드하면 핫스팟이 생성되고, action 혹은 gesture, 그리고 transition을 지정하여 화면을 서로 연결합니다. Gesture 및 animation에 관련 옵션에는 sliding in, fading, flipping, 그리고 정해진 시간 안에 한 화면을 다른 화면으로 돌아가는 기능이 포함됩니다.
Prototoype Mode 및 페이지간 연결
Craft(영문)는 Sketch와 Photoshop을 위한 플러그인입니다. 예를 들어, Sketch의 경우 Sketch 내에서 추가한 인터랙션을 InVision 에 동기화할 수 있습니다. Craft를 사용하면 사용자가 스케치에서 'Prototoype Mode'로 들어가 모든 레이어에 대한 인터랙션을 지정할 수 있습니다. 레이어 선택 시, K를 눌러 다른 페이지 또는 동일한 페이지의 다른 위치에 연결하기만 하면 됩니다. Push right, Slide left, 그리고 flow 같이 trigger 이벤트와 animation에 대한 다양한 옵션이 있습니다.
InVision은 Sketch와 완벽하게 연동되므로, InVision 파일에서 야기될 문제에 대한 걱정 없이 Sketch 파일의 디자인을 변경할 수 있습니다. 또한, 화면 디자인과 핫스팟 추가 사이를 빠르게 전환할 수 있습니다.
하지만 위 이미지에서 보이듯이, InVision과 Craft는 복합성을 감당하지 못합니다. 특히, 한 화면에 복수의 인터랙션 및 클릭 옵션을 두는 등의 복합적인 기능 구현이 어렵습니다.
그래서 InVision은 복잡한 인터랙션이 아닌, 전체적인 화면간의 흐름을 확인하기에 적합한 프로토타이핑 툴입니다. 궁극적으로 InVision은 속도에 중점을 맞춘 프로토타이핑 툴로, 몇 분 안에 클릭 가능한 프로토타입을 만들 수 있습니다.
Overlay
Overlay는 화면을 그대로 유지한 상태에서 다른 디자인 요소를 화면 위에 배치할 수 있는 유용한 기능입니다. 예를 들어, 햄버거 메뉴를 만드는 경우 각 페이지별 메뉴 화면을 만드는 대신, 햄버거 버튼에 overlay 기능을 추가해 더욱 효율적인 메뉴 프로토타입을 구현할 수 있습니다.
Specs: 디자이너-개발자간 협업
Spec(영문(은 디자이너와 개발자가 한 곳에서 스펙을 공유하고 확인할 수 있는 기능으로, 이 기능을 통해 개발자는 바로 코딩을 시작할 수 있습니다.
ProtoPie는 이와 비슷한 기능인 Interaction Recording이라는 비슷한 기능을 탑재하고 있는데요.
이 부분에 대해서는 나중에 알아보기로 하고, 우선은 InVision에 대해 계속해서 더 알아보겠습니다.
InVision이 더 나은 옵션인 경우는 아래와 같습니다.
▶ 기본 프로토타입을 빠르게 구현해야 할 때
▶ InVision 데스크톱 앱, Dropbox 및 Box와 파일을 동기화해야 할 때
▶ 프로토타입에 대한 빠른 애니메이션 액세스가 필요할 때
▶ 코멘트에 파일을 첨부해야 할 때
InVision은 제품 디자인을 위한 올인원 환경이 잘 구축되어 있지만, 다양한 툴을 워크플로에 연동하려는 경우 불편함을 경험할 수 있습니다. 결국, 대부분의 UX 디자이너는 하나의 프로젝트 진행 시 최대 수십 개의 다른 도구를 사용하게 되는데, InVision의 경우 다른 툴과 연동이 어려워 사용성 면에서 떨어지는 경향이 있습니다.
ProtoPie 사용 시 기대할 수 있는 점
ProtoPie의 진가는 복잡한 인터랙션을 구현할 때 나타납니다. Object, trigger 및 response 와의 인터랙션을 시연할 수 있고, compass, tilt, sound, 그리고 3D touch 같은 스마트 장치에 탑재된 센서를 프로토타입에서 제어할 수 있습니다. 실제 사용성 혹은 UX 평가를 위해 고도화된 사용자 여정을 구현해야 할 때, ProtoPie에서는 variables 및 conditions를 사용하여 목적에 맞는 프로토타입을 제작할 수 있습니다.
위의 내용처럼 사용 가능한 센서의 다양성과 용이한 사용성 덕분에, ProtoPie는 hi-fi 프로토타이핑 툴 시장에서 가장 좋은 옵션으로 평가되고 있습니다.
ProtoPie만의 차별점에 대해 계속해서 알아보도록 하겠습니다.
Sensor를 사용한 프로토타입 구현
센서가 장착된 프로토타입에 대해 더 읽어보기 (영문)
ProtoPie를 사용하면 단 1의 코딩 없이도 microphone에서 compass, 3D touch, proximity sensor, 그리고 gyroscope 까지 스마트 장치의 모든 센서를 사용하여 현실적인 hi-fi 프로토타입을 구현할 수 있습니다.
아래 영상을 통해 ProtoPie에서 제작된 3D 게임, Marble World를 확인해 보세요.
음성 및 영상 파일 추가
프로토타입에서 비디오가 재생되는 음악 플레이어처럼, ProtoPie에서는 영상 혹은 음성 파일을 프로토타입에 쉽게 추가할 수 있습니다. (영문)
여기를 클릭하여 영상 프로토타입 구현하는 방법을 배워보세요.
또한 미디어 파일을 쉽게 제어할 수 있으며, variables를 사용하면 재생 혹은 일시정지 기능을 구현할 수 있습니다. 안타깝게도 InVision에서는 높은 수요에도 불구하고, 해당 옵션이 제공되지 않고 있습니다.
터치스크린 기능 사용 최적화
ProtoPie는 모바일 및 태블릿용 앱에서 작업하는 모든 디자인 팀을 위한 가장 다재다능한 프로토타이핑 툴입니다.
아래 다양한 과일이 터치스크린에 놓였을 때 각각 달라지는 프로토타입의 반응을 촬영한 영상을 확인해 보세요.
Formulas 및 variables로 고도의 인터랙션 제작
Variables와 Formulas를 통해 남은 잔액 계산 및 이메일 주소 유효성 검사부터 고차원적인 동작으로 이동하는 object 그리고 프로젝타일 모션까지, 다양한 동적 인터랙션이 추가된 프로토타입을 만들 수 있습니다. 또한 formulas와 variables를 모두 사용하여 아래와 같은 현실적인 타자 효과도 구현할 수 있습니다.
여기를 클릭하여 직접 사용해보세요.
Plugin 으로 외부 프로토타이핑 툴과 연동
ProtoPie에서는 몇 번의 클릭만으로 MacOS의 Sketch, MacOS와 Windows 버전의 Adobe XD 및 Figma에서 작업한 디자인 가져올 수 있습니다. 레거시 가져오기 및 플러그인을 지원하므로 쉽고 유연하게 디자인을 가져올 수 있습니다.
현재 ProtoPie Plugin은 Figma, Sketch, and Adobe XD 대상으로 지원하고 있습니다.
(각 링크를 클릭하여 다운로드를 시작하세요)
ProtoPie vs. InVision: 나에게 맞는 툴은?
InVision은 디자이너에게 프로토타입을 제작하는 방법을 처음 소개한 프로토타이핑의 선구자였다면, ProtoPie는 현재 UX 디자이너에게 프로토타이핑을 마스터하는 방법을 전달하고 있습니다.
InVision은 간단한 디자인을 제작하기에 적합한 래피드 프로토타이핑 툴이지만, 시대적인 요구에 따라가지 못하고 있습니다. 이해 관계자는 최종 승인 전, 실제 앱처럼 실행 가능하고 사실적인 프로토타입을 보고 싶어합니다. 직접 테스팅 가능한 사실적인 프로토타입이 없다면, 앱에 대한 어떠한 의견도 수렴하기 어렵겠죠.
이때, ProtoPie를 사용해 보세요. 풍부한 기능과 쉬운 사용성을 자랑하는 ProtoPie는 hi-fi 프로토타이핑 및 클라우드 기반 협업을 위한 최고의 래피드 프로토타이핑 툴입니다. 풍부한 기능과 강력한 소프트웨어 및 하드웨어 연동 기능이 탑재된 ProtoPie는 디자인 팀과 이해 관계자, hi-fi 프로토타이핑 툴의 진정한 가치를 이해하는 유저들만을 위한 툴입니다.
ProtoPie에 대해 더 알아보기
프로토타입 제작을 다음 단계로 끌어올릴 준비가 되셨다면, 지금 가입하여 ProtoPie의 다양한 기능들을 체험해 보세요!
또한 ProtoPie의 Discord 채널(영문)을 통해 유저로부터 다양한 팁 그리고 사례 등을 접할 수 있습니다.
