(Compose) @Preview

Android 개발을 하다 보면 작은 UI 수정 하나를 확인하기 위해서 적으면 몇 초에서 많으면 몇십 분씩 빌드를 기다리는 일이 너무 번거롭고 지겹습니다. Jetpack Compose는 이런 것을 해결하기 위해 @Preview 어노테이션을 제공합니다. @Preview는 앱을 빌드해서 확인하지 않고 Android Studio에서 Compose UI가 어떻게 보일지 즉시 렌더링 해주는 기능입니다.

 

@Preview 사용법

@Preview의 사용법은 놀라울 정도로 간단합니다. 그저 @Composeable 함수 위에 @Preview를 추가하면 됩니다.

import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview

// UI를 구성하는 Composable 함수
@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

// 위 Composable을 미리보기 위한 또 다른 Composable 함수
@Preview(showBackground = true) // Preview를 위한 어노테이션 추가
@Composable
fun GreetingPreview() {
    // 앱의 테마를 적용하면 더 정확한 미리보기가 가능합니다.
    MyApplicationTheme {
        Greeting("Android with Preview")
    }
}

이렇게 @Preview를 추가하는 순간 Android Studio의 Split View에 Greeting Compose UI가 렌더링 된 모습을 볼 수 있습니다. 코드를 수정하면 잠시 후 Preview 화면도 자동으로 업데이트됩니다. 만약 업데이트가 되지 않는다면 빌드를 하면 됩니다.

@Preview에 showBackground = true를 넣으면 Preview 화면에 배경을 추가해줘서 한눈에 보기 좋습니다.

@Preview 파라미터

@Preview에는 다양한 파라미터를 사용해서 Preview 화면을 더욱 다채롭게 만들 수 있습니다.

name

name을 사용하면 Preview에 이름을 지정할 수 있습니다.

@Preview(name = "기본 인사말")
@Composable
fun GreetingPreview() { ... }

@Preview(name = "긴 이름일 경우")
@Composable
fun LongNameGreetingPreview() {
    Greeting("Android Jetpack Compose is Awesome")
}

uiMode

앱에서 다크모드를 지원한다면 Preview에서 바로 다크모드 화면을 확인할 수 있습니다.

import android.content.res.Configuration

@Preview(name = "라이트 모드")
@Composable
fun LightModePreview() { ... }

@Preview(name = "다크 모드", uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
fun DarkModePreview() { ... }

device

Preview에서 다양한 형태의 device를 지원합니다.

// 일반적인 스마트폰
@Preview(device = Devices.PHONE)
@Composable
fun PhonePreview() { ... }

// 태블릿
@Preview(device = Devices.TABLET)
@Composable
fun TabletPreview() { ... }

// 폴드
@Preview(device = Devices.FOLDABLE)
@Composable
fun FoldablePreview() { ... }

locale

다국어 테스트도 Preview에서 가능합니다.

@Preview(name = "한국어", locale = "ko")
@Composable
fun KoreanPreview() { ... }

@Preview(name = "영어 (미국)", locale = "en-US")
@Composable
fun EnglishPreview() { ... }

커스텀 @Preview 만들기

하나의 @Preview를 별칭을 지어서 만들 수도 있고 여러개의 @Preview를 묶어서 만들 수도 있습니다.

// 1. 여러 Preview 설정을 담은 커스텀 어노테이션 정의
@Preview(name = "라이트 모드", showBackground = true)
@Preview(name = "다크 모드", uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true)
annotation class ThemePreviews

// 2. 간편하게 사용하기
@ThemePreviews
@Composable
fun MyComponentPreview() {
    MyApplicationTheme {
        Greeting("Android with Preview")
    }
}

이제 @ThemePreviews 어노테이션 하나만 붙이면 라이트/다크 모드 미리 보기가 한 번에 생성됩니다.

 

마치며

@Preview는 단순히 코드를 시각화하는 것을 넘어, 우리의 개발 사이클을 획기적으로 단축시키고 다양한 환경에서의 UI 품질을 보장하는 필수적인 도구입니다. 오늘 배운 팁들을 적극적으로 활용하여, 지루한 빌드 시간 대신 창의적인 UI 개발에 더 많은 시간을 쏟아보세요!

이제 @Preview와 함께 더 빠르고 즐거운 Compose 개발을 시작할 시간입니다.

 

---

블로그 글에 대해 궁금한 점이 있다면 아래 카카오톡 오픈채팅에 들어와서 질문해주세요

Android Kotlin Compose QnA