Windows 앱에 올바른 비주얼 트리 뷰어 선택

UI 시각화 도우미라고도 하는 시각적 트리 뷰어는 런타임에 Windows app UI 구성 요소를 검사하고 상호 작용하는 데 사용되는 도구입니다.

이는 구성 요소 계층 구조 보기 및 트래버스, 구성 요소 강조 표시, 상태 가져오기 및 설정, 연결된 코드에 대한 딥 링크와 같은 기능을 통해 UI 문제를 프로토타입화하고, 사용자 환경을 개선하고, 디버깅하는 데 유용할 수 있습니다.

권장 도구

다음 표에서는 지원하는 여러 UI 시각화 도구와 UI 프레임워크 및 Windows app 플랫폼을 식별합니다. 각 도구의 요약은 테이블 뒤에 있습니다.

UI 플랫폼/프레임워크	Visual Studio - 라이브 시각적 트리	Spy++	접근성 인사이트	Chromium UI DevTools
WinUI의 Windows App SDK	Supported	지원되지 않음	Supported	지원되지 않음
WPF	Supported	지원되지 않음	Supported	지원되지 않음
데스크톱용 React Native	Supported	지원되지 않음	Supported	Supported
.NET MAUI	Supported	지원되지 않음	Supported	지원되지 않음
윈폼	Supported	Supported	Supported	지원되지 않음
UWP용 WinUI for UWP	Supported	지원되지 않음	Supported	지원되지 않음
클래식 Visual Basic 앱	지원되지 않음	Supported	지원되지 않음	지원되지 않음
클래식 Win32 앱	지원되지 않음	Supported	지원되지 않음	지원되지 않음
Chromium 기반 앱	지원되지 않음	지원되지 않음	지원되지 않음	Supported

Visual Studio - 라이브 시각적 트리

라이브 시각적 트리 및 라이브 속성 탐색기 기능은 Visual Studio 함께 제공되고 앱의 UI 요소에 대한 대화형 런타임 보기를 제공하기 위해 함께 작동합니다.

라이브 시각적 트리를 사용하는 경우

WinUI 3, Windows App SDK, UWP용 WinUI, UWP, WPF, .NET MAUI, WinForms 또는 데스크톱용 React Native를 사용하여 앱을 빌드할 때 이러한 도구를 사용합니다.

• Windows App SDK WinUI, UWP용 WinUI 및 WPF 대한 자세한 내용은 디버깅하는 동안 XAML 속성 검색 참조하세요.
• .NET MAUI에 대한 자세한 내용은 .NET MAUI 앱의 시각적 트리를 확인 참조하세요.

비고

WPF 트리 시각화 도우미는 레거시 기능이며 현재 개발 중이 아닙니다. WPF 트리 시각화 도우미를 사용하여 WPF 개체의 시각적 트리를 탐색하고 해당 트리에 포함된 개체에 대한 WPF 종속성 속성을 볼 수 있습니다.

라이브 시각적 트리를 사용하는 방법

라이브 시각적 트리를 보려면 XAML Hot Reload를 사용하도록 설정해야 합니다(이 기능은 기본적으로 Visual Studio 2019 이상에서 사용하도록 설정됨).

XAML Hot Reload 사용하도록 설정되어 있는지 확인하려면 연결된 Visual Studio 디버거(F5 또는 Debug -> 디버깅 시작)으로 앱을 실행합니다. 앱이 시작되면 다음 이미지와 같이 XAML Hot Reload 사용할 수 있음을 확인하는 앱 내 도구 모음이 표시됩니다.

Visual Studio 애플리케이션 내 디버깅 도구 모음의 스크린샷.

앱 내 도구 모음이 보이지 않으면 Visual Studio 메뉴 모음에서 디버그 > 옵션 > XAML Hot Reload을 선택합니다. Options 대화 상자에서 Enable XAML Hot Reload 옵션이 선택되어 있는지 확인합니다.

디버그 구성에서 앱이 실행되고 나면(디버거가 연결된) Visual Studio 메뉴 모음(Debug > Windows > Live Visual Tree)으로 이동합니다. 그러면 XAML 코드의 실시간 보기가 있는 라이브 시각적 트리 창이 열립니다.

