brunch

매거진 ProtoPie 예시

라이킷 28 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by ProtoPie Aug 31. 2017

안 보면 후회할 4개의 Hi-Fi 프로토타입

클라우드 파티 수상자들의 프로토타입 공개

ProtoPie팀은 항상 사용자와의 소통을 중요시합니다. 사용자와 소통하고 사용자들의 창의력을 발휘할 수 있는 기회를 마련하기 위해 지난달 (2017년 7월)에 한국에서 프로토타이핑 대회를 개최했습니다. 본 대회의 이름은 ‘클라우드 파티’로, 프로토타입을 쉽게 업로드, 공유 및 배포할 수 있는 클라우드 기능의 릴리즈를 축하하기 위한 이름입니다. ;)

본 대회는 ProtoPie Facebook Korea 그룹에서 진행했습니다. 디자이너가 ProtoPie로 만든 프로토타입을 Cloud에 올리면 생성되는 공유 링크를 Facebook에서 공유하면 다른 디자이너들이 의견을 달거나 라이크를 할 수 있었습니다. 따라서, 작품을 공유한 디자이너들은 다른 디자이너들에게서 자신의 프로토타입에 대한 반응을 확인할 수 있는 기회가 되었고, ‘눈팅'만 했던 디자이너한테는 부담 없이 그룹의 다른 디자이너들과 친해지고 서로 배울 수 있는 좋은 계기가 되었습니다.

아래는 이번 대회에서 수상한 4개 작품 및 소개입니다. 수상자들이 어떻게 수상 작품을 디자인했는지, 그리고 이 과정에서 ProtoPie 어떤 도움을 줬는지에 대해 간단하게 인터뷰했습니다.

링크를 클릭하면 바로 프로토타입을 테스트해볼 수 있고, 원본 Pie파일도 다운로드할 수 있습니다.

Fluo Soup

by Fluo Soup

프로토타입 보기: https://share.protopie.io/gM149XzFiGN

1. 어떻게 프로토타입을 디자인하셨나요? 이 프로토타입을 만들기 전에 어떤 고민 과정을 거쳤는지, 간단하게 소개해 주세요.

Fluo Soup: UI적인 부분보다 재미에 초점을 둔 작업물을 만들고 싶어서 평소에 그려두었던 DunDun이라는 캐릭터를 활용해 그 캐릭터의 성격을 테마로 프로토타이핑을 해보았습니다. 현재 한창 스터디 중이라서 작업물을 만들 때마다 해보지 않았던 응용을 해보려고 노력하는데요. 이번 작업의 동작 방식은 프로토 파이 블로그 포스트 중 junhyuk jang님의 panda와 claire님의 payment를 보고 영감을 받았습니다. range, chain 등 필요한 트리거를 카피해보면서 야채에 대한 반응과 햄버거에 대한 반응을 구분하려면 어떻게 해야 하는지 경우의 수를 나눠보며 구상하였습니다.

2. 이 프로토타입을 만들 때 ProtoPie가 어떤 도움을 드렸나요?

Fluo Soup: 저는 기초적인 코드만 알고 있는 디자이너입니다. 눈코 입이 커서에 따라 움직이거나 반응을 구분시키는 작업을 코드로 했다면 비슷한 자료를 구하고 적용하느라 아주 많은 시간이 소요될 수도 있었습니다. 중간에 포기했을 수도 있고요. 수치만 정확히 계획하고 입력하면 인터렉티브 한 작업이 가능하다는 면에서 굉장히 큰 도움을 받았어요.

3. 가장 좋아하는 ProtoPie의 기능은 무엇인가요?

Fluo Soup: Chain과 Range입니다. 어떻게 응용하느냐에 따라 만들 수 있는 작업물이 굉장히 다양해서 계속 연구하고 있어요. 최근 실무에서도 인터렉션에 대한 커뮤니케이션이 필요해서 배경과 콘텐츠가 시간차로 움직이고 오브젝트가 변화하는 패럴렉스를 chain과 range로 간단히 제작해 공유한 적이 있습니다. 싱크가 맞지 않는 참고자료가 아니라 직접 시안에 적용을 하면서 시간 대비 고급 인터렉션이 가능하니까 아주 편리했습니다.

Jae-seong Jeong

by Jae-seong Jeong

프로토타입 보기: https://share.protopie.io/MghbyR8J2gk

1. 어떻게 프로토타입을 디자인하셨나요? 이 프로토타입을 만들기 전에 어떤 고민 과정을 거쳤는지, 간단하게 소개해 주세요.

