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 로 대체됩니다.

Creating Components Directly

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

Adding Component Instances

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

Editing Components

Main Component

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

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

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

Instance

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

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

Use as Main Component

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

Variable Overrides

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

Detach Component Instance

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

Context Menu에서 Component 분리

Instance를 우클릭합니다
Detach Instance를 클릭합니다

Property Panel에서 Component Instance 분리

Component Instance를 선택합니다
Property Panel에서 Detach Instance를 클릭합니다

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

Swap Component Instances

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

Grouping Components

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