이제 평소처럼 해서는 더 이상 통하지 않습니다.
제품 디자인과 엔지니어링 팀은 그 어느 때보다도 더 빠르고 효율적으로 제품을 시장에 출시해야 하는 발등의 불을 안고 있습니다.
이를 위해서는 몇 가지가 필요합니다. 제품 디자인 팀과 기술 팀 사이의 새로운 시너지. 더욱 가속화된 반복 프로세스. 그리고 빠르고, 코드 없이도 사용할 수 있으며 강력한 프로토타이핑 소프트웨어입니다.
하지만 문제가 있습니다. 대부분의 프로토타이핑 도구는 코드를 필요로 하고 무겁고 투박하거나, 풍부한 애니메이션과 복잡한 인터랙션을 지원하지 않습니다.
Brainly, 세계 최고의 교육 플랫폼은 이를 뼈저리게 깨달았습니다.
Brainly의 Design Systems & Foundations 팀의 Lead UX Motion Designer인 Giga Khurtsilava와 이야기를 나누며 Brainly 디자인 팀이 왜 ProtoPie를 사용하는지 알아보았습니다.
Brainly의 ProtoPie 여정
ProtoPie를 사용하기 전 Brainly의 가장 큰 과제는 고충실도 프로토타입을 만드는 것이었습니다.
비즈니스는 빠르게 움직입니다. 시장은 이전보다 더 크고 더 나은 프로토타입을 요구합니다. 게다가 이해관계자들은 실제와 똑같이 보이고 느껴지는, 번거롭지 않은 프로토타입을 원합니다. 결국 누구도 Google Glasses의 실패를 되풀이하고 싶어 하진 않습니다.
단순히 흐름만 보여주는 기본적인 저충실도 프로토타입으로 이해관계자들을 감동시키던 시대는 지났습니다. 인터랙션 디자인은 레이아웃, 글꼴, 색상을 넘어 더 넓은 영역으로 확장되었습니다. 디자인을 검증하고 서로 다른 요소들 간의 연결성과 상호작용을 확인하려면 UX 모션도 인터랙션 디자인의 다른 요소들과 동등하게 다뤄져야 합니다. 요즘 대부분의 UX/UI 디자이너에게는 꽤 흔한 이야기입니다.
다시 Brainly로 돌아가 보겠습니다.
UX 모션을 한 단계 더 끌어올리면서, 사용자 테스트를 가속화하고 더 효과적으로 만들 수 있도록 저충실도와 고충실도 프로토타입을 빠르게 만들 수 있는 프로토타이핑 도구가 필요했습니다. 평판이 걸린 문제였고, 이해관계자들을 반드시 만족시켜야 했습니다.
ProtoPie는 당연한 선택이었습니다. “ProtoPie를 우리의 주요 프로토타이핑 도구로 고려하는 것은 우리에게 매우 쉬운 일이었습니다.”라고 Giga는 말했습니다.
시작은 쉬웠습니다. Giga는 모션 디자인 경험이 있었고 ProtoPie가 어떻게 작동하는지 완전히 이해하는 데 며칠밖에 걸리지 않았습니다. Variables와 Formulas가 잠시 그를 난처하게 했을 때도, ProtoPie의 매우 상세한 온라인 문서가 놀라울 정도로 도움이 되었다고 했습니다.
ProtoPie의 문서 허브를 살펴보세요.
그는 깜짝 놀랐습니다. “저는 ProtoPie를 4년째 사용하고 있고 정말 좋아합니다. 사용하기 쉽고 고충실도 프로토타입을 빠르게 만들 수 있습니다.”
더욱이 ProtoPie의 무한한 기능이 지닌 엄청난 깊이도 그를 감탄하게 했습니다. Input과 Camera 기능의 경우, 기기의 센서를 트리거로 사용할 수 있다는 점이 특히 마음에 들었다고 합니다. 예를 들어 Tilt 트리거와 기기가 놓인 각도에 따라 달라지는 Response를 사용할 수 있습니다.
ProtoPie가 Brainly의 워크플로를 어떻게 바꿔 놓았는가
ProtoPie를 사용하면서 제품 디자인 프로세스에는 여러 가지 흥미롭고도 보이지 않던 변화가 생겼습니다. 예를 들어 ProtoPie 이전에는 디자이너와 엔지니어 사이의 핸드오프 애니메이션 파라미터에 큰 공백이 있었습니다.
ProtoPie의 Interaction Recordings 덕분에 모든 것이 간소화되었습니다.
“한 엔지니어는 Interaction Recordings가 디자이너들이 사용한 전환을 시각적으로 이해하는 데 도움을 준 것뿐만 아니라,”라고 Giga는 말했습니다, “타임라인의 세부 사항에 주목하고 Cubic Bezier 값부터 타이밍까지 모든 값을 확인하는 데도 도움이 되었다고 했습니다.”
모바일 앱 리디자인은 ProtoPie의 해방적인 효과를 잘 보여주는 좋은 예입니다.
Brainly의 AppEx 팀은 모바일 앱 리디자인 작업을 진행하고 있었습니다. 당연히 이는 이해관계자, 디자이너, 엔지니어 등 서로 다른 팀 간의 엄청난 시너지를 필요로 했습니다.
더 빠르게 반복해야 했습니다. 그뿐만 아니라 더 빠르게 테스트해야 했습니다. 프로토타입을 엔지니어들에게 보내기 전에 문제를 찾아내고 싶었습니다.
요컨대, 아이디어에 가능한 한 빨리 새 생명을 불어넣고 싶었습니다.
ProtoPie는 더 빠르게 반복할 수 있게 해주었습니다. 무엇보다도 모든 부분이 서로 연결되어 있는지 확인할 수 있었습니다. 사용자 테스트를 강화하고, 코드 없이도 앱에 새로운 UX 모션 동작을 정립할 수 있었습니다.
더욱이 그들은 중요한 사실 하나를 발견했습니다. 이 모든 과정이 시간 소모적이지 않았다는 점입니다. 풍부한 애니메이션과 복잡한 인터랙션이 가득한 고급 프로토타입도 빠르게 만들 수 있었습니다. 요컨대 Brainly 팀은 엔지니어에게 넘기기 전에 제품의 효과성과 완성도를 가늠할 수 있었습니다.
ProtoPie가 Brainly의 주요 프로토타이핑 도구인 이유
Thanks Button 애니메이션이든 앱 프로토타입이든, Brainly는 이제 “거의 모든 것”에 ProtoPie를 사용한다고 Giga는 말했습니다. “우리의 주된 프로토타이핑 도구입니다.”
ProtoPie의 Triggers와 Responses는 Brainly의 세 가지 핵심 기능인 Regular Search, Scan to Solve, Voice Search를 바탕으로 디자인을 빠르게 반복할 수 있게 해줍니다.
더 깊이 살펴보겠습니다.
Brainly 팀이 "Scan to Solve"를 개선하고자 한다고 해봅시다. 그들은 단순히 Camera response를 사용하면 됩니다. "Regular Search" 기능을 개선하고 싶다면 Input Field를 사용하면 됩니다. "Voice Search"의 경우 Voice Commands를 사용합니다.
ProtoPie의 기본 센서 - 카메라, 타이핑 및 음성 인식.
요컨대, ProtoPie의 무한한 기능은 그들의 창의성을 발휘하게 하여 모든 기능을 가능한 한 현실적으로 모방하고 테스트할 수 있게 합니다.
Giga의 마지막 한마디는?
“스토리를 전달하고 디자인을 한 단계 더 끌어올리고 싶다면 ProtoPie가 제격입니다. 지금 투자하세요. 나중에 고맙다고 하게 될 겁니다.”
ProtoPie로 모든 대담한 도전의 리스크를 줄이세요
15,000개 이상의 기업이 프로토타이핑 요구를 충족하기 위해 ProtoPie를 신뢰합니다. 데모를 예약하고 ProtoPie가 팀의 성공을 어떻게 도울 수 있는지 알아보세요.