기본적으로 라이브 시각적 트리에 대한 내 XAML만 옵션이 선택됩니다. 이렇게 하면 앱에서 XAML 요소 컬렉션의 간소화된 보기를 제공하고 다음 이미지와 같이 내 XAML만 표시 단추를 통해 설정 또는 해제할 수 있습니다.

라이브 시각적 트리의 기능

라이브 시각적 트리 도구 모음은 런타임에 애플리케이션의 UI를 통해 검사할 요소를 선택하는 몇 가지 옵션을 제공합니다.

• 실행 중인 애플리케이션에서 요소를 선택합니다. 이 모드가 켜지면 애플리케이션에서 UI 요소를 선택하면 라이브 시각적 트리가 자동으로 업데이트되어 노드가 표시되고 해당 요소에 해당하는 트리의 속성이 표시됩니다.

  Visual Studio Live Visual Tree의 스크린샷, 실행 중인 애플리케이션에서 요소 선택 옵션이 사용됨.

• 실행 중인 애플리케이션에서 레이아웃 장식자 표시 이 모드를 설정하면 응용 프로그램 창에 선택한 개체의 경계를 따라 가로 및 세로 선이 표시되고 여백이 윤곽선으로 표시된 사각형이 표시됩니다.

  

• 미리 보기 선택. 이 모드가 켜져 있으면, Visual Studio는 (애플리케이션 소스 코드에 대한 액세스 권한이 있는 경우) 요소가 선언된 XAML을 표시합니다.

  

Spy++ (스파이 플러스 플러스)

Spy++(SPYXX.EXE)는 Visual Studio 함께 제공되고 시스템 프로세스, 스레드, 창 및 창 메시지의 그래픽 보기를 제공하는 Win32 기반 유틸리티입니다.

Spy++를 사용하는 경우

클래식 Win32 애플리케이션을 빌드하거나 Win32 API를 사용하여 WinForms 및 Classic Visual Basic 앱 같은 UI 요소를 그리는 애플리케이션을 빌드할 때 Spy++를 사용합니다.

비고

.NET 프레임워크 앱의 경우 Spy++에서 가로채는 창 메시지와 클래스가 관리되는 이벤트 및 속성 값에 해당하지 않으므로 Spy++는 유용성이 제한적입니다.

Spy++를 사용하는 방법

spy++는 Visual Studio 또는 Visual Studio의 개발자 명령 프롬프트에서 시작할 수 있습니다.

Visual Studio Spy++를 시작하려면 다음을 수행합니다.

• Visual Studio 설치에 C++ 핵심 데스크톱 기능 구성 요소가 C++를 사용한 데스크톱 개발 워크로드에 포함되어 있는지 확인합니다. 기본적으로 Visual Studio 2022와 함께 설치됩니다.
• 설치되면 도구 메뉴에서 Spy++를 사용할 수 있습니다.
• Spy++는 더 이상 필요하지 않은 경우 닫을 수 있는 Visual Studio 독립적으로 실행됩니다.

Visual Studio 대한 개발자 명령 프롬프트에서 Spy++를 시작하려면 다음을 수행합니다.

• Windows 시작 메뉴에서 Visual Studio용 Developer Command Prompt를 실행합니다.
• 명령 프롬프트에서 spyxx.exe(또는 64비트 버전의 spyxx_amd64.exe)를 입력하고 Enter 키를 누릅니다.

Visual Studio Spy++를 사용하는 방법에 대한 자세한 내용은 Spy++ 도구 모음 참조하세요.

Spy++의 기능

Spy++는 시스템 개체 간의 관계 그래픽 트리를 표시하며, 현재 데스크톱 창은 트리 맨 위에 있고 자식 노드는 표준 창 계층 구조에 따라 나열된 다른 모든 창을 나타냅니다. Visual C++ 디버거를 통해 사용할 수 없는 애플리케이션의 동작에 대한 유용한 인사이트를 제공할 수 있습니다.

Spy++를 사용하면 다음을 수행할 수 있습니다.

• 특정 창, 스레드, 프로세스 또는 메시지를 검색합니다.
• 선택한 스레드 프로세스 또는 메시지의 속성을 봅니다.
• 트리 뷰에서 창, 스레드, 프로세스 또는 메시지를 직접 선택합니다.
• 찾기 도구를 사용하여 마우스 포인터를 사용하여 창을 선택합니다(검색 -> 창 찾기).
• 복잡한 메시지 로그 선택 매개 변수를 사용하여 메시지 옵션을 설정합니다.

