Widget Reflector

개발자가 슬레이트 위젯을 식별 및 디버그할 수 있도록 해 주는 툴인 위젯 리플렉터의 개요입니다.

언리얼 에디터의 UI는 슬레이트 UI 프레임워크 기반으로 빌드되었으며, 위젯 리플렉터(Widget Reflector) 툴을 사용하면 개발자는 툴세트의 다양한 위젯을 렌더링하는 데 사용되는 슬레이트 API를 식별할 수 있습니다.

widgetreflector-topicimg.PNG

언리얼 에디터에서 실행되는 위젯 리플렉터.

위젯 리플렉터는 기본적으로 에디터에 내장되어 있으며, 프로젝트의 UI를 최적화 및 디버그하고자 하는 개발자라면 시작하기를 읽어보세요.

시작하기

에디터가 실행 중인 동안 위젯 리플렉터를 열려면 툴(Tools) > 디버그(Debug) > 위젯 리플렉터(Widget Reflector) 를 선택합니다. 또는 Ctrl+Shift+W를 누르거나 콘솔에 WidgetReflector를 입력해도 툴을 열 수 있습니다.

위젯 리플렉터는 독립형 애플리케이션으로, 에디터에서 사용할 수 있습니다.

유저 인터페이스

툴을 처음 사용하면 다음과 같은 인터페이스가 표시됩니다.

UserInterface.png

이미지를 클릭하면 최대 크기로 볼 수 있습니다.

영역

설명

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 폰트 아틀라스가 열립니다.

텍스처 아틀라스

TextureAtlas.png

폰트 아틀라스

FontAtlasVisualizer.png

창

창 옵션

사용

슬레이트 디버그 옵션(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) 에 있는 슬라이더를 사용합니다.

ApplicationScale.png

애플리케이션 스케일 조정.

플래그

DebugFlags.png

애플리케이션 스케일 조정.

애플리케이션 UI 디버깅을 시작하려면 다음 플래그(Flags) 중 하나를 설정합니다.

  • 인밸리데이션 디버깅

  • 인밸리데이션 루트 디버깅

  • 업데이트 디버깅

  • 페인트 디버깅

슬레이트 디버거 콘솔 레퍼런스

클리핑 표시

클리핑 표시(Show Clipping) 플래그는 위젯 클리핑되는 방식을 표시합니다. 예를 들어, 이 플래그는 커다란 위젯이 보다 작은 패널로 클리핑되는 경우를 파악할 때 유용합니다.

디버그 컬링

디버그 컬링(Debug Culling) 을 사용하면 개발자는 위젯이 패널 등 다른 위젯에 의해 컬링될 경우 디버그할 수 있습니다.

위젯 캐싱

InvalidationBox 캐싱 시스템은 위젯 캐싱 을 활성화하며, GlobalInvalidation 모드에서는 항상 비활성화 상태를 유지합니다.

위젯 계층구조

사용 중인 위젯에 대한 계층구조 정보를 조사하려면 페인트한 위젯 선택(Pick Painted Widgets), 히트 테스트 가능 위젯 선택(Pick Hit-Testable Widgets) 또는 위젯의 포커스 표시(Show Focus) 중 하나를 사용할 수 있습니다.

페인트한 위젯 선택

페인트한 위젯을 선택하려면 다음 단계를 수행합니다.

  1. 위젯 계층구조 영역에서 페인트한 위젯 선택(Pick Painted Widgets) 을 선택합니다.

    WidgetHierarchy_1.png

  2. 조사하고자 하는 위젯을 찾을 때까지 애플리케이션의 UI 위에서 마우스 커서를 이동합니다.

    InspectedWidget.png

  3. ESC 키를 눌러 조사할 위젯의 포커스를 유지합니다.

    WidgetReflectorInspect.png

위젯 계층구조 영역에서는 다음 프로퍼티를 조사할 수 있습니다.

프로퍼티(Property)

프로퍼티

설명

위젯 이름(Widget Name)

위젯의 이름입니다. 본인이나 UI 개발자가 위젯 이름을 올바르지 않게 설정한 경우 표시할 수 있습니다.

FG 비저빌리티(FG Visibility)

전경(Foreground, FG) 비저빌리티는 해당 전경에 위젯이 표시되어야 하는지 여부를 결정하는 데 유용합니다.

