다음을 통해 공유

Windows 앱에 적합한 시각적 트리 뷰어 선택

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

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

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

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

Visual Studio - 라이브 시각적 트리

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

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

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

참고 항목

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

라이브 비주얼 트리 사용 방법

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

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

Visual Studio 앱 내 디버깅 도구 모음의 스크린샷.

앱 내 도구 모음이 표시되지 않으면 Visual Studio 메뉴 모음에서 디버그 > 옵션 > XAML 핫 다시 로드 를 선택합니다. 옵션 대화 상자에서 XAML 핫 다시 로드 사용 옵션이 선택되어 있는지 확인합니다.

XAML 핫 다시 로드 사용이 강조 표시된 Visual Studio 디버깅 옵션 대화 상자의 스크린샷

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

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

Just My Xaml 옵션이 활성화된 Visual Studio 라이브 비주얼 트리의 스크린샷.

라이브 시각적 트리의 기능

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

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

    실행 중인 애플리케이션에서 요소 선택 옵션을 사용하도록 설정된 Visual Studio Live 시각적 트리의 스크린샷.

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

    실행 중인 애플리케이션 옵션에서 디스플레이 레이아웃 표시기가 활성화된 Visual Studio Live 시각적 트리의 스크린샷.

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

    미리 보기 선택 옵션이 활성화된 Visual Studio 라이브 시각적 트리의 스크린샷.

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

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

Spy++ 사용 시기

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

참고 항목

.NET Framework 앱의 경우 Spy++가 인터셉트한 창 메시지 및 클래스는 관리 이벤트 및 속성 값과 불일치 함으로 Spy++의 유용성이 제한됩니다.

Spy++를 사용하는 방법

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

Visual Studio에서 Spy++ 시작하려면

  • Visual Studio 설치에 C++ 워크로드를 사용한 데스크톱 개발의 C++핵심 데스크톱 기능 구성 요소가 포함되어 있음을 확인합니다. (Visual Studio 2022와 함께 기본적으로 설치됩니다.) Visual Studio 설치 관리자의 스크린샷으로, C++ 카드가 선택된 상태이며 C++ 코어 데스크톱 기능 설치 상태가 강조 표시된 데스크톱 개발
  • 설치되면 도구 메뉴에서 Spy++를 사용할 수 있습니다.
  • Spy++는 Visual Studio와 독립적으로 실행되며 더 이상 필요하지 않은 경우 닫을 수 있습니다.

Visual Studio용 개발자 명령 프롬프트에서 Spy++를 시작하려면:

  • Windows 시작 메뉴에서 Visual Studio용 개발자 명령 프롬프트 를 시작 합니다. VS 2022용 개발자 명령 프롬프트가 강조 표시된 Windows 시작 메뉴의 스크린샷
  • 명령 프롬프트에서 spyxx.exe(또는 64비트 버전의 경우 spyxx_amd64.exe)를 입력하고 Enter 키를 누릅니다.

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

Spy++의 기능

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

Spy++ 애플리케이션 창의 스크린샷.

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

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

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

Windows용 Accessibility Insights - 실시간 검사

Windows용 접근성 인사이트 - Live Inspect 는 개발자가 UI 자동화를 지원하는 Windows 앱에서 접근성 문제를 찾아서 해결하는 데 도움이 되는 다운로드 가능한 Microsoft 애플리케이션입니다. 개발자는 요소 위로 마우스를 가져가거나 해당 요소에 키보드 포커스를 설정하는 것만으로 앱의 요소에 올바른 UI 자동화 속성이 있는지 확인할 수 있습니다.

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

Live Inspect는 일반적으로 Windows 앱 SDK, UWP용 WinUI 2, WPF, .NET MAUI, WinForms 또는 데스크톱용 React Native에서 WinUI를 사용하여 앱을 빌드할 때 라이브 시각적 트리, Spy++ 및 기타 도구와 함께 사용됩니다.

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

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

Accessibility Insights의 기능 - 실시간 검사

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

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

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

기본 대상 앱 옆에 있는 Accessibility Insights 도구의 스크린샷

UI 자동화에 대한 자세한 내용은 UI 자동화 개요를 참조하세요.

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

Windows용 Chromium UI DevTools

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

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

진보적 웹앱 또는 Electron 데스크톱 앱 등 Chromium 프로젝트를 개발하는 경우 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 요소를 강조 표시합니다.
  • 요소 패널을 사용하여 검색 창을 열고 이름, 태그 및 스타일 속성을 사용하여 UI 요소 트리에서 요소를 찾습니다.
  • 소스 패널을 사용하여 Chromium 코드 검색에서 클래스 헤더 파일을 열고 로컬 파일에서 코드를 끌어옵니다.

관련 콘텐츠