프로토타입을 만드는 것이 제품 디자인 과정을 늦추지 않습니다. 이는 저정밀 또는 고정밀 프로토타이핑에는 해당될 수 있지만, 빠른 고정밀 프로토타이핑 도구에는 해당되지 않습니다.
ProtoPie는 코딩이 필요 없는, 빠른 고정밀 프로토타이핑 도구로, 오류를 없애고 제품 디자인 과정을 가속화합니다. 디자이너와 이해관계자 간의 커뮤니케이션을 강화하는 동시에 창의성을 북돋습니다.
우리의 라이브 스트림 “혁신의 원동력, 프로토타이핑”에서 우리는 Picsart의 제품 디자이너 두 명인 Lilit Mkrtchyan과 Roupen Babian과 이야기를 나눴습니다. 그들은 요구 사항을 충족하기 위해 ProtoPie를 선택한 이유를 설명했습니다. 아래 영상을 보거나 계속 읽으면서 Picsart 디자이너들이 디자인 과정에서 ProtoPie를 사용하는 4가지 이유를 알아보세요.
개요
이유 1. ProtoPie는 사용자 테스트를 간소화합니다
이유 2. ProtoPie의 컴포넌트는 효율성을 높입니다
이유 3. ProtoPie는 개발자 핸드오프를 쉽게 만듭니다
이유 4. ProtoPie는 배우기 쉬운 학습 곡선을 제공합니다
이유 1. ProtoPie는 사용자 테스트를 간소화합니다
Picsart는 플로리다에 본사를 둔 올인원 크리에이티브 플랫폼으로, 비디오, 사진, 디자인 도구를 제공하고 사용자가 자신의 작업을 소셜 미디어에 공유할 수 있게 합니다.
그들의 디자인 팀은 다른 프로토타이핑 도구로 기본 프로토타입으로 설계한 새 기능을 테스트해야 했습니다. 전체 색상 스펙트럼을 보여 주고 사용자가 색조와 명도에 따라 색을 선택할 수 있게 해 주는 인터랙티브 컬러 휠이었습니다.
ProtoPie로 만든 인터랙티브 색상 슬라이더 프로토타입.
팀은 여러 개의 기본 프로토타입을 만들기 위해 다른 도구들을 사용했습니다. 하지만 문제가 있었습니다. 사용자 테스트를 진행해야 했고, 사용자에게 실제 제품을 사용하는 것과 같은 경험을 제공하고 싶었던 것입니다.
그들은 이를 테스트하기 위해 완전히 개발된 프로토타입을 만들 수도 있었지만, 그렇게 하면 너무 많은 시간이 걸렸을 것입니다. 다른 프로토타이핑 도구들도 검토했지만, 범위를 확장해야 했습니다.
그래서 ProtoPie를 선택했습니다.
“ProtoPie의 유연성과 가시성 덕분에 실제 경험처럼 보이고 느껴지는 매끄러운 상호작용과 복잡한 흐름을 만들 수 있었습니다,”라고 Roupen은 말했습니다. “상호작용과 컴포넌트 간 연결을 매우 세밀하게 제어할 수 있습니다.”
그들은 Figma에서 만든 단순한 디자인을 가져와 ProtoPie에서 더 복잡한 조정을 할 수 있었습니다.
복잡한 상호작용을 프로토타이핑할 수 있다는 점은 Picsart 디자이너들이 ProtoPie를 좋아하는 많은 이유 중 하나입니다.
이유 2. ProtoPie의 컴포넌트는 효율성을 높입니다
“디자이너들은 다른 프로토타이핑 도구에서 변수에 대한 제한에 자주 부딪힙니다,”라고 Roupen은 말했습니다. “모든 클릭마다 플랫폼에 무슨 일이 일어날지 알려 줘야 하죠.”
ProtoPie에서는 그렇지 않았습니다.
그들은 미리 만들어 둔 컴포넌트를 ProtoPie 화면으로 드래그하여 Picsart의 색상 슬라이더를 ProtoPie에서 재사용했습니다. 남은 일은 컴포넌트들을 서로 연결하고 시작하는 것뿐이었습니다.
기존 색상 슬라이더는 미리 만들어 둔 컴포넌트를 ProtoPie Studio 화면으로 간단히 드래그하기만 하면 재사용할 수 있습니다.
ProtoPie 덕분에 컴포넌트들을 서로 연결해 색상 스펙트럼이 슬라이더 조작에 따라 변하도록 할 수 있었습니다. 즉, 화면의 모든 컴포넌트가 바로 그 컴포넌트 자체가 되었습니다.
디자이너들은 플랫폼에 복잡하고 세밀한 명령을 일일이 입력하며 색상 슬라이더를 움직이면 새로운 색이 생성된다고 지정할 필요가 없었습니다. 색상 휠의 색상 슬라이더에서 일어난 상호작용이 배경의 색 전환을 일으켰습니다.
“이건 다른 어떤 프로토타이핑 도구로도 거의 불가능합니다,”라고 Roupen은 말했습니다.
ProtoPie Studio에서 컬러 피커 프로젝트를 재디자인하기.
이유 3. ProtoPie는 개발자 핸드오프를 쉽게 만듭니다
ProtoPie는 사용자 테스트를 빠르게 할 뿐만 아니라 디자인 팀과 기술 팀 사이의 핸드오프 과정도 획기적으로 빠르고 간단하게 만듭니다. ProtoPie의 Handoff 기능은 엔지니어가 프로토타입의 상호작용을 실제 프로덕션에 구현할 때 가이드라인 역할을 합니다.
“ProtoPie는 디자이너와 이해관계자, 개발자, 그리고 고객 간의 커뮤니케이션을 강화합니다,”라고 Lilit은 말했습니다. “실제로 프로토타입을 보여 줄 때 건설적인 피드백을 받을 수 있죠.”
고정밀 프로토타이핑 도구는 제품 디자인 팀이 실제와 같아 보이고 느껴지는 프로토타입을 만들 수 있게 해 주는 데 훌륭합니다.
그러나 상호작용이 복잡해질수록 핸드오프의 복잡성도 커집니다. 기술 팀은 UX 디자이너의 생각과 감정을 추측해야 하는 상황에 놓입니다. 디자이너들은 종종 혼란스럽고 어려움을 겪는 엔지니어 팀과 끝없는 주고받음에 빠지게 됩니다.
ProtoPie의 개발자 핸드오프 프로세스는 훨씬 더 단순합니다.
ProtoPie의 Handoff 기능 단계별 가이드
‘record’를 누르고 편히 앉아 있으면 모든 상호작용과 애니메이션이 가장 작은 세부 사항까지 모두 기록되는 것을 볼 수 있습니다.
ProtoPie의 Handoff(상호작용 녹화)는 ProtoPie에서 시간을 크게 절약해 주는 놀라운 기능으로, 디지털 디자인계의 고전 작곡가가 프로토타입 흐름의 아주 작은 세부 사항까지 모두 옮겨 적는 것과 같습니다.
프로토타입을 받은 개발자는 ‘Play’를 누르고 화면의 모든 상호작용을 지켜봅니다. 마우스가 움직이는 것, 크기가 커지는 것, 곡선, 애니메이션, 지속 시간, 그리고 어떤 레이어의 상호작용인지까지 확인할 수 있습니다.
모든 작은 세부 사항이 오른쪽 패널에 표시됩니다. 엔지니어들은 의도를 추측할 필요가 없습니다. 모든 것을 실시간으로 볼 수 있기 때문입니다. “이것은 당신의 창의성을 높여 줍니다,”라고 Lilit은 말했습니다. “프로토타입을 실감 나게 만들어 주죠.”
ProtoPie의 Handoff 기능으로 모든 추측을 없애세요.
이유 4. ProtoPie는 배우기 쉬운 학습 곡선을 제공합니다
학습 곡선은 고정밀 프로토타이핑 도구에서 흔히 가장 큰 과제입니다.
“디자이너들에게 좋은 소식이 있습니다,”라고 Roupen은 말했습니다. “ProtoPie의 UI와 전반적인 논리는 Figma 같은 다른 디자인 도구들과 비슷합니다. Photoshop도 마찬가지죠.”
ProtoPie에는 교육 정보도 매우 풍부합니다. ProtoPie 커뮤니티는 동료 디자이너들이 팁을 공유하고, 문제를 해결하고, 놀라울 정도로 혁신적인 프로토타입을 공유하고, 피드백을 받을 수 있는 온라인 생태계입니다. Lilit는 YouTube 튜토리얼이 도움이 된다고 했고, Roupen은 기사에 더 끌렸습니다.
“웹사이트의 기사들을 보면서 처음부터 배웠습니다,”라고 Roupen은 말했습니다. “기사들은 정말 자세하고 잘 정리되어 있으며 훌륭한 예시를 제공합니다.”
ProtoPie School은 ProtoPie 학습을 쉽게 만들어 줍니다. 블로그 섹션의 Tips & Tricks 카테고리에는 복잡한 상호작용 사용부터 트리거 만들기, 완전한 흐름 프로토타이핑까지 모든 것을 다루는 방대한 정보가 담겨 있습니다.
ProtoPie School로 무료로 프로토타이핑 여정을 시작하세요.
ProtoPie는 사용자 테스트를 간소화하고, 재사용 가능한 컴포넌트로 효율성을 높이며, 손쉬운 개발자 핸드오프를 지원하고, 사용자 친화적인 학습 곡선을 제공하기 때문에 디자이너들이 좋아하는 도구입니다. 지금 ProtoPie를 무료로 다운로드하고, 고정밀 프로토타이핑에 이를 사용하는 Picsart, Meta, BMW 및 15,000개 이상의 다른 회사들과 함께하세요.
