안녕하세요 아키입니다. 오늘은 우테코 미션을 진행하다가 마주쳤던 Compose Preview 렌더링 이슈를 공유해보려 합니다.
@Preview(device = Devices.DESKTOP)을 사용하면 텍스트와 경계선이 심하게 흐릿하게 렌더링되는 반면 device = Devices.TABLET으로 바꾸면 훨씬 선명하게 보이는 현상을 겪어본 적 있으신가요? 저는 아래와 같은 경우를 경험했어요.
처음에는 또 프리뷰가 말썽이구나 했지만 원인은 코드가 아니라 Android Studio 렌더링 엔진의 스케일링 방식과 기기 프로파일별 DPI 설정의 차이에 있었습니다.
원인 분석
1. Devices.DESKTOP의 낮은 DPI
Android Studio의 Compose Tooling에서 정의한 Devices.DESKTOP의 기본 스펙은 해상도 1920×1080에 DPI 160입니다.
데스크탑 모니터는 스마트폰보다 눈에서 멀리 떨어진 환경을 가정하기 때문에 물리적 픽셀 밀도가 낮게 설정되어 있어요. DPI 160은 Android 밀도 체계에서 mdpi에 해당하는 기준 밀도로 1dp = 1px로 대응됩니다.
비유하자면 도화지는 엄청 넓은데 그 안을 채우는 픽셀 입자의 밀도는 듬성듬성한 상태입니다.
2. Devices.TABLET의 높은 DPI
반면 Devices.TABLET은 스마트폰과 유사한 시청 환경을 가정하기 때문에 hdpi~xhdpi 수준의 고밀도 프로파일을 가집니다.
도화지는 넓으면서 그 안을 채우는 픽셀 입자도 촘촘하게 박혀 있는 상태입니다.
3. Layoutlib의 소수점 배율 한계
추가로 Android Studio의 렌더링 엔진인 Layoutlib은 100%, 200% 같은 정수 배율에는 강하지만 디스플레이 설정이 125%, 150% 같은 소수점 배율일 때 픽셀 보간 오류를 일으켜 Preview 화면을 흐리게 렌더링하는 고질적인 이슈도 있습니다.🫠
데스크탑 환경에서 소수점 배율을 쓰고 있다면 DPI 문제와 겹쳐 흐릿함이 더욱 심해집니다.
저는 선명하고 넓은 Preview가 보고 싶은데요?
원인을 알았으니 해결책은 간단해요. 단순히 넓은 레이아웃을 나열해 보고 싶다면 흐릿한 Devices.DESKTOP을 굳이 고집할 필요가 없습니다.
1. 커스텀 Spec 사용
스마트폰 수준의 높은 DPI를 유지하면서 캔버스 크기만 강제로 늘리는 방법입니다. 줌아웃이 되더라도 픽셀이 촘촘해 흐릿해지지 않아요!
@Preview(device = "spec:width=1500dp,height=800dp,dpi=480")
@Composable
fun CrispDesktopPreview() {
// 선명하게 렌더링됩니다
}2. Tablet 프로파일 활용
Devices.DESKTOP 대신 기본적으로 DPI가 높게 설정된 Devices.TABLET이나 Devices.PIXEL_TABLET을 사용하는 것도 추천드려요.
3. widthDp 파라미터 직접 조작
기기 프로파일을 바꾸지 않고 현재 기기의 캔버스 가로 길이만 직접 늘리는 방식도 있어요. 기존 DPI를 그대로 유지하면서 넓은 화면을 얻을 수 있습니다.
@Preview(widthDp = 1500)
@Composable
fun WidePreview() {
// 내용
}마치며
Compose Preview는 아직도 여러모로 불편합니다. 반영이 느리거나 인터랙티브 모드가 맛이 가거나 없는 컴포넌트가 갑자기 등장하거나…. 그래서 이번에도 "또 프리뷰 버그겠지"라고 생각했었어요.😅
내 코드보다 도구를 먼저 의심하는 게 늘 옳은 건 아니지만 도구의 동작 원리를 이해하는 것이 결국 더 나은 디버깅으로 이어진다는 점은 분명합니다.
만약 넓은 Preview가 필요할 때는 고밀도 DPI가 설정된 Tablet 프로파일을 쓰거나 커스텀 Spec을 활용해 보시길 추천합니다.
참고 자료
'Android > Compose' 카테고리의 다른 글
| ProcessPhoenix 제거, 자기전에 생각날거야 (3) | 2026.02.01 |
|---|---|
| DisposableEffect대신 LifecycleEffect (0) | 2026.01.19 |
| Compose에서 골치덩어리 EdgeToEdge를 잘 써보자. (1) | 2025.09.23 |
| 오픈소스 생태계에서 오픈소스 명시하기 (0) | 2025.09.23 |
| StateFlow를 활용한 네비게이션 상태 관리와 UI 로직 분리 (1) | 2025.08.09 |