Spy++ 설명서는 Spy++ 도움말을 참조하세요.

Windows용 접근성 인사이트 - 실시간 검사

Windows용 Accessibility Insights - 실시간 검사는 UI Automation을 지원하는 Windows 앱에서 접근성 문제를 찾고 수정할 수 있도록 도와주는 Microsoft의 다운로드 가능한 애플리케이션입니다. 개발자는 단순히 요소를 마우스로 가리키거나 키보드 포커스를 설정하여 앱의 요소에 올바른 UI Automation 속성이 있는지 확인할 수 있습니다.

접근성 인사이트를 사용하는 경우 - 실시간 검사

Live Inspect는 일반적으로 WinUI에서 Windows App SDK, UWP용 WinUI, UWP를 사용하여 앱을 빌드할 때 Live Visual Tree, Spy++ 및 기타 도구와 함께 사용됩니다. 또한 WPF, .NET MAUI, WinForms 및 React Native for Desktop와 함께 사용할 수 있습니다.

Accessibility Insights를 사용하는 방법 - 실시간 검사

Accessibility Insights를 다운로드하고 Accessibility Insights에서 설치해야 합니다.

접근성 인사이트의 기능 - 실시간 검사

Live Inspect는 선택한 요소에 해당하는 UI Automation 속성 및 패턴을 포함하는 세부 정보 창이 있는 시스템 개체 간의 관계 그래픽 트리를 표시합니다. 현재 바탕 화면 창은 표준 창 계층 구조에 따라 나열된 다른 모든 창을 나타내는 트리 및 자식 노드의 맨 위에 표시됩니다.

Live Inspect를 사용하면 다음을 수행할 수 있습니다.

• 요소 위에 마우스를 놓거나 키보드 포커스를 설정하기만 하면 앱의 요소에 올바른 UI Automation 속성이 있는지 확인합니다.
• 대상 애플리케이션의 요소를 시각적으로 강조 표시합니다.
• 수많은 접근성 규칙 및 지침을 준수하는지 수동 또는 자동화된 검사로 컨트롤 또는 패턴을 테스트합니다.

UI Automation 대한 자세한 내용은 UI Automation 개요 참조하세요.

Accessibility Insights에 대한 자세한 내용은 Windows용 Accessibility Insights를 참조하세요.

Windows용 Chromium UI DevTools

Windows용 Chromium UI DevTools 는 프런트 엔드 DevTools 검사기를 사용하여 웹 페이지와 같은 UI 시스템을 검사할 수 있는 Google 도구입니다.

Windows용 Chromium UI DevTools를 사용하는 경우

Chromium 프로젝트를 개발할 때, 점진적 웹 애플리케이션이나 Electron 데스크톱 앱을 포함하여 Chrome UI DevTools를 사용하세요. Electron에 대한 자세한 내용은 GitHub DevTools 확장 참조하세요.

Windows용 Chromium UI DevTools를 사용하는 방법

Windows용 Chromium UI DevTools 코드베이스는 GitHub 다운로드하고 Visual Studio 사용하여 빌드해야 합니다. 자세한 내용은 UI DevTools 개요를 참조하세요.

Windows용 Chromium UI DevTools의 기능

Windows용 Chromium UI DevTools는 웹 페이지 프런트 엔드를 사용하여 보기, 창 및 기타 UI 요소를 표시하고 트래버스합니다.

Windows용 Chromium UI DevTools를 사용하면 다음을 수행할 수 있습니다.

• 계층적 UI 요소 트리를 사용하여 UI 요소 및 해당 속성을 검사합니다.
• 검사 모드를 사용하면, 마우스로 UI 요소를 가리킬 때 해당 요소가 강조 표시되며 UI 요소 트리에서 요소의 노드가 표시됩니다.
• 요소 패널을 사용하여 검색 창을 열고 이름, 태그 및 스타일 속성을 사용하여 UI 요소 트리에서 요소를 찾습니다.
• 소스 패널을 사용하여 Chromium 코드 검색에서 클래스 헤더 파일을 열고 로컬 파일에서 코드를 끌어옵니다.

관련 콘텐츠