Common Widgets
이러한 위젯에 대한 더 자세한 설명은 학습과 이해를 돕기 위해 여러 페이지로 분할되어 있습니다:
언리얼 엔진에는 기본적으로 많이 사용되는 다양한 위젯들이 존재합니다. \
대부분(혹은 모든) UMG/Slate 기반 UI는 아래와 같은 위젯들의 조합으로 만들어집니다:
텍스트 블록(Text Block) [Leaf Widget]
정적인 텍스트를 표시하며, 런타임에 다른 텍스트 값으로 변경할 수 있습니다.
TextBlock 위젯은 커스텀 폰트(타입페이스 포함), 텍스트 크기, 자간(kerning), 외곽선 설정(텍스트 렌더링 위치 오프셋), 글자에 머티리얼 적용, 그림자 오프셋(텍스트 렌더링 위치 오프셋), 정렬 방식(좌/우/가운데 정렬) 등 다양한 커스터마이즈가 가능합니다.
리치 텍스트 블록(Rich Text Block) [Leaf Widget]
TextBlock 위젯과 유사하게 동작하지만, 하나의 텍스트 값 내에서 커스텀 이미지, 글리프, 여러 폰트 등을 동시에 사용할 수 있습니다.
이미지(Image) [Leaf Widget]
텍스처 또는 UI 도메인을 사용하는 머티리얼을 표시하는 위젯입니다.
보더(Border) [Compound Widget]
자식 위젯을 1개만 가질 수 있습니다. 자식 위젯을 이 위젯 앞에 표시하며, 기본적으로 자식이 없는 이미지 위젯과 비슷하지만 자식을 가질 수 있습니다.
버튼(Button) [Compound Widget]
자식 위젯을 1개만 가질 수 있습니다. 자식 위젯을 이 위젯 앞에 표시하며, 상호작용 및 포커스가 가능합니다. 클릭/프레스/릴리즈/호버/언호버 시 이벤트를 반환합니다. 클릭(마우스 버튼), 터치(터치 스크린), 프레스(키보드 & 게임패드) 방식을 각각 설정할 수 있습니다.
체크 박스(Check Box) [Leaf Widget]
체크 박스의 상태에 따라 특정 이미지/머티리얼을 표시합니다. 클릭하거나 특정 상태로 설정할 수 있으며, 주로 ON/OFF 상태를 표시하는 데 사용됩니다.
프로그레스 바(Progress Bar) [Leaf Widget]
0~1의 채우기 비율 값과 Bar Fill Type & Bar Fill Style을 통해 이미지/머티리얼을 표시하는 위젯입니다.
-
채우기 유형:
-
왼쪽에서 오른쪽(Left to Right): 진행 바가 왼쪽에서 오른쪽으로 채워집니다.
마스킹 버전 스케일 버전 
-
오른쪽에서 왼쪽(Right to Left): 진행 바가 오른쪽에서 왼쪽으로 채워집니다.
마스킹 버전 스케일 버전 
-
중앙에서 채우기(Fill from Center): X, Y 양쪽 방향으로 중앙에서 바깥쪽으로 선형적으로 채워집니다.
마스킹 버전 스케일 버전 
-
중앙에서 수평 채우기(Fill from Center Horizontal): X축(가로) 방향으로 중앙에서 양쪽으로 선형적으로 채워집니다.
마스킹 버전 스케일 버전 
-
중앙에서 수직 채우기(Fill from Center Vertical): Y축(세로) 방향으로 중앙에서 위아래로 선형적으로 채워집니다.
마스킹 버전 스케일 버전 
-
위에서 아래(Top to Bottom): 진행 바가 위에서 아래로 채워집니다.
마스킹 버전 스케일 버전 
-
아래에서 위(Bottom to Top): 진행 바가 아래에서 위로 채워집니다.
마스킹 버전 스케일 버전 
-
채우기 스타일(Fill Styles):
- 마스크(Mask): 진행 바의 채우기 이미지를 채우기 비율과 채우기 타입에 따라 마스킹합니다.
- 스케일(Scale): 진행 바의 채우기 이미지를 채우기 비율과 채우기 타입에 따라 스케일(늘리거나 줄임)합니다.
-
에디터블 텍스트(Editable Text) [Leaf Widget]
사용자가 한 줄의 텍스트를 입력할 수 있는 필드입니다. 힌트 텍스트, 읽기 전용, 비밀번호(입력 시 점으로 표시), 일반 텍스트 블록과 유사한 다양한 설정을 지원합니다.
에디터블 텍스트(멀티라인)(Editable Text(Multi-Line)) [Leaf Widget]
에디터블 텍스트와 동일하지만 여러 줄 입력이 가능합니다.
텍스트 박스(Text Box) [Leaf Widget]
에디터블 텍스트와 동일하지만, 텍스트 뒤에 이미지/머티리얼이 배경으로 감싸져 있습니다.
텍스트 박스(멀티라인)(Text Box(Multi-Line)) [Leaf Widget]
에디터블 텍스트(멀티라인)과 동일하지만, 텍스트 뒤에 이미지/머티리얼이 배경으로 감싸져 있습니다.
스핀 박스(Spin Box) [Leaf Widget]
숫자를 표시하며(소수점 허용 여부 설정 가능), 사용자가 직접 입력하거나 마우스로 드래그하여 값을 증감시킬 수 있습니다.
콤보 박스(문자열)(Combo Box(String)) [Leaf Widget]
드롭다운 박스로, 선택 시 문자열(텍스트가 아닌, 즉 로컬라이즈 불가)을 표시하고 옵션 목록을 보여줍니다.
인밸리데이션 박스(Invalidation Box) [Compound Widget]
자식 위젯을 1개만 가질 수 있습니다. 해당 자식 위젯의 레이아웃/지오메트리 패스의 무효화 시점을 제어하며, 성능 최적화에 매우 유용합니다.
시각적으로 보이지 않으므로 이미지 생략.
리테이너 박스(Retainer Box) [Compound Widget]
자식 위젯을 1개만 가질 수 있습니다. 자식 위젯에만 머티리얼을 적용하여, 자식이 차지하지 않는 배경에는 머티리얼이 적용되지 않습니다.
예를 들어, 텍스트 블록을 리테이너 박스로 감싸면 머티리얼이 텍스트에만 적용되고, 글자 사이 공간에는 적용되지 않습니다.
디자이너에서의 리테이너 박스 계층 구조
리테이너 박스에 적용된 머티리얼
플레이 인 에디터 시 리테이너 박스 결과
스로버(Throbber) [Leaf Widget]
이미지/머티리얼을 특정 애니메이션 패턴으로 표시합니다. 로딩 중임을 보여줄 때 유용합니다.
서큘러 스로버(Circular Throbber) [Leaf Widget]
스로버의 원형 버전으로, 이미지/머티리얼이 원을 그리며 움직입니다.
저자의 팁: “최종 제품에서는 반드시 스로버 이미지를 기본 이미지에서 변경해 주세요. 출시된 제품에서 기본 스로버 이미지를 너무 자주 봅니다. 더 멋진 이미지를 사용해 주세요! 감사합니다.”
스페이서(Spacer) [Leaf Widget]
시각적 요소 없이 다른 위젯 사이에 공간/여백을 제공합니다. UI 디자인이 자주 바뀌는 경우, 슬롯 내 패딩 대신 스페이서를 사용하는 것이 빠른 반복에 유리합니다.
백그라운드 블러(Background Blur) [Compound Widget]
자식 위젯을 1개만 가질 수 있습니다. 자식 위젯을 배경에 렌더링한 뒤, 해당 결과에 가우시안 블러를 적용합니다.
적절한 클리핑 영역과 함께 사용하는 것이 권장되며, 아티스트가 쉽게 수정할 수 있도록 커스텀 머티리얼을 사용하는 것도 좋습니다.
입력 키 선택기(Input Key Selector) [Leaf Widget]
사용자가 이 위젯에 포커스된 상태에서 입력을 누르면 해당 입력이 무엇인지 표시해주는 위젯입니다.
캔버스 패널(Canvas Panel)
새로 생성된 User Widget에서 기본적으로 포함되는 위젯으로, 자식 위젯을 임의의 위치에 배치할 수 있으며, 앵커 및 Z-Order(겹침 순서) 설정이 가능합니다.
절대 좌표 기반 레이아웃을 사용하므로, 월드 오브젝트를 따라다니는 온스크린 인디케이터 등 자유롭게 움직이는 UI에 적합합니다.
수평 박스(Horizontal Box) [Panel Widget]
자식 위젯들을 왼쪽에서 오른쪽으로 수평으로 배치합니다. 인덱스 0이 가장 왼쪽, 마지막 위젯이 가장 오른쪽에 위치합니다.
수직 박스(Vertical Box) [Panel Widget]
수평 박스와 동일하지만, 자식 위젯들을 위에서 아래로 수직으로 배치합니다. 인덱스 0이 가장 위, 마지막 위젯이 가장 아래에 위치합니다.
수직 박스와 수평 박스는 스크롤 기능이 없으므로, 스크롤이 필요하다면 스크롤 박스(Scroll Box) 위젯을 사용해야 합니다.
스크롤 박스(Scroll Box) [Panel Widget]
수직 박스 또는 수평 박스처럼 동작하지만, 스크롤이 가능합니다(방향은 수직/수평 중 선택). 가상화는 지원하지 않습니다.
사이즈 박스(Size Box) [Compound Widget]
자식 위젯을 1개만 가질 수 있습니다. 자식 위젯의 희망 크기를 지정할 수 있어, 자식 위젯이 자체적으로 희망 크기를 보고하지 않는 경우 유용합니다.
스케일 박스(Scale Box) [Compound Widget]
자식 위젯을 1개만 가질 수 있습니다. 자식 위젯을 이 박스의 할당된 영역에 맞게 스케일(크기 조정)할 수 있습니다.
오버레이(Overlay) [Panel Widget]
자식 위젯들을 인덱스 순서대로 겹쳐서(위에 쌓아서) 표시합니다. 한 위젯 위에 다른 위젯을 빠르게 오버레이할 때 매우 유용합니다.
그리드 패널(Grid Panel) [Panel Widget]
자식 위젯을 표 형태의 그리드에 자동으로 배치하며, 각 열의 너비를 유지합니다.
이 그리드는 각 열과 행 사이의 공간을 채우도록 구성되어 있습니다. 설정에 따라 다르게 보일 수 있습니다
유니폼 그리드 패널(Uniform Grid Panel) [Panel Widget]
그리드 패널과 유사하지만, 모든 자식에게 동일한 크기의 공간을 균등하게 분할합니다.
위젯 스위처(Widget Switcher) [Panel Widget]
자식 위젯 중 하나만 표시하며, 인덱스를 통해 표시할 위젯을 선택합니다. 모든 자식 위젯을 한 번에 로드/초기화/생성하므로, 메인 페이지보다는 소규모 UI에 적합합니다.
세이프 존(Safe Zone) [Compound Widget]
자식 위젯을 1개만 가질 수 있습니다. 이 위젯은 표시되는 기기에 따라 자식 위젯의 상/하/좌/우에 패딩을 자동으로 적용하여, 노치가 있는 모바일 기기, 베젤 아래에 픽셀이 숨겨진 TV, 프로젝터 등에서 UI가 잘리지 않도록 보호합니다. 예를 들어, 노치가 있는 스마트폰에서는 해당 영역만큼 패딩을 추가해 위젯이 가려지지 않도록 합니다.
PC 에디터에서 세이프 존(Safe Zone)을 시뮬레이션할 때 유용한 디버그 콘솔 명령어도 사용할 수 있습니다.
자세한 내용은Development & Debug Tools for UMG/Slate섹션의Debug Console Commands부분을 참고하세요.
이 예시에서는 캔버스 패널을 세이프 존으로 감싸 화면의 노치나 운영체제 영역 등 접근 불가한 부분을 피해 캔버스가 밀려나도록 했습니다.