Jae-seong Jeong: ‘Books’ 프로토타입의 가장 큰 키워드는 ‘단순함’입니다.
‘책을 검색하고 구매하고 읽는다’라는 핵심에 집중해 프로토타입을 만들게 되었으며, 필요한 기능들을 나열하고 ‘제거’와 ‘그룹화’를 통해 콘텐츠에 집중할 수 있도록 하였습니다.
특히, 가장 중점을 두었던 부분이 인터랙션인데요. 화면 간의 자연스러운 흐름을 연결하는 부분과 인터랙션을 통해서도 앱의 철학이나 브랜딩 요소를 반영하고 싶었습니다.
(예를 들어, 콘텐츠를 스크롤할 경우 Z Depth로 이동하는 인터랙션에는 책이 가지는 무한한 깊이를 표현하고 싶었습니다.)

2. 이 프로토타입을 만들 때 ProtoPie가 어떤 도움을 드렸나요?

Jae-seong Jeong: 프로토타입을 만들면서 스크롤을 하면서 연속적으로 다른 인터랙션을 주는 부분이 어려웠는데, 체인 트리거로 쉽게 구현할 수 있었습니다.

3. 가장 좋아하는 ProtoPie의 기능은 무엇인가요?

Jae-seong Jeong: 클라우드 기능을 가장 좋아합니다. 원격으로도 쉽게 공유하고 피드백을 받을 수 있기 때문에, ProtoPie를 사용하는 큰 이유 중 하나입니다.

HanGyo Seo

by HanGyo Seo

프로토타입 보기: https://share.protopie.io/fGsPrpjQerN

1. 어떻게 프로토타입을 디자인하셨나요? 이 프로토타입을 만들기 전에 어떤 고민 과정을 거쳤는지, 간단하게 소개해 주세요.

HanGyo Seo: 음량이 어느 기준 이상 커지면 청력이 손상될 위험이 있다는 경고가 나오는데, 이를 조금 유머러스하게 표현하면 어떨까 라는 생각으로 만들어 보았습니다.

2. 이 프로토타입을 만들 때 ProtoPie가 어떤 도움을 드렸나요?
HanGyo Seo: 프로토타이핑을 시작할 수 있게 도와준 게 가장 큰 거 같습니다. 하루 만에 많은걸 익혔습니다.

3. 가장 좋아하는 ProtoPie의 기능은 무엇인가요?

HanGyo Seo: 컨테이너를 이용하여 스크롤이나, 페이징을 쉽게 만들 수 있어서 너무 좋아요~!

Jiyoung Yoon

by Jiyoung Yoon

프로토타입 보기: https://share.protopie.io/DLBRqrc7FLx

1. 어떻게 프로토타입을 디자인하셨나요? 이 프로토타입을 만들기 전에 어떤 고민 과정을 거쳤는지, 간단하게 소개해 주세요.

Jiyoung Yoon: 콘텐츠 커버 뷰와 리스트 뷰라는 일반적인 Flow지만, 인터렉션적으로 차별화해보는 것이 목표였습니다.
두 가지 뷰의 Seamless 한 전환이 콘셉트이고, 동적인 배치와 그와 연관된 움직임이 화면의 맥락을 어떻게 직관적으로 설명할 수 있을지 고민했습니다.

2. 이 프로토타입을 만들 때 ProtoPie가 어떤 도움을 드렸나요?

Jiyoung Yoon: 사실 단순히 스크린만 보고 인터렉션을 구상할 때는 '이렇게 하면, 요렇게 되게 해보면 어떨까.. 요렇게 저렇게.. 음 안 어색하려나'하는 막연함 갖게 됩니다. 프로토타입 핑은 그런 콘셉트를 구체화하는 과정에서 어떻게 동작하고, 기능할 수 있을 것 인가를 실질적으로 구현해 볼 수 있는 작업인데요. Protopie은 굉장히 직관적이고, 이해하기 쉬운 인터페이스로 되어있어서 이것저것 적용해보며 구상했던 걸 쉽게 구현할 수 있었습니다.

3. 가장 좋아하는 ProtoPie의 기능은 무엇인가요?

Jiyoung Yoon: 제가 ProtoPie에서 다른 프로토타입 툴과 다르게 가장 매력적인 부분이라고 생각하는 부분은 작업 보드 좌측에 있는 트리거/리스펀스 패널과 타임라인 패널입니다. 제가 사실 디자인보다 디자인 툴 쓰는 걸 좋아해서(?) 프로토타입 툴들을 여럿 써보았는데, 인터렉션 적용/편집과 타임라인 패널 이 두 개가 직접적으로 연관되어 있는 건 없는 것 같아요. 사실 인터렉션의 디테일은 타이밍 조절인데, ProtoPie가 코드 작성 없이 단순 클릭으로도 Hi-Fi 프로토타이핑이 가능한 건, 레이어 및 인터렉션들 간의 시간차를 직관적인 방식으로 쉽게 편집할 수 있기 때문인 것 같아요.
ProtoPie 유저분들 타임라인 패널을 적극적으로 활용해보세요!