포트나이트 언리얼 에디터의 UMG UI 레이아웃 | 포트나이트 언리얼 에디터 문서

언리얼 모션 그래픽(UMG)은 강력한 사용자 인터페이스(UI) 빌드 도구입니다. 간단한 팝업부터 복잡한 UI 시스템까지, UMG 작업의 핵심 개념을 이해하면 이 강력한 도구를 활용해 무엇이든 자유롭게 실험해 볼 수 있습니다.

UI 디자인을 구현해 플레이테스트까지 진행하려면 UMG로 UI를 만드는 방법을 이해해야 합니다. 올바른 UI 빌드 워크플로를 소개하는 이 페이지는 다음 섹션으로 이뤄져 있습니다.

UI 시스템 디자인하기

보기 좋고 유용한 UI 시스템을 만들기 위해서는 UI 디자인 계획이 중요합니다. 계획 시 다음을 고려해야 합니다.

제작하는 게임의 유형
플레이어 경험을 지원하면서 재미있고 이해하기 쉬운 게임플레이를 만드는 데 필요한 UI 유형
최종 UI의 모양

예를 들어 포트나이트 HUD에는 관련 체력 및 보호막 정보부터 전체적인 게임 통계까지, 플레이어가 게임에 대해 알아야 하는 모든 것이 화면에 표시되어야 합니다.

The Fortnite Battle Rpyale HUD is a good example of UI design that informs the player of their stats in the game and also gives the player control over their inventory.

생각해 둔 UI 디자인을 스케치해 보고, 스케치를 바탕으로 UMG에서 UI를 만들어 보세요.

기본 웹 디자인 접근 방식이 사용자 위젯 만들기를 시작하기 전에 UI 레이아웃을 계획하는 데 도움이 될 수 있습니다. 이러한 접근 방식을 활용하면 UI에서 엄격하게 적용할 부분과 유연하게 적용할 부분을 결정할 수 있습니다. UI 레이아웃에 다음 웹 디자인 접근 방식을 활용해 보세요.

절대 vs 상대 레이아웃
패딩과 여백

절대 레이아웃

절대 레이아웃에서는 보통 정밀한 계산과 좌표를 통해 엘리먼트의 화면상 위치를 지정합니다. 이 방식은 X 및 Y 좌표를 이용해 UI 엘리먼트를 한 자리에 고정해야 하는 경우에 유용합니다. UI 엘리먼트는 부모 엘리먼트의 화면상 위치를 고려해야 합니다. 부모 엘리먼트는 레이아웃의 좌측 상단 모퉁이에서 시작합니다.

이러한 레이아웃 스타일은 유연성이 떨어지고, 다양한 화면 크기에 맞춰 유지하기가 어렵습니다.

절대 레이아웃 디자인은 큰 디자인의 일부로 사용되는 작은 엘리먼트에 활용하는 것이 가장 좋습니다. 예를 들어 아이콘에 절대 위치를 사용할 수 있습니다. UEFN에서 이미지 위젯의 정렬 및 패딩 세팅을 사용해 이를 설정할 수 있습니다.

An absolute layout design is usually best used in UI for small elements that are part of a larger design.

이렇게 하면 주변에 있는 다른 UI 엘리먼트의 배치와 크기에 관계없이, 아이콘이 같은 위치를 유지합니다.

상대 레이아웃

상대 레이아웃은 큰 TV 화면부터 작은 휴대폰 화면까지, 여러 화면에 맞춰 UI를 구성할 수 있으므로 다양한 플랫폼에서 플레이되는 게임에 사용하는 것이 가장 좋습니다.

패딩과 여백

패딩은 전체 UI 중에서도 엘리먼트 사이에서 작은 공간을 조정하는 데 사용됩니다. UMG에서는 개별 위젯의 패딩을 관리하기가 쉽지 않습니다. 대신 이미지와 텍스트 블록에 정렬 툴을 사용하면 패딩보다 쉽게 여백과 배치를 제어할 수 있습니다.

즉, 모든 항목을 배치한 후에 엘리먼트 사이에 약간의 여백을 추가하고 싶은 경우, 개별 위젯의 패딩 세팅을 조정하면 필요한 여백이 만들어집니다.

위젯 사이에 넓은 공간을 강제로 적용해야 하면 컨테이너 위젯과 사용자 위젯 사이에 빈 이미지나 슬롯 위젯을 사용하세요. 아래 예시에서는 이미지 위젯으로 각 사용자 위젯 사이에 여백을 만들어 각 위젯에 여유 공간을 주고 정보의 가독성을 높인 것을 볼 수 있습니다.

