첫 번째 프로토타입 만들기
컴퓨터에 ProtoPie를 설치하고 실행한 후, 이제 첫 번째 프로토타입을 만드는 여정을 시작할 모든 준비가 완료되었습니다!
과정을 시작하기 위해 필수적인 단계들을 살펴보겠습니다:
디자인 가져오기: 디자인을 ProtoPie로 매끄럽게 가져오는 방법을 알아보세요. 이를 통해 기존 에셋을 프로토타이핑 환경으로 가져올 수 있습니다.
인터랙션 생성하기: 첫 번째 인터랙션을 구축하여 ProtoPie의 강력한 기능을 인터랙티브 요소와 매력적인 사용자 경험으로 가득 찬 세상으로 발견해보세요. 창의력을 발휘하여 프로토타입에 생명을 불어넣으세요.
프로토타입 테스트하기: ProtoPie의 미리보기 모드 덕분에 프로토타입을 제작하는 동안 실시간으로 작동하는 모습을 확인할 수 있습니다.
프로토타입 공유하기: 창작물에 만족하셨다면, 이제 프로토타입을 다른 사람들과 공유할 시간입니다. ProtoPie에서 제공하는 다양한 공유 옵션을 탐색하여 작업을 선보이고 소중한 피드백을 수집하세요.
실제와 같은 프로토타입을 만들기 위해서는 ProtoPie의 독특한 개념적 모델을 이해하는 것이 매우 중요합니다. 이 모델은 ProtoPie의 기초와 중추를 형성하며, 인터랙션이 생성되고 구현되는 방식을 규정합니다.
아직 ProtoPie를 설치하지 않으셨나요? ProtoPie를 무료로 체험해 보세요!
1. 디자인 가져오기
각각의 ProtoPie 플러그인을 사용하여 Figma, Sketch, 또는 Adobe XD에서 디자인을 ProtoPie로 가져오는 것으로 시작하세요.
아트보드 또는 최상위 프레임을 씬(Scene)으로 가져오고, Figma, Sketch, Adobe XD에서와 동일한 레이어 계층 구조, 위치 및 제약 조건을 가진 오브젝트들을 그대로 가져옵니다.
디자인 가져오기에 대해 더 알아보기.
2. 첫 번째 인터랙션 만들기
첫 번째 로지스틱한 인터랙션을 만들기 위해서는 ProtoPie만의 독특한 개념적 모델을 이해하는 것이 중요합니다. 작동 방식을 이해하고 나면, 적절한 구성 요소를 조립하여 쉽게 인터랙션을 구현할 수 있습니다!
개념적 모델 이해하기
개념적 모델은 ProtoPie의 기초이자 중추 역할을 합니다. 이는 현실 세계에서 사물이 움직이는 방식을 기반으로 합니다.
프로토타입을 만들기 위해서는 인터랙션을 생성해야 합니다. 인터랙션을 생성하려면 오브젝트, 트리거, 그리고 하나 이상의 리스폰스를 결합하세요.
ProtoPie에서 오브젝트(Object)는 액션의 영향을 받는 레이어를 의미합니다. 이는 트리거나 리스폰스를 통해 발생할 수 있습니다. 트리거(Trigger)는 하나 이상의 리스폰스를 실행시키는 액션 역할을 하며, 리스폰스(Response)는 트리거에 의해 발생하는 변화나 수정 사항을 나타냅니다.
이것은 원소 주기율표에서 영감을 얻은 ProtoPie 트리거와 리스폰스의 시각적 표현입니다. 각 트리거와 리스폰스는 고유한 기능과 속성을 가지고 있습니다.
선택할 수 있는 다양한 트리거와 리스폰스가 있습니다. ProtoPie를 통한 프로토타이핑은 결국 트리거와 리스폰스를 결합하여 상상하는 모든 인터랙션을 만들어내는 것입니다!
이 예시를 살펴보겠습니다. 녹색 사각형을 탭하면 오른쪽으로 이동합니다. 이는 녹색 사각형 레이어에 할당된 Tap 트리거와 Move 리스폰스로 구성된 인터랙션으로 구현됩니다.
물론 더 복잡한 인터랙션도 만들 수 있습니다. 다음과 같은 것들이 가능합니다:
하나의 인터랙션 안에 여러 개의 리스폰스를 포함할 수 있습니다.
단일 인터랙션 내에서 트리거와 리스폰스에 서로 다른 레이어를 할당할 수 있습니다.
각 리스폰스의 지속 시간(Duration)과 지연 시간(Delay)을 제어할 수 있습니다.
공식을 사용하여 레이어를 동적으로 제어할 수 있습니다.
여러 화면과 기기에 걸친 인터랙션을 생성할 수 있습니다.
3. 제작한 결과물 테스트하기
미리보기 창을 활용하여 인터랙션이 실제로 구현되는 모습을 확인해 보세요. 이 기능을 통해 다른 사람들과 공유하기 전에 프로토타입의 오류를 찾아내고 수정할 수 있습니다.
기본적으로 미리보기 창은 레이어나 인터랙션을 변경할 때마다 자동으로 업데이트됩니다. ProtoPie Studio를 실행하거나 프로토타입 간에 전환할 때 미리보기 창을 기본적으로 숨기고 싶다면, 환경설정(Preferences) 메뉴에서 토글을 끄면 됩니다.
또 다른 방법은 ProtoPie Studio의 무료 동반 앱인 ProtoPie Player를 사용하는 것입니다. iOS, iPadOS, Android에서 매끄럽게 프로토타입을 보고, 경험하고, 테스트할 수 있습니다.
ProtoPie Player에 대해 더 알아보기.
4. 첫 번째 프로토타입 공유하기
프로토타입을 클라우드에 업로드하세요. 그리고 이해관계자들과 링크를 공유하세요. 프로토타입의 종류에 따라 이해관계자들은 데스크톱 브라우저, 모바일 브라우저 또는 ProtoPie Player에서 미리 볼 수 있습니다.
이해관계자들은 클라우드에 저장된 프로토타입을 사용성 테스트에 활용하고 다른 이해관계자들과 공유할 수 있습니다.
민감한 작업을 진행 중이신가요? 프로토타입에 비밀번호 보호 기능을 활성화하세요.
프로토타입 공유에 대해 더 알아보기.
더 배울 준비가 되셨나요?
다음 코스를 통해 ProtoPie에 대한 지식을 더 깊이 넓혀보세요.
다른 사람들로부터 배우기
커뮤니티에 가입하여 다른 ProtoPie 사용자들로부터 배워보세요. 소통하고, 질문하고, 떠오르는 생각을 무엇이든 공유하세요. 다른 사용자들이 이전에 공유했던 팁, 요령, 그리고 솔루션들을 찾아볼 수 있습니다.
파이(Pie)를 만드는 중 막히는 부분이 있거나 저희가 다루었으면 하는 특정 주제가 있다면 여기에 메시지를 남겨주세요: ProtoPie에 문의하기.