포커스?(Focus?)

위젯의 포커스 필요 여부를 결정하는 데 유용합니다.

클리핑(Clipping)

위젯의 클리핑 여부를 식별하도록 돕는 프로퍼티입니다.

소스(Source)

소스 코드 링크이자 위젯이 생성된 위치입니다. 애플리케이션이 C++ 디버거 등의 IDE에 연결되어 있는 경우, 하이퍼링크를 클릭하여 올바른 위치에서 파일을 열 수 있습니다.

주소(Address)

C++ 디버거에서 조건부 중단점을 세팅할 때 위젯의 주소를 알면 유용합니다.

히트 테스트 그리드

히트 테스트 그리드(Hit Test Grid)는 개발자가 위젯의 히트박스를 시각화 및 조사하고 싶을 때 유용합니다. 이 기능을 사용하려면 다음 단계를 수행합니다.

  1. 히트 테스트 가능 위젯 선택(Pick Hit-Testable Widgets) 을 선택합니다.

    TestHitGrid.png

  2. 히트하고자 하는 위젯 위에 마우스 커서를 올리고, ESC 키를 눌러 위젯의 포커스를 유지합니다.

히트 테스트 그리드 기능에서 사용할 수 있는 옵션뿐만 아니라 다음과 같은 플래그를 설정할 수도 있습니다.

플래그

설명

내비게이션에서 시각화(Visualize on Navigation)

이 세팅은 스냅샷을 수행할 때만 사용할 수 있으며, 히트 테스트 그리드 기능으로 위젯 리플렉터 내에서 위젯을 선택할 수 있게 합니다.

위젯 리플렉터 내비게이션 이벤트 거부(Reject Widget Reflector navigation events)

이 세팅은 히트 테스트 그리드 기능이 위젯 리플렉터에서 발생한 내비게이션 이벤트를 거부하도록 합니다.

포커스 표시

포커스를 보유한 위젯을 표시하려면 다음 단계를 수행합니다.

  1. 포커스 표시(Show Focus) 를 선택합니다.

    WidgetPickerFocus.png

  2. 마우스 커서로 위젯을 선택한 후 ESC 키를 눌러 위젯의 포커스를 유지합니다.

스냅샷 위젯 선택 툴

스냅샷 위젯 선택 툴(Snapshot Widget Picker) 은 애플리케이션 내 모든 위젯의 이미지와 현재 상태를 저장합니다. 애플리케이션 UI의 스냅샷을 찍으려면 다음 단계를 따릅니다.

  1. 위젯 계층구조 영역에서 옵션(Options) 을 클릭합니다.

  2. 내비게이션 이벤트 시뮬레이션(Navigation Event Simulation) 을 활성화합니다.

    NavigationEventSimulation.png

    이 옵션을 사용하면 개발자는 스냅샷으로 캡처한 위젯의 내비게이션 이벤트를 시뮬레이션할 수 있습니다. 또한 이 세팅은 선택사항으로, 필요할 때만 활성화해야 합니다.

  3. 스냅샷을 찍을 애플리케이션을 선택합니다.

    DesktopNavEvent.png

  4. 스냅샷 찍기(Take Snapshot) 를 클릭합니다.

    SnapshotWidget.png

이때 사용자는 스냅샷에서 히트 테스트 그리드를 사용할 수 있으며, 그 결과는 위젯 계층구조 패널에 표시됩니다. 스냅샷은 애플리케이션 UI의 상태를 저장하여 개발자가 수정해야 할 버그를 식별하도록 돕습니다. 또한 개발자는 스냅샷 영역에서 UI를 디버그하고 애플리케이션의 내비게이션 이벤트를 시뮬레이션할 수 있습니다.

스냅샷은 에디터의 PIE 모드 및 독립형 애플리케이션에서만 찍을 수 있습니다.

위젯 이벤트

위젯 이벤트(Widget Events) 시스템은 사용자가 UI를 탐색하는 동안 위젯 리플렉터의 출력 로그에 메시지를 보냅니다.

WidgetEventLog.png

언리얼 엔진 문서의 미래를 함께 만들어주세요! 더 나은 서비스를 제공할 수 있도록 문서 사용에 대한 피드백을 주세요.
설문조사에 참여해 주세요
취소