Force larger spaces between widgets with an Image widget.

UMG 위젯 이해하기

UMG에서는 UI를 섹션별로 디자인해야 하는데, 개별 사용자 위젯을 생성하고 레이어 단위로 작업하여 UI를 만들게 됩니다. 모든 UI 엘리먼트가 준비되면 각 섹션을 하나의 부모 사용자 위젯 아래에 레이어링합니다. 레이어로 UI를 만들면 전체 UI의 디자인과 레이아웃을 보다 정교하게 제어할 수 있습니다.

개별 사용자 위젯을 계획하고 생성하려면 먼저 팔레트 패널에서 사용할 수 있는 위젯을 숙지하고 있어야 합니다. 위젯은 크게 컨테이너 와 엘리먼트 두 가지 유형으로 나뉩니다.

컨테이너

컨테이너 는 여러 개의 사용자 위젯, 엘리먼트, 기타 컨테이너를 모아 UI 요소를 만들어냅니다. 엘리먼트 는 이미지, 머티리얼, 텍스트 등이 될 수 있습니다. 컨테이너 위젯의 크기는 가장 큰 자손 엘리먼트의 크기에 의해 결정됩니다.

컨테이너 위젯	용도	이미지
그리드(Grid)	유연한 그리드 패턴 안에 엘리먼트를 배치합니다. 자손 엘리먼트에 다음을 위한 옵션을 추가합니다. 행(Row) 행 스팬(Row Span) 열(Column) 열 스팬(Column Span) 레이어(Layer) 밀기(Nudge)
균등 그리드(Uniform Grid)	동일한 간격으로 행과 열에 자손 엘리먼트를 배치합니다. 자손 엘리먼트에 다음을 위한 옵션을 추가합니다. 행(Row) 열(Column)
오버레이(Overlay)	엘리먼트와 기타 컨테이너 위젯을 서로 겹쳐서 레이어링합니다. 오버레이 컨테이너는 자손 엘리먼트에 옵션이나 세팅을 추가하지 않습니다.
스택 박스(Stack Boxes)	엘리먼트를 가로 또는 세로 방향으로(왼쪽에서 오른쪽으로, 위에서 아래로) 배치합니다. 이 컨테이너 위젯은 혼자서 엘리먼트 여백을 만들 수 없습니다. 스택 박스에 여백을 만들고 싶다면 다른 컨테이너나 엘리먼트를 사용하세요.
크기 박스(Size Box)	자손 엘리먼트의 크기를 제한하는 파라미터를 적용합니다. 크기 박스 컨테이너는 자손 엘리먼트에 옵션이나 세팅을 추가하지 않습니다.
스케일 박스(Scale Box)	화면 크기에 맞춰 UI 스케일을 조절하는 방식을 지정합니다.
스크롤 박스(Scroll Box)	여러 엘리먼트를 담을 수 있는 스크롤 가능 박스를 생성합니다. 스크롤 박스 컨테이너는 자손 엘리먼트에 옵션이나 세팅을 추가하지 않습니다.
위젯 스위처(Widget Switcher)	여러 위젯 중에 선택해 '탭'할 수 있게 해 줍니다. 이 컨테이너 위젯에서는 한 번에 하나의 위젯만 스위처에 표시됩니다. 위젯 스위처 컨테이너는 자손 엘리먼트에 옵션이나 세팅을 추가하지 않습니다.
캔버스(Canvas)	엘리먼트를 정해진 위치에 고정합니다. 디자인 작업 마지막에 부모 컨테이너로 사용하는 것이 좋습니다. 자손 엘리먼트에 다음과 같은 옵션을 추가합니다. 앵커(Anchors) X 위치(Position X) Y 위치(Position Y) X 크기(Size X) Y 크기(Size Y) 정렬(Alignment) 콘텐츠 크기에 맞춤(Size to Content) Z 순서(ZOrder)

엘리먼트 위젯

모든 위젯의 디테일 패널에는 외형 프로퍼티가 있고, 그 아래에는 선택한 위젯에 따른 세팅이 있습니다.

자손 엘리먼트의 크기는 디테일 패널에서 설정할 수 있고, 부모 컨테이너 위젯의 프로퍼티를 상속받습니다.

엘리먼트 위젯	용도	이미지
이미지(Image)	사용자 위젯의 배경이나 전경에 텍스처(임포트한 이미지 또는 UEFN의 네이티브 텍스처) 및 머티리얼을 추가합니다.
텍스트 블록(Text Block)	사용자 위젯에 텍스트를 추가합니다. 크기, 폰트, 간격 등을 조절할 수 있습니다.
소거 버튼(Quiet Button)	백그라운드가 투명한 직사각형 버튼입니다.
일반 버튼(Regular Button)	백그라운드가 불투명한 직사각형 버튼입니다.
강조 버튼(Loud Button)	백그라운드가 노란색인 직사각형 버튼입니다.
슬라이더(Slider)	지정된 범위 안에서 증가하거나 감소하는 값 슬라이더입니다.

