Layout Inspector로 레이아웃 디버그

Android 스튜디오의 Layout Inspector를 사용하면 각 뷰의 속성을 검사할 수 있는 뷰 계층 구조를 표시하여 앱의 레이아웃을 디버그할 수 있습니다. Layout Inspector를 사용하면 앱 레이아웃을 디자인 모형과 비교하고 앱의 확대 뷰 또는 3D 뷰를 표시하며 런타임에 앱 레이아웃의 세부정보를 검토할 수 있습니다. 레이아웃이 완전히 XML로 빌드된 것이 아니라 런타임에 빌드되어 예상치 못한 방식으로 작동하는 경우 특히 유용합니다.

뷰용 Layout Editor에 관한 자세한 내용은 Layout Editor 소개를 참고하세요.

그림 1. Jetchat 앱의 삽입된 Layout Inspector

시작하기

Layout Inspector를 시작하려면 앱을 실행하고 Running Devices 창으로 이동하여 Toggle Layout Inspector 삽입된 Layout Inspector 전환 버튼를 클릭합니다. 여러 기기나 프로젝트 간에 전환하면 Layout Inspector는 연결된 기기의 포그라운드에서 실행되는 디버그 가능한 프로세스에 자동으로 연결됩니다.

일반적인 작업을 실행하는 방법은 다음과 같습니다.

  • 계층 구조를 보고 각 뷰의 속성을 검사하려면 Component TreeAttributes 도구 창을 사용합니다. Layout Inspector에서 속성에 액세스하려면 활동을 다시 시작해야 할 수 있습니다. 자세한 내용은 활동 다시 시작 방지를 참고하세요.
  • 뷰를 직접 한 번 클릭하여 뷰를 선택하거나 뷰를 더블클릭하여 코드로 이동하려면 Toggle Deep Inspect Toggle Deep Inspect 버튼를 사용 설정합니다.
  • 앱과 상호작용하려면 Toggle Deep Inspect Toggle Deep Inspect 버튼를 사용 중지합니다.
  • 실제 기기를 검사하려면 기기 미러링을 사용 설정하세요.
  • 앱의 UI를 업데이트할 때 실시간 업데이트를 사용 설정하려면 실시간 편집이 사용 설정되어 있는지 확인합니다.
  • 3D 모드를 사용하려면 Layout Inspector 스냅샷 Layout Inspector 스냅샷을 만든 다음 3D Mode 3D 버튼를 클릭합니다.

뷰 선택 또는 격리

일반적으로 뷰는 사용자가 보고 상호작용할 수 있는 것을 그립니다. Component Tree는 각 뷰 구성요소와 함께 앱의 계층 구조를 실시간으로 표시하므로 개발자가 앱 내부의 요소와 이와 연결된 값을 시각화할 수 있어 앱의 레이아웃을 디버그할 수 있습니다.

뷰를 선택하려면 Component Tree 또는 Layout Display에서 뷰를 클릭합니다. 선택한 뷰의 모든 레이아웃 속성이 Attributes 패널에 표시됩니다.

레이아웃에 겹치는 뷰가 포함된 경우 Deep Inspect 모드 Toggle Deep Inspect 버튼에서 마우스 오른쪽 버튼을 클릭하면 리전의 모든 뷰를 볼 수 있습니다. 앞에 있지 않은 뷰를 선택하려면 Component Tree에서 뷰를 클릭하거나 레이아웃을 회전합니다.

복잡한 레이아웃을 사용하려면 레이아웃의 하위 집합만 Component Tree에 표시되고 Layout Display에 렌더링되도록 개별 뷰를 격리하면 됩니다. 뷰를 격리하려면 Layout Inspector 스냅샷 스냅샷을 생성하고, Component Tree에서 뷰를 마우스 오른쪽 버튼으로 클릭한 후 Show Only Subtree 또는 Show Only parent를 선택합니다. 전체 뷰로 돌아가려면 뷰를 마우스 오른쪽 버튼으로 클릭하고 Show All을 선택합니다. 뷰를 격리하기 전에 스냅샷을 만들어야 합니다.

레이아웃 테두리 및 뷰 라벨 숨기기

레이아웃 요소의 경계 상자나 뷰 라벨을 숨기려면 Layout Display 상단에서 View Options View Options 버튼를 클릭하고 Show Borders 또는 Show View Label을 전환합니다.

