언리얼 에디터의 UI는 슬레이트 UI 프레임워크 기반으로 빌드되었으며, 위젯 리플렉터(Widget Reflector) 툴을 사용하면 개발자는 툴세트의 다양한 위젯을 렌더링하는 데 사용되는 슬레이트 API를 식별할 수 있습니다.
언리얼 에디터에서 실행되는 위젯 리플렉터.
위젯 리플렉터는 기본적으로 에디터에 내장되어 있으며, 프로젝트의 UI를 최적화 및 디버그하고자 하는 개발자라면 시작하기를 읽어보세요.
시작하기
에디터가 실행 중인 동안 위젯 리플렉터를 열려면 툴(Tools) > 디버그(Debug) > 위젯 리플렉터(Widget Reflector) 를 선택합니다. 또는 Ctrl+Shift+W를 누르거나 콘솔에 WidgetReflector를 입력해도 툴을 열 수 있습니다.
유저 인터페이스
툴을 처음 사용하면 다음과 같은 인터페이스가 표시됩니다.
이미지를 클릭하면 최대 크기로 볼 수 있습니다.
| 영역 | 설명 |
|---|---|
| 1 | 데모 모드(Demo Mode), Atlases, 창(Windows)이 있는 메인 메뉴 영역입니다. |
| 2 | 애플리케이션 스케일 및 슬레이트 디버그 옵션 영역입니다. |
| 3 | 사용자가 위젯 계층구조, 전경 비저빌리티, 포커스, 클리핑, 소스, 주소 정보를 시각화하여 확인할 수 있는 위젯 계층구조 영역입니다. 또한, 사용자는 이곳에서 언리얼 애플리케이션의 스냅샷을 찍고 로드할 수 있습니다. |
| 4 | 사용자가 스냅샷 위젯, 위젯 이벤트, 히트 테스트 그리드(Hit Test Grid)를 시각화하여 확인하고 디버그할 수 있는 탭 메뉴 영역입니다. |
| 5 | 위젯 디테일 영역입니다. |
데모 모드
| 데모 모드 옵션 | 사용 |
|---|---|
| 마우스 클릭(Mouse Click) | 이 옵션을 활성화하면 사용자가 마우스 클릭 이벤트를 시연할 수 있습니다. 프레젠테이션 시연 또는 녹화 시 커서 이벤트를 시각화하는 데 적합합니다. |
| 키(Key) | 이 옵션을 활성화하면 사용자가 키 입력 이벤트를 시연할 수 있습니다. 프레젠테이션 시연 또는 녹화 시 키 입력을 시각화하는 데 적합합니다. |
Atlases
| Atlases 옵션 | 사용 |
|---|---|
| 텍스처 아틀라스 표시(Display Texture Atlases) | 이 옵션을 선택하면 NxN 텍스처 아틀라스가 열립니다. |
| 폰트 아틀라스 표시(Display Font Atlases) | 이 옵션을 선택하면 NxN 폰트 아틀라스가 열립니다. |
텍스처 아틀라스
폰트 아틀라스
창
| 창 옵션 | 사용 |
|---|---|
| 슬레이트 디버그 옵션(Slate Debug Options) | 슬레이트 디버그 옵션을 사용하면 사용자는 애플리케이션 스케일을 조정하고, 위젯 캐싱, 인밸리데이션 디버깅, 인밸리데이션 루트 디버깅, 업데이트 디버깅, 페인트 디버깅, 클리핑 표시, 디버그 컬링 플래그를 토글할 수 있습니다. |
| 위젯 계층구조(Widget Hierarchy) | 위젯 계층구조는 위젯의 부모 및 자손과 위젯의 가시화 또는 포커스 여부를 표시합니다. 사용자는 히트 테스트 가능 위젯 선택(Pick Hit-Testable Widgets)을 통해 UMG 루트를 계층구조 필터로 활성화하고, 애플리케이션 UI의 스냅샷을 찍거나 로드하고, 가능한 경우 위젯의 슬레이트 소스 코드를 찾을 수도 있습니다. |
| 스냅샷 위젯 선택 툴(Snapshot Widget Picker) | 위젯 계층구조 영역에서 스냅샷을 찍으면 애플리케이션의 UI 스냅샷이 스냅샷 위젯 선택 툴 탭에 표시됩니다. |
| 위젯 디테일(Widget Details) | 사용 가능한 경우 추가적인 위젯 디테일이 이 영역에 나타납니다. 사용자는 다른 메뉴를 선택하여 이 영역에 도킹할 수 있습니다. |
| 위젯 이벤트(Widget Events) | 위젯 이벤트 영역에는 포커스, 입력, 내비게이션, bab, 경고 또는 마우스 캡처 이벤트 등 필터링된 이벤트가 나타납니다. |
| 히트 테스트 그리드(Hit Test Grid) | 히트 테스트 디버깅 시 내비게이션 및 이벤트 정보가 히트 테스트 그리드 탭에 나타납니다. |
애플리케이션 스케일
프레젠테이션, 스크린샷 또는 디버깅 용도로 애플리케이션의 스케일을 변경하고 싶은 경우, 새 값을 입력하거나 위젯 리플렉터의 애플리케이션 스케일(Application Scale) 에 있는 슬라이더를 사용합니다.
애플리케이션 스케일 조정.
플래그
애플리케이션 스케일 조정.
애플리케이션 UI 디버깅을 시작하려면 다음 플래그(Flags) 중 하나를 설정합니다.
- 인밸리데이션 디버깅
- 인밸리데이션 루트 디버깅
- 업데이트 디버깅
- 페인트 디버깅
클리핑 표시
클리핑 표시(Show Clipping) 플래그는 위젯 클리핑되는 방식을 표시합니다. 예를 들어, 이 플래그는 커다란 위젯이 보다 작은 패널로 클리핑되는 경우를 파악할 때 유용합니다.
디버그 컬링
디버그 컬링(Debug Culling) 을 사용하면 개발자는 위젯이 패널 등 다른 위젯에 의해 컬링될 경우 디버그할 수 있습니다.
위젯 캐싱
InvalidationBox 캐싱 시스템은 위젯 캐싱 을 활성화하며, GlobalInvalidation 모드에서는 항상 비활성화 상태를 유지합니다.
위젯 계층구조
사용 중인 위젯에 대한 계층구조 정보를 조사하려면 페인트한 위젯 선택(Pick Painted Widgets), 히트 테스트 가능 위젯 선택(Pick Hit-Testable Widgets) 또는 위젯의 포커스 표시(Show Focus) 중 하나를 사용할 수 있습니다.
페인트한 위젯 선택
페인트한 위젯을 선택하려면 다음 단계를 수행합니다.
-
위젯 계층구조 영역에서 페인트한 위젯 선택(Pick Painted Widgets) 을 선택합니다.
-
조사하고자 하는 위젯을 찾을 때까지 애플리케이션의 UI 위에서 마우스 커서를 이동합니다.
-
ESC 키를 눌러 조사할 위젯의 포커스를 유지합니다.
위젯 계층구조 영역에서는 다음 프로퍼티를 조사할 수 있습니다.
| 프로퍼티 | 설명 |
|---|---|
| 위젯 이름(Widget Name) | 위젯의 이름입니다. 본인이나 UI 개발자가 위젯 이름을 올바르지 않게 설정한 경우 표시할 수 있습니다. |
| FG 비저빌리티(FG Visibility) | 전경(Foreground, FG) 비저빌리티는 해당 전경에 위젯이 표시되어야 하는지 여부를 결정하는 데 유용합니다. |
| 포커스?(Focus?) | 위젯의 포커스 필요 여부를 결정하는 데 유용합니다. |
| 클리핑(Clipping) | 위젯의 클리핑 여부를 식별하도록 돕는 프로퍼티입니다. |
| 소스(Source) | 소스 코드 링크이자 위젯이 생성된 위치입니다. 애플리케이션이 C++ 디버거 등의 IDE에 연결되어 있는 경우, 하이퍼링크를 클릭하여 올바른 위치에서 파일을 열 수 있습니다. |
| 주소(Address) | C++ 디버거에서 조건부 중단점을 세팅할 때 위젯의 주소를 알면 유용합니다. |
히트 테스트 그리드
히트 테스트 그리드(Hit Test Grid)는 개발자가 위젯의 히트박스를 시각화 및 조사하고 싶을 때 유용합니다. 이 기능을 사용하려면 다음 단계를 수행합니다.
-
히트 테스트 가능 위젯 선택(Pick Hit-Testable Widgets) 을 선택합니다.
-
히트하고자 하는 위젯 위에 마우스 커서를 올리고, ESC 키를 눌러 위젯의 포커스를 유지합니다.
히트 테스트 그리드 기능에서 사용할 수 있는 옵션뿐만 아니라 다음과 같은 플래그를 설정할 수도 있습니다.
| 플래그 | 설명 |
|---|---|
| 내비게이션에서 시각화(Visualize on Navigation) | 이 세팅은 스냅샷을 수행할 때만 사용할 수 있으며, 히트 테스트 그리드 기능으로 위젯 리플렉터 내에서 위젯을 선택할 수 있게 합니다. |
| 위젯 리플렉터 내비게이션 이벤트 거부(Reject Widget Reflector navigation events) | 이 세팅은 히트 테스트 그리드 기능이 위젯 리플렉터에서 발생한 내비게이션 이벤트를 거부하도록 합니다. |
포커스 표시
포커스를 보유한 위젯을 표시하려면 다음 단계를 수행합니다.
-
포커스 표시(Show Focus) 를 선택합니다.
-
마우스 커서로 위젯을 선택한 후 ESC 키를 눌러 위젯의 포커스를 유지합니다.
스냅샷 위젯 선택 툴
스냅샷 위젯 선택 툴(Snapshot Widget Picker) 은 애플리케이션 내 모든 위젯의 이미지와 현재 상태를 저장합니다. 애플리케이션 UI의 스냅샷을 찍으려면 다음 단계를 따릅니다.
-
위젯 계층구조 영역에서 옵션(Options) 을 클릭합니다.
-
내비게이션 이벤트 시뮬레이션(Navigation Event Simulation) 을 활성화합니다.
이 옵션을 사용하면 개발자는 스냅샷으로 캡처한 위젯의 내비게이션 이벤트를 시뮬레이션할 수 있습니다. 또한 이 세팅은 선택사항으로, 필요할 때만 활성화해야 합니다. -
스냅샷을 찍을 애플리케이션을 선택합니다.
-
스냅샷 찍기(Take Snapshot) 를 클릭합니다.
이때 사용자는 스냅샷에서 히트 테스트 그리드를 사용할 수 있으며, 그 결과는 위젯 계층구조 패널에 표시됩니다. 스냅샷은 애플리케이션 UI의 상태를 저장하여 개발자가 수정해야 할 버그를 식별하도록 돕습니다. 또한 개발자는 스냅샷 영역에서 UI를 디버그하고 애플리케이션의 내비게이션 이벤트를 시뮬레이션할 수 있습니다.
위젯 이벤트
위젯 이벤트(Widget Events) 시스템은 사용자가 UI를 탐색하는 동안 위젯 리플렉터의 출력 로그에 메시지를 보냅니다.
