Android Compose Phase에 대하여

dev_yo·2025년 11월 27일
post-thumbnail

안녕하세요 👋
오늘은 Compose Phase에 대해서 공부한 내용에 대해서 정리 해보려 합니다!

Compose Phase

Compose Phase는 Composition , Layout , Drawing 크게 3단계로 나누어집니다.

1. Composition

@Composable 함수를 실행하고 UI 트리를 구축하여 컴포저블 함수에 대한 설명을 생성하는 역할을 합니다.

  • Slot Table 이라는 데이터 구조에 컴포저블 간의 관계를 기록 합니다.
  • 상태 변경이 발생하면 영향을 받는 UI에 대해 다시 계산하고, 필요한 경우 recomposition을 발생 시킵니다.

Slot Tabled이란? 🧐

Slot table 은 Composition 단계 중 UI 컴포넌트의 상태를 저장하고 관리하기 위해 Jetpack Compose에서 사용되는 자료 구조입니다. UI 컴포넌트, 해당 관계 및 연관된 상태를 효율적으로 추적하여 상태 변경에 영향을 받는 요소만 업데이트함으로써 최적화된 recomposition을 가능하게 합니다.

출처 : Android Manifest Interview

2. Layout

Composition 단계 바로 직후에 수행되며, 부모의 Constraints를 기반으로 각 Composable의 크기 및 위치를 결정 합니다.

  • layout { ... } , Modifier.offset { … } 의 람다 함수 등이 실행 되는 단계입니다.

Layout 단계의 성능 핵심은 '각 노드를 한 번만 측정하는 것' 입니다.

노드를 여러 번 measure 하게 되는 구조가 생기면 UI 트리 순회 비용이 선형이 아닌 기하급수적으로 증가할 수 있기 때문에 Layout 단계 최적화는 Compose 성능에 매우 중요합니다.


Layout의 동작 순서

  • Row 는 하위 요소인 ImageColumn 측정

  • Image 가 측정되고, 하위 요소가 없으므로 자체 크기를 결정하여 Row에 크기를 전달

  • Column 측정, 먼저 하위 요소 (2개의 Text)를 측정

  • 첫 번째 Text 측정, 하위 요소가 없으므로 자체 크기를 결정하여 크기를 Column 에 전달

  • 두 번째 Text 측정, 하위 요소가 없으므로 자체 크기를 결정하여 Column 에 전달

  • Column 은 하위 요소를 측정 하여 자체 크기를 결정 (최대 하위 요소 너비와 하위 요소 높이의 합을 사용)

  • Column 은 하위 요소를 하위 요소들을 서로 세로로 배치

  • Row 는 하위 요소 측정을 사용하여 자체 크기를 결정합 (최대 하위 요소 높이와 하위 요소 너비의 합을 사용) 하위 요소를 서로 가로로 배치

Android Developers에서는 상태 읽기를 최적화하려면 Modifier의 람다 버전을 활용하라고 권장하고 있습니다.

그 이유는, 람다 형태의 Modifier는 Composition이 아닌 Layout 단계에서 실행되기 때문에 불필요한 recomposition을 방지할 수 있기 때문입니다. 대표적인 예시로는 Modifier.offset 의 두 가지 형태가 있습니다.

Modifier.offset(x, y) // Composition 단계에서 실행  
Modifier.offset { IntOffset(...) } // Layout 단계에서 실행

3. Drawing

Composition과 Layout 단계를 마친 UI 컴포넌트가 화면에 렌더링 되는 단계 입니다.
Canvas(),Modifier.drawBehind,Modifier.drawWithContent 등이 실행되는 단계 입니다.

Drawing 단계는 주로 Skia GPU 파이프라인에서 처리되기 때문에 Composition이나 Layout에 비해 상대적으로 비용이 덜한 편입니다.

Skia 란?

Google에서 개발한 2D 그래픽 라이브러리로, 여러 플랫폼에서 그래픽 렌더링을 지원하는 데 사용됩니다. Skia는 웹 브라우저, 안드로이드 운영체제, 그래픽 애플리케이션 등 다양한 환경에서 활용됩니다.

출처 : 브라우저 렌더링 파이프 라인 T-story

마치며

Compose Phase를 공부하면서 “어떻게 하면 더 최적화된 Compose 코드를 만들 수 있을까?”를 한 번 더 깊게 고민해볼 수 있었던 것 같습니다.

이 글이 여러분께도 작은 인사이트가 되었길 바랍니다. 😇
오늘도 즐코 하세요! 🙇‍♂️

📚 Reference
Android Manifest Interview <저자: 엄재웅(skydoves)>

Android Developers (Jetpack Compose 단계)

profile
어제보다 발전한 오늘이 되고픈 🧑🏻‍💻

0개의 댓글