[UE5] UMG 사용하기

 

나는 UI 연결작업을 그다지 즐거워하지 않는다. 그게 내가 언리얼 UI를 다 알기 때문이 아니라 쉽고 단순하다가도 복잡하고 답답할 때가 많기 때문이다. 게임을 만들 때 UI를 고려하지 않을 수는 없지만, 어느정도로 중요하게 고려가 되는지 잘 모르겠다. 내가 알고 있는 내용을 하나씩 게시해보고 평소에 답답했던 부분을 혼자서 삽질해보려고 한다.

 

참고로 나는 프로그래머다. 

 

구글에 UI관련 기능을 검색하거나 도움을 얻으려고 할 때마다 블루프린트로 장황하게 보여주는데, 항상 듣기로 단순한 UI 변화는 블루프린트로, 비즈니스 로직은 c++로 하는게 좋다고 들었다. 지금까지 해오던 UI작업 방식은 c++에 다 때려넣는 방법을 써왔는데 지저분하기도 하고, 언리얼에서 best practice로 뽑은 곳의 예시중 추천하는 아키텍쳐가 있어서 그 방식을 써보려고 한다. (내가 잘 알아듣고 쓰려나?)

 

UE4만 써왔는데 UE5가 세상에 나왔으니 UE5를 써봐야겠지? 확실히 예쁘게 생겼다!

 

우선 UMG는 언리얼에서 제공하는 언리얼 모션 그래픽의 약자로 UI디자이너들이 유저 인터페이스를 만들기 쉽게 제공한다.

 

나는 프로그래머라 UI를 예쁘게 만들지는 못하겠지만, UMG 디자인까지 대충 해가면서 포스팅을 하겠다.

 

참고로 UMG 사용에 대한 내용은 언리얼에서 친절하게 소개해뒀다. 

 

https://docs.unrealengine.com/5.0/en-US/widget-blueprints-in-umg-for-unreal-engine/

Widget Blueprints

 

만들어보자.

 

콘텐츠 브라우저에 스타터 패키지가 같이 있어서 따로 폴더를 만들고, UMG 라는 폴더를 하나 만들었다. 

UMG 폴더로 들어가서 우클릭 후 유저 인터페이스 - 위젯 블루프린트를 클릭해서 위젯 블루프린트를 만들어야한다. 여기 안에서 이미지를 넣고 버튼을 넣으면서 UI 디자인을 할 수 있게된다.

 

 

 

참고로 우클릭 - 블루프린트 클래스 를 눌러서 모든 클래스에서 userwidget을 찾기도 한다. 아래의 방법을 습관처럼 사용하고 있는데 방법은 다양하니 편한대로 쓰면 되지않을까?

 

 

상점을 만들어볼 예정이니까 이름은 ShopMain이라고 하자. 

 

 

더블클릭하면 비어있는 격자무늬가 잔뜩 보일 것이다.

 

왼쪽의 팔레트 라는 곳에서 원하는 위젯 컴포넌트를 찾을 수 있고, 아래 계층구조 라고 되어있는 하이어라키에 드래그 앤 드롭으로 UI를 세팅할 수 있다. 현재는 자식을 가질 수 있는 메인 위젯이 아무것도 세팅되어있지 않기 때문에 자식을 가질 수 있는 위젯 중 용도에 알맞는 위젯을 골라 세팅해주어야 한다.

 

오른쪽에 디자이너 , 그래프 패널이 있는데 디자이너 패널에서는 세팅된 UI를 볼 수 있고 그래프에서는 블루프린트 기능을 통해 현재 UI의 동작을 넣어줄 수도 있다. 이건 천천히 하도록 하고 디자이너 패널인 상태에서만 UI 를 배치할 수 있으니 UI를 배치해보겠다.

 

먼저. 가장 많이들 사용하는 CanvasPanel을 하이어라키에 배치해보겠다.

 

 

팔레트에서 canvas panel을 찾아서 계층구조의 ShopMain으로 드래그 드롭 해주면 이제 영역이 잡히면서 CanvaPanel_51이라는 제멋대로 이름을 하나 지어준다. 마음에 안들면 바꾸면 된다.

 

나는 마음에 안드니까 바꾸겠다 CanvasPanel_0으로. CanvasPanel은 다양한 자식을 여럿 가질 수 있는 위젯이다. 이게 무슨 뜻이나면 CanvasPanel 아래에 텍스트, 이미지, 버튼 뭐든 상관없이 놓을 수 있다.

 

심지어는 그 안에 캔버스 패널을 또 넣을 수도 있다. 한글로 이름이 지어졌다가 영어로 지어졌다가 아주 지 마음대로인데 이건 내가 알아보기 쉽게 네이밍을 바꿔주자.

 

이렇게 캔버스 패널_0에 다양한 자식들을 넣었다. 이게 캔버스 패널의 장점이다. 다 넣을 수 있다. UI 작업을 할 때 이 계층구조가 너무 복잡하지 않게 잘 정리 되어 있어야 프로그래머가 구조를 잡기 편하다.

 

CanvasPanel이 자식을 가질 수 있는 위젯이라면 자식을 갖지 못하는 위젯도, 또 자식의 수에 제한이 있는 위젯들도 존재한다. 

 

자식을 갖지 못하는 위젯에는 Image를 예로들 수 있다.

텍스트를 드래그해서 이미지 아래에 자식으로 두려고 하면 이 위젯은 자식을 가질 수 없다는 에러 메세지가 마우스 포인트에 떠다닌다.

 

이번에는 Button에다가 텍스트를 넣어주었다.

 

 

버튼 아래에 텍스트가 하나 추가되었다. 여기에 한 번 더 텍스트를 넣으려고 해보면

 

 

 

버튼 아래에 더이상 자식 위젯을 넣을 수 없다며 에러 메세지를 띄워준다.  이처럼 각 위젯의 성질을 잘 이용해 UI디자이너들은 UX를 고려한 디자인을 편하게 할 수 있다. 하지만 포토샵만큼이나 편하고 좋은 건 아니다. 

 

 

shop을 만들면서 위젯에 대한 특성, 사용의 장단점을 파악해보고 프로그램으로 구조를 어떻게 짜면 좋을지도 계속 고민을 해보려고 한다. 

 

그저 사용하기에는 편하다. 하지만 고려할 것이 많다. UI관련된 자료를 찾다보면 꼭 마주하게 되는 BenUI라는 블로그 글을 볼 수 있는데 그 글에서도 설명하기로 C++로 UI 작업을 하라고 한다. 그 이유는 협업에 있다. UI 디자이너와 프로그래머 모두 UMG 작업을 위헤 한 에셋을 공유할텐데. 형상관리툴을 쓰는 경우 충돌을 감안해야한다. 코드는 충돌난 부분만 잘 병합하면 되지만, 에셋은 그럴 수 없다. 둘 중 한명은 작업한 내용을 날려야한다. 

 

언리얼에서 소스컨트롤이라는 기능을 제공하고 있지만 한 명이라도 켜고 있지 않다면 누가 사용하는지 조차 모르고 작업을 하게 될 것이다. 

 

그래서 나도 C++로 작업을 하되, UI 디자인 작업 및 간단한 UI on,off와 같은 작업은 UMG 에셋을 통해 할 예정이다.

 

 

 

이 글들은 내가 얼마나 알고 있고 얼마나 모르는지 또 새로운 걸 얼마나 알게 될 지 테스트하기 위해 적는 글이기도 하다.

언리얼 Document를 잘 이용하면 웬만한 내용은 다 있다. 거기에 내 경험을 보태어 보려고 한다.