Understanding the Interface

ProtoPie는 웹브라우저와 같은 탭 UI를 갖추고 있어, 하나의 윈도우에서 다른 파일로 쉽게 이동하거나 여러 파일을 동시에 작업할 수 있습니다.

ProtoPie를 실행하면 Dashboard가 나타납니다. 이 페이지에서 다양한 예제 파일과 학습 자료들을 확인할 수 있습니다.

프로토타입을 열면 새로운 탭이 생성됩니다. 중앙에는 Scene별로 디자인할 수 있도록 Canvas가 있고, 좌우로 레이어 패널, 툴바, 인터랙션 패널 등이 구성되어 있습니다.

인터페이스를 모두 확인했다면, 다음 링크를 참고하여 프로토타입을 직접 만들어 볼 수 있습니다.

Dashboard

Dashboard 페이지에서는 최근 작업한 파일을 한눈에 확인할 수 있습니다. 또한 기본적인 인터랙션 제작 방법들을 쉽게 찾아볼 수 있습니다.

Learn

ProtoPie가 처음이라면, 다양한 예제파일을 확인하며 직접 만들어보실 수 있습니다. 특정 기능에 대한 상세 설명이 필요하다면, 워크샵이나 도큐먼트를 확인하십시오.

Support

툴과 관련한 도움이나 다른 정보들이 필요하시다면 Support 페이지를 이용하실 수 있습니다. 블로그에서 ProtoPie 소식을 확인하거나, 새로운 기능 개발을 요청하거나, 혹은 유저 커뮤니티에 가입하실 수 있습니다. 커뮤니티는 세계 각지의 유저들과 ProtoPie에 대해 소통할 수 있는 공간입니다.

Prototyping

1. Layer Panel

레이어 패널에는 Scene별로 레이어가 정렬되어 있습니다. Scene에 대한 자세한 사항은 다음 링크를 참고하십시오.

레이어 패널에서는 레이어의 순서를 바꾸거나, 이름을 변경하거나, 특정 레이어를 잠그거나 해제할 수 있고, 가리거나 표시할 수도 있습니다.

Figma, Sketch, Adobe XD에서 디자인을 임포트했을 때, 레이어 패널에는 레이어 순서가 그대로 유지되어 나타납니다. 임포트에 대한 자세한 사항은 다음 링크를 참고하십시오.

2. Scene Panel

좌측 첫번째 아이콘을 클릭하면 Scene 패널이 표시됩니다. 프로토타입 내 모든 Scene을 확인할 수 있고, 원하는 Scene으로 바로 이동하거나, Scene의 순서를 변경할 수도 있습니다.

Scene에 대한 자세한 사항은 다음 링크를 참고하십시오.

3. Canvas

Canvas에는 Scene과 그 안에 포함된 레이어가 나타나며, 한번에 하나의 Scene만 표시됩니다.

Canvas에 레이어를 추가하는 방법은 다양합니다. 원하는 레이어를 직접 생성하거나, 다른 디자인 툴에서 임포트할 수도 있습니다. 레이어에 대한 자세한 사항은 다음 링크를 참고해주십시오.

스페이스바를 누른 상태에서 클릭 후 드래그하면 캔버스를 원하는 방향으로 움직일 수 있습니다.

4. Property Panel

속성 패널에는 선택한 Scene, Layer, Trigger, Response의 속성이 나타납니다. 여러 개의 레이어를 선택했을 경우 그들의 공통 속성이 표시됩니다.

5. Interaction Panel

인터랙션 패널에는 Trigger 및 Response가 나타납니다. 하나의 Trigger에 여러 개의 Response를 추가할 수도 있습니다.

해당 Scene에 추가된 모든 인터랙션이 패널에 표시됩니다. 레이어 패널과는 달리, 인터랙션 순서는 무방합니다.

인터랙션 제작에 대한 자세한 사항은 다음 링크를 참고하십시오.

6. Timeline

특정 인터랙션의 지속 시간, 지연 시간, 반복 여부 등을 확인할 수 있습니다. 속성 패널에서 관련 속성을 변경하면 자동으로 타임라인에 적용되어 나타납니다.

타임라인에 대한 자세한 사항은 다음 링크를 참고하십시오.

7. Preview Window

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

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

8. Toolbar

툴바를 이용하면 다음 기능들에 쉽게 접근할 수 있습니다.

• 레이어를 추가합니다.
• 기기 타입을 변경합니다.
• 프리뷰 창을 엽니다.
• 프로토타입을 ProtoPie Player에서 엽니다.
• 프로토타입을 ProtoPie Cloud에 업로드합니다.

9. Component Panel

좌측 두번째 아이콘을 클릭하면 컴포넌트 패널이 표시됩니다. 기본 컴포넌트와 라이브러리에 저장된 컴포넌트들을 모두 확인할 수 있습니다.

컴포넌트와 Interaction Library에 대한 자세한 사항은 링크를 참고하십시오.

10. Variable Panel

좌측 하단 Variables을 클릭하면 패널이 나타납니다. 특정 Scene에 사용된 Variable 및 전체 Scene에 사용된 Variable 모두 확인할 수 있습니다.

Variable에 대한 자세한 사항은 다음 링크를 참고하십시오.