Verse의 위젯에 대한 자세한 내용은 위젯 타입을 참고하세요.

사용자 위젯 생성 및 레이어링하기

사용자 위젯은 여러분이 디자인한 모든 것을 포함하고 있는 UI 파일입니다. 사용자 위젯을 생성할 때에는 최대한 디자인을 구획별로 나누는 것이 좋습니다. 즉, 하나의 사용자 위젯에는 필요한 것만을 사용하여 원하는 모습의 UI 엘리먼트를 만들어야 합니다.

아래 이미지에서는 수집한 아이템 단축바의 각 컴포넌트별로 4개의 사용자 위젯을 생성했습니다. 각 사용자 위젯은 서로 다른 컴포넌트의 개별 스탯을 추적하지만 동일한 UI 디자인을 유지하고 있습니다.

User Widgets are UI files that contain everything you designed within that UI file.

개별 사용자 위젯을 디자인한 경우 하나의 부모 사용자 위젯 안에 위젯을 레이어링하여 보다 일관성 있고 정리된 수집 단축바를 만들 수 있습니다. 또한 추적기 장치가 수집 단축바에 있는 각 컴포넌트의 통계를 추적하기도 더 쉬워집니다.

클릭하면 이미지가 확대됩니다.

이런 방식으로 UI를 디자인하려면 연습이 필요합니다. 커스텀 HUD 만들기 튜토리얼과 닌자터틀 튜토리얼을 따라 여러 사용자 위젯을 각각 생성하여 커스텀 스쿼드 게임 디자인을 만드는 방법을 연습해 보세요.

레이아웃 편집하기

여러 개별 사용자 위젯을 사용해 UI를 만들면 UI 편집이 쉬워집니다. UI 디자인의 다른 부분에 영향을 미치지 않고 원하는 항목을 수정할 수 있기 때문입니다.

위의 수집 단축바 디자인을 보면 하나를 제외하고 모든 엘리먼트 라벨이 가운데 정렬되어 있습니다. 이 경우 크리에이터는 해당 엘리먼트의 사용자 위젯을 열고 라벨을 편집하기만 하면 수집 단축바의 다른 엘리먼트에 문제가 발생하지 않습니다.

인벤토리 시스템처럼 더 복잡한 디자인의 경우, 필요하지도 않은 컨테이너 위젯을 사용하게 되거나 엘리먼트 위젯을 디자인에 맞추는 데 어려움을 겪게 될 수 있습니다. UMG는 레이아웃을 쉽게 수정할 수 있도록 다음 옵션을 제공합니다.

다음으로 대체...(Replace With...)
다음으로 래핑...(Wrap With...)

위젯 대체하기

레이아웃을 무너뜨리지 않고 계층구조에서 불필요한 위젯을 대체해 보겠습니다. 불필요한 위젯을 우클릭하고 다음으로 대체... 를 선택한 뒤 대체하고 싶은 다른 위젯을 선택합니다. 대체 위젯은 모두 컨테이너 타입 위젯입니다.

자손 위젯의 옵션은 새로운 부모 컨테이너에 따라 바뀌게 됩니다.

위젯 래핑하기

전체 자손 위젯에 영향을 미치지 않으면서 레이아웃을 수정하는 한 가지 방법은 계층구조에서 다음으로 래핑... 세팅을 사용하는 것입니다. 자손 위젯을 우클릭하고 다음으로 래핑... 을 선택한 다음 드롭다운 메뉴에서 컨테이너를 선택하면, 해당 컨테이너의 프로퍼티를 활용하는 동시에 자손 위젯의 세팅은 그대로 유지할 수 있습니다.

플레이테스트하기

디자인이 완성되면 디자인을 플레이테스트합니다. UI가 다음의 조건을 충족하는지 확인해 보세요.

UI가 목적을 충실히 수행합니다. UI를 위한 UI를 만들지 마세요. UI는 유용해야 합니다.
UI가 유용하고 사용자 친화적이며, 플레이어가 게임 도중 UI의 역할을 추측해야 할 필요가 없습니다.
UI가 게임에 자연스럽게 녹아들고 게임플레이를 보완해 줍니다.
UI 엘리먼트가 게임플레이를 방해하지 않습니다.