프로토타이핑은 제품 디자인 단계에서 중요한 부분으로, UX 디자이너가 자신의 아이디어를 살아 있는 현실로 구현할 수 있게 해줍니다.
하지만 많은 프로토타이핑 도구는 실험할 여지를 거의 남겨두지 않습니다. 너무 단순하거나, 너무 복잡하거나 둘 중 하나입니다.
디자이너에게는 지켜야 할 마감이 있고, 인상 깊게 해야 할 이해관계자도 있습니다. 그들에게는 현실적이고 풍부한 인터랙션을 코드 없이 만들어낼 수 있는 빠른 하이파이 프로토타이핑 도구가 필요합니다.
우리는 멀티체인 지갑 간 메시징 앱인 G.host의 디자인 총괄 야시르와 이야기를 나눴습니다.
이 폭넓은 사례 연구에서는 패럴랙스 효과와 색상부터 틸트 효과, 그리고 프로토타입을 클라우드에 공유하는 방법까지 모두 다룹니다. ProtoPie 가 야시르가 자신의 아이디어를 실험할 수 있게 해준 방법, 그리고 결국 그 디자인이 어떻게 바이럴이 되었는지도 살펴봅니다.
야시르 부그라, G.host의 디자인 총괄
G.host가 ProtoPie를 선택한 이유
우리가 사용하는 제품과 거리감을 느끼기 쉬운 법입니다. 결국 제품은 생명이 없는데, 왜 제품이 우리와 상호작용해야 할까요?
하지만 터치는 중요합니다. 우리가 실제 살아 있는 세계와 상호작용할 때, 그 세계는 우리에게 반응합니다. 바람과 빛 속에서 풀잎이 반짝일 수 있고, 고양이는 다가가면 갸르릉거릴 수 있으며, 햇살 아래 움직일 때 그림자가 드리울 수 있습니다.
**야시르: **저는 사용자가 자신의 제품과 감정적으로 교감할 수 있게 하고 싶습니다. 이를 위해 터치 인터페이스를 위한 감성적인 인터랙션과 패턴을 디자인합니다.
터치 인터랙션을 좋아하는 모바일 중심 디자이너로서, 제품 디자인 측면에서 프로토타이핑 요구가 꽤 복잡합니다.
당연히 그런 요구를 충족하기 위해 여러 도구를 시도해 봤지만, 제품들은 너무 기본적이거나 너무 복잡했습니다. 제 몫을 하는 디자이너라면, 디자인 단계에서 마감과 경쟁하는 상황에서는 코딩 언어를 배울 시간이 없다는 걸 압니다.
요컨대 저는 디자인 프로그램과 조화롭게 작동하면서 기발한 아이디어를 빠르게 만들어내는 프로토타이핑 도구, 다시 말해 코드 없는 하이파이 빠른 프로토타이핑 도구가 필요합니다.
저는 먼저 Principle로 프로토타이핑을 시작했습니다. 괜찮은 로파이 빠른 프로토타이핑 도구였지만, 단순한 인터랙션은 다소 원시적이었습니다. 그다음에는 Figma로 특정 제품의 흐름을 테스트했지만, 애니메이션이 밋밋했고 복잡한 인터랙션 디자인은 늘 기준에 미치지 못했습니다.
이전 회사인 Frame.io에서 프로젝트를 진행하던 중, 동료 한 명이 ProtoPie를 소개해 주었습니다.
우리는 기기 센서에 접근해 더 현실적인 프로토타입으로 디자인을 테스트해야 했습니다. ProtoPie 덕분에 디자인을 현실적으로 검증할 수 있었고, 다양한 아이디어를 만들어낼 수 있었습니다. 그 이후로는 돌아보지 않았습니다. 이보다 더 좋은 하이파이 프로토타이핑 도구는 없습니다.
ProtoPie가 G.host를 도운 방법
저는 이 일에 들어온 지 겨우 2개월밖에 되지 않았고, 팀에 동기를 부여하고 싶었습니다.
저는 온보딩 화면 디자인부터 시작했습니다. 결국 사용자를 맞이하는 방식은 사용자 여정에서 매우 중요한 순간이기 때문입니다. Figma에서 디자인을 만들고 ProtoPie로 다양한 애니메이션 아이디어를 실험했습니다.
처음에는 로고와 배경을 움직여 단순한 패럴랙스 효과를 만들고자 했습니다. 그러다 문득 궁금해졌습니다. 서로 다른 센서를 서로 다른 요소에 연결하면 어떻게 될까?
앱의 색상은 아직 정해지지 않았습니다. 문득 이런 생각이 들었습니다. 기기를 잡는 각도에 따라 앱의 색상이 바뀌면 어떨까? 더 나아가, 사용자가 화면에서 어떤 색을 볼지 직접 결정할 수 있다면 어떨까?
들뜬 마음에 저는 이 아이디어를 빠르게 프로토타이핑해 트위터에 공유했습니다. 정말 놀라운 경험이었습니다. 이 아이디어는 예상보다 훨씬 많은 관심을 받았습니다. 실제로 몇몇 디자이너들은 매우 영감을 받았다고 말해 주었습니다. 그 이후로 이 아이디어는 G.host 디자인 언어의 핵심 요소가 되었습니다.
ProtoPie가 최고의 하이파이 프로토타이핑 도구인 이유
ProtoPie 없이는 해낼 수 없었을 겁니다. 엔지니어링 비용 없이 아이디어를 빠르고 현실적으로 테스트할 수 있게 해주었습니다. 사용성 테스트도 훨씬 수월해집니다.
ProtoPie의 협업 특성도 고려해야 합니다. 예전에는 동료들과 프로토타입을 공유하는 일이 번거로워 훨씬 더 복잡한 과정이 필요했습니다. ProtoPie에서는 QR 코드를 스캔하기만 하면 끝입니다! ProtoPie를 다운로드하지 않아도 프로토타입을 클라우드에 쉽게 공유할 수 있습니다.
프로토타입을 엔지니어에게 넘기는 일은 보통 까다로운 과정이지만, ProtoPie의 인터랙션 레시피는 많은 시간을 절약해 줍니다. 엔지니어는 각 트리거와 응답의 모든 동작과 세부 사항을 담은 시각적 문서로 UI 애니메이션을 확인할 수 있으며, 원하는 속도로 애니메이션을 재생하면서 어떤 값을 사용해야 하는지도 쉽게 이해할 수 있습니다.
ProtoPie는 그저 괜찮은 수준을 넘어섭니다. 저는 2년 동안 ProtoPie를 사용해 왔고 정말 마음에 듭니다. 인터랙션 디자인 과정에서 잠재적인 아이디어를 많이 끌어내 줍니다. 실험할 여지도 넓혀 줍니다.
ProtoPie는 실험을 위한 최고의 하이파이 빠른 프로토타이핑 소프트웨어입니다.
실험은 매우 중요합니다. 굳이 디자인 팁을 하나 드리자면, 창의적인 아이디어는 보통 서로 다른 개념을 리믹스하는 과정에서 나옵니다. 충분히 섞어 보려 하지 않으면 새로운 것은 찾을 수 없습니다.
직접 사용해 보세요
야시르의 영감 가득한 디자인 여정을 염두에 두고, ProtoPie 전문가 한 명이 아래에 간단한 데모를 준비했습니다. 자신의 기기 기본 센서를 ProtoPie의 틸트 트리거와 색상 응답과 함께 사용하는 방법을 알려드립니다. 이를 여러분의 프로토타입에 얼마나 쉽고 창의적으로 적용할 수 있는지 확인해 보세요!
ProtoPie와 함께 무한한 가능성을 열어 보세요
15,000개 이상의 기업이 프로토타이핑 요구를 충족하기 위해 ProtoPie를 신뢰하고 있습니다. 데모를 예약하고 ProtoPie가 팀의 성공을 돕는 방법을 확인해 보세요.
