레이아웃 계층 구조 최적화

Compose 방법 사용해 보기
Jetpack Compose는 Android에 권장되는 UI 도구 키트입니다. Compose에서 레이아웃을 사용하는 방법을 알아보세요.

기본 레이아웃 구조를 사용하면 가장 효율적인 레이아웃이 생성된다는 것이 가장 일반적인 오해입니다. 그러나 앱에 추가하는 각 위젯과 레이아웃에는 초기화, 레이아웃, 그림이 필요합니다. 예를 들어 중첩된 LinearLayout 인스턴스를 사용하면 뷰 계층 구조가 지나치게 깊어질 수 있습니다. 또한 layout_weight 매개변수를 사용하는 LinearLayout의 여러 인스턴스를 중첩하면 각 하위 요소를 두 번 측정해야 하므로 특히 비용이 많이 들 수 있습니다. 이는 레이아웃이 반복적으로 확장될 때(예: RecyclerView에서 사용할 때) 특히 중요합니다.

이 문서에서는 Layout Inspector린트를 사용하여 레이아웃을 검사하고 최적화하는 방법을 보여줍니다.

레이아웃 검사

Android SDK 도구에는 앱 실행 중에 레이아웃을 분석할 수 있는 Layout Inspector 도구가 포함되어 있습니다. 이 도구를 사용하면 레이아웃 성능의 비효율성을 확인할 수 있습니다.

Layout Inspector를 사용하면 연결된 기기나 에뮬레이터에서 실행 중인 프로세스를 선택한 다음 레이아웃 트리를 표시할 수 있습니다. 각 블록의 신호등은 측정, 레이아웃, 그리기 성능을 나타내며 잠재적인 문제를 식별하는 데 도움이 됩니다.

예를 들어 그림 1에서는 RecyclerView의 항목으로 사용되는 레이아웃을 보여줍니다. 이 레이아웃에서는 왼쪽에 작은 비트맵 이미지를 표시하고 오른쪽에 두 개의 누적된 텍스트 항목을 표시합니다. 성능상의 이점이 배가되므로 여러 번 확장되는 이러한 레이아웃을 최적화하는 것이 특히 중요합니다.

목록의 단일 항목(이미지 1개와 세로로 정렬된 텍스트 2개)을 보여주는 이미지
그림 1. RecyclerView에 있는 항목의 개념적 레이아웃

Layout Inspector는 사용 가능한 기기 및 실행 중인 구성요소 목록을 표시합니다. Windows 탭에서 구성요소를 선택하고 Layout Inspector를 클릭하여 선택한 구성요소의 레이아웃 계층 구조를 확인합니다. 예를 들어 그림 2는 그림 1에 표시된 목록 항목의 레이아웃을 보여줍니다.

Layout Inspector 및 LinearLayout 컴포지션을 보여주는 이미지
그림 2. 그림 1에 있는 레이아웃의 레이아웃 계층 구조, 중첩된 LinearLayout 인스턴스 사용

레이아웃 수정

중첩된 LinearLayout로 인해 앞의 레이아웃 성능이 느려지므로 레이아웃을 평평하게 하여 성능을 개선할 수 있습니다. 즉, 레이아웃을 좁고 깊지 않고 얕고 넓게 만들면 됩니다. 루트 노드로 ConstraintLayout를 사용하면 이러한 레이아웃이 가능합니다. ConstraintLayout를 사용하도록 이 디자인을 변환하면 레이아웃은 2단계 계층 구조가 됩니다.

    <androidx.constraintlayout.widget.ConstraintLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:id="@+id/root"
      android:layout_width="match_parent"
      android:layout_height="52dp"
      android:background="#e4e6e4"
      android:padding="4dp">

      <ImageView
          android:id="@+id/image"
          android:layout_width="48dp"
          android:layout_height="48dp"
          android:background="#5c5c74"
          android:contentDescription="An example box"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent" />

      <TextView
          android:id="@+id/title"
          android:layout_width="0dp"
          android:layout_height="0dp"
          android:layout_marginStart="4dp"
          android:background="#745c74"
          app:layout_constraintBottom_toTopOf="@+id/subtitle"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toEndOf="@id/image"
          app:layout_constraintTop_toTopOf="parent" />

      <TextView
          android:id="@+id/subtitle"
          android:layout_width="0dp"
          android:layout_height="0dp"
          android:background="#7e8d6e"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="@id/title"
          app:layout_constraintTop_toBottomOf="@+id/title" />
  </androidx.constraintlayout.widget.ConstraintLayout>
    

새 레이아웃 검사는 다음과 같습니다.

3D Layout Inspector를 보여주는 이미지
그림 3. Layout Inspector 3D 모드

이 레이아웃은 목록의 모든 항목에 사용되므로 이 방법의 이점은 배가됩니다.

차이점은 대부분 LinearLayout 디자인에서 layout_weight를 사용하기 때문에 발생합니다. 이로 인해 측정 속도가 느려질 수 있습니다. 이는 각 레이아웃을 적절하게 사용하는 방법의 한 가지 예입니다. 레이아웃 가중치 사용이 필요한지 신중하게 고려하세요.

복잡한 레이아웃에서는 시스템이 동일한 UI 요소를 두 번 이상 측정하느라 시간을 낭비할 수 있습니다. 이 현상은 이중 과세라고 합니다. 이중 과세와 이를 방지하는 방법에 관한 자세한 내용은 성능 및 뷰 계층 구조를 참고하세요.

린트 사용

레이아웃 파일에서 린트 도구를 실행하여 가능한 뷰 계층 구조 최적화를 검색하는 것이 좋습니다. 린트는 layoutopt 도구를 대체하며 더 많은 기능을 제공합니다. 다음은 린트 규칙의 예입니다.

  • 복합 드로어블을 사용합니다. ImageViewTextView가 포함된 LinearLayout를 복합 드로어블로 더 효율적으로 처리할 수 있습니다.
  • 루트 프레임을 병합합니다. 레이아웃의 루트가 배경이나 패딩을 제공하지 않는 FrameLayout인 경우 약간 더 효율적인 병합 태그로 바꿀 수 있습니다.
  • 쓸모없는 잎을 치우세요. 더 평평하고 효율적인 레이아웃 계층 구조를 위해 하위 요소나 배경이 없는(표시되지 않으므로) 레이아웃을 삭제할 수 있습니다.
  • 쓸모없는 상위 항목을 삭제합니다. 동위 요소가 없고 ScrollView 또는 루트 레이아웃이 아니며 배경도 없는 하위 요소가 있는 레이아웃을 삭제할 수 있습니다. 더 평평하고 효율적인 레이아웃 계층 구조를 위해 하위 뷰를 상위 뷰로 직접 이동할 수도 있습니다.
  • 깊은 레이아웃은 피하세요. 중첩이 너무 많은 레이아웃은 성능에 좋지 않습니다. ConstraintLayout와 같이 더 평평한 레이아웃을 사용하여 성능을 개선해 보세요. 린트 검사의 기본 최대 깊이는 10입니다.

린트 도구의 또 다른 이점은 Android 스튜디오에 통합된다는 점입니다. 프로그램을 컴파일할 때마다 린트가 자동으로 실행됩니다. Android 스튜디오를 사용하면 특정 빌드 변형이나 모든 빌드 변형을 대상으로 린트 검사도 실행할 수 있습니다.

검사 프로필을 관리하고 Android 스튜디오에서 File > Settings > Project Settings 옵션을 사용하여 검사를 구성할 수도 있습니다. Inspection Configuration 페이지에 지원되는 검사가 표시됩니다.

Android 스튜디오 검사 메뉴를 보여주는 이미지
그림 4. Inspection Configuration 페이지

린트는 일부 문제를 자동으로 수정하고, 다른 문제에 관한 제안을 하며, 검토를 위해 문제가 되는 코드로 바로 이동할 수 있습니다.

자세한 내용은 레이아웃레이아웃 리소스를 참고하세요.