Android 스튜디오의 Layout Inspector를 사용하면 에뮬레이터나 실제 기기에서 실행 중인 앱 내의 레이아웃을 검사하고 디버그할 수 있습니다. 각 구성요소의 속성을 검사하고, 앱 레이아웃을 디자인 모형과 비교하고, 앱의 확대 뷰를 표시할 수 있습니다.
Layout Inspector를 사용하여 컴포저블이 얼마나 자주 재구성되거나 건너뛰는지 확인하고, 이를 통해 앱의 문제를 파악할 수도 있습니다. 예를 들어 일부 코딩 오류로 인해 UI가 과도하게 재구성될 수 있으며 이는 성능 저하를 야기할 수 있습니다. 또는 일부 코딩 오류로 인해 UI가 재구성되지 않아 UI 변경사항이 화면에 표시되지 않을 수도 있습니다.
자세한 내용은 Compose UI 디버그를 참고하세요.
시작하기
Layout Inspector를 시작하려면 앱을 실행하고
Running Devices 창으로 이동하여 Toggle Layout Inspector 
를 클릭합니다. 여러 기기 또는 프로젝트 간에 전환하면 연결된 기기의 포그라운드에서 실행되는 디버그 가능한 프로세스에 Layout Inspector가 자동으로 연결됩니다.
다음은 몇 가지 일반적인 작업을 실행하는 방법입니다.
- 뷰 계층 구조를 보고 각 구성요소의 속성을 검사하려면 Component Tree 및 Attributes 도구 창을 사용합니다. Layout Inspector에서는 속성에 액세스하려면 활동을 다시 시작해야 할 수 있습니다.
- 구성요소를 선택하려면 먼저 Toggle Deep Inspect
를 사용 설정한 다음
구성요소를 클릭합니다. 또는 구성요소를 더블클릭하여 코드로 이동합니다. - 앱과 상호작용하려면 Toggle Deep Inspect 를 사용 중지합니다.
- 실제 기기를 검사하려면 기기 미러링을 사용 설정합니다.
- 앱의 UI를 업데이트할 때 실시간 업데이트를 사용 설정하려면 실시간 편집이 사용 설정되어 있는지 확인합니다.
구성요소 선택 또는 격리
일반적으로 구성요소는 사용자가 보고 상호작용할 수 있는 것을 그립니다. Component Tree 는 각 컴포저블 구성요소와 함께 앱의 계층 구조를 실시간으로 표시하므로 개발자가 앱 내부의 요소와 이와 연결된 값을 시각화할 수 있어 앱의 레이아웃을 디버그할 수 있습니다.
구성요소를 선택하려면 Component Tree 또는 Layout Display 에서 구성요소를 클릭합니다. 선택한 구성요소의 모든 레이아웃 속성이 Attributes 패널에 표시됩니다.
레이아웃에 겹치는 구성요소가 포함되어 있으면 영역의 모든 구성요소
를 Deep Inspect 모드 에서 마우스 오른쪽 버튼을 클릭할 때 볼 수 있습니다. 전면에 있지 않은 구성요소를 선택하려면 Component Tree 에서 구성요소를 클릭합니다.
복잡한 레이아웃을 사용하려면 레이아웃의 하위 집합만 Component Tree 에 표시되고 Layout Display 에 렌더링되도록 개별 구성요소를 격리하면 됩니다. 구성요소를 격리하려면 Component Tree 에서 구성요소를 마우스 오른쪽 버튼으로 클릭하고 Show Only Subtree 또는 Show Only Parents 를 선택합니다. 전체 뷰로 돌아가려면 구성요소를 마우스 오른쪽 버튼으로 클릭하고 Show All 을 선택합니다.
레이아웃 테두리 및 뷰 라벨 숨기기
레이아웃 요소의 경계 상자나 구성요소 라벨을 숨기려면
View Options 
를 클릭하고
Layout Display 상단에서 Show Borders 또는 Show View
Label을 전환합니다.
레이아웃 계층 구조 스냅샷 캡처
Layout Inspector를 사용하면 실행 중인 앱의 레이아웃 계층 구조의 스냅샷을 저장할 수 있으므로 스냅샷을 다른 사람과 공유하거나 나중에 참조할 수 있습니다.
스냅샷은 Layout Inspector를 사용할 때 일반적으로 표시되는 데이터(레이아웃의 세부 렌더링을 비롯해 Compose 레이아웃, View 레이아웃 또는 하이브리드 레이아웃의 구성요소 트리 및 각 UI 구성요소의 세부 속성 포함)를 캡처합니다. 스냅샷을 저장하려면 Snapshot Export/Import 
를 클릭한 다음
Export Snapshot을 클릭합니다.
Import Snapshot 을 클릭하여 이전에 저장한 Layout Inspector 스냅샷을 로드합니다.
앱 레이아웃을 참고 이미지 오버레이와 비교하기
앱 레이아웃을 UI 모형과 같은 참고 이미지와 비교해 보려면 Layout Inspector에서 비트맵 이미지 오버레이를 로드하면 됩니다.
- 오버레이를 로드하려면 Layout Inspector 툴바에서 Load Overlay
옵션을 선택합니다. 오버레이는 레이아웃에 맞게 조정됩니다. - 오버레이의 투명도를 조정하려면 Overlay Alpha 슬라이더를 사용합니다.
- 오버레이를 삭제하려면 Clear Overlay를 클릭합니다.
독립형 Layout Inspector
최적의 성능을 위해서는 기본 삽입 모드에서 Layout Inspector를 사용하는 것이 좋습니다. Layout Inspector를 삽입 해제하려면 File(macOS의 경우 Android 스튜디오) > Settings > Tools > Layout Inspector 로 이동하여 Enable embedded Layout Inspector 체크박스를 선택 해제합니다.
독립형 모드에서 Layout Inspector 툴바의 Live Updates
옵션을 클릭하여 실시간 업데이트를 사용 설정합니다.