Android 스튜디오의 Layout Inspector를 사용하면 뷰 계층 구조를 표시하고 각 뷰의 속성을 검사하여 앱의 레이아웃을 디버그할 수 있습니다. Layout Inspector를 사용하면 앱 레이아웃을 디자인 모형과 비교하고 앱의 확대 뷰 또는 3D 뷰를 표시하며 런타임에 앱 레이아웃의 세부정보를 검토할 수 있습니다. 레이아웃이 완전히 XML로 빌드된 것이 아니라 런타임에 빌드되어 예상치 못한 방식으로 작동하는 경우 특히 유용합니다.
레이아웃 검사를 사용하면 여러 기기와 디스플레이 구성(예: 다양한 글꼴 크기나 사용자 언어)에서 레이아웃을 동시에 미리 볼 수 있어 여러 가지 일반적인 레이아웃 문제를 쉽게 테스트할 수 있습니다.
Layout Inspector를 열려면 연결된 기기나 에뮬레이터에서 앱을 실행한 다음 Tools > Layout Inspector를 선택합니다.
그림 1. Sunflower 샘플 앱의 Layout Inspector 스냅샷. Layout Inspector는 Component Tree, Layout Display, Attributes를 표시합니다(왼쪽에서 오른쪽 방향).
- Component Tree: 레이아웃에 있는 뷰의 계층 구조입니다.
- Layout Display: 기기 또는 에뮬레이터에 표시되는 앱의 레이아웃을 렌더링하며 각 뷰에 레이아웃 경계가 표시됩니다.
- Attributes: 선택한 뷰의 레이아웃 속성입니다. Layout Inspector에서는 속성에 액세스하려면 활동을 다시 시작해야 합니다. 자세한 내용은 활동 다시 시작을 참고하세요.
Layout Editor에 관한 자세한 내용은 Layout Editor 소개를 참고하세요.
실시간 업데이트
Layout Display는 기기 또는 에뮬레이터에 표시되는 앱의 레이아웃을 렌더링하며 각 뷰에 레이아웃 경계가 표시됩니다. 각 구성요소를 클릭하여 검사할 수 있습니다.
Live Layout Inspector를 사용하면 앱의 UI가 API 수준 29 이상을 실행하는 기기나 에뮬레이터에 배포되는 동안 UI에 관한 포괄적이고 유용한 정보를 실시간으로 확인할 수 있습니다.
Live Layout Inspector를 사용 설정하려면 Layout Inspector 툴바에서 Live Updates
옵션을 선택합니다.
Live Layout Inspector에는 동적 레이아웃 계층 구조가 포함되어 있으므로 기기의 뷰가 변경될 때 Component Tree와 Layout Display가 업데이트됩니다.
뷰 선택 또는 격리
일반적으로 뷰는 사용자가 보고 상호작용할 수 있는 것을 그립니다. Component Tree는 각 뷰 구성요소와 함께 앱의 계층 구조를 실시간으로 표시하므로 개발자가 앱 내부의 요소와 이와 연결된 값을 시각화할 수 있어 앱의 레이아웃을 디버그할 수 있습니다.
뷰를 선택하려면 Component Tree 또는 Layout Display에서 뷰를 클릭합니다. 선택한 뷰의 모든 레이아웃 속성이 Attributes 패널에 표시됩니다.
레이아웃에 겹치는 뷰가 포함되어 있으면 Component Tree에서 클릭하거나 레이아웃을 회전하여 뒤에 있는 뷰를 선택할 수 있습니다.
복잡한 레이아웃을 사용하려면 레이아웃의 하위 집합만 Component Tree에 표시되고 Layout Display에 렌더링되도록 개별 뷰를 격리하면 됩니다.
그림 2. 뷰를 격리하려면 Component Tree에서 뷰를 마우스 오른쪽 버튼으로 클릭하고 Show Only Subtree 또는 Show Only Parents를 선택합니다.
전체 뷰로 돌아가려면 뷰를 마우스 오른쪽 버튼으로 클릭하고 Show All을 선택합니다.
레이아웃 테두리 및 뷰 라벨 숨기기
레이아웃 요소의 경계 상자나 뷰 라벨을 숨기려면 Layout Display 상단에서 View Options 
를 클릭하고 Show Borders 또는 Show View Label을 전환합니다.
그림 3. 레이아웃 테두리와 뷰 라벨을 숨기려면 Layout Inspector 툴바에서 두 번째 View Options를 클릭합니다.
3D 모드
Layout Display에는 런타임 시 앱의 뷰 계층 구조를 보여주는 고급 3D 시각화 기능이 있습니다. 이 기능을 사용하려면 Live Layout Inspector 창에서 3D Mode 버튼 
을 클릭하고 마우스를 드래그하여 회전합니다.
그림 4. 회전한 레이아웃 3D 뷰
그림 5. 레이아웃의 레이어를 확장하거나 축소하려면 Layer Spacing 슬라이더를 사용하세요.
앱 레이아웃을 참조 이미지 오버레이와 비교하기
앱 레이아웃을 UI 모형과 같은 참조 이미지와 비교해 보려면 Layout Inspector에서 비트맵 이미지 오버레이를 로드하면 됩니다.
- 오버레이를 로드하려면 Layout Inspector 툴바에서 Load Overlay
옵션을 선택합니다. 오버레이는 레이아웃에 맞게 조정됩니다. - 오버레이의 투명도를 조정하려면 Overlay Alpha 슬라이더를 사용합니다.
- 오버레이를 삭제하려면 Clear Overlay
를 클릭합니다.
레이아웃 검사
레이아웃 검사는 다양한 기기 및 디스플레이 구성의 레이아웃을 동시에 미리 볼 수 있는 시각적 도구로, 프로세스 초기에 레이아웃의 문제를 포착할 수 있습니다. 이 기능에 액세스하려면 IDE 창의 오른쪽 상단에 있는 Layout Validation 탭을 클릭합니다.
그림 6. 레이아웃 검사 탭
사용 가능한 구성 집합 간에 전환하려면 레이아웃 검사 창의 상단에 있는 Reference Devices 드롭다운 메뉴에서 다음 중 하나를 선택합니다.
- Reference Devices
- Custom
- Color Blind
- Font Sizes
그림 7. 참조 기기 드롭다운 메뉴 옵션
Reference Devices
참조 기기는 테스트 시 권장하는 비교 대상 기기입니다. 참조 기기에는 스마트폰, 폴더블, 태블릿, 데스크톱 인터페이스가 포함됩니다. 이 참조 기기 세트에서 레이아웃이 어떻게 표시되는지 미리 보아야 합니다.
그림 8. 레이아웃 검사 도구의 참조 기기 미리보기
Custom
미리 볼 디스플레이 구성을 맞춤설정하려면 언어, 기기, 화면 방향 등 다양한 설정 중에서 선택합니다.
그림 9. 레이아웃 검사 도구의 맞춤 디스플레이 구성
Color Blind
색맹인 사용자가 앱을 더 쉽게 사용할 수 있도록 하려면 일반적인 유형의 색맹 시뮬레이션으로 레이아웃을 검사합니다.
그림 10. 레이아웃 검사 도구의 색맹 시뮬레이션 미리보기
Font Sizes
다양한 글꼴 크기로 레이아웃을 검사하고, 큰 글꼴로 레이아웃을 테스트하여 시각장애인 사용자를 위한 앱의 접근성을 개선합니다.
그림 11. 레이아웃 검사 도구의 다양한 글꼴 크기 미리보기
레이아웃 계층 구조 스냅샷 캡처
Layout Inspector를 사용하면 실행 중인 앱의 레이아웃 계층 구조의 스냅샷을 저장할 수 있으므로 스냅샷을 다른 사람과 손쉽게 공유하거나 나중에 참조할 수 있습니다.
스냅샷은 Layout Inspector를 사용할 때 일반적으로 표시되는 데이터(레이아웃의 세부 3D 렌더링을 비롯해 View 레이아웃, Compose 레이아웃 또는 하이브리드 레이아웃의 구성요소 트리 및 각 UI 구성요소의 세부 속성 포함)를 캡처합니다. 스냅샷을 저장하려면 다음을 수행합니다.
- Layout Inspector를 엽니다.
- Layout Inspector가 앱 프로세스에 자동으로 연결됩니다. 자동으로 연결되지 않으면 드롭다운 메뉴에서 앱 프로세스를 선택합니다.
- 스냅샷을 캡처하려면 Layout Inspector 툴바에서 Export snapshot
을 클릭합니다. - 표시되는 시스템 대화상자에서 스냅샷을 저장할 이름과 위치를 지정합니다.
*.li확장자로 파일을 저장해야 합니다.
그러면 기본 메뉴 바에서 File > Open을 선택하고 *.li 파일을 열어 Layout Inspector 스냅샷을 로드할 수 있습니다.
그림 12. Layout Inspector에서 스냅샷 생성
Compose 검사
Layout Inspector를 사용하면 에뮬레이터나 실제 기기에서 실행 중인 앱 내의 Compose 레이아웃을 검사할 수 있습니다. Layout Inspector를 사용하여 컴포저블이 얼마나 자주 재구성되는지 또는 건너뛰는지 확인할 수 있습니다. 이를 통해 앱의 문제를 식별할 수 있습니다. 예를 들어 일부 코딩 오류로 인해 UI가 과도하게 재구성될 수 있으며 이는 성능 저하를 야기할 수 있습니다. 일부 코딩 오류로 인해 UI가 재구성되지 않을 수 있습니다. 따라서 UI 변경사항이 화면에 표시되지 않습니다.
Layout Inspector의 Compose 재구성 횟수
Compose 레이아웃을 디버깅할 때는 컴포저블이 재구성되는 시점을 아는 것이 UI가 올바르게 구현되었는지 이해하는 데 중요합니다. 예를 들어 너무 많이 재구성되는 경우 앱이 필요한 것보다 더 많은 작업을 실행하고 있을 수 있습니다. 반면에 예상대로 재구성되지 않는 구성요소는 예기치 않은 동작을 유발할 수 있습니다.
Layout Inspector를 사용하면 레이아웃 계층 구조의 개별 컴포저블이 재구성되거나 건너뛴 시점을 확인할 수 있습니다. 이 정보는 개발자가 앱과 상호작용하는 동안 실시간으로 표시됩니다.
시작하려면 앱에서 API 수준 29 이상과 Compose 1.2.0-alpha03 이상을 사용하고 있는지 확인하세요. 그런 다음 평소처럼 앱을 배포합니다.
그림 13. Layout Inspector의 컴포지션 및 건너뛰기 카운터
Layout Inspector 창을 열고 앱 프로세스에 연결합니다. Component Tree에는 레이아웃 계층 구조 옆에 표시되는 열이 두 개 있습니다. 첫 번째 열에는 각 노드의 컴포지션 수가 표시되고 두 번째 열에는 각 노드의 건너뛰기 수가 표시됩니다. 컴포저블 노드를 선택하면 컴포저블의 크기와 매개변수가 표시됩니다. 단, 인라인 함수가 아닌 경우 매개변수를 표시할 수 없습니다. Component Tree 또는 Layout Display에서 컴포저블을 선택하면 Attributes 창에서도 비슷한 정보를 확인할 수 있습니다.
개수를 재설정하면 앱과의 특정 상호작용 중에 재구성이나 건너뛰기를 이해하는 데 도움이 됩니다. 개수를 재설정하려면 Component Tree 창 상단의 Reset을 클릭하세요.
그림 14. Layout Inspector에서 컴포지션 및 건너뛰기 카운터 사용 설정
Compose 시맨틱
Compose의 시맨틱은 접근성 서비스와 테스트 프레임워크에서 이해할 수 있는 대체 방식으로 UI를 설명합니다. Layout Inspector를 사용하여 Compose 레이아웃의 시맨틱 정보를 검사할 수 있습니다.
그림 15. Layout Inspector를 사용하여 표시된 시맨틱 정보
Compose 노드를 선택할 때 Attributes 창을 사용하면 Compose 노드가 시맨틱 정보를 직접 선언하는지 아니면 하위 요소에서 시맨틱을 병합하는지 또는 둘 다 실행하는지 확인할 수 있습니다. 선언되었거나 병합된 시맨틱을 포함하는 노드를 빠르게 식별하려면 Component Tree 창에서 View options 드롭다운을 선택하고 Highlight Semantics Layers를 선택합니다. 그러면 트리에서 시맨틱이 포함된 노드만 강조표시됩니다. 키보드를 사용하여 노드 간에 빠르게 이동할 수 있습니다.
활동 다시 시작 방지
Layout Inspector가 제대로 작동하려면 다음 전역 설정 중 하나가 필요합니다. 전역 설정을 지정하지 않으면 Layout Inspector에서 자동으로 설정합니다.
adb shell settings put global debug_view_attributes_application_package <processname>이 옵션은 지정된 프로세스를 검사하기 위한 추가 정보를 생성합니다.
adb shell settings put global debug_view_attributes 1이 옵션은 기기의 모든 프로세스에서 검사하기 위한 추가 정보를 생성합니다.
전역 설정을 변경하면 활동이 다시 시작될 수 있습니다. 활동이 다시 시작되지 않도록 하려면 Android 스튜디오에서 설정을 변경하거나 기기의 설정에서 개발자 옵션을 변경하면 됩니다.
Android 스튜디오에서 자동 새로고침을 사용 설정하려면 메뉴에서 Run > Edit Configurations를 선택하여 Run/Debug Configurations를 엽니다. 그런 다음 Miscellaneous 탭으로 이동하여 Layout Inspector Options에서 Connect to Layout Inspector without restarting activity 체크박스를 선택합니다.
그림 16. Run/Debug Configurations에서 자동 새로고침 사용 설정
또는 기기의 개발자 옵션을 사용 설정하고 기기의 개발자 설정에서 뷰 속성 검사 사용 설정을 사용 설정합니다.