Unreal의 UI 시스템 _ UMG 위젯 설명

 

언리얼 UMG는 많이 사용되는데 이유는 모르겠으나 
튜토리얼을 찾아보려면 많은 정보가 없습니다 ㅠㅠ
그래서 여기저기 포스팅을 찾아보고 구글링해서 제가 필요한 정보를 한번 정리해 보았습니다.
그 흔한 UMG 책도 찾기 어려워서
공식 튜토리얼을 찾아 이것저것 적어보았습니다.

아직 공부하는 단계이기 때문에 정확하지 않은 정보가 있을 수 있으니
혹시나 부정확한 정보는 댓글 남겨놓으면 수정 반영하도록 하겠습니다.


-----------

 

오늘은 언리얼 엔진에서 UI 만들때 꼭 알아야 하는 기본
위젯 블루프린터 에디터와 팔레트에 대해서 간단히 이야기 해보려고 합니다.

 

팔레트란?
판레트는 다양한 UI부품(위젯)을 모아 놓은 창입니다.
버튼,텍스트박스, 이미지 같은 위젯을 끌어다(드래그 앤 드롭) 디자인 화면에 놓으면 됩니다.
레고 블록 조립처럼 생각하면 쉽습니다.

 

 

각각에는 다양한 위젯 유형이 들어있어서 사용하면 됩니다. 이런 위젯 유형을 섞어 쓰는 방식으로 디자이너 탭에서 UI 모양을 배치하고,  그래프 탭을 통해 각 위젯의 대테일 패널 내 세팅을 통해 위젯의 함수 기능을 추가 할 수 있습니다. 

 

 

 

UI를 만드는 기본 흐름 

디자이너탭 : 위젯을 끌어다가 화면에 배치

그래프탭 : 위젯에 동작을 추가

드테일 패널 : 색 폰트 크기 등 세부 설정 변경

 

팔레트 = 부품을 모아놓은 창
디자이너 탭 = 부품을 배치하는 곳
그래프 탭 =부품에 기능을 추가하는 곳
디테일 패널 =부품의 옵션을 조정하는곳

 

Border	테두리 - 하나의 자손 위젯을 가질 수 있는 컨테이너 위젯으로, 테두리 이미지와 조절가능 여백을 두고 가장자리를 둘러싸는 기능을 제공합니다.
Button	버튼 -단일 자손클릭가능 프리미티브 위젯으로, 기본적인 상호작용에 쓰입니다. 버튼 안에 다른 위젯을 배치하여 UI에 좀 더 복잡하고 재미난 클릭가능 요소를 만들 수 있습니다.
Check Box	체크박스 - 'unchecked' 체크해제 /'checked' 체크됨 / ' indeterminable' 확인불가 세가지 토글 상태를 표시할 수 있습니다. 체크박스는 고전 체크박스, 토글 버튼, 동글 버튼으로 사용할 수 있습니다.
Image	이미지 - 이미지 위젯으로 UI에 슬레이트 브러시, 텍스처, 스프라이트, 머티리얼을 포시할 수 있습니다. *같은 텍스처 아틀라스에 있는 스프라이트는, 렌더링할 때 같은 레이어를 공유하는 경우 슬레이트에 일괄 배치시킬 수 있습니다. 즉 드로우콜 수 예산이 빠듯한 트랜스폼에서는 Paper 2D 스프라이트를 브러시 입력으로 사용하는 경우 UMG와 슬레이트 위젯의 렌더링 효율이 크게 향상된다는 의미입니다.
Named Slot	다른 위젯을 채울 수 있는 사용자 위젯에 대한 외부 슬롯을 노출시켜 주는 위젯으로, 커스텀 위젯 함수 기능을 만드는 데 좋습니다.
Progress Bar	진행상황 바 - 진행상황 바 위젯은 경험치, 생명력, 점수와 같은 여러가지 용도에 맞도록 스타일 조정이 가능한, 단순한 바입니다.
slider	슬라이더 - 0 -1 사이 값 조절이 가능한 핸들이 있는 미닫이 바가 표시되는 단순 위젯입니다.
Text	텍스트 - 화면상에 텍스트를 표시하는 기본적인 방법으로, 옵션이나, 기타 UI 요소에 대한 텍스트 설명에 사용할 수도 있습니다.
Text Box	텍스트 박스 - 사용자가 커스텀 입력을 할 수 있도록 합니다. 한줄 텍스트만 입력 가능합니다.

 

 

 

 