레이아웃 계층 구조 스냅샷 캡처

Layout Inspector를 사용하면 실행 중인 앱의 레이아웃 계층 구조의 스냅샷을 저장할 수 있으므로 스냅샷을 다른 사용자와 공유하거나 나중에 참조할 수 있습니다.

스냅샷은 Layout Inspector를 사용할 때 일반적으로 표시되는 데이터(레이아웃의 세부 3D 렌더링을 비롯해 View 레이아웃, Compose 레이아웃 또는 하이브리드 레이아웃의 구성요소 트리 및 각 UI 구성요소의 세부 속성 포함)를 캡처합니다. 스냅샷을 저장하려면 Snapshot Export/Import 스냅샷 내보내기/가져오기를 클릭한 후 Export Snapshot을 클릭합니다.

Import Snapshot을 클릭하여 이전에 저장한 Layout Inspector 스냅샷을 로드합니다.

3D 모드

Layout Display에는 런타임 시 앱의 뷰 계층 구조를 보여주는 고급 3D 시각화 기능이 있습니다. 이 기능을 사용하려면 스냅샷 스냅샷 내보내기/가져오기를 찍고 스냅샷 검사기 창에서 3D 모드 버튼 3D 버튼을 클릭한 후 마우스를 드래그하여 회전합니다.

Layout Inspector: 3D 뷰
그림 2. 회전된 레이아웃 3D 뷰
Layout Inspector: Layer Spacing 뷰
그림 3. 레이아웃의 레이어를 확장하거나 축소하려면 Layer Spacing 슬라이더를 사용하세요.

앱 레이아웃을 참조 이미지 오버레이와 비교하기

앱 레이아웃을 UI 모형과 같은 참조 이미지와 비교해 보려면 Layout Inspector에서 비트맵 이미지 오버레이를 로드하면 됩니다.

  • 오버레이를 로드하려면 Layout Inspector 툴바에서 Load Overlay 옵션을 선택합니다. 오버레이는 레이아웃에 맞게 조정됩니다.
  • 오버레이의 투명도를 조정하려면 Overlay Alpha 슬라이더를 사용합니다.
  • 오버레이를 삭제하려면 Clear Overlay를 클릭합니다.

Compose 검사

Layout Inspector를 사용하면 에뮬레이터나 실제 기기에서 실행 중인 앱 내의 Compose 레이아웃을 검사할 수 있습니다. Layout Inspector를 사용하여 컴포저블이 얼마나 자주 재구성되거나 건너뛰는지 확인하고, 이를 통해 앱의 문제를 파악할 수 있습니다. 예를 들어 일부 코딩 오류로 인해 UI가 과도하게 재구성될 수 있으며 이는 성능 저하를 야기할 수 있습니다. 또는 일부 코딩 오류로 인해 UI가 재구성되지 않아 UI 변경사항이 화면에 표시되지 않을 수도 있습니다.

Compose용 Layout Inspector 자세히 알아보기

활동 다시 시작 방지

Layout Inspector가 제대로 작동하려면 다음 전역 설정 중 하나가 필요합니다. 전역 설정을 지정하지 않으면 Layout Inspector에서 자동으로 설정합니다.

  1. adb shell settings put global debug_view_attributes_application_package <processname>

    이 옵션은 지정된 프로세스를 검사하기 위한 추가 정보를 생성합니다.

  2. 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 체크박스를 선택합니다.

실행 구성의 활동 다시 시작 옵션
그림 4. Run/Debug Configurations 대화상자에서 자동 새로고침을 사용 설정합니다.

또는 기기의 개발자 옵션을 사용 설정하고 기기의 개발자 설정에서 뷰 속성 검사 사용 설정을 사용 설정합니다.

독립형 Layout Inspector

최적의 성능을 위해 기본 삽입 모드에서 Layout Inspector를 사용하는 것이 좋습니다. Layout Inspector의 삽입을 해제하려면 File(macOS의 경우 Android 스튜디오)> Settings > Tools > Layout Inspector로 이동하여 Enableembedded Layout Inspector(삽입된 Layout Inspector 사용) 체크박스를 선택 해제합니다.

독립형 모드에서는 Layout Inspector 툴바에서 Live Updates 옵션을 클릭하여 실시간 업데이트를 사용 설정합니다.