ProtoPie vs. 시리즈: Principle
ProtoPie와 Principle의 차이점에 대해 알아보세요.
*Brunch 내 오류로 인해 몇몇 gif는 사진으로 대체되었음을 알려드립니다.
요약
▶ Principle for Mac(영문)은 화면 간 애니메이션 및 transition을 구현할 때 사용 가능한 툴입니다.
▶ 그러나 Mac OS 에서만 사용이 가능하며, 고도의 인터랙션과 hi-fi 프로토타이핑 기능이 부족하다는 큰 단점이 있습니다.
▶ ProtoPie는 단 한 줄의 코드 없이도 정교한 인터랙션 및 센서가 탑재된 프로토타입을 구현할 수 있는 프로토타이핑 툴입니다.
프로토타이핑은 제품 개발 및 인터랙션 디자인 프로젝트에서 필수적인 작업입니다. 하지만 래피드 프로토타이핑 툴의 종류가 너무 많아서 어떤 툴이 가장 적합한지 결정하기 어렵진 않으셨나요?
다양한 프로토타이핑 툴 사이의 다양한 차이점이 궁금하셨다면, 이 아티클을 꼭 읽어보세요!
이번 아티클에서는 ProtoPie와 Principle 간의 기능적 차이점을 살펴보고, 어떤 툴이 가장 적합한 프로토타이핑 툴인지 알아볼 예정입니다.
구체적으로 아래 내용에 대해 살펴보도록 하겠습니다.
▶ Principle에 대해
▶ ProtoPie에 대해
▶ ProtoPie와 Principle에서 인터랙션 구현하는 방법
▶ ProtoPie와 Principle의 기능적 차이
▷ 텍스트 입력 기능
▷ 센서 서포트
▷ 프로토타이핑 프로세스 및 개발 내용 문서화 및 공유 (Interaction Recording)
▷ 프로토타입 미리보기
▷ 외부 프로토타이핑 툴과의 연동
▶ ProtoPie와 Principle, 나에게 맞는 툴은?
이제 본격적으로 시작해 볼까요?
Principle에 대해
Principle은 웹, 모바일 및 데스크톱을 위한 애니메이션 및 대화형 사용자 인터페이스를 구현할 수 있는 UX 프로토타이핑 툴입니다. Principle은 Mac OS 용으로 맞춤 설계되었으며 Core Animation으로 구동됩니다.
특정 용도를 위한 기능을 제공하는 대신, Principle은 디자이너와 개발자가 협업하여 다양한 애니메이션 및 인터랙티브 효과를 생성할 수 있는 일반적인 기능을 제공합니다.
Principle 사용 시 누릴 수 있는 이점:
▶ 애니메이션 프로토타이핑 및 다이내믹 그래픽 구현에 최적화
▶ 비교적 낮은 학습 곡선 및 사용자 친화적인 인터페이스
▶ Principle Mirror를 통한 미리보기 및 테스트
Principle 인터페이스ProtoPie에 대해
ProtoPie는 코드 없이도 쉽게 사실적인 인터랙티브 모바일, 데스크톱, 웹, IoT 등의 프로토타입을 제작할 수 있는 프로토타이핑 툴입니다. ProtoPie는 Mac OS와 Windows에서 실행이 가능하며, ProtoPie Player 앱은 iOS와 Android에서 호환됩니다.
ProtoPie 사용 시 누릴 수 있는 이점:
▶ IoT 기반 툴로 원활한 크로스 플랫폼 및 크로스 디바이스 연동
▶디바이스별 기능에 3D touch sensors, tilt, proximity 및 sound 등을 접목하여 프로토타입 고도화
▶ 클릭 및 선택만으로 trigger 및 response 인터랙션 활성화가 가능한 쉬운 사용성
▶ 모든 장치에서 프로토타입 즉시 공유가 가능하여 편리한 앱 개발
▶ 우수한 하드웨어 / 소프트웨어 호환성
ProtoPie Studio 인터페이스ProtoPie와 Principle에서 인터랙션 구현하는 방법
ProtoPie에서 사용자가 개체에 trigger와 response을 추가하여 인터랙션을 구현할 수 있다면, Principle에서는 아트보드 또는 레이어에 전환 화살표를 적용하여 인터랙션을 구현할 수 있습니다.
아트보드간의 전환을 Principle에서는 events (영문)라고 부르는데, events를 결합하면 애니메이션과 인터랙션을 디자인할 수 있습니다.
Principle에서 사용 가능한 events는
Hover (outside & inside)
Tap
Scroll (begin, released & end)
Drag (begin & end)
Touch (up & down)
Auto
등이 있습니다.
또한 Principle에서는 세 가지 유형의 인터랙션을 수행할 수 있습니다.
Dragging: 레이어를 터치하여 레이어의 위치를 변경합니다.
Scrolling: 필요에 따라 전체 레이어 그룹 또는 특정 하단 레이어를 이동합니다.
Paging: 홈 화면과 이미지 캐러셀에 커서를 상하로 움직여 가독성을 높입니다.
번개 아이콘을 클릭하여 직사각형 레이어에 transition 화살표 추가Principle에서 다양한 기능이 제공되지만, ProtoPie Studio에는 단순한 프로토타이핑 기능을 넘어 초현실적인 인터랙션을 위한 기능을 다수 갖추고 있습니다.
ProtoPie는 하나의 단순한 개념적 모형인 ‘object-trigger-response’를 기반으로 설계된 프로토 타이핑 툴로, 하나의 개체, 하나의 trigger, 그리고 하나 또는 그 이상의 response를 사용하여 원하는 모든 인터랙션을 구현할 수 있습니다.
원소 주기율표에서 영감을 얻은 ProtoPie는 trigger와 response 두 그룹으로 구성된 자체 버전을 가지고 있습니다.
Trigger에 대해 자세히 알아보려면 여기를, ProtoPie의 response에 대해 자세히 알아보려면 여기
를 클릭하여 확인해 보세요.
ProtoPie와 Principle의 기능적 차이
앞서 각각 Principle과 ProtoPie에서 인터랙션을 생성하는 방법에 대해 살펴보았는데요. 이제 각 툴의 기능적인 차이 및 ProtoPie의 차별점에 대해 알아보겠습니다.
텍스트 입력 기능
기기를 이용하여 유저가 수행하는 많은 작업에는 타이핑 혹은 음성인식 등 텍스트를 입력시켜야 하는 경우가 많습니다. 텍스트 기반 양식, 검색 창 및 로그인 등의 기능을 구현하려면 텍스트 입력 레이아웃을 사용해야 하는데, 안타깝게도 Principle에서는 이런 레이아웃이 아직 제공되지 않고 있습니다.
하지만 ProtoPie에서는 프로토타입에 입력 레이어를 추가하면 텍스트 입력 레이아웃을 구현할 수 있습니다. ProtoPie Studio에서는 입력 레이아웃의 크기에서 위치, 간격에 이르기까지 모든 것을 조정할 수 있습니다.
뿐만 아니라, 한 줄과 여러 줄 텍스트 입력 모두 구현이 가능합니다. 평소처럼 입력 레이어는 iOS, iPadOS 및 Android에 탑재된 내장 키보드(영문) 또는 기본 키보드에서 계속 작동합니다.
아래 튜토리얼을 통해 ProtoPie에서 입력 레이어 기능을 사용하는 방법을 배워보세요.
스마트 디바이스의 내장 기능을 사용하여 프로토타입에 생동감 추가
Principle과 달리 ProtoPie에서는 Camera, Accelerometer/Gyroscope, Microphone, Compass, Proximity, 그리고 3D Touch와 같은 다양한 스마트 장치 내장 센서와 원활하게 연동할 수 있습니다.
그중에서도 Compass 및 Tilt 기능과 연동되었을 때의 사례를 좀 더 자세히 살펴보겠습니다.
Compass
ProtoPie에서 Compass는 장치가 가리키는 방향에 따라 response가 실행되는 상태입니다. Compass trigger 추가 후, Rotate response에 연결하고 값을 입력하면 자기장의 방향에 따라 회전합니다.
ProtoPie로 만든 모바일 나침반Tilt
ProtoPie에서 Tilt는 “장치가 설정된 각도에 따라 response가 실행되는 상태”입니다. 즉, 레이어에 Tilt trigger를 적용하면 장치가 설정한 각도에 따라 response가 달라집니다.
ProtoPie로 만든 파노라마 카메라 프로토타입Interaction Recording: 핸드 오프 그 이상
Principle (버전 6 이상)에서는 웹을 통해 프로토타이핑 프로세스를 공유할 수 있습니다. (영문) 그러나 문서화된 프로세스를 다른 사람에게 공유하기 위해서는 Principle 라이선스가 아직 만료되지 않았거나, 최소 무료 평가판 기간이 적용된 라이선스여야 합니다. 이 중 하나라도 해당사항이 없으면 document export 기능에 액세스할 수 없습니다. 또한 라이선스가 유효하더라도 애니메이션 값을 내보낼 수 없어, 전체 제품 개발 시 문제가 될 수 있습니다.
하지만 이와 달리 ProtoPie에서는 Team 및 Enterprise Plan 유저 대상으로 Interaction Recording을 제공합니다. Interaction Recording에서는 프로토타입 생성 시 수행된 모든 인터랙션을 실시간으로 기록하고 문서화하여, 각 인터랙션의 정확한 스펙 관련 자세한 내용과 프로토타입의 레이어 설정에 대한 세부 정보를 제공합니다.
이 기능은 체계적으로 문서화된 프로토타입 플랜을 다른 사람들과 쉽게 공유할 수 있어 빠르고 쉽게 디자인 결정을 내릴 수 있습니다. 따라서 제품 개발 시, 여러 팀 및 외부 이해관계자와 협업해야 할 때 매우 유용한 기능입니다.
Interaction Recording을 통해 디자이너는 아래와 같은 이점을 누릴 수 있습니다.
▶ 명확한 디자인 의도 전달 가능
▶ 개발 시 필요한 내용 (예: 스펙) 전달을 통한 혼선 최소화
▶ 관련 업무 시간 단축
Interaction Recording 페이지더욱 쉬워진 프로토타이핑 테스팅
프로토타입 디자인이 완료되면 휴대폰 혹은 태블릿 등 디바이스에서 프로토타입 미리보기와 테스트를 진행할 차례입니다.
Principle에서 작업된 프로토타입의 경우, Principle Mirror(영문)에 모든 프로토타입을 동기화하여 미리보기를 할 수 있습니다. 그러나 Mac이 아닌 다른 장치에서 프로토타입을 미리 보려는 경우 USB 케이블을 사용하여 프로토타입을 컴퓨터에 연결해야 확인이 가능합니다. Principle Mirror에 대한 직접적인 장치 간 호환 기능은 없지만, 휴대폰 및 태블릿 등의 기기를 USB로 연결한 후 프로토타입 미리보기 및 테스트를 진행할 수 있습니다.
Principle Mirror vs. ProtoPie PlayerProtoPie로 제작된 프로토타입은 ProtoPie Player를 통해 실시간 동기화가 가능합니다. Principle Mirror와 달리, ProtoPie Studio의 QR 코드를 스캔하면 iOS, iPadOS 및 Android의 ProtoPie Player 에서 프로토타입을 쉽게 보고 경험하고 테스트할 수 있습니다. 또한, USB 케이블을 사용하여 프로토타입에 연결도 가능합니다.
플러그인으로 워크플로 강화
Principle과 ProtoPie 모두 외부 툴과의 연동을 지원합니다. 하지만 Principle는 Sketch 및 Figma에서만 디자인을 가져올 수 있는 반면, ProtoPie는 Adobe XD, Sketch 및 Figma에서 디자인을 가져올 수 있습니다. 또한 ProtoPie에서는 Lottie 애니메이션 추가도 가능합니다.
ProtoPie Studio의 가져오기 기능을 사용하여 중단한 부분에서 작업을 다시 시작하세요ProtoPie와 Principle, 나에게 맞는 툴은?
Principle과 ProtoPie의 차이점을 이해하면 디자이너에게 가장 맞는 hi-fi 프로토타이핑 툴을 선택할 때 필드 범위를 좁힐 수 있습니다.
이번 아티클에서 살펴본 ProtoPie의 차별점을 요약해 봅시다.
Principle은 여러 모로 훌륭하고 사용하기 쉬운 도구이지만 iOS 중심적이라는 점 외에도 많은 제한이 있습니다.
반면 ProtoPie에서는 trigger와 response의 무한한 조합이 가능하기 때문에 더 쉽게 프로토타입을 구현할 수 있습니다. Interaction Recording을 사용하면 ProtoPie에서 프로토타이핑의 문서화 프로세스를 더 쉽고 원활하게 진행할 수 있습니다.
Principle과 ProtoPie모두 미리보기 및 테스트를 위한 컴패니언 앱을 제공하지만, ProtoPie Player는 더 쉽게 여러 장치에서 동기화 및 사용이 가능합니다.
특히, ProtoPie는 tilt, sound, compass, proximity sensor, 그리고 3D Touch sensors와 같은 스마트 장치의 센서를 프로토 타입에서 제어하는 기능인 Sensor Support를 제공합니다.
또 다른 차별점은 ProtoPie에서는 Principle 같은 다른 프로토타이핑 툴과 원활한 연동이 가능하므로, 다른 툴에서 작업한 내용을 그대로 가져와 ProtoPie에서 작업을 이어나갈 수 있습니다.
Slack에서 운영되는 ProtoPie 유저 커뮤니티, ProtoPioneers(영문)를 통해 ProtoPie 관련 다양한 유저 케이스 및 팁들을 확인해 보세요. 프로토타이핑이 처음이라면, ProtoPie에서 직접 사용할 수 있는 몇 가지 팁과 요령을 확인하실 수 있습니다.
