언리얼에서 화면에 어떻게 배치할지를 정하는 기능
슬롯(Slot)에 대해서 살펴볼 건데요.
이를 제대로 사용하려면 패널 위젯(Panel Widget)의 특성을 이해하실 필요가 있습니다.
그래야 원하는 배치를 만들 수 있기 때문입니다.
그럼 지금부터 시작해 보겠습니다.
1. 위젯에 올 수 있는 자식의 수는?
일단 먼저 위젯을 좀 살펴보겠습니다.
위젯에 마우스를 올려 놓으면 해당 위젯의 설명과 함께
Single Child , Many Children , No Children 를 보실 수 있는데요,
여기서 자식(Child)이란 하이어라키에서 하위 요소로 올 수 있는 위젯의 수를 의미합니다.
아무것도 올 수 없거나(No Children), 1개만 올 수 있거나(Single), 다수(many)를 집어넣을 수도 있습니다.
(위 이미지에서는 Canvas Panel의 자식, Button_28이 배치된 상태.)
사용 전에 올 수 있는 자식 요소의 수를 파악하여
하위에 어떤 자식 위젯이 배치되어야 할지를 정해야 합니다.
2. 패널 위젯
인트로에도 설명 드렸둣이 슬롯은 각 위젯마다 탑재되었다고 했는데
이 기능만 특별하게 다루는 패널 위젯이 따로 존재합니다.
바로 패널 위젯입니다. 패널 위젯별로 조금씩 차이가 있는데
하나씩 다뤄보겠습니다.
2-1) 캔버스 패널(Canvas Panel)
캔버스 패널은 디자이너 친화적인 패널로, 임의의 위치에 배치하고,고정시키며, 캔버스의 자식 요소를 포함하여 Z축의 순서를 지정할 수 있다. 수동 레이아웃을 표시하는 훌륭한 위젯이지만, (만약 앱솔루트 레이아웃을 사용하지 않는다면) 절차적 위젯 생성과 컨테이너 안에 배치할 때에는 나쁨.
- 다수의 자식 요소가 위치함.
- 앱솔루트 레이아웃
- 앵커(Anchor) 사용
2-2) 오버레이(Overlay)
위젯을 쌓을 수 있도록 허용하며, 각 레이어의 콘텐츠를 위해 간단한 흐름 레이아웃을 사용합니다.
2-3) 그리드 패널(Grid Panel) & 유니폼 그리드 패널(Uniform Grid Panel)
- - 그리드 패널(Grid panel)
A Table-like panel that retains the width of every column throughout the table.
테이블 처럼 사용하는 패널로, 표 전체에 걸쳐 모든 열의 너비를 유지합니다.
- - 유니폼 그리드 패널(Unifrom Grid panel)
2-4) 수평 박스(Horizontal Box) & 수직 박스(Vertical Box)
- 수평 박스(Horizontal box)
위젯이 수평으로 흐르도록 배치합니다.
- 다수의 자식 요소
- 수평 흐름
- 수직 박스(Vertical Box)
수직 박스 위젯은 자식 위젯들이 자동적으로 수직으로 배치되도록 허용하는 레이아웃 패널입니다.
2-5) 랩 박스(Wrap Box)
방향에 따라 위젯을 왼쪽에서 오른쪽으로 또는 위에서 아래로 배열합니다. 만약 위젯이 WrapSize를 초과하면 다음 줄에 배치합니다.
- 다수의 자식(Many Children)
- 흐름 있음(Flows)
- 줄 바꿈(Wrap)
2-6) 사이즈 박스(Size Box) & 스케일 박스(Scale Box)
- 사이즈 박스(Size box)
크기를 구체화하도록 하는 위젯으로, 사용자가 지정한 크기와 원하는 크기를 알립니다. 하지만 모든 위젯이 원하는 크기를 보고하지 않을 수 있습니다. SizeBox에 감싸면 SizeBox가 특정 크기로 강제로 설정하도록 할 수 있습니다.
자식 하나만 위치함.
고정된 크기
- 스케일 박스(Scale box)
원하는 크기로 콘텐츠를 배치하고 이 상자의 할당된 영역에 대한 제한을 충족시키기 위해 크기를 조정할 수 있는 기능을 제공합니다. 배경 이미지를 영역에 맞게 확대/축소하여 채우지만 다른 종횡비에서 왜곡되지 않도록 하는 경우, 또는 일부 텍스트를 자동으로 영역에 맞게 조정해야 하는 경우, 이 컨트롤이 필요합니다.
2-8) 위젯 스위처(Widget Switcher)
탭 컨트롤과 비슷하지만 탭이 없습니다. 한번에 하나의 위젯만 표시됩니다.
2-9) 스크롤 박스(Scroll Box)
An arbitrary scrollable collection of widgets. Great for presenting 10-100widgets in a list. Doesn't support vitualization.
임의로 스크롤할 수 있는 위젯 컬렉션입니다. 10에서 100개의 위젯을 목록으로 나타내기에 좋습니다. 가상화를 지원하지 않습니다.
2-10) 세이프 존(Safe Zone)
Safe-Zone 위젯은 다양한 비 PC 플랫폼에서 실행될 수 있는 게임 UI 개발의 필수적인 부분입니다.
현대 평면 패널 컴퓨터 모니터는 오버스캔 문제를 가지고 있지 않을 수도 있지만, 콘솔에서는 이것이 흔한 일입니다.
TV에서는 베젤 아래에 추가적인 픽셀이 있을 수 있으며, 프로젝터와 투사 TV에서는 투사 스크린의 검은 테두리 뒤나 대각선에 수직 및 수평 여러 열의 픽셀이 숨겨져 있을 수 있습니다.
PC에서 Safe Zone을 시뮬레이션하기 위한 유용한 테스트 콘솔 명령어는 다음과 같습니다.
r.DebugSafeZone.TitleRatio 0.96
r.DebugActionZone.ActionRatio 0.96
안전 영역을 시각화하기 위해 빨간색 밴드를 사용하려면 다음 콘솔 명령어를 사용하세요.
r.debugSafeZone.Mode는 디버그 시각화 오버레이를 제어합니다(0..2, 기본값 0).
0: 안전 영역 오버레이를 표시하지 않습니다.
1: 타이틀 안전 영역의 오버레이를 표시합니다.
2: 액션 안전 영역의 오버레이를 표시합니다.
3. 이름 있는 슬롯(Named Slot)
사용자 위젯에 대한 외부 슬롯을 노출하도록 허용합니다. 다른 사용자가 사용자 컨트롤을 재사용할 때, 이러한 이름이 지정된 슬롯에 원하는 내용을 넣을 수 있습니다.
추후 이 파트는 따로 예제가 작성될 예정입니다.
재사용성을 강화하는 수단으로 사용이 가능합니다.
4. 스페이서(Spacer)
시각적 표현이 없는 스페이서 위젯으로, 다른 위젯 간의 간격을 제공합니다.
자식이 올 수 없습니다.
이렇게 각각의 패널 위젯들에 대해서 알아봤습니다.
다음 시간에는 이 UI를 가지고 어떤 식으로 하이어라키를 구성해야 할지 알아보겠습니다.
'Unreal5로 UI만들어보기 > 1) UMG 사용하기' 카테고리의 다른 글
| UMG 5편 : 버튼 이벤트에 기능 텍스트 출력 기능 부여하기 (0) | 2023.05.08 |
|---|---|
| UMG 4편 : 버튼 위젯 사용하기 (0) | 2023.04.27 |
| UMG 3편 : 이미지 위젯 사용하기 (0) | 2023.04.26 |
| UMG 2편 : 텍스트 사용하기 (0) | 2023.04.25 |
| UMG(Unreal Motion Graphics) 1편 사용과 간단 출력해보기 (0) | 2023.04.24 |
