Compose Stability Analyzer 0.7.0: 리컴포지션 연쇄 시각화와 Live Heatmap

Jetpack Compose의 안정성(stability) 시스템은 컴포저블 함수가 리컴포지션(Recomposition) 중에 스킵될 수 있는지를 결정합니다. 모든 매개변수가 안정적(stable)이면, Compose는 이전 값과 비교하여 변경이 없을 경우 해당 함수의 재실행을 통째로 건너뜁니다. 반면, 매개변수 중 단 하나라도 불안정(unstable)하면 해당 컴포저블은 부모가 리컴포지션될 때마다 매번 재실행됩니다. 어떤 컴포저블이 안정적이고 어떤 것이 불안정한지 파악하는 것은 Compose 성능 최적화의 첫걸음이지만, 그것만으로는 전체 그림을 볼 수 없습니다.

Compose Stability Analyzer는 Android Studio에서 거터 아이콘(gutter icon), 호버 툴팁, 인라인 힌트, 코드 인스펙션 등을 통해 안정성 분석을 실시간으로 제공해 왔습니다. 이러한 기능들은 "이 컴포저블이 안정적인가?"라는 질문에 한눈에 답을 줍니다. 0.7.0 버전에서는 한 발 더 나아가, 정적 분석만으로는 대답하기 어려운 두 가지 추가 질문에 답합니다. 바로 "이 컴포저블이 리컴포지션되면 하류(downstream)에 어떤 영향이 전파되는가?"와 "실제 디바이스에서 가장 많이 리컴포지션되는 컴포저블은 어느 것인가?"입니다.

이 글에서는 0.7.0 버전에서 새롭게 도입된 두 가지 핵심 기능인 **리컴포지션 연쇄 시각화 도구(Recomposition Cascade Visualizer)**와 Live Recomposition Heatmap을 살펴보겠습니다.

Live Recomposition Heatmap

정적 분석은 불필요하게 리컴포지션될 가능성이 있는 컴포저블을 알려 줍니다. Live Recomposition Heatmap은 한 단계 더 나아가, 실제로 리컴포지션이 일어나고 있는 컴포저블을 실시간으로 보여 줍니다. 이 기능은 ADB를 통해 연결된 디바이스에서 @TraceRecomposition 이벤트를 읽어, 에디터의 컴포저블 함수 위에 리컴포지션 횟수를 직접 표시함으로써 런타임 동작과 IDE를 효과적으로 연결해 줍니다.

히트맵을 사용하려면 몇 가지 사전 준비가 필요합니다. 프로젝트에 Compose Stability Analyzer Gradle 플러그인을 적용하고, 모니터링하려는 컴포저블 함수에 @TraceRecomposition 어노테이션을 추가한 뒤, Application 클래스에서 ComposeStabilityAnalyzer.setEnabled(true)를 호출하여 로깅을 활성화해야 합니다. 이 설정을 완료한 후 Compose Stability Analyzer 도구 창을 열고 타이틀 바의 Start/Stop 버튼을 클릭하면 모니터링이 시작됩니다. 디바이스가 하나만 연결되어 있으면 즉시 모니터링이 시작되고, 여러 대가 연결되어 있으면 모니터링할 디바이스를 선택할 수 있는 팝업이 나타납니다.

히트맵이 실행 중인 상태에서 앱과 상호작용하면, 에디터의 각 컴포저블 위에 색상으로 구분된 어노테이션이 리컴포지션 횟수와 함께 나타납니다. 초록색은 10회 미만의 리컴포지션(정상 빈도), 노란색은 10~50회(조사가 필요한 수준), 빨간색은 50회 초과(성능 문제가 의심되는 수준)를 의미합니다. 이러한 임계값은 Settings > Tools > Compose Stability Analyzer에서 직접 설정할 수 있습니다. 프로젝트 특성에 따라 적절한 기준을 조정하면 더 정확한 모니터링이 가능합니다.

히트맵 어노테이션을 클릭하면 도구 창의 Heatmap 탭이 열리며, 해당 컴포저블에 대한 상세 데이터가 자동으로 표시됩니다. 총 리컴포지션 횟수, 시간순으로 나열된 최근 이벤트 목록, 그리고 각 이벤트별 매개변수 변경 이력(어떤 매개변수가 변경되었는지, 어떤 것이 안정적이고 어떤 것이 불안정했는지)을 한눈에 확인할 수 있습니다. 덕분에 "이 컴포저블이 47번 리컴포지션되었다"는 높은 수준의 관찰에서 각 리컴포지션을 유발한 구체적인 매개변수 변경까지 Logcat을 직접 뒤지지 않고도 빠르게 파악할 수 있습니다.

도구 창 타이틀 바의 클리어 버튼을 누르면 누적된 모든 데이터가 초기화됩니다. 앱을 재시작하거나 특정 인터랙션을 깨끗한 상태에서 측정하고 싶을 때 유용합니다.

