Variant Manager와 Widget Blueprint 사용하여 언리얼 Configurator 제작하기

언리얼 엔진으로 사용자가 실시간으로 제품의 속성, 옵션 또는 디자인을 변경하고 시각적으로 즉시 결과를 확인할 수 있게 해주는 Configurator를 제작할 수 있다. Configurator는 사용자 경험을 개선하고 제품을 보다 효과적으로 전달할 수 있는 강력한 도구로서 다양한 산업 분야에서 쓰이고 있다.

 

언리얼 엔진으로 제작된 Configurator는 사용자가 옵션을 선택하거나 매개변수를 변경할 수 있도록 버튼, 드롭다운, 슬라이더 등으로 구성된 인터페이스를 제공하며 PC, 모바일, 웹, AR/VR 등 다양한 플랫폼에서 실행 가능하다는 특징이 있다.  또한 언리얼 엔진의 강력한 렌더링 기능으로 실시간의 사실적 조명, 텍스처, 그림자 품질을 제공할 수 있다.

 

https://dev.epicgames.com/documentation/en-us/unreal-engine/product-configurator-template-in-unreal-engine

 

언리얼 엔진 Configurator 컨텐츠를 제작하는데 필요한 핵심적인 언리얼 기능은 Variant Manager와 Widget Blueprint이다.

Variant Manager는 레벨의 액터에 대한 여러 가지 다른 구성을 설정하고 제어해야 하는 속성이나 변형이 호출해야하는 함수를 정의한다. Widget Blueprint는 Variant Manager와 연결되어 사용자가 인터렉션을 할 수 있는 UI 인터페이스 에디터라고 볼 수 있다.

 

---

 

 

🧩 직접 제작해보기

Variant Manager와 Widget Blueprint를 사용하여 과일 + 그릇의 변경 사항을 사용자가 UI를 통해 커스텀할 수 있도록 해본다.

 

 

🧩 Variant Manager : 변형 구성하기

Variant Manager를 사용하기 위해선 먼저, Edit > Plugins 브라우저를 열고 Variant Manager 플러그인이 활성화되어 있어야한다.

 

플러그인이 설치되어있다면 Contents Browser에서 LevelVariant Sets를 생성하고 월드 씬에 추가한다.

 

LevelVariant Sets을 더블 클릭하면 아래 이미지와 같은 Variant Manager 패널을 열 수 있다.

 

Variant Set 버튼을 누르면 Variant Set이 추가되고 추가된 Variant Set 우측의 +버튼을 누르면 해당 Set의 하위 변형인 Variant가 생성된다.

 

예시로 Fruit라는 Variant Set에 Apple, Bananas, Grapes라는 Variant를 추가해볼 것이다. 

 

항목들 앞에는 썸네일을 캡처해 넣을 수 있는데,  뷰포트 화면을 찍으려는 썸네일처럼 구성한 다음, 캡처하려는 Variant Set이나 Variant를 우클릭하여 Set from viewport를 선택해주면 된다.

 

Variant에 액터를 추가하는 작업이다. Manager에서 Variant가 선택된 상태로 Apple, Bananas, Grapes 3개의 액터를 전체 선택하고 Manger의 Actor 패널 쪽으로 드래그 드랍한다. 이 작업을 바인딩이라고 한다.

 

새로운 액터를 바운딩할 때마다 Variant Manager는 자동으로 캡처할 속성을 선택할 수 있는 창이 연다. 사용자의 선택에 따라서 그에 맞는 과일이 보여지게 하려고 하기 때문에 Captured Properties에서 'Static Mesh Component/ Visible'을 선택한다.

 

3개의 Actors가 추가된 Variant를 3개 갯수대로 복제한다. 각 Variant를 더블클릭하고 Actors들의 Properties들을 세팅한다.예를 들어 첫 번째 Variant를 사과로 한다고 하면 첫 번째 Variant를 더블클릭 > Actors의 Apple 클릭하여 Properties에 Visible 체크 > Apple이 아닌 Bananas, Grapes의 Visible은 체크 해제한다. 이와 같은 방식으로 두 번째, 세 번째 Variant도 더블 클릭하여 Variant가 선택된 상태로 보여지려는 Actor만 Visible 체크되도록 설정한다.

 

Properties를 세팅해도 씬에는 바로 반영이 되지 않을 것이다. 선택한 Properties가 바로 반영되게 하려면 해당 속성 우클릭하여 'Apply recorded value'를 선택한다.

 

머티리얼 변형의 경우이다. 세라믹 그릇 Actor의 색이 초록, 빨강, 노랑의 옵션으로 변형되게 할 것이다.

Fruit과 방법은 같다. Variant Set을 추가하고 이름을 Bowl로 바꿔준다. Variant를 추가하고 Actors에 세라믹 그릇 Actor를 드래그 드랍한다.

 

Fruit에서는 Visible을 가져왔다면 이번엔 머티리얼을 변경하는 것임으로 'Static Mesh Component/ Material[0]을 선택한다.

 