Expandable Area	확장가능 영역 - 컨테이너 안의 자손 위젯을 펼치거나 접을 수 있도록 해줍니다.

 

 

입력

 

 

Combo Box	콤보 박스 (문자열) - 사용자에게 드롭다운 메뉴로 옵션 목록을 표시하고 그 중에서 선택 할 수 있도록 합니다.
Spin Box	스핀박스 - 숫자를 직접 입력하거나 슬라이더로 입력할 수도 있는 숫자 입력 박스 입니다.
Text Box	텍스트 박스 여러줄 - text box와 비슷하지만 한줄이 아닌 여러줄 입력이 가능합니다.

 

 

 

최적화 (여기 내용은 사실 저도 잘 모르고 공식 글을 퍼왔습니다.)

 

여기에 있는 위젯은 주로 UI를 최적화 시켜 퍼포먼스를 향상시키는데 쓰입니다.

Invalidation Box	인밸리데이션(무효화) 박스에 둘러싸인 위젯은 그 자손 위젯 지오메트리를 캐시에 담아 슬레이트 렌더링 속도를 올릴 수 있습니다. 인밸리데이션 박스로 인해 캐시에 담긴 위젯은 프리패스, 틱 페인트 처리되지 않습니다.
Retainer Box	리테이너 박스 - 렌터 카깃에 자손 위젯을 먼저 렌더링한 후 그 렌더 타깃을 화면에 렌더링합니다. 이를 통해 UI가 메인 게임 렌더 빈도보다 실제로 적게 렌더링 할 수 잇도록 빈도와 단계 (phase) 모두 제어할 수 있습니다. 위젯을 그린 후 머티리얼을 렌더 타깃에 적용시켜 단순 포스트 프로세스를 적용하는 부가 효과도 있습니다.

 

 

 

패널 - 패널 카테고리에는 레이아웃 조절이나 다른 위젯 배치용 위젯이 들어있습니다.

 

 

Canvas Panel	캔버스 패널 - 위젯을 임의 위치에 배치하고, 앵커 설정하며, 캔버스의 다른 자손과 Z순서를 조정할 수 있도록 해 주는 디자이너 친화적 패널. 참고로 z순서를 도동 변경할 수는 있어도 위젯은 목록 순서대로 렌더링되므로, z순서에 의존하기 보다는 목록으 ㅣ순서를 변경하는 것이 낫습니다. 캔벗 ㅡ패널은 위치가 절대적인수동에 배치에 좋은 위젯이지만, 위젯을 절차적 생성 방식으로 컨테이너에 넣고자 할 때는 그리 좋지 않습니다.
Grid Panel	그리드 패널 - 남은 공간을 모든자손 위젯과 균등하게 나누는 패널입니다.
Horizontal Box	가로박스 - 자손 위젯이 가로로 배치되도록 합니다.
Overlay	오버레이 - 위젯이 서로 쌓이도록 하며, 각 레이어의 콘텐츠에는 단순한 레이아웃을 사용합니다.
Safe Zone	안전지대 - 플랫폼의 안전지대 정보를 뽑아 패딩을 추가합니다.
Scale Box	스케일박스- 원하는 크기의 콘텐츠를 배치하고 이 박스의 할당 영역에 배치된 제한에 맞도록 스케일을 조절합니다. 배경 이미지가 일정 영역에 맞게끔 스케일 조절은 하지만 종횡비가 달라져 찌그러지지는 않도록 하거나, 특정 텍스트를 한 영역에 자동으로 맞도록 할 필요가 있는 경우에 좋습니다.
Size Box	사이즈 박스 - 보고하는 박스에 원하는 크기를 지정할 수 있습니다. 모든 위젯이 실제 원하는 크기의 박스로 보고 하지 은 않습니다. 위젯을 size box로 감싸면 size box가 특정 크기로 강제시킬 수있습니다.
Unifom Grid Panel	균등 그리드 패널 -자손 모두와 남은 공간을 균등하게 나누는 패널입니다.
Vertical Box	세로박스 - 자손 위젯이 자동으로 세로로 배치되도록 하는 위젯입니다. 위젯끼리 세로 정렬을 유지하면서 서로 쌓이도록 하는 데 좋습니다.
Widget Switcher	위젯 전환기 - 자체적으로 만들 수 있는 탭은 없으나 탭처럼 제어되는 것으로, 이와 함께 하여 탭 효과를 낼 수 있습니다. 한번에 최대 하나의 위젯만 보입니다.
Wrap Box	자손 위젯이 왼쪽에서 오른쪽을 정렬됩니다. 위젯이 폭 제한을 넘은 경우 위젯을 다음 줄에 배치합니다.

 

 

