Understanding the Interface

ProtoPie Studio는 다른 디자인 툴과 비슷한 인터페이스를 갖추고 있습니다. 중앙에는 Scene별로 디자인할 수 있도록 Canvas가 있고, 좌우로 레이어 패널, 툴바, 인터랙션 패널 등이 구성되어 있습니다.

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

[object Object]

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

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

9. Component Panel

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

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

10. Variable Panel

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

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

Back To Top