요약
InVision은 간단한 디자인을 빠르게 제작해야 할 때 적합한 훌륭한 프로토타이핑 도구입니다. UX 디자이너가 기본적이지만 사용할 만한 프로토타입을 얼마나 빠르게 만들 수 있는지는 인상적입니다.
하지만 깊이와 복잡성이 필요하다면 아쉽게도 부족합니다. 상태를 포함한 복잡한 상호작용과 애니메이션을 처리할 수 있는 역량이 부족합니다. 더 심각한 것은 다른 도구와의 통합을 허용하지 않는다는 점입니다.
ProtoPie는 또 다른 이야기입니다. 풍부하고 복잡한 상호작용, 수많은 소프트웨어 및 하드웨어 통합 가능성, 그리고 클라우드 기반 협업 가능성을 제공하는 고충실도 빠른 프로토타이핑 도구입니다.
요즘 비즈니스는 매우 빠르게 움직입니다. UX 디자이너는 이해관계자에게 좋은 인상을 주기 위해 쓸 수 있고 현실적인 프로토타입을 빠르게 만들어야 한다는 압박을 점점 더 받고 있습니다. 당연히 이를 위해서는 빠른 프로토타이핑 도구가 필요합니다. 그렇다면, 시중에서 가장 좋은 프로토타이핑 도구는 무엇일까요?
이는 종종 ProtoPie와 InVision이라는 두 매우 다른 세력 간의 대결로 여겨집니다.
아래에서 ProtoPie와 InVision의 차이를 더 자세히 살펴보겠습니다:
ProtoPie란 무엇인가요?
InVision이란 무엇인가요?
ProtoPie란 무엇인가요?
ProtoPie 는 코딩 없이도 사용할 수 있는 강력한 프로토타이핑 도구로, 사용자가 모든 디지털 제품을 위해 고충실도 인터랙티브 프로토타입을 빠르게 만들 수 있게 해줍니다.
ProtoPie는 이해하기 쉽고 사용하기 편리합니다. 믿기 어렵다면 사용자들에게 물어보세요. 한 사용자는 “다양한 컴포넌트로 작업 흐름을 가속화하고 센서와 변수를 통해 프로토타입을 강력하게 만들어 줍니다.”라고 말했습니다. 또 다른 사용자는 “Sketch, Adobe XD, Figma 등 선호하는 어떤 디자인 도구에서든 사용자 정의 디자인을 가져올 수 있습니다. 이 크로스 플랫폼 도구를 사용하면 데스크톱, 태블릿 또는 다른 플랫폼에서 언제 어디서나 프로토타입을 테스트할 수 있습니다.”라고 말했습니다.
사용자는 프로토타입을 클라우드에 공유할 수 있을 뿐 아니라, 댓글을 달고 누가 프로토타입에 접근할 수 있는지도 손쉽게 제어할 수 있습니다. 이 클라우드 기반 프로토타이핑 도구의 도움으로 사용자는 팀원들과 협업하고 반복 작업을 더 빠르게 함께 진행할 수 있습니다. 본질적으로 ProtoPie는 당신만의 독특한 아이디어를 더 뛰어난 표현력, 깊이, 그리고 심오함으로 설명하는 데 도움을 줍니다. 한마디로, ProtoPie는 아이디어를 현실로 만들어 줍니다.
InVision이란 무엇인가요?
InVision은 높은 충실도의 미세 상호작용이나 정교한 상태 전환이 필요 없는 정적인 화면의 인터랙티브 프로토타입을 만드는 데 널리 사용되는 웹 기반 도구입니다.
이 앱은 디자인 도구인 Sketch와 유사해 학습 곡선이 낮습니다. 디자이너가 정적 스크린샷을 업로드하고 가능한 한 가장 간단한 방식으로 클릭 가능한 프로토타입을 만들 수 있게 해주는 쉽고 연결된 워크플로를 제공합니다. 타임라인 애니메이션을 지원하며 상호작용은 빠르고 이해하기 쉽습니다. 하지만 문제는 프로토타입이 복잡해질수록 성능이 더 끊기기 시작한다는 점입니다.
프로토타이핑할 때 InVision에서 무엇을 기대할 수 있나요?
InVision은 프로토타이핑에 대해 다른 접근 방식을 취합니다. 고급 상호작용과 상태를 결합한 애니메이션 대신 이 도구는 화면 간 접근 방식을 더 많이 사용합니다. 화면을 업로드한 뒤, 화면들을 서로 연결하는 핫스팟이 생성됩니다. 각 화면을 연결할 때 대상 화면, 동작/제스처, 전환을 지정합니다. 제스처 및 애니메이션 옵션에는 슬라이드 인, 페이드, 플립, 그리고 타이머를 설정해 한 화면을 자동으로 다른 화면으로 전환하는 기능이 포함됩니다.
프로토타입 모드와 페이지 간 연결
Craft는 Sketch와 Photoshop용 플러그인입니다. 예를 들어 Sketch의 경우, Sketch 안에서 상호작용을 추가한 다음 그 상호작용을 InVision 계정과 동기화할 수 있게 해줍니다. Craft를 사용하면 Sketch에서 ‘프로토타입 모드’로 들어가 어떤 레이어든 상호작용을 지정할 수 있습니다. 레이어를 선택한 상태에서 K를 누르기만 하면 해당 레이어를 다른 페이지나 같은 페이지의 다른 위치에 연결할 수 있습니다. 다양한 트리거 이벤트와 다양한 애니메이션 옵션이 있습니다. 예를 들어, 오른쪽으로 밀기, 왼쪽으로 슬라이드, 흐름 등이 있습니다.
InVision은 Sketch와 완전히 통합되므로, InVision 파일이 부정적인 영향을 받을까 걱정하지 않고 Sketch 파일의 디자인을 변경할 수 있습니다. 또한 화면 디자인과 핫스팟 추가를 빠르게 전환할 수 있게 해줍니다.
분명 문제가 있습니다. InVision과 Craft는 복잡성을 처리하지 못합니다. 특히 한 화면에 여러 상호작용이 있고 사용자가 가능한 모든 경우를 클릭해서 들어가게 하고 싶을 때 그렇습니다.
하지만 InVision은 간단한 프로토타이핑에는 훌륭합니다. 예를 들어 한 화면이 다음 화면으로 이어지는 흐름을 보여주는 데 적합합니다. 단, 단일 화면 안의 복잡한 상호작용에는 적합하지 않습니다. 결국 InVision의 핵심은 속도이며, 그 속도는 인상적입니다. 몇 분 만에 클릭 가능한 프로토타입을 만들 수 있습니다.
오버레이 화면
‘오버레이’ 기능을 사용하면 화면 아래는 그대로 유지한 채 디자인 요소를 화면 위에 배치할 수 있습니다. 이는 필요한 화면 수를 줄여주므로, 특히 햄버거 메뉴 같은 경우에 유용합니다. 각 페이지마다 메뉴가 보이는 화면을 만드는 대신 햄버거 버튼을 누를 때 ‘오버레이’ 기능을 사용하면 됩니다.
사양 — 디자이너와 개발자의 협업
사양은 수작업 명세 작성과 개발자와의 미팅을 하나의 단계로 바꿔 줍니다. 개발자는 필요한 왕복 과정을 모두 거치지 않고 바로 들어와 코딩을 시작할 수 있습니다.
ProtoPie에도 비슷한 기능인 상호작용 녹화가 있어 InVision에 전혀 뒤지지 않습니다. 하지만 그건 나중에 더 다루겠습니다. 이제 다시 InVision으로 돌아가 보겠습니다.
다음과 같은 경우 InVision이 더 적합합니다:
기본 프로토타입을 빠르게 만들어야 할 때
InVision 데스크톱 앱, Dropbox, Box와 파일을 동기화해야 할 때
프로토타입에 빠른 애니메이션이 필요할 때
댓글에 파일을 첨부해야 할 때
InVision은 제품 디자인을 위한 올인원 환경으로는 잘 작동하지만, 작업 흐름에 여러 도구를 통합하고 싶다면 답답함을 느끼게 됩니다. 결국 대부분의 UX 디자이너는 모든 작업에 하나의 도구만 쓰지 않습니다. 하나의 프로젝트에서 열두 개에 달하는 다양한 도구를 사용합니다. 다른 도구와 통합하지 못하는 InVision의 한계는 오늘날 시장에서 구식으로 보이게 만듭니다.
프로토타이핑할 때 ProtoPie에서 무엇을 기대할 수 있나요?
현실적이고 복잡한 상호작용을 보여줘야 할 때 ProtoPie의 진가가 완전히 드러납니다. 객체, 트리거, 응답 흐름으로 상호작용을 시연할 수 있으며, 나침반, 기울기, 소리, 3D 터치 센서를 포함해 프로토타입에서 스마트 기기 센서를 제어할 수 있는 기능을 제공합니다.
그래서 ProtoPie는 코딩 없이 고충실도 프로토타입을 만드는 데 있어 시장 최고의 선택입니다. 논리와 동적 입력을 처리할 수 있는 변수와 조건을 사용해 고급 사용자 여정을 보여줘야 하는 실제 사용성 또는 UX 평가 목적에도 적합합니다.
ProtoPie가 InVision과 무엇이 다른지 자세히 살펴보겠습니다.
프로토타입에서 스마트 기기의 센서를 쉽게 제어하기
ProtoPie를 사용하면 마이크부터 나침반, 3D 터치, 근접 센서, 자이로스코프까지 스마트 기기의 모든 센서를 코드 없이 활용해 현실적인 고충실도 프로토타입을 만들 수 있습니다.
ProtoPie에서 애니메이션된 3D 게임 Marble World를 확인해 보세요.
프로토타입에 오디오와 비디오 삽입하기
ProtoPie로 프로토타입에 오디오와 비디오를 삽입하는 것은 쉽습니다. 예를 들어,
프로토타입에서 동영상이 재생되는
비디오 플레이어 프로토타입을 만드는 방법을 알아보세요.
미디어 파일을 손쉽게 제어할 수 있습니다. 변수를 사용해 재생하고 일시정지할 수 있습니다. 안타깝게도 InVision은 이 기능이 매우 많이 요청되는 기능임에도 불구하고 제공하지 않습니다.
ProtoPie로 터치스크린의 힘을 발견해 보세요
ProtoPie는 모바일과 태블릿 앱을 만드는 모든 디자인 팀에게 가장 다재다능한 프로토타이핑 도구입니다.
다음 데모에서는 스마트폰 터치스크린 위에 서로 다른 과일이 직접 놓였을 때 프로토타입이 어떻게 반응하는지 살펴보세요.
수식과 변수를 사용해 고급 상호작용 만들기
변수와 수식은 남은 잔액 계산과 이메일 주소 검증부터 복잡한 동작으로 움직이는 객체에 이르기까지 동적 상호작용이 있는 프로토타입을 만들 수 있게 해줍니다. 예를 들어 포물선 경로처럼요. 가능성은 정말 무궁무진합니다.
수식과 변수를 모두 사용해 현실적인 타자기 효과를 만들어 보세요.
이 Pie를 다운로드하고 직접 사용해 보세요.
플러그인으로 ProtoPie를 가장 선호하는 디자인 도구와 연결하기
몇 번의 클릭만으로 ProtoPie는 macOS의 Sketch, 그리고 macOS와 Windows 모두에서 Adobe XD와 Figma의 디자인을 가져올 수 있게 해줍니다. 또한 레거시 가져오기와 플러그인을 지원해 디자인을 쉽고 유연하게 가져올 수 있습니다.
이제 Figma, Sketch, Adobe XD용 ProtoPie 플러그인을 모두 사용할 수 있습니다.
ProtoPie vs. InVision: 누가 승리할까요?
InVision의 공은 인정해야 합니다. 초창기에는 개척자 역할을 하며 디자이너들에게 프로토타이핑 방법을 가르쳤습니다. 하지만 세상은 변합니다. 이제는 ProtoPie가 UX 디자이너들에게 프로토타이핑을 마스터하는 방법을 가르치고 있습니다.
InVision은 간단한 디자인을 만드는 데 유용한 빠른 프로토타이핑 도구이지만, 변화의 흐름 속에서 점점 구식이 되어 가고 있습니다. 이해관계자들은 승인하기 전에 앱의 쓸 수 있고 현실적인 프로토타입, 즉 실제 제품을 손바닥 위에 올려놓은 듯한 모습을 보고 싶어 합니다. 그들은 그보다 못한 것으로 만족하지 않습니다.
바로 이 지점에서 ProtoPie가 등장합니다. 빠른 처리 속도와 복잡한 상호작용 및 풍부한 디자인을 위한 강력한 성능을 갖춘 ProtoPie는 고충실도 프로토타이핑과 클라우드 기반 협업을 위한 시장 최고의 빠른 프로토타이핑 도구입니다. 기능이 가득하고 수많은 소프트웨어 및 하드웨어 통합을 폭넓게 지원하는 ProtoPie는 대중을 위한 도구가 아닙니다. 고충실도 프로토타이핑의 장점을 중요하게 여기는 디자인 팀과 이해관계자를 위한 도구입니다.
ProtoPie를 지금 바로 만나보세요
프로토타이핑을 다음 단계로 끌어올릴 준비가 되셨나요? 오늘 가입하세요.
사용자들의 이야기를 더 들어보고 싶다면 ProtoPie의 Discord 채널을 확인해 보세요.
