Layout Inspector를 사용하면 에뮬레이터나 실제 기기에서 실행 중인 앱 내의 Compose 레이아웃을 검사할 수 있습니다. Layout Inspector를 사용하여 컴포저블이 얼마나 자주 재구성되거나 건너뛰는지 확인하고, 이를 통해 앱의 문제를 파악할 수 있습니다. 예를 들어 일부 코딩 오류로 인해 UI가 과도하게 재구성될 수 있으며 이는 성능 저하를 야기할 수 있습니다.
일부 코딩 오류로 인해 UI가 재구성되지 않아 UI 변경사항이 화면에 표시되지 않을 수도 있습니다. 레이아웃 검사기를 처음 사용하는 경우 실행 방법에 관한 안내를 확인하세요.
재구성 횟수 가져오기
Compose 레이아웃을 디버깅할 때는 컴포저블이 재구성되는 시점을 아는 것이 UI가 올바르게 구현되었는지 이해하는 데 중요합니다. 예를 들어 너무 많이 재구성되는 경우 앱이 필요한 것보다 더 많은 작업을 실행하는 것일 수 있습니다.
반면에 예상대로 재구성되지 않는 구성요소는 예기치 않은 동작을 유발할 수 있습니다.
Layout Inspector는 개발자가 앱과 상호작용할 때 레이아웃 계층 구조의 개별 컴포저블이 재구성되거나 건너뛴 시점을 보여줍니다. Android 스튜디오에서는 재구성이 강조 표시되어 UI에서 컴포저블이 재구성되는 위치를 확인할 수 있습니다.
그림 1. Layout Inspector에서 강조 표시된 재구성
강조 표시된 부분은 Layout Inspector의 이미지 섹션에 있는 컴포저블의 그래디언트 오버레이를 표시하며, UI에서 재구성이 가장 많은 컴포저블을 찾을 수 있는 위치를 파악할 수 있도록 점진적으로 사라집니다. 한 컴포저블이 다른 컴포저블보다 더 높은 속도로 재구성되는 경우 첫 번째 컴포저블은 더 강한 그래디언트 오버레이 색상을 수신합니다. Layout Inspector에서 컴포저블을 더블클릭하면 분석에 맞는 대응 코드로 이동합니다.
그림 2. Layout Inspector의 컴포지션 및 건너뛰기 카운터
Layout Inspector 창을 열고 앱 프로세스에 연결합니다. Component Tree에는 레이아웃 계층 구조 옆에 표시되는 열이 두 개 있습니다. 첫 번째 열에는 각 노드의 컴포지션 수가 표시되고 두 번째 열에는 각 노드의 건너뛰기 수가 표시됩니다. 컴포저블 노드를 선택하면 컴포저블의 크기와 매개변수가 표시됩니다. 단, 인라인 함수가 아닌 경우 매개변수를 표시할 수 없습니다. Component Tree 또는 Layout Display에서 컴포저블을 선택하면 Attributes 창에서도 비슷한 정보를 확인할 수 있습니다.
개수를 재설정하면 앱과의 특정 상호작용 중에 재구성이나 건너뛰기를 이해하는 데 도움이 됩니다. 개수를 재설정하려면 Component Tree 창 상단의 Reset을 클릭하세요.
그림 3. Layout Inspector에서 컴포지션 및 건너뛰기 카운터 사용 설정
Compose 시맨틱
Compose의 시맨틱은 접근성 서비스와 테스트 프레임워크에서 이해할 수 있는 대체 방식으로 UI를 설명합니다. Layout Inspector를 사용하여 Compose 레이아웃의 시맨틱 정보를 검사할 수 있습니다.
그림 4. Layout Inspector를 사용하여 표시된 시맨틱 정보
Compose 노드를 선택할 때 Attributes 창을 사용하면 Compose 노드가 시맨틱 정보를 직접 선언하는지 아니면 하위 요소에서 시맨틱을 병합하는지 또는 둘 다 실행하는지 확인할 수 있습니다. 선언되었거나 병합된 시맨틱을 포함하는 노드를 빠르게 식별하려면 Component Tree 창에서 View options 드롭다운을 선택하고 Highlight Semantics Layers를 선택합니다. 그러면 트리에서 시맨틱이 포함된 노드만 강조표시됩니다. 키보드를 사용하여 노드 간에 빠르게 이동할 수 있습니다.
Compose UI 확인
Jetpack Compose에서 더 적응성 있고 접근성 높은 UI를 빌드할 수 있도록 Android 스튜디오는 Compose 미리보기에서 UI 확인 모드를 제공합니다. 이 기능은 뷰의 접근성 검사기와 유사합니다.
Compose 미리보기에서 Compose UI 검사 모드를 활성화하면 Android 스튜디오에서 Compose UI를 자동으로 감사하고 UI의 접근성과 적응성을 높이기 위한 개선사항을 제안합니다. Android 스튜디오는 다양한 화면 크기에서 UI가 작동하는지 확인합니다. 문제 패널에서 도구는 큰 화면에서 텍스트가 늘어나거나 색상 대비가 낮은 등 감지된 문제를 표시합니다.
이 기능에 액세스하려면 Compose 미리보기에서 UI 확인 아이콘을 클릭하세요.
그림 5. UI 확인 모드의 진입점입니다.
UI 검사는 다양한 구성에서 UI를 자동으로 미리 보고 다양한 구성에서 발견된 문제를 강조 표시합니다. 문제 패널에서 문제를 클릭하면 문제의 세부정보, 제안된 수정사항, 문제 영역을 강조 표시하는 렌더링을 확인할 수 있습니다.
이 페이지에 나와 있는 콘텐츠와 코드 샘플에는 콘텐츠 라이선스에서 설명하는 라이선스가 적용됩니다. 자바 및 OpenJDK는 Oracle 및 Oracle 계열사의 상표 또는 등록 상표입니다.
최종 업데이트: 2025-08-21(UTC)
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2025-08-21(UTC)"],[],[],null,["# Debug your Compose UI\n\nTools for debugging your Compose UI are available in Android Studio.\n\nLayout Inspector\n----------------\n\nLayout Inspector lets you inspect a Compose layout inside a running app in an\nemulator or physical device. You can use the Layout Inspector to check how often\na composable is recomposed or skipped, which can help identify issues with your\napp. For example, some coding errors might force your UI to recompose\nexcessively, which can cause [poor performance](/develop/ui/compose/performance).\nSome coding errors can prevent your UI from recomposing and, therefore,\nprevent your UI changes from showing up on the screen. If you're new to\nLayout inspector, check the [guidance](/studio/debug/layout-inspector) on how to\nrun it.\n| **Note:** If you're not seeing Compose components in layout inspector, make sure you are not removing `META-INF/androidx.compose.*.version` files from the APK. These are required for layout inspector to work.\n\n### Get recomposition counts\n\nWhen debugging your Compose layouts, knowing when composables\n[recompose](/develop/ui/compose/mental-model#recomposition) is important in\nunderstanding whether your UI is implemented properly. For example, if it's\nrecomposing too many times, your app might be doing more work than is necessary.\nOn the other hand, components that don't recompose when you anticipate them to\ncan lead to unexpected behaviors.\n\nThe Layout Inspector shows you when discrete composables in your layout\nhierarchy have either recomposed or skipped, as you interact with your app. In\nAndroid Studio, your recompositions are highlighted to help you determine\nwhere in the UI your composables are recomposing.\n\n**Figure 1.** Recompositions are highlighted in Layout Inspector.\n\nThe highlighted portion shows a gradient overlay of the composable in the image\nsection of the Layout Inspector, and gradually disappears so that you can get an\nidea of where in the UI the composable with the highest recompositions can be\nfound. If one composable is recomposing at a higher rate than another\ncomposable, then the first composable receives a stronger gradient overlay\ncolor. If you double-click a composable in the layout inspector, you're taken to\nthe corresponding code for analysis.\n| **Note:** To view recomposition counts, make sure your app is using an API level of 29 or higher, and `Compose 1.2.0` or higher. Then, deploy your app as you normally would.\n**Figure 2.**The composition and skip counter in Layout Inspector.\n\nOpen the **Layout Inspector** window and connect to your app process. In the\n**Component Tree** , there are two columns that appear next to the layout\nhierarchy. The first column shows the number of compositions for each node and\nthe second column displays the number of skips for each node. Selecting a\ncomposable node shows the dimensions and parameters of the composable, unless\nit's an inline function, in which case the parameters can't be shown. You can\nalso see similar information in the **Attributes** pane when you select a\ncomposable from the **Component Tree** or the **Layout Display**.\n\nResetting the count can help you understand recompositions or skips during a\nspecific interaction with your app. If you want to reset the count, click\n**Reset** near the top of the **Component Tree** pane.\n| **Note:** If you don't see the new columns in the **Component Tree** pane, you can view them by selecting **Show Recomposition Counts** from the **View Options** menu near the top of the **Component Tree** pane, as shown in the following image.\n\n**Figure 3**. Enable the composition and skip counter in Layout Inspector.\n\n### Compose semantics\n\nIn Compose, [Semantics](/develop/ui/compose/semantics) describe your UI in an\nalternative manner that is understandable for\n[Accessibility](/develop/ui/compose/accessibility) services and for the\n[Testing](/develop/ui/compose/testing) framework. You can use the Layout Inspector\nto inspect semantic information in your Compose layouts.\n**Figure 4.** Semantic information displayed using the Layout Inspector.\n\nWhen selecting a Compose node, use the **Attributes** pane to check whether it\ndeclares semantic information directly, merges semantics from its children, or\nboth. To quickly identify which nodes include semantics, either declared or\nmerged, use select the **View options** drop-down in the **Component Tree** pane\nand select **Highlight Semantics Layers**. This highlights only the nodes in the\ntree that include semantics, and you can use your keyboard to quickly navigate\nbetween them.\n\nCompose UI Check\n----------------\n\nTo help you build more adaptive and accessible UIs in Jetpack Compose, Android\nStudio provides a UI Check mode in Compose Preview. This feature is similar\nto [Accessibility Scanner](/guide/topics/ui/accessibility/testing#accessibility-scanner)\nfor views.\n\nWhen you activate Compose UI check mode on a Compose Preview, Android Studio\nautomatically audits your Compose UI and suggests improvements to make your UI\nmore accessible and adaptive. Android Studio checks that your UI works across\ndifferent screen sizes. In the **Problems** panel, the tool shows the issues\nthat it detects, such as text stretched on large screens or low color contrast.\n\nTo access this feature, click the UI Check icon on Compose Preview:\n**Figure 5.** Entry point to UI check mode.\n\nUI check automatically previews your UI in different configurations and\nhighlights issues found in different configurations. In the **Problems** panel,\nwhen you click an issue, you can see the details of the issue, suggested fixes,\nand the renderings that highlight the area of the issue.\n**Figure 6.** UI check mode in action."]]
