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