우리는 늘 사용자와 더 긴밀하게 소통하고 다양한 형태의 창의성을 북돋을 방법을 찾고 있었기 때문에, 모국인 한국에서 프로토타이핑 경연대회(“Cloud Competition”)를 열기로 했습니다. 동시에 사용자가 자신의 프로토타입을 쉽게 업로드하고 공유하며 배포할 수 있게 해주는 Cloud 기능을 출시한 것도 기념했습니다. 그래서 이름도 Cloud Competition이 되었죠 ;)
이 대회는 디자이너들이 동료 디자이너들에게 자신의 프로토타입을 선보이고 서로 배울 수 있는 좋은 기회였습니다. 또한 한국 디자이너 커뮤니티가 ProtoPie를 어떻게 경험하는지 확인할 수 있는 이상적인 अवसर이기도 했습니다. 나아가 이런 이벤트를 더 큰 규모로, 국제적으로도 진행할 수 있을지 시험해 보는 계기이기도 했습니다.
아래에서는 4명의 재능 있는 디자이너들이 대회에서 우승한 하이파이 프로토타입을 어떻게 만들었는지, 그리고 ProtoPie가 워크플로에 어떤 가치를 더했는지 이야기합니다.
Fluo Soup
Fluo Soup 제공
이 프로토타입의 배경이 된 생각은 무엇인가요?
Fluo Soup: 솔직히 말하면, UI에 집중하기보다 재미를 정말 잘 살리는 프로토타입을 만들고 싶었습니다. 이전에 그려 두었던 캐릭터 던던을 사용했고, 이번 프로토타이핑에서 제가 사용하고 싶었던 테마는 감정 표현이었습니다. 게다가 저는 디자인과 관련해 새로운 것을 배우는 데 큰 관심이 있습니다. 그래서 더 나은 해결책을 얻기 위해 항상 새로운 시도를 해봅니다.
이 프로토타입에서는 Junhyuk Jang의 ‘Panda’ 프로토타입과 ProtoPie의 프로덕트 디자이너 Claire Shin의 ‘Payment’ 프로토타입에서 영감을 받았습니다. 그들이 사용한 것처럼 Chain과 Range 같은 트리거를 활용하는 데 도움이 되었습니다. 그다음에는 다양한 음식을 먹일 때 캐릭터 던던이 어떤 반응을 보여야 할지 정했습니다.
이 프로토타입을 만들 때 ProtoPie가 어떻게 도움이 되었나요?
Fluo Soup: 저는 기본적인 코딩만 아는 디자이너입니다. 특정 위치에 따라 반응을 구분하는 것 같은 마이크로 인터랙션을 만들려면 시간이 많이 걸렸을 것입니다. 또한 비슷한 인터랙션을 여러 개 구성해야 할 때도 너무 많은 시간이 들었을 겁니다. ProtoPie를 사용하면 필요한 정확한 값을 입력하기만 하면 되고, 결과물로 제대로 된 하이파이 인터랙션을 얻을 수 있습니다. 저에게 큰 도움이 되었습니다.
ProtoPie에서 가장 좋아하는 기능은 무엇인가요?
Fluo Soup: Chain과 Range입니다. 어떻게 적용하느냐에 따라 가능성은 정말 무한합니다.
업무를 위해 만드는 프로토타입은 더 이상 단순히 이미지가 조금씩 다른 정적인 디자인이 아닙니다. ProtoPie를 사용하면 이런 하이파이 인터랙션을 제가 직접 만들고 테스트할 수 있습니다. 인터랙티브 프로토타입을 만드는 데도 시간이 거의 들지 않습니다. 정말 편리합니다.
Jae-seong Jeong
Jae-seong Jeong 제공
이 프로토타입의 배경이 된 생각은 무엇인가요?
Jae-seong Jeong: ‘Books’ 프로토타입을 한 단어로 표현하면 ‘단순함’일 것입니다. 이 프로토타입을 만들 때 저는 이 앱이 무엇을 하는지, 즉 책을 검색하고, 구매하고, 읽는 경험에 집중했습니다. 필요한 기능들을 나열한 뒤 우선순위를 정했습니다. 프로토타이핑에서 가장 중요한 것은 인터랙션입니다.
저는 그 인터랙션이 앱의 철학과 브랜딩 요소를 잘 드러내고, 가능한 한 자연스럽게 느껴지길 원했습니다. 예를 들면 콘텐츠를 스크롤할 때, 지식은 무한하다고 할 수 있으니 Z Depth를 사용해 ‘무한한’ 깊이를 표현하고 싶었습니다.
이 프로토타입을 만들 때 ProtoPie가 어떻게 도움이 되었나요?
Jae-seong Jeong: 프로토타이핑을 할 때 저는 보통 스크롤을 포함한 고급 인터랙션을 구성하는 데 어려움을 느꼈습니다. 그런데 이제는 Chain 기능을 사용해 이 프로토타입을 식은 죽 먹기로 만들 수 있었습니다.
ProtoPie에서 가장 좋아하는 기능은 무엇인가요?
Jae-seong Jeong: 저는 Cloud 기능이 가장 좋습니다. 프로토타입을 쉽게 공유하고, 배포하고, 즉시 피드백을 받을 수 있기 때문에 ProtoPie를 사용하는 큰 이유 중 하나입니다.
Hangyo Seo
Hangyo Seo 제공
이 프로토타입의 배경이 된 생각은 무엇인가요?
Hongyo Seo: 재미있는 프로토타입을 만들고 싶었습니다. 이 프로토타입에서는 기기 볼륨이 청력 손실 위험이 상당히 커지는 일정 수준에 도달하면 사용자에게 경고가 표시됩니다. 저는 이 아이디어를 유머러스하게 표현하고 싶었습니다.
이 프로토타입을 만들 때 ProtoPie가 어떻게 도움이 되었나요?
Hongyo Seo: 프로토타이핑을 시작하는 데 도움을 주는 최고의 도구입니다. 단 하루 만에 정말 많은 것을 배웠습니다!
ProtoPie에서 가장 좋아하는 기능은 무엇인가요?
Hongyo Seo: ProtoPie를 사용하면 컨테이너로 스크롤과 페이지 이동 인터랙션을 만드는 것이 정말 좋습니다. 믿을 수 없을 만큼 쉽습니다!
Jiyoung Yoon
Jiyoung Yoon 제공
이 프로토타입의 배경이 된 생각은 무엇인가요?
Jiyoung Yoon: ‘cover view’와 ‘list view’ 사이의 점진적인 흐름을 만들고 싶었지만, 인터랙션 측면에서는 차별화를 두고자 했습니다. 두 뷰 사이를 매끄럽게 전환하는 콘셉트이기 때문에, 동적인 레이아웃과 그에 따른 움직임이 화면의 콘텐츠를 어떻게 직관적으로 설명할 수 있을지 고민했습니다.
이 프로토타입을 만들 때 ProtoPie가 어떻게 도움이 되었나요?
Jiyoung Yoon: 정적인 디자인만 보고 인터랙션을 상상하면, “이렇게 하면 이런 일이 일어나겠지만, 대신 다른 걸 하면 어떻게 되지?” 같은 막연한 느낌이 들곤 합니다. ProtoPie로 프로토타이핑하면 머릿속에 있는 인터랙션을 실제로 구현하고, 그것이 실제로 어떻게 작동하는지 확인할 수 있습니다. ProtoPie는 매우 직관적이고 이해하기 쉬운 인터페이스를 갖추고 있어, 인터랙션 아이디어를 쉽게 현실로 만들 수 있습니다.
ProtoPie에서 가장 좋아하는 기능은 무엇인가요?
Jiyoung Yoon: 제가 ProtoPie에서 정말 좋아하는 점은 다른 프로토타이핑 도구에는 없는, 타임라인과 결합된 직관적인 인터랙션 패널입니다. 각 Response마다 타이밍 설정을 조정할 수 있었습니다. 예전에도 여러 프로토타이핑 도구를 사용해 봤지만 ProtoPie와는 달랐습니다. 또한 제가 좋아하는 점은 타이밍 조정 같은 인터랙션 커스터마이징입니다. ProtoPie는 코드를 쓰지 않고도 하이파이 프로토타이핑을 쉽고 직관적으로 할 수 있게 해줍니다. 예를 들어 레이어와 인터랙션 사이의 타이밍 차이를 원하는 방식으로 쉽게 조정할 수 있습니다. 저처럼 다른 ProtoPie 사용자들도 타임라인 패널을 꼭 최대한 활용해 보셨으면 합니다!
