Google은 흑인 공동체를 위한 인종 간 평등을 진전시키기 위해 노력하고 있습니다. Google에서 어떤 노력을 하고 있는지 확인하세요.

Layout Inspector 및 Layout Validation으로 레이아웃 디버깅

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

Layout Validation을 사용하면 여러 기기와 디스플레이 구성(예: 다양한 글꼴 크기나 사용자 언어)에서 레이아웃을 동시에 미리 볼 수 있어 일반적인 여러 레이아웃 문제를 쉽게 테스트할 수 있습니다.

Layout Inspector 열기

다음과 같이 Layout Inspector를 엽니다.

  1. 연결된 기기나 에뮬레이터에서 앱을 실행합니다.
  2. Tools > Layout Inspector를 클릭합니다.

그림 1과 같이 Layout Inspector에서는 다음 사항이 표시됩니다.

  1. Component Tree: 레이아웃에 있는 뷰의 계층 구조입니다.
  2. Layout Display: 기기 또는 에뮬레이터에 표시되는 앱 레이아웃을 렌더링하며 각 뷰에 레이아웃 경계가 표시됩니다.
  3. Layout Inspector 툴바: Layout Inspector의 도구입니다.
  4. Attributes: 선택한 뷰의 레이아웃 속성입니다.

Component Tree, Layout Inspector 툴바, Layout Display, Attributes를 나타내는 라벨이 있는 Layout Inspector 스크린샷

그림 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 Live Layout Inspector 뷰 옵션 아이콘를 클릭하고 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 DisplayLive updates 옆에 있는 체크박스를 클릭합니다.

Live Layout Inspector에는 동적 레이아웃 계층 구조가 포함되어 있으므로 기기의 뷰가 변경될 때 Component TreeLayout Display가 업데이트됩니다.

또한 속성값 해상도 스택을 사용하면 소스 코드에서 리소스 속성값이 발생한 위치를 조사하여 속성 창에서 하이퍼링크를 따라 발생 위치로 이동할 수 있습니다.

속성값 해상도 스택

그림 2. 속성의 정의로 연결되는 하이퍼링크가 있는 Attributes 패널의 속성값

마지막으로 Layout Display에는 런타임 시 앱의 뷰 계층 구조를 보여주는 고급 3D 시각화 기능이 있습니다. 이 기능을 사용하려면 Live Layout Inspector 창에서 레이아웃을 클릭하고 마우스를 드래그하여 회전하면 됩니다. 레이아웃의 레이어를 확장하거나 축소하려면 Layer Spacing 슬라이더를 사용하세요.

Layout Inspector: 3D 뷰

그림 3. 레이아웃의 회전된 3D 뷰

Layout Validation

Layout Validation은 다양한 기기 및 디스플레이 구성의 레이아웃을 동시에 미리 볼 수 있는 시각적 도구로, 프로세스 초기에 레이아웃의 문제를 포착할 수 있습니다. 이 기능에 액세스하려면 IDE 창의 오른쪽 상단에 있는 Layout Validation 탭을 클릭합니다.

Android 스튜디오 IDE의 Layout Validation 탭 스크린샷

사용 가능한 구성 집합 간에 전환하려면 Layout Validation 창의 상단에 있는 드롭다운 메뉴에서 다음 중 하나를 선택합니다.

  • Pixel Devices
  • Custom
  • Color Blind
  • Font Sizes


Layout Validation 도구의 드롭다운 메뉴 스크린샷

Pixel Devices

Pixel 기기에서 레이아웃이 어떻게 표시되는지 미리 봅니다.

다양한 Pixel 기기의 레이아웃 미리보기 스크린샷

그림 4. Layout Validation 도구에서 Pixel 기기 미리보기

Custom

미리 볼 디스플레이 구성을 맞춤설정하려면 언어, 기기 또는 화면 방향 등 다양한 설정 중에서 선택합니다.

Layout Validation 도구에서 기기 디스플레이를 맞춤설정하는 방법을 보여주는 애니메이션

그림 5. Layout Validation 도구에서 맞춤 디스플레이 구성

Color Blind

색맹인 사용자가 앱을 더 쉽게 사용할 수 있도록 하려면 일반적인 유형의 색맹 시뮬레이션으로 레이아웃을 확인합니다.

다양한 유형의 색맹에 관한 시뮬레이션 미리보기 스크린샷

그림 6. Layout Validation 도구에서 색맹 시뮬레이션 미리보기

Font Sizes

다양한 글꼴 크기로 레이아웃을 검증하고, 큰 글꼴로 레이아웃을 테스트하여 시각장애인 사용자를 위한 앱의 접근성을 개선합니다.

큰 글꼴의 레이아웃 오류가 표시되는 다양한 글꼴 크기의 앱 레이아웃 미리보기

그림 7. Layout Validation 도구에서 다양한 글꼴 크기 미리보기