TIP 1: Container Widgets

컨테이너 위젯은 그 안에 있는 가장 큰 것까지만 레이아웃 공간을 차지합니다.

UMG 위젯을 사용하면 일반적으로 이미지/텍스트와 같은 레이아웃 공간을 차지하는 위젯과 그리드/오버레이/가로 및 세로 상자 같은 위젯을 담는 컨테이너의 두 가지 종류의 위젯을 볼 수 있습니다. 참고 캔버스는 이상한 위젯이기 때문에 저는 일반적으로 모든 레이아웃에서 마지막까지 무시합니다. UMG에서 디자인하는 요령을 익히려면 컨테이너는 그 안에 있는 가장 큰 위젯만큼만 커진다는 점을 기억하세요.

여기서 그리드 컨테이너는 내부에서 가장 큰 것만큼만 크기 때문에 0x0 픽셀이고 아이콘이 켜지면 그리드 크기가 256x256 픽셀이 되며, 더 작은 크기의 이미지를 켜도 레이아웃이 내부에서 가장 큰 것에 따라 달라지기 때문에 여전히 256x256으로 유지됩니다. 또한 그리드 컨테이너를 더 스마트한 오버레이처럼 사용합니다. 행/열 기능을 거의 사용하지 않습니다.

작업을 하다 보면 여러 크기의 상자와 캔버스를 다른 캔버스에 중첩하는 등 레이아웃 크기를 제어하기 위해 다양한 방법을 시도하는 이상한 레이아웃을 많이 보게 됩니다. 디자이너/프로그래머가 컨테이너의 크기를 가장 큰 것으로 만들고자 하는 UMG의 핵심 욕구와 씨름하기 때문에 이러한 위젯은 깨지기 쉽고 지나치게 복잡해집니다(성능도 나쁩니다). 이는 웹 디자인이나 DIV와 매우 유사하며, DIV는 렌더링되는 화면 비율만큼만 커지거나 DIV 내부에서 공간을 차지하는 가장 큰 것만큼만 커집니다.

다음은 제가 평소에 자주 사용하는 위젯의 몇 가지 예입니다:

Container Widgets

Grid
Overlay
Horizontal Box
Vertical Box
Scale Box

Layout Space Widgets

Image
Text
Progress Bar
Button
Spacer
Size Box

이제 세로 상자와 가로 상자의 레이아웃 공간은 세로 Y축 또는 가로 X축에 있는 콘텐츠의 합이 되므로 약간 다릅니다.

여기서 세로 상자 컨테이너는 내부에 있는 모든 객체의 Y 높이의 합만큼 크기 때문에 0x0 픽셀이고 아이콘을 켜면 크기가 256x256 픽셀이 되고 더 작은 크기의 이미지를 켜면 여전히 256x256 + 128x128로 유지되므로 이제 컨테이너는 Y가 256 + 128, X가 256이 됩니다. 이제 컨테이너: 256x384

TIP 2: Negative Padding

이제 컨테이너 내부의 이미지/텍스트 크기가 2 텍스처의 파워를 어떻게 극복할 수 있을까요? 네거티브 패딩을 사용하면 레이아웃 크기를 변경하거나 조정하고 레이아웃 공간을 유지할 수 있습니다.

다음으로 풀어야 할 퍼즐은 UMG에서 2의 거듭제곱 텍스처를 사용하는 경우입니다(당연히 그래야 합니다). 이 텍스처의 히트 영역이 있는 버튼이 있는데 텍스처에 공백이 있고 가장자리와 수평이 되지 않는다고 가정해 보겠습니다. 텍스처의 빈 공간을 보정하기 위해 버튼을 네거티브 패딩하는 것이 요령입니다.

버튼으로 만든 포토샵 PNG를 그리드 컨테이너 안에 있는 버튼 위젯에 넣었더니 버튼 자체보다 훨씬 더 큰 히트 영역이 생겼습니다:

레이아웃에서 이 문제를 해결하기 위해 버튼을 네거티브 패딩하여 512x512인 2개의 버튼 텍스처의 힘을 중심으로 전체 컨테이너를 더 단단하게 만들 것입니다.

먼저 포토샵에서 히트 영역으로 픽셀 정확도를 완벽하게 유지하는 방법을 보여드리겠습니다: