들어가며

해당 정리는 안드로이드 공식 문서 Preview your UI with composable previews를 통해 알게 된 유용한 정보를 정리한 글입니다. Preview가 제공하는 기능이 생각보다 많더라고요! 다들 한 번쯤 편하게 읽어보시면 좋을 것 같아요!🤸

Locale

사실, 다른 팀원들이 적용하여 알게 된 기능입니다! 저희 프로젝트 같은 경우, default 언어가 영어이다 보니 preview를 보게 되면 영어가 적용되는 것을 확인할 수 있습니다.

개발 과정을 조금 더 편리하게 하기 위해 개발자 언어권에 맞게 locale을 변경할 수 있습니다.

@Preview(locale = "fr-rFR")
@Composable
fun DifferentLocaleComposablePreview() {
    Text(text = stringResource(R.string.greeting))
}

LocalInspectionMode

component가 미리보기 모드에서 실행되고 있는지 여부를 알려주는 CompositionLocal입니다.

@Composable
fun A() {
	val isPreview = LocalnspectionMode.current

    if (isPreview) {
        Text("미리보기 모드입니다.")
    } else {
        Text("실제 앱에서 실행 중입니다.")
    }
}

@Preview
@Composable
fun APreview() {
	A()
}

위와 같이 코드를 구성했을 때 미리보기 모드일 때와 실제 앱 실행 모드일 때 서로 다른 UI를 렌더링할 수 있습니다.

Multiple previews

저희가 프리뷰를 만들 때 단순히 @Preview 만을 사용해 컴포저블 함수를 구성하면 손쉽게 프리뷰를 확인할 수 있는 것처럼 이외에도 다양한 preview관련 어노테이션들이 존재합니다.

androidx.compose.ui:ui-tooling-preview 의 1.6.0-alpha01+를 추가할 경우, 다음의 다양한 어노테이션을 사용할 수 있습니다. (저희 프로젝트에는 이미 적용이 되어 있습니다.)

1. @PreviewScreenSize: 다양한 화면 크기에 따른 preview
2. @PreviewFontScales: 다양한 글자 크기에 따른 preview
3. @PreviewLightDartk: 다크/라이트 모드에 따른 preview

(위의 세 annotation을 모두 적용한 preview화면들 입니다.)