프리티브 - 사용자에게 정보를 주거나 무언가 선택할 수 있도록 해주는 방식을 추가로 제공해줍니다.

 

 

 

Circular Throbber	원형 트로버 - 회전하는 원형 이미지로 주로 로드중임을 나타내는 트로버 위젯입니다.
Editable Text	편집가능 텍스트 - 박스 배경없이 사용자 입력이 가능한 글 상자 입니다. 편집가능 텍스트 한줄만 지원합니다.
Editable Text(Multi-Line)	편집가능 텍스트 (여러줄) Editable text 와 비슷하나 한 줄이 아닌 여러줄 텍스트를 지원합니다.
Native Widget Host	네이티브 위젯 호스트- 하나의 자손 슬레이트 위젯을 포함할 수 있는 컨테이너 위젯입니다. UMG위젯 안에 네이티브 위젯을 중첩시키기만 하면 되는 경우에 사용합니다.
Menu Anchor	이 위젯은 팝업 메뉴의 기준이 되어 띄울 위치를 지정할 수 있습니다.
Spacer	스페이서 - 다른 위젯 사이에 임의의 여백을 제공해주는 위젯입니다. 스페이서는 시각적 표시가 없어 게임에서 보이지 않습니다.
Throbber	트로버 - 연속해서 여러개 확대되는 원으로보이는 애니메이션 트로버 위젯입니다. 주로 로딩중임을 나타낼때 사용됩니다.

 

 

특수효과 - 이 위젯은 UI 기반 특수 효과를 만드는데 사용됩니다.

 

 

Background Blur

Background Blur 위젯은 하나의 자손 위젯을 가질 수 잇는데, 거기에 조절 가능한 패딩을 부텽 포스트 프로세스 가우시안 블러를적용하여 위젯 아래 모든 콘텐츠 블러를 적용할(뿌옇게 만들) 수 있습니다.

 

 

사용자 생성

 

미리 생성해둔 위젯 블루프린트를 다른 위젯 블루 프린트 안에 배치할 수있는 것입니다. UI 요소의 파트를 개별 위젯 블루프린트로 만든 다음, 조합해서 전체적인 ui 레이아웃을 만드는데 좋습니다.

 

 

 

여기까지가 언리얼 엔진 문서에 있는 위젯 유형 레퍼런스입니다.

언리얼 포럼에는 있지만 제가 설치한 엔진상에는 없는 기능도 있어서 링크를 하단에 첨부드립니다.

 

https://dev.epicgames.com/documentation/ko-kr/unreal-engine/widget-type-reference?application_version=4.27

아래는 저 말고도 더 잘 정리해둔 블로거분들 링크를 첨부하겠습니다.

 

https://dev-igner.tistory.com/67

https://blog.naver.com/bbineekim/223006142012

 

https://wdnote.tistory.com/224

 

 

 

혹시 제가 포스팅한 글중에서 틀린 부분이 있으면 편하게 댓글 달아주시면 다시 찾아보고 리포스팅 하도록 하겠습니다.

감사합니다. 

 

 

#언리얼엔진 #언리얼UMG #UMG초보 #UMG튜토리얼 #언리얼UI #게임UI디자인 #언리얼블루프린트 #언리얼강의 #언리얼UI구성 #UMG블루프린트 #언리얼디자이너 #게임개발기록 #언리얼스터디 #게임UI제작 #게임UI공부 #언리얼개발 #UI디자인공부 #언리얼초보 #UMG위젯 #언리얼UI디자인