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 패널의 속성값
그림 3. 레이아웃의 회전된 3D 뷰
Layout Validation
Layout Validation은 다양한 기기 및 디스플레이 구성의 레이아웃을 동시에 미리 볼 수 있는 시각적 도구로, 프로세스 초기에 레이아웃의 문제를 포착할 수 있습니다. 이 기능에 액세스하려면 IDE 창의 오른쪽 상단에 있는 Layout Validation 탭을 클릭합니다.
사용 가능한 구성 집합 간에 전환하려면 Layout Validation 창의 상단에 있는 드롭다운 메뉴에서 다음 중 하나를 선택합니다.
- Pixel Devices
- Custom
- Color Blind
- Font Sizes
Pixel Devices
Pixel 기기에서 레이아웃이 어떻게 표시되는지 미리 봅니다.
그림 4. Layout Validation 도구에서 Pixel 기기 미리보기
Custom
미리 볼 디스플레이 구성을 맞춤설정하려면 언어, 기기 또는 화면 방향 등 다양한 설정 중에서 선택합니다.
그림 5. Layout Validation 도구에서 맞춤 디스플레이 구성
Color Blind
색맹인 사용자가 앱을 더 쉽게 사용할 수 있도록 하려면 일반적인 유형의 색맹 시뮬레이션으로 레이아웃을 확인합니다.
그림 6. Layout Validation 도구에서 색맹 시뮬레이션 미리보기
Font Sizes
다양한 글꼴 크기로 레이아웃을 검증하고, 큰 글꼴로 레이아웃을 테스트하여 시각장애인 사용자를 위한 앱의 접근성을 개선합니다.
그림 7. Layout Validation 도구에서 다양한 글꼴 크기 미리보기