MenuToggle Menu

Components

Component는 Layer와 Interaction을 재사용할 수 있도록 모듈화 시킨 요소 입니다. 반복적으로 사용되는 요소를 Component로 만들고, master component 를 수정하여 공통적인 부분을 저작한 후 instance 를 scene에 생성하여 반복을 줄일 수 있습니다. 이를 통해 생산성과 pie 파일의 가독성을 높일 수 있습니다.

Using Components

Creating Components in a Scene

Scene 에 만들어진 layer 로부터 component 를 만들 수 있습니다. Component 로 만들고 자 하는 layer 를 선택한 후 메뉴바의 Component 버튼이나 우클릭을 사용해서 선택된 layer 를 Component로 만들 수 있습니다. 그러면 선택된 레이어 및 레이어와 관련된 인터렉션을 포 함한 component 가 생성되고, 기존의 레이어는 instance 로 대체됩니다.

[object Object]

Creating Components Directly

좌측의 Component 패널에서 직접 Component를 만들 수 있습니다. Component panel 을
열고 "+" 버튼을 클릭하면 빈 상태의 component 가 생성됩니다. 이 상태에서 component 저작을 시작하시면 됩니다.

[object Object]

Adding Component Instances

좌측의 Component 패널에서 Scene으로 drag & drop하여 Instance를 추가할 수 있습니 다.

[object Object]

Editing Components

Main Component

Main Component를 수정하기 위해서는 component edit 모드로 진입해야 합니다. Component edit mode 에 들어가려면 좌측의 Component 패널을 열어서 해당 Component를 클릭하거나 Instance를 우클릭합니다.

[object Object]

Main component 저작 방식은 scene 저작 방식과 거의 동일합니다. Component 에서 사용될 layer, variable, trigger, response 을 생성, 수정, 삭제할 수 있습니다. Master component 의 변경사항은 자동으로 모든 instance 에 반영됩니다

Main component 편집을 마친 후 component edit 모드 좌상단의 ← 화살표 아이콘 버튼을 클릭해서 바로 이전에 머물던 scene으로 돌아갈 수 있습니다. 또는 scene panel 의 scene 을 클릭해서 임의의 다른 scene 으로 이동할 수도 있습니다.

[object Object]

Instance

Instance 의 하위 레이어는 Position, Size, Origin을 제외한 속성들을 Override 하여 사용 할 수 있습니다. Instance Component에서 변경한 속성들은 Master Component에 향을 주지 않지만 Master Component에서의 수정은 Instance에 반영됩니다. 단 Instance Component에서 Override한 속성들은 Master Component에서 수정하더라도 영향받지 않습니다.

Instance Component를 우클릭하여 Reset Overrides을 하면 초기 상태로 되돌릴 수 있습니다.

[object Object]

Use as Main Component

Instance의 Use as Main Component를 사용하면, Component Edit Mode로 이동하지 않고 instance 를 수정함으로써 Main Component 를 수정할 수 있습니다.

[object Object]

Variable Overrides

Variable 의 초기값도 override 할 수 있습니다. 변수 초기값을 override 하려면 master component 의 변수의 'Overridable' 옵션을 활성화합니다. 이 옵션이 활성화 되면 instance 의 property panel 에서 변수의 초기값을 override 할 수 있게 됩니다.

[object Object]

Detach Component Instance

분리 작업을 통해 Component의 연결이 끊기고, Instance는 컨테이너가 됩니다. Property Panel 또는 Context Menu를 통해 분리 작업을 진행할 수 있습니다. 사용 전 Labs에서 해당 기능을 활성화했는지 확인하세요.

Context Menu에서 Component 분리

  1. Instance를 우클릭합니다
  2. Detach Instance를 클릭합니다
[object Object]

Property Panel에서 Component Instance 분리

  1. Component Instance를 선택합니다
  2. Property Panel에서 Detach Instance를 클릭합니다
[object Object]

Instance가 분리된 후에는 분리된 인터랙션 이름 앞에 자동으로 Detached_ 프리픽스가 추가됩니다. 이를 통해 해당 인터랙션이 분리된 Instance에서 시작되었는지의 여부를 확인할 수 있습니다.

[object Object]

Swap Component Instances

우측 Property Panel에서 Component의 Instance를 다른 Instance로 교체할 수 있습니다. Nested Component의 Instance도 같은 방법으로 교체할 수 있습니다.

[object Object]

Grouping Components

Component의 이름에 '/' 를 사용해서 Group을 만들거나, 구분해줄 수 있습니다. 예를 들어, 첫 번째 Component의 이름을 button / primary / normal, 두 번째 Component의 이름을 button / secondary / normal 로 하면 아래와 같이 그룹핑 됩니다.

[object Object]
Back To Top