요약
Mac용 Principle은 화면 간 애니메이션과 전환을 만들 때 사용하기에 괜찮은 선택입니다.
하지만 가장 큰 단점은(Mac 사용자에게만 제공된다는 점 외에도) 고급 상호작용과 하이파이 프로토타이핑을 지원하는 기능이 부족하다는 것입니다.
ProtoPie는 단순한 모션 디자인 도구 그 이상입니다. ProtoPie에서는 사용자가 복잡한 상호작용을 구성하고 한 줄의 코드 없이 센서 기반 프로토타입을 만들 수 있습니다.
프로토타이핑은 제품 개발과 인터랙션 디자인 프로젝트에서 핵심적인 작업입니다. 시장에는 수많은 빠른 프로토타이핑 도구가 있으므로, 어떤 도구를 사용해야 할지 고민될 수 있습니다. “프로토타이핑 도구 비교” 아티클을 찾고 있다면, 이 ProtoPie vs. Principle 글이 두 도구의 차이를 이해하고 어떤 도구가 가장 좋은 프로토타이핑 도구인지 알려줄 것입니다. 계속 지켜봐 주세요.
이 글에서 살펴볼 내용은 다음과 같습니다 –
아래 기준에 따라 프로토타입 제작과 프로토타입 테스트에서 두 도구가 어떻게 다른지 살펴봅니다 –
시작해 봅시다.
Principle이란 무엇인가?
Mac용 Principle은 웹, 모바일, 데스크톱용 애니메이션 및 인터랙티브 사용자 인터페이스를 만드는 데 도움을 주는 UX 프로토타이핑 도구입니다. 이름에서 알 수 있듯이 Principle은 Mac 운영체제에 맞게 특별히 설계되었으며 Core Animation 기반으로 작동합니다.
특정 용도에 맞는 특별한 도구 모음을 제공하기보다, Principle은 디자이너와 개발자가 조합해 다양한 애니메이션과 인터랙티브 효과를 만들 수 있는 일반적인 기능을 제공합니다.
Principle을 사용하면 얻을 수 있는 장점은 다음과 같습니다:
애니메이션 프로토타이핑과 다이내믹 그래픽을 위해 특별히 설계되었습니다.
사용자 친화적인 인터페이스와 비교적 낮은 학습 곡선을 제공합니다.
미리보기와 테스트를 위한 동반 앱인 Principle Mirror를 제공합니다.
Principle 인터페이스.
ProtoPie란 무엇인가?
ProtoPie는 코딩이 전혀 필요 없는 가장 쉬운 프로토타이핑 도구로, 디자인 팀과 기업이 모바일, 데스크톱, 웹, IoT 등에서 매우 인터랙티브하고 현실적인 프로토타입을 만들 수 있도록 돕습니다. ProtoPie는 macOS와 Windows에서 실행되며, ProtoPie Player 앱은 iOS와 Android 모두와 호환됩니다.
ProtoPie로 프로토타이핑할 때 얻을 수 있는 주요 장점은 다음과 같습니다:
ProtoPie는 IoT를 지원하는 도구로, 플랫폼과 디바이스를 넘나드는 원활한 연동이 가능합니다.
ProtoPie는 기기별 기술을 활용해 3D 터치 센서, 기울기, 근접, 소리로 프로토타입을 더욱 강력하게 만들 수 있습니다.
ProtoPie는 매우 사용하기 쉽습니다. 클릭하고 선택하기만 하면 트리거와 응답 기반 상호작용을 활성화할 수 있습니다.
ProtoPie Player는 프로토타입을 즉시 배포할 수 있게 해 주어 앱을 매우 편리하게 만듭니다.
ProtoPie는 하드웨어 및 소프트웨어 호환이 가능합니다.
ProtoPie Studio 인터페이스.
Mac용 Principle과 ProtoPie에서 상호작용은 어떻게 만들어질까?
ProtoPie에서는 사용자가 객체에 트리거와 응답을 추가해 상호작용을 만드는 반면, Principle에서는 아트보드나 레이어에 전환 화살표를 적용해 상호작용을 만듭니다. Principle 용어로는 이를 이벤트라고 부릅니다.
Principle은 몇 가지 유형의 이벤트를 지원하며, 이를 조합하면 사용자가 애니메이션과 상호작용을 설계할 수 있습니다. 이러한 이벤트에는 다음이 포함됩니다 –
호버(바깥쪽 & 안쪽)
탭
스크롤(시작, 해제 & 종료)
드래그(시작 & 종료)
터치(위 & 아래)
자동
또한 Principle은 사용자가 다음 세 가지 유형의 상호작용을 수행할 수 있도록 합니다 –
드래그: 터치한 채로 유지하여 레이어의 위치를 변경합니다.
스크롤: 전체 레이어 그룹이나 필요한 특정 하위 레이어를 이동합니다.
페이지 넘김: 홈 화면과 이미지 캐러셀을 위아래로 넘겨 쉽게 볼 수 있게 합니다.
사각형 레이어에 전환 화살표를 추가하려면 번개 아이콘을 클릭하세요.
이 모든 것이 많아 보일 수 있지만, ProtoPie Studio에는 사용자가 놀라운 상호작용을 설계할 수 있도록 해 주는 다양한 옵션이 가득합니다. ProtoPie로 프로토타이핑하는 것은 하나의 간단한 개념 모델로 귀결됩니다. 즉, 객체, 트리거, 그리고 하나 또는 여러 개의 응답을 조합해 상상할 수 있는 어떤 상호작용이든 만들 수 있습니다.
주기율표에서 영감을 받아 ProtoPie도 트리거와 응답이라는 두 그룹으로 구성된 자체 버전을 가지고 있습니다.
트리거에 대해 더 알아보려면 여기를 클릭하고, ProtoPie의 응답에 대해 더 알아보려면 이 문서 페이지를 확인하세요.
ProtoPie vs. Principle: 무엇이 ProtoPie를 더 좋게 만드는가?
이제 Principle과 ProtoPie에서 상호작용이 어떻게 만들어지는지 알았으니, 이 프로토타이핑 도구들이 서로 무엇이 다른지 미묘한 차이를 살펴보고 ProtoPie가 왜 훨씬 더 강력한지 더 잘 이해해 봅시다.
실제 텍스트 입력 기능
사용자가 기술을 사용할 때 수행하는 많은 작업에는 어떤 형태로든 텍스트가 포함됩니다. 직접 입력하거나 음성 인식 옵션을 사용하죠. 텍스트 기반 폼, 검색창, 로그인 기능을 지원하려면 텍스트 입력 레이아웃을 사용해야 합니다. Principle은 아직 그런 레이아웃을 제공하지 않는데, 이 기능이 브랜드의 수익성에 얼마나 중요한지를 생각하면 아쉬운 부분입니다.
반면 ProtoPie는 텍스트 입력 레이아웃을 제공합니다. 해야 할 일은 프로토타입 디자인에 입력 레이어를 추가하는 것뿐이며, 그러면 끝입니다. 입력 레이아웃의 크기, 위치, 간격까지도 ProtoPie Studio에서 조정할 수 있습니다.
더 좋은 점은 ProtoPie가 단일 행 텍스트 입력과 여러 줄 텍스트 입력을 모두 지원한다는 것입니다. 언제나 그렇듯 입력 레이어는 물리 키보드나
를 사용해도 iOS, iPadOS, Android에서 계속 작동합니다.
ProtoPie에서 입력 레이어 기능을 사용하는 방법은 아래 튜토리얼을 확인해 보세요.
스마트 기기의 내장 기능으로 프로토타입에 생명을 불어넣으세요
이 프로토타이핑 경쟁에서 ProtoPie가 더욱 높은 점수를 얻는 이유는, Principle과 달리 카메라, 가속도계/자이로스코프, 마이크, 나침반, 근접 센서, 3D Touch 같은 다양한 스마트 기기 내장 센서를 매끄럽게 통합하기 때문입니다.
이 기능들 중 나침반과 기울기 기능이 어떻게 작동하는지 살펴보겠습니다.
나침반
ProtoPie에서 나침반은 기기가 향하고 있는 방향에 따라 응답이 실행되는 상태입니다. 나침반 트리거를 추가한 다음 회전 응답과 연결하고 값을 입력하면 자기장 방향을 기준으로 회전을 생성할 수 있습니다.
ProtoPie로 만든 모바일 나침반.
기울기
ProtoPie에서 기울기 트리거의 공식 정의는 “기기가 놓인 각도에 따라 응답이 실행되는 상태”입니다. 즉, 기울기 트리거를 레이어에 적용하면 응답은 기기가 놓인 각도를 기준으로 작동합니다.
ProtoPie로 만든 파노라마 카메라 프로토타입.
인터랙션 기록: 단순한 인계 그 이상
Principle 프로토타입 도구(버전 6 이상)는 사용자가 웹을 통해 자신의 프로토타이핑 과정을 공유할 수 있게 합니다. 하지만 문서화한 과정을 다른 사람에게 내보내려면, 아직 만료되지 않았거나 최소한 무료 체험 기간이 남아 있는 Principle 라이선스가 필요합니다. 이 둘 중 어느 것도 충족되지 않으면 문서 내보내기 기능에 접근할 수 없습니다. 게다가 유효한 라이선스가 있더라도 애니메이션 값은 내보낼 수 없어 전체 제품 개발 과정에서 문제가 될 수 있습니다.
ProtoPie는 다릅니다. Team & Enterprise 요금제에서 ProtoPie는 인터랙션 기록이라고 부르는 기능을 제공합니다. 이 기능은 프로토타입을 만드는 동안 수행된 모든 상호작용을 실시간으로 기록하고 문서화합니다. 인터랙션 기록은 각 상호작용의 정확한 사양과 프로토타입의 레이어 속성에 대한 세부 정보를 자세히 제공합니다.
이 기능은 제품을 개발할 때 여러 팀과 외부 이해관계자와 협업해야 하는 경우 매우 유용합니다. 잘 문서화된 프로토타입 계획을 다른 사람과 쉽게 공유할 수 있어 빠르고 쉬운 디자인 결정을 내릴 수 있습니다.
인터랙션 기록을 통해 디자이너는 다음을 할 수 있습니다 –
오해 없이 의도를 보여줄 수 있습니다;
개발자에게 정말 필요한 값을 제공할 수 있습니다;
시간을 절약할 수 있습니다;
인터랙션 기록 페이지.
프로토타입 테스트가 그 어느 때보다 쉬워졌습니다
프로토타입 디자인이 완성되면, 이제 디바이스 간 프로토타입 미리보기와 테스트를 할 차례입니다. 휴대폰이나 태블릿에서 프로토타입을 테스트하는 방법이 궁금하다면, 답이 있습니다.
Principle은 Principle Mirror라는 동반 앱을 제공하며, 이 앱은 다운로드하여 프로토타입 미리보기에 사용할 수 있습니다. 이 앱은 프로토타입을 만들 때처럼 기본 Principle 도구에서 만든 모든 내용을 동기화합니다. 하지만 Mac이 아닌 다른 기기에서 프로토타입을 미리 보려면 Principle Mirror에서 문제가 생깁니다. 해당 기기를 컴퓨터에 USB 케이블로 연결해야 합니다. 아직 Principle Mirror에는 직접적인 크로스 디바이스 호환성이 없습니다. 하지만 USB로 기기를 연결하면 휴대폰과 태블릿에 동기화된 모든 프로토타입을 여러 번 미리 보고 테스트할 수 있습니다.
Principle Mirror vs. ProtoPie Player.
ProtoPie는 ProtoPie Player라는 비슷한 동반 앱을 제공합니다. 이 ProtoPie 앱을 사용하면 스마트 기기에서 ProtoPie Studio로 개발 중인 디자인을 실시간으로 동기화할 수 있습니다. Principle Mirror와 달리 ProtoPie Player 앱은 ProtoPie Studio의 QR 코드를 스캔하기만 하면 iOS, iPadOS, Android에서 프로토타입을 쉽게 보고, 체험하고, 테스트할 수 있습니다. USB 케이블을 사용해 프로토타입에 연결할 수도 있습니다.
내장 플러그인으로 워크플로를 더욱 강력하게
Principle과 ProtoPie는 모두 서드파티 연동을 지원하지만, 지원 범위는 다릅니다. Principle은 Sketch와 Figma에서만 디자인 가져오기를 지원합니다. 반면 ProtoPie는 AdobeXD, Sketch, Figma에서 디자인을 가져올 수 있게 해 줍니다. 또한 Lottie 애니메이션도 추가할 수 있습니다.
ProtoPie Studio의 가져오기 기능을 사용해 중단한 지점부터 다시 시작하세요.
ProtoPie vs. Principle: 결론은 어떨까요?
Principle과 ProtoPie의 차이를 이해하면 디자이너가 최고의 하이파이 프로토타이핑 도구를 선택할 때 범위를 좁히는 데 도움이 됩니다. 위의 비교를 보면, 다음과 같은 이유로 ProtoPie가 두 도구 중 단연 최고의 프로토타이핑 도구라는 점을 알 수 있습니다:
Principle은 훌륭하고 사용하기 쉬운 도구이지만, iOS 중심 성향이 매우 강하고 여러 한계가 있습니다.
ProtoPie에서는 만들 수 있는 트리거와 응답의 조합이 무한하기 때문에 프로토타입 제작이 더 쉽습니다.
인터랙션 기록 덕분에 ProtoPie에서는 프로토타이핑 문서화 과정도 더 쉽고, 빠르고, 매끄럽습니다.
두 도구 모두 미리보기와 테스트를 위한 강력한 동반 앱을 제공하지만, ProtoPie Player가 기기 간 동기화와 사용이 더 쉽습니다.
센서 지원: ProtoPie의 강점은 기울기, 소리, 나침반, 근접 센서, 3D Touch 센서 등 스마트 기기의 센서를 프로토타입에서 제어할 수 있다는 점입니다.
또 다른 장점은 Principle(또는 다른 어떤 프로토타이핑 도구에서든)에서 ProtoPie로 쉽게 전환할 수 있다는 점입니다. ProtoPie 커뮤니티에 참여하면 다른 ProtoPie 사용자들과 소통하고 이 놀라운 프로토타이핑 도구를 어떻게 사용하는지 배울 수 있습니다. 또한 프로토타이핑이 처음이라면 그들에게서 몇 가지 팁과 요령을 얻어 직접 ProtoPie에서 활용할 수 있습니다.