리컴포지션 연쇄 시각화 도구(Recomposition Cascade Visualizer)

컴포저블이 리컴포지션되면, 해당 함수만 단독으로 재실행되는 것이 아닙니다. 함수가 재실행되면서 호출하는 모든 자식 컴포저블도 함께 호출됩니다. 이때 자식 컴포저블의 매개변수가 불안정하다면, 입력값이 실제로 변경되었는지 여부와 관계없이 자식도 재실행됩니다. 화면 최상단에 있는 불안정한 컴포저블 하나가 수십 개의 하류 함수로 연쇄적으로 전파되어, 각 함수가 불필요한 작업을 수행하게 되는 것입니다. 이러한 리컴포지션 연쇄(cascade)는 성능 저하의 주요 원인이 될 수 있으므로, 그 영향 범위를 시각적으로 파악하는 것이 매우 중요합니다.

리컴포지션 연쇄 시각화 도구는 이 파급 효과를 눈에 보이게 만들어 줍니다. 에디터에서 아무 @Composable 함수를 마우스 오른쪽 버튼으로 클릭하고 "Analyze Recomposition Cascade"를 선택하면, 해당 함수를 루트로 하여 하위 방향으로 호출 트리를 추적하고, 루트가 리컴포지션될 때 영향을 받는 모든 컴포저블의 트리를 생성합니다.

트리의 각 노드에는 컴포저블 이름과 안정성 상태가 표시됩니다. 초록색은 스킵 가능(모든 매개변수가 안정적), 빨간색은 스킵 불가능(하나 이상의 불안정한 매개변수 존재)을 나타냅니다. 상단의 요약 정보에는 전체 하류 컴포저블 수, 스킵 가능한 수와 불가능한 수, 트리의 최대 깊이가 표시됩니다. 이를 통해 리컴포지션의 영향 범위(blast radius)를 빠르게 가늠할 수 있습니다. 예를 들어, 하류 함수가 15개이고 그중 8개가 스킵 불가능한 화면 컴포저블은, 하류 함수가 3개이면서 모두 스킵 가능한 화면과는 성능 프로파일이 크게 다릅니다.

재귀적 컴포저블 호출도 정상적으로 처리합니다. 트리 렌더링 컴포저블이 자식 노드 처리를 위해 자기 자신을 호출하는 경우, 연쇄 시각화 도구는 순환 참조를 감지하여 해당 노드에 표시하며 무한 루프에 빠지지 않습니다. 또한 설정 가능한 깊이 제한(기본값 10단계)이 적용되어, 깊은 계층 구조에서도 결과를 관리 가능한 수준으로 유지합니다.

연쇄 트리에서 아무 노드나 더블 클릭하면 해당 컴포저블의 소스 코드로 바로 이동할 수 있습니다. 덕분에 연쇄 시각화는 성능 작업의 실용적인 출발점이 됩니다. UI 트리 깊숙이 묻혀 있는 스킵 불가능한 컴포저블을 찾아내고, 소스로 이동한 뒤, 매개변수를 불안정하게 만드는 원인을 조사하실 수 있습니다.

두 기능의 시너지 활용

연쇄 시각화 도구와 히트맵은 서로 보완적인 역할을 합니다. 연쇄 시각화는 리컴포지션의 이론적 영향 범위, 즉 영향을 받을 수 있는 하류 컴포저블의 전체 트리를 보여 줍니다. 히트맵은 실제 사용자 인터랙션 중에 어떤 컴포저블이 실제로 리컴포지션되고 있는지, 그리고 얼마나 자주 발생하는지를 보여 줍니다.

실무에서 효과적인 워크플로우는 다음과 같습니다. 먼저 거터 아이콘과 Stability Explorer를 활용하여 불안정한 매개변수를 가진 컴포저블을 식별합니다. 그런 다음 화면 수준의 컴포저블에 대해 연쇄 분석을 실행하여 하류 영향도를 파악할 수 있습니다. 이어서 히트맵을 시작하고 앱을 평소처럼 사용하면서 빨간색 어노테이션이 나타나는지 살펴봅니다. 리컴포지션이 집중되는 컴포저블을 발견하면, 해당 어노테이션을 클릭하여 매개변수 변경 이력을 확인합니다. 근본 원인을 수정한 뒤(var를 val로 변경, 불변 컬렉션 사용, @Stable 어노테이션 추가 등), 히트맵을 초기화하고 동일한 인터랙션을 반복해 봅니다. 정적 분석에서뿐만 아니라 런타임에서도 리컴포지션 횟수가 줄어드는 것을 확인할 수 있다면, 최적화가 실제로 효과를 발휘하고 있다는 뜻입니다.

두 기능 모두 Compose Stability Analyzer IntelliJ 플러그인 0.7.0 버전에서 사용하실 수 있으며, JetBrains Marketplace에서 설치하거나 GitHub 저장소에서 직접 빌드하실 수 있습니다.