고객 성공 사례

6

분 소요

ProtoPie로 프로토타이핑 도구의 시제품을 만든 디자이너를 소개합니다!

6일 만에 완전히 작동하는 프로토타입 앱을 만드는 과제를 맡아 ProtoPie Playoff 콘테스트의 수상자가 된 Ahmed Amr를 소개합니다.

Adriana Diaz, Social Media Manager

지난 7월 개최된 ProtoPie의 첫 번째 Dribbble Playoff 대회가 성공을 거둔 뒤, Khonok Lee가 대상 수상자로 선정되었고; 우리는 Lee와 최종 타이틀을 놓고 겨뤘던 다른 상위 3명의 참가자들과 이야기를 나눌 수 있는 기회를 얻었습니다. 오랫동안 지속된 불편함을 해결하도록 앱을 새롭게 디자인한 Briandito Priambodo와의 이전 인터뷰도 확인해 보세요. 최근에는 식품 주문 앱 Koinz.app의 젊은 제품 디자이너 Ahmed Amr를 만나 이야기를 나눴습니다.


Prototyping tool interface


프로토타이핑 도구 인터페이스

UI 개발자에서 제품 디자이너로

Ahmed는 디자인 세계에서 자신만의 탄탄한 기반을 다졌습니다. 처음에는 스스로를 위해 웹페이지 디자인과 대시보드를 만들고 싶어 했던 UI 개발자로 시작해, 그는 일찍부터 디자인을 빠르게 익혔고, 그 덕분에 여러 프리랜스 일을 병행하는 한편 비영리 단체에서 자원봉사로 그래픽 디자이너 일을 해보기도 했습니다. 비록 그것이 그에게 특별한 열정을 불러일으키지는 못했지만, 그는 곧 UI/UX와 제품 디자인이라는 용어를 알게 되었습니다. “정말 흥미로워서 더 읽어 보고 영상을 보고 개인 프로젝트를 만들기 시작했고, 제품 디자인 경력을 계속 이어가기로 결심했습니다. 마침내 고등학교를 졸업한 뒤 제품 디자인 일자리에 지원하기 시작했고, Koinz에서 첫 직장을 얻게 되었습니다.”라고 그는 말합니다.

그렇다면 Koinz의 디자이너는 ProtoPie를 어떻게 알게 되었을까요? “제가 ProtoPie를 처음 사용한 건 2018년에 정규직을 찾기 위해 포트폴리오를 준비하던 때였습니다… 저는 Windows를 사용하고 있었고, 주니어 디자이너였던 저는 Dribbble에 올라오는 디자인처럼 멋진 인터랙션을 만들고 싶어서 프로토타이핑 프로그램을 찾아보기 시작했습니다. 많은 디자이너가 사용하는 프로그램들을 찾았지만, 문제는 그런 프로그램들이 MacOS에서만 실행된다는 점이었습니다.”

잘 알려진 많은 디자인 도구가 MacOS 사용자에게만 독점적으로 제공된다는 사실은 비밀이 아닙니다. 이는 많은 Windows 사용자에게 불공정한 이점을 제공하죠. 그렇다면 Amr는 이 문제를 어떻게 극복했을까요? “대안을 찾다가 ProtoPie가 Windows에서 실행된다는 걸 발견했습니다. 써 보니 정말 놀라웠어요… 학습 곡선도 낮았습니다. 나중에 MacOS로 바꾼 뒤에도 계속 사용했는데, 쉽고 더 효율적이었기 때문입니다.”

ProtoPie는 아이디어를 제시하고 이를 실질적인 결과물로 옮길 때 디자이너와 개발자 사이의 핵심 커뮤니케이션 도구 역할을 하는 것으로 입증되었습니다. 이것이 Amr에게 어떤 도움이 되었을까요? “개발자에게 인터랙션을 넘기는 과정에서 문제를 겪고 있었습니다

저는 2가지 옵션 중 하나를 선택해야 했습니다:

  • 마감에 쫓길 때는 타이밍과 이징 함수를 직접 전달하면서 인터랙션이 어떻게 보여야 하는지 설명한다

  • 프로토타이핑 도구에서 인터랙션을 만들고 개발자에게 디자인을 전달한다(더 많은 시간이 들었습니다)

이제 ProtoPie의 역할이 나옵니다. 시간 문제를 해결해 주기 때문에 저는 몇 분 만에 인터랙티브 프로토타입을 만들고, 모든 타이밍과 이징 함수를 함께 개발자에게 전달할 수 있습니다.”


Prototyping tool animation timeline


Ahmed Amr의 Mocky 앱

프로토타이핑 앱 만들기

수많은 놀랍고 창의적인 프로토타입들과 함께, 우리는 어떤 디자인이 가장 마음에 드는 작품이 되었는지 궁금했습니다. “제가 가장 좋아하는 프로젝트는 ProtoPie Dribbble Playoff의 Mocky 앱 입니다. 디자이너가 모형(mockup) 안에서 자신의 디자인을 애니메이션으로 만들고 사람들과 공유할 수 있게 해 주는 웹 애플리케이션 도구예요.”라고 그는 말합니다.

Mocky 앱을 만들게 된 영감은 디자인을 아름다운 목업으로 보여주는 Rotato라는 앱에서 비롯되었습니다. “하지만 전체 아트보드의 애니메이션이 미리 정해져 있어 바꿀 수 없다는 한계가 있었어요. 그래서 사용자가 아트보드의 요소들을 직접 제어할 수 있다면 더 좋겠다고 생각했습니다.” 그렇게 Mocky 앱이 탄생했습니다. “모형 속에 디자인을 넣고, 텍스트 — 도형 — 이미지 등을 추가해 제한 없이 전체 구성 안에서 함께 애니메이션을 적용할 수 있습니다.”라고 그는 말합니다. Mocky 앱 콘셉트는 도전적인 과제였던 만큼, 더 큰 문제는 시간과의 싸움이었습니다. Dribbble 마감 전에 프로젝트를 제출하고 싶었던 Amr는 6일이라는 짧은 기간 안에 여러 콘셉트를 스케치하고 픽셀 퍼펙트한 프로토타입을 만들어야 했습니다.

경쟁적인 환경에서 잠시 벗어나, ProtoPie가 디자이너들이 흔히 사용하는 다른 디자인 도구들과 어떻게 보완 관계를 이루는지 살펴봅시다. Amr는 “ProtoPie는 복잡한 인터랙션과 마이크로 인터랙션을 더 빠르게 만들 수 있도록 도와줍니다. 그래서 복잡한 아이디어나 해결책을 이해관계자와 엔지니어에게 전달하려 할 때 프로세스의 핵심 부분이 됩니다.”라고 말합니다. 이를 통해 Amr는 전체 프로젝트를 검토하고 비즈니스/개인적 영향, 노력, 마감일이라는 핵심 요구사항에 집중할 수 있습니다. 따라서 일정이 여유롭다면, 요청이 아무리 복잡해도 영향력이 큰 프로젝트가 먼저 대기열에 오릅니다.

Mocky 앱 사용해 보기

디자인의 미래

그렇다면 디자이너는 디자인의 미래가 어떤 모습일지 어떻게 내다볼까요? Ahmed에게 미래는 덜 중요한 인터페이스 도구에서 웨어러블 기기와 AR/혼합 현실로 초점이 이동할 것입니다. “인공지능의 도움으로 디자이너는 더 이상 데스크톱이나 모바일 화면에서 복잡한 인터페이스를 보여줄 필요가 없습니다. 복잡한 작업은 모두 백엔드에서 처리할 수 있으니까요.”라고 그는 설명합니다.