미리 준비된 Green, Yellow, Red 머티리얼 인스턴스를 각 변형에 맞게 설정한다.

 

Variant Set과 Varaint의 이름과 썸네일을 구분하기 쉽게 잘 정리하고 모든 항목의 Properties가 Apply recorded value 설정되어 있다면 이제 Variant Manager 패널에서 변형 항목을 선택해보면서 결과를 확인할 수 있다.

 

 

🧩 Widget Blueprint : 사용자 인터페이스 제작하기

Variant Manager 기반의 커스텀 유저 인터페이스를 구축하기 위해 Widget Blueprint를 사용할 수 있다. Contents Brower에서 Widget Blueprint를 추가하고 이름을 변경해준다.

 

만든 Widget Blueprint를 클릭하면 아래 이미지와 같은 패널을 볼 수 있다.
Widget Blueprint 패널의 각 구성이 어떤 역할을 하는지에 대해서는 (링크)를 참조한다.

 

Palette에서 Button을 추가한다. 이 Button은 Fruit, Bowl 버튼으로 사용할 준비된 이미지로 대체할 것이다.

 

Button을 이미지로 대체하는 방법은, Button을 선택하고 디테일 패널에서 Appearance > Normal Image를 준비한 텍스처로 교체한다. 이때 Button 사이즈가 텍스처의 사이즈와 일치하지 않는다면 Button 사이즈에 맞춰 텍스처가 찌그러져서 나온다. 디테일에서 Slot Size를 변경하거나 Size To Content를 체크하여 적절한 값으로 조정할 수 있다.

 

그리고, Appearance > Style에는 Normal말고도 Hovered, Pressed가 있는데. Normal은 아무 인터렉션이 없는 기본 상태이고 Hovered는 마우스 오버했을 시, 그리고 Pressed는 마우스 클릭했을 때 상태를 말한다. Normal Image만 텍스처를 넣어줬다면 버튼에 마우스를 올리고 클릭할 때는 기본 네모 박스가 표시 될 것이다. 그러므로 Normal, Hovered, Pressed 이미지에도 동일하게 맞는 텍스처를 지정한다. 

 

Palette에서 Button과 Text를 이용해 나머지 UI를 디자인해준다. Appearance의 이미지 말고도 버튼의 라운드 모양, 외곽선, 폰트, 투명도 등 다양한 옵션이 있으니 잘 활용해보면 좋을 것이다.

 

Wiget Blueprint의 우측 상단을 보면 Desinger와 Grpah가 있다. 방금까지의 작업은 Desinger 탭에서의 작업이었으며 UI의 시각적인 구성을 제작하는 부분이다. 이제 이 UI가 작동하기 위해선 Graph로 전환하여 추가적인 작업을 해야한다.

 

Graph로 전환하면 좌측에는 Designer에서 생성한 Widget들이 보인다. Graph 작업을 위해 각 Widget들의 이름은 잘 정리해두는 것이 좋다. 인터렉션을 지정할 button을 선택하고 아래 디테일 창을 보면 Events가 있다. 여기서 클릭 시 이벤트를 생성할 것임으로 On Clicked 옆의 + 버튼을 눌러 이벤트를 추가한다.

 

'Switch on Variant by Name' 또는 'Switch on Variant by Index' 노드로 Variant Manager와 연결할 수 있는데, 여기서는 Name으로 만든 예시이다. 각 이벤트에 맞게 Variant Set Name(Fruit 또는 Bowl)과 Variant Name(Apple, Bananas, Green, Yellow 등..)을 입력한다.

 

이전에 이미지를 삽입한 Fruit, Bowl 버튼을 클릭하면 세부 버튼이 보이도록하는 구성도 간단히 추가해봤다. (Fruit 버튼을 눌러 세부 버튼이 나온 상태에서 Bowl을 눌렀을 때 Fruit의 세부 버튼 작동을 초기화하는 등의 디테일은 다른 방법으로 구성해야 한다)

 

 

🧩 레벨에 Widget Interface를 추가하기 위한 블루프린트 만들기

Variant Manager와 Widget Blueprint 작업을 완료한 다음. 이것을 레벨에 추가시켜 게임 실행 시 작동하게 하려면 블루프린트를 하나 더 만들어야 한다. 우선, 일반적인 블루프린트를 생성하는 것과 같은 방법으로 블루프린트를 추가하고 이름을 BP_FruitBowl_UI_builder라고 변경했다.

 

BP_FruitBowl_UI_builder를 실행하고 아래 이미지와 같은 순서대로 구성한다.

 

그리고 BP_FruitBowl_UI_builder를 씬에 추가하면 끝. 레벨을 Play mode로 전환하여 오류를 점검한다.

 

 

 

 

 

 

🧩 Ref.

https://dev.epicgames.com/documentation/en-us/unreal-engine/variant-manager-template-overview