XML을 Compose로 전환하기 #우아콘2024 #우아한형제들

장바구니 button의 숫자 가격은 가운데처럼 보이지만 ‘원’이 섞이면 아래로 처지는 현상을 단순 centerVertically가 text glyph의 시각적 중심까지 맞추지 못하는 문제로 분석한다. Row·Column의 alignment line과 Text에 이미 정의된 first·last baseline을 이해한 뒤 Modifier.alignByBaseline을 적용해 font size와 style이 다른 text도 같은 기준선에 놓고, container box가 아니라 실제 글자가 자연스럽게 중앙에 보이도록 고친다.

XML TextView의 drawableStart·drawableEnd처럼 text 앞뒤에 icon을 넣는 parameter가 Compose Text에는 없으므로 AnnotatedString과 inline content로 동일한 UI를 만든다. appendInlineContent의 ID와 대체 text를 넣고, 같은 ID의 InlineTextContent map에 placeholder 크기·정렬과 실제 composable icon을 정의해 mapping한다. 반복되는 pattern은 extension function으로 감싸 기존 View API와 유사한 사용성을 제공하고 접근성용 대체 문자열도 유지한다.

가로 scroll quick menu의 item 높이가 동적이면 LazyHorizontalGrid가 요구하는 고정 height를 미리 알 수 없고, LazyRow도 아직 compose되지 않은 뒤쪽 item의 최대 높이를 바로 얻을 수 없다. Compose의 composition·measure·placement·draw 단계를 살펴본 뒤 자식을 여러 번 측정하고 배치를 늦출 수 있는 SubcomposeLayout으로 item 높이와 줄·간격을 먼저 계산해 grid height를 정한다. 같은 기법으로 가장 높을 card를 사전 측정해 horizontal shelf의 흔들리는 높이도 고정한다.

Compose Text에 없던 auto-size를 최대 font부터 overflow 여부를 확인하며 최소 크기까지 줄이는 방식으로 만들고, drawWithContent 호출을 준비 완료까지 미뤄 중간 상태가 그려지지 않게 한다. onTextLayout의 didOverflowWidth로 판단한 초기 구현은 매번 draw된 뒤 측정하는 비용이 있어 TextMeasurer 기반 사전 측정으로 개선할 수 있음을 설명한다. 전환 후에는 design system·Kotlin·Lazy list의 생산성과 recomposition·미지원 API·호환성 비용을 함께 평가하고 Layout Inspector의 recomposition count와 Animation Preview로 성능과 동작을 점검한다.