본문 바로가기

Android/Compose27

[Android] Compose의 IntrinsicSize.Min와 wrapContentHeight() 차이 회사 프로젝트에서 갤럭시 폴드 대응 중, IntrinsicSize.Min을 사용해 자식 컴포넌트의 높이에 따라 부모 높이를 조정하는 레이아웃 코드에서 내용이 아래쪽에서 잘리는 현상이 발생했습니다.문제 원인 분석 결과, 동적 콘텐츠를 사용하는 경우 IntrinsicSize.Min은 초기 컴포지션 시점에만 크기를 계산하기 때문에, 이후 네트워크 등을 통해 받아오는 실제 콘텐츠 높이를 반영하지 못해 잘림이 발생한 것이였습니다. 즉, viewModel에서 Flow로 네트워크 데이터를 수신하고, 컴포저블에서 collectAsState() 등으로 이를 받아 UI를 구성할 때, 초기 컴포지션에서 높이가 먼저 계산되어 이후 콘텐츠 반영이 누락되는 상황이 생긴 것입니다. 이번 글에서는 IntrinsicSize.Min 사.. 2025. 12. 10.
[Android] Compose에서 Word Wrap없이 글자 단위로 Text 표시하기 프로젝트를 진행하다 보면, 텍스트를 단어 단위가 아닌 글자 단위로 표시해야 할 때가 있습니다.하지만, 기본적으로 안드로이드의 Text 컴포저블은 화면 끝에 긴 단어가 위치할 경우, 그 단어가 잘리지 않도록 자동으로 다음 줄로 이동시킵니다. 이러한 동작을 Word Wrap(또는 Line Wrap) 이라고 부릅니다. 즉, 내부 알고리즘에 따라 텍스트가 자동으로 줄바꿈되어 다음과 같이 표시됩니다. 하지만 경우에 따라서는 자동 개행 없이, 줄이 끝나더라도 글자 단위로 이어서 표시하고 싶을 때가 있습니다.예를 들어, 아래와 같이 한 줄에 쭉 이어서 표시되는 형태를 원할 수도 있습니다. 안드로이드에서는 기본적으로 가독성을 높이기 위해 텍스트를 렌더링할 때 특정 기준에 따라 줄바꿈을 수행하는 알고리즘을 사용합니다.. 2025. 10. 26.
[Android] Compose의 중첩 스크롤(Nested Scroll) 완벽하게 이해하기 최근 프로젝트에서 바텀 시트를 표시하고 그 안에서 LazyColumn 혹은 Column에 세로 스크롤(vertical scroll) 을 적용한 적이 있습니다.하지만 스크롤 도중, 의도치 않게 바텀 시트가 닫히는 현상이 발생했습니다.구체적으로는, 자식 컴포넌트의 스크롤을 하단 끝까지 내린 뒤(아래 → 위), 바로 다시 위로 스크롤(위 → 아래) 할 때 바텀 시트가 함께 내려가며 닫히는 상황이었습니다. 다음과 같이 말이죠. 결론부터 말하자면, 이 문제의 원인은 중첩 스크롤(Nested Scroll) 구조 때문입니다.즉, 사용자의 스크롤 제스처에 따라 자식이 먼저 스크롤을 소비(consumed) 하고, 남은 스크롤(available) 을 부모가 이어받아 처리하는 과정에서 부모인 바텀 시트가 스크롤 이벤트를 .. 2025. 10. 12.
[Android] Compose에서 이미지를 자유자재로 커스터마이징 해보기 Compose로 이미지 UI를 작업하다 보면, 단순히 이미지를 보여주는 것 이상으로 다양한 커스터마이징이 필요할 때가 있습니다.실제로 Compose의 Image 컴포저블에서는 contentScale, colorFilter와 같은 속성을 통해 이미지를 원하는 형태로 제어가 가능한데요.이를 Modifier와 함께 활용하면, 모양을 자르거나(border/clip), 색상을 입히거나, 효과를 적용하는 등 표현 범위를 더 넓힐 수 있습니다. 이번 글에서는 이러한 기능들을 정리해보며 하나씩 알아보겠습니다. ContentScalecontentScale 옵션은 이미지가 컴포저블 영역에 맞게 어떤 방식으로 표시될지를 결정합니다.예를 들어, 이미지를 크롭하거나, 영역에 맞게 비율 조정하여 표시하도록 설정할 수 있습니다... 2025. 9. 17.
[Android] Compose의 staticCompositionLocalOf와 compositionLocalOf의 차이 전에 포스팅에서 CompositionLocal을 간단히 다룬 적이 있지만, 이번에는 staticCompositionLocalOf와 compositionLocalOf의 차이를 중심으로 다시 정리해보려고 합니다. 상태 호이스팅(State Hoisting)과 전달의 문제컴포저블 함수는 트리(tree) 구조로 이루어져 있습니다. 그리고 상태는 일반적으로 트리의 가능한 한 상위 노드에서 선언한 뒤 하위 노드로 전달하는 것이 권장됩니다(= 상태 호이스팅). 따라서, 트리의 깊이가 깊어질수록(예: depth = n) 같은 상태를 최하위까지 전달하려면 n개의 함수 매개변수를 추가해야 하는 문제가 있습니다.예를 들어 트리 깊이가 100이라면, 단순히 상태 하나를 전달하기 위해 함수 100개에 전부 매개변수를 추가해야 .. 2025. 8. 30.
[Android] Compose에서 자연스러운 텍스트 표시하기(Font Padding, Baseline, LineHeight) Jetpack Compose로 UI를 만들다 보면 Text 컴포넌트의 위치가 미묘하게 어긋나거나, 상하 여백이 어색하게 느껴지는 경우가 있습니다.이런 문제는 대부분 Font Padding, Baseline 정렬, LineHeight 같은 텍스트 관련 속성을 상황에 맞게 설정하지 않아서 발생합니다. 이번 포스팅에서는 각 속성이 어떤 역할을 하는지, 그리고 어떤 상황에서 어떤 속성을 조절해야 자연스러운 텍스트 UI를 만들 수 있는지 알아보겠습니다. 1. Font PaddingJetpack Compose에서 Text 컴포넌트를 사용할 때, 의도하지 않은 위아래 여백이 생긴다고 느껴본 적 있으신가요? 그 이유는 Font Padding 때문입니다. Text는 기본적으로 폰트 자체에 정의된 패딩을 포함하는데, 이 .. 2025. 7. 30.