Making Your First Prototype

프로토타입을 제작하기 앞서, ProtoPie를 다운로드 받아 실행하십시오.

이 페이지에서는 디자인을 임포트하고, 인터랙션을 만들고, 프로토타입을 테스트하고 공유하는 방법을 설명하고 있습니다.

ProtoPie의 제품 모델을 이해하면 프로토타입 제작이 더욱 쉬워집니다. Object + Trigger + Response 모델은 ProtoPie의 토대이며, 어떠한 인터랙션도 쉽게 만들 수 있도록 합니다.

ProtoPie를 아직 다운로드 받지 않으셨다면, 다음 링크에서 확인할 수 있습니다.

1. Importing Your Designs

플러그인을 이용하면 Figma, Sketch, Adobe XD에서 작업한 디자인을 ProtoPie로 불러올 수 있습니다.

아트보드 및 Top-level 프레임은 Scene으로 임포트합니다. 오브젝트는 Figma, Sketch, Adobe XD에서 설정한 속성(레이어 순서, 포지션, Constratints 등) 그대로 임포트할 수 있습니다.

임포트에 대한 자세한 사항은 다음 링크를 참고해주십시오.

인터랙션을 만들기 위해서는 ProtoPie의 제품 모델에 대한 이해가 필요합니다. 모델을 이해하면 인터랙션에 필요한 요소들을 쉽게 파악할 수 있습니다.

아래의 제품 모델은 ProtoPie의 토대이며, 오브젝트의 움직임을 기본으로 하고 있습니다.

프로토타입 제작을 위해서는 인터랙션을 만들어야 합니다. 인터랙션 제작을 위해서는 오브젝트, Trigger 및 Response를 조화롭게 구성해야합니다.

모든 유형의 레이어는 오브젝트가 될 수 있습니다. 오브젝트에 Trigger 및 Response를 적용하여 인터랙션을 만들게 됩니다. Trigger는 하나 혹은 여러 개의 Response를 일으킵니다. Response는 Trigger에 의해 변화가 나타납니다.

ProtoPie의 인터랙션들을 위의 표로 나타낼 수 있습니다. 모든 Trigger와 Response는 각자 고유한 기능과 속성을 갖습니다.

ProtoPie에는 많은 Trigger와 Response가 있으며, 이를 활용하여 다양하게 구성하면 원하는 인터랙션을 제작할 수 있습니다.

Trigger 및 Response에 대한 자세한 사항은 링크를 참고하십시오.

위의 예시에서 녹색 사각형을 탭하면 우측으로 이동합니다. 이는 도형 레이어에 Tap Trigger와 Move Response를 적용한 결과입니다.

물론 다음과 같이 더욱 복잡한 고급 인터랙션도 만들 수 있습니다:

프리뷰 창에서 프로토타입을 실행해볼 수 있습니다. 인터랙션이 어떻게 작동하는지, 원하는 방향으로 작동하는지 등을 프리뷰 창에서 확인할 수 있습니다.

레이어나 인터랙션을 편집할 경우, 프리뷰 창에도 자동으로 적용되어 나타납니다.

ProtoPie Studio를 실행할 때 혹은 또다른 프로토타입 열었을 때, 미리보기 창 숨기기를 기본으로 설정하려면 Preferences에서 비활성화하세요.

ProtoPie Player는 ProtoPie Studio와 연동되는 어플리케이션입니다. iOS, iPadOS, Android 환경에서 프로토타입을 쉽게 확인할 수 있습니다.

ProtoPie Player에 대한 자세한 사항은 다음 링크를 참고해주십시오.

프로토타입을 클라우드에 업로드한 후, 해당 링크를 동료들과 공유할 수 있습니다. 프로토타입의 종류에 따라 데스크탑 브라우저, 모바일 브라우저, 혹은 ProtoPie Player 앱을 이용하여 확인할 수 있습니다.

클라우드로 공유한 프로토타입을 유저 테스트에 활용하거나 다른 팀의 동료에게 전달할 수도 있습니다. 작업물에 대한 외부 접근을 허용하는 것이 꺼려진다면, password protection을 이용하여 안전하게 프로토타입을 공유할 수 있습니다.

프로토타입 공유에 대한 자세한 사항은 다음 링크를 참고해주십시오.

다음 컨텐츠를 통해 ProtoPie의 더 많은 기능을 배울 수 있습니다.

커뮤니티에 가입하시면 다른 유저들과 소통하실 수 있습니다. 세계 곳곳에 있는 ProtoPie 유저들과 질문을 주고 받거나, 제작한 디자인을 공유하고, 디자인 트렌드 또는 팁들을 공유할 수 있습니다.

ProtoPie의 특정 기능과 관련한 질문이 있으시면, 다음 링크를 통해 문의주십시오.