컴포넌트(Components)

컴포넌트를 사용하면 레이어 및 인터랙션 세트를 저장하여 프로토타입 전체에서 재사용할 수 있습니다. 재사용하려는 레이어와 인터랙션을 선택하고 컴포넌트로 변환한 다음, 씬(Scene) 전체에 인스턴스를 만드세요.

컴포넌트가 디자인 워크플로우를 바꾸는 이유는 다음과 같습니다:

• 반복적인 작업 제거: 동일한 요소와 인터랙션을 반복해서 다시 만들 필요가 없습니다. 컴포넌트를 사용하면 한 번만 제작하여 어디서나 재사용할 수 있어 귀중한 시간과 노력을 절약할 수 있습니다.

• 가독성 향상: 컴포넌트를 사용하면 씬이 더 깔끔해지고 이해하기 쉬워집니다. 중복되는 요소들로 프로토타입을 복잡하게 만드는 대신, 컴포넌트의 인스턴스를 사용하여 더 정돈되고 효율적인 디자인을 구성할 수 있습니다.

• 워크플로우 가속화: 컴포넌트를 재사용하여 프로토타입을 빠르게 빌드하고 반복 작업할 수 있습니다. 원본 컴포넌트만 수정하면 모든 인스턴스가 자동으로 업데이트되므로 전체 디자인의 일관성을 유지할 수 있습니다.

컴포넌트 사용하기

씬에서 컴포넌트 만들기

ProtoPie에서는 레이어를 컴포넌트로 쉽게 변환할 수 있습니다. 다음의 간단한 단계를 따르세요:

1. 레이어 선택: 컴포넌트로 변환하려는 하나 또는 여러 개의 레이어를 선택합니다.

2. "Component" 아이콘 클릭: 툴바에서 컴포넌트 아이콘을 찾아 클릭합니다. 또는 선택한 레이어에서 마우스 우클릭을 한 후 컨텍스트 메뉴에서 Convert to Component를 선택할 수도 있습니다.

3. 짜잔! 컴포넌트가 완성되었습니다: ProtoPie가 선택한 레이어와 해당 인터랙션을 포함한 컴포넌트를 자동으로 생성합니다. 원본 레이어는 해당 컴포넌트의 인스턴스로 대체됩니다.

직접 컴포넌트 만들기

컴포넌트를 처음부터 새로 만들 수도 있습니다. 왼쪽의 컴포넌트 패널을 열고 플러스(+) 아이콘을 클릭합니다. 이렇게 하면 커스텀을 시작할 수 있는 빈 컴포넌트가 생성됩니다.

컴포넌트 인스턴스 추가하기

컴포넌트 패널에서 활성화된 씬의 캔버스로 컴포넌트를 드래그하여 컴포넌트의 인스턴스를 만들 수 있습니다.

컴포넌트 편집하기

메인 컴포넌트 편집하기

메인 컴포넌트를 편집하려면 컴포넌트 편집 모드를 열어야 합니다. 이 모드를 활성화하려면 컴포넌트 패널에서 컴포넌트를 클릭하거나, 컴포넌트 인스턴스를 마우스 우클릭한 후 컨텍스트 메뉴에서 "Edit Main Component"를 선택합니다.

메인 컴포넌트를 편집하는 과정은 씬을 편집하는 것과 비슷합니다. 컴포넌트의 레이어, 변수, 트리거, 리스폰스를 생성, 수정 및 삭제할 수 있습니다. 변경 사항은 해당 컴포넌트의 모든 인스턴스에 적용됩니다.

컴포넌트 편집을 마쳤다면 "Done" 버튼을 누르거나 화면 왼쪽 상단에 위치한 왼쪽 화살표 버튼(←)을 클릭하여 씬으로 돌아갈 수 있습니다. 또는 패널에서 원하는 씬을 클릭하여 해당 씬으로 이동할 수도 있습니다.

인스턴스 편집하기

ProtoPie에서는 컴포넌트 인스턴스의 하위 레이어 속성을 매우 쉽게 수정할 수 있습니다. 작동 방식은 다음과 같습니다:

• 손쉬운 오버라이드(Override): 컴포넌트 인스턴스 내 하위 레이어의 속성을 변경하면, 해당 특정 속성만 오버라이드(덮어쓰기)하는 것입니다. 이러한 오버라이드는 인스턴스에만 고유하게 적용되며 메인 컴포넌트에는 영향을 미치지 않습니다. 이를 통해 핵심 컴포넌트 구조를 유지하면서 각 인스턴스를 독립적으로 커스텀할 수 있는 유연성을 제공합니다.

• 수정 사항 유지: 메인 컴포넌트를 수정하더라도 인스턴스에서 오버라이드한 속성은 그대로 변경되지 않고 유지됩니다. 즉, 커스텀 정보를 잃을 걱정 없이 자유롭게 실험하고 반복 작업할 수 있습니다.

• 클릭 한 번으로 리셋: 원래 설정으로 되돌려야 하나요? 걱정 마세요! 인스턴스를 마우스 우클릭하고 컨텍스트 메뉴에서 "Reset Overrides"를 선택하세요. 모든 오버라이드가 지워지고 인스턴스가 다시 메인 컴포넌트와 동일한 원본 상태로 복원됩니다.

메인 컴포넌트로 사용하기

컴포넌트 인스턴스를 해당 메인 컴포넌트와 연결할 수 있습니다. 이를 통해 컴포넌트 편집 모드로 들어가지 않고도 인스턴스를 편집하여 메인 컴포넌트를 직접 수정할 수 있습니다.

변수 오버라이드(Variable Overrides)

변수의 초기값을 오버라이드할 수 있습니다. 메인 컴포넌트 변수에서 "Make Overridable" 옵션을 활성화하면 동작합니다. 활성화한 후, 컴포넌트 인스턴스의 속성(Property) 패널에서 변수 값을 수정할 수 있습니다.

컴포넌트 인스턴스 분리 (Detach)

분리(Detaching)를 하면 컴포넌트와의 연결이 끊어지고 인스턴스가 컨테이너로 변환됩니다. 이 작업은 속성 패널 또는 컨텍스트 메뉴에서 수행할 수 있습니다. 사용하기 전에 Labs에서 이 기능이 활성화되어 있는지 확인하세요.

컨텍스트 메뉴에서 컴포넌트 분리하기

1. 인스턴스 마우스 우클릭

2. Detach Instance 클릭

속성 패널에서 컴포넌트 인스턴스 분리하기

1. 컴포넌트 인스턴스 선택

2. 속성 패널에서 Detach Instance 아이콘 클릭

인스턴스가 분리되면 분리된 인터랙션 이름에 Detached_ 접두사가 자동으로 추가됩니다. 이를 통해 인터랙션이 분리된 인스턴스에서 파생된 것인지 여부를 쉽게 식별할 수 있습니다.

컴포넌트 인스턴스 교체 (Swap)

우측 속성 패널에서 단 몇 번의 클릭만으로 컴포넌트 인스턴스를 다른 인스턴스로 손쉽게 교체할 수 있습니다.

컴포넌트 그룹화하기

컴포넌트 이름에 슬래시 "/"를 사용하여 그룹을 생성하거나 분리할 수 있습니다. 예를 들어, 첫 번째 컴포넌트의 이름이 "Button / Primary / Normal" 이고 두 번째 컴포넌트의 이름이 "Button / Secondary / Normal" 이라면 아래와 같이 그룹화됩니다.

프로토타이핑 실력을 한 단계 업그레이드할 준비가 되셨나요?

Digital Dashboard Masterclass에 참여하여 에셋 정리, 재사용 가능한 컴포넌트 제작, 그리고 스마트 로직 구현에 대한 전문 지식을 습득해 보세요.

작업 중복을 줄이고, 효율적으로 빌드하며, 인터랙션을 원활하게 확장하는 방법을 배우고 싶다면 최신 Mobile Game prototyping masterclass에 참여해 보세요.

이 고급 지식을 통해 더욱 중요한 작업에 집중할 수 있으며, 프로젝트의 수준을 높여 궁극적으로 고도화되고 원활한 최종 프로토타입을 완성할 수 있습니다.

실력을 향상시키고 프로토타이핑 전문가가 될 수 있는 이 기회를 놓치지 마세요!