레이아웃 미리보기

기기나 에뮬레이터에 앱을 배포하지 않아도 Android 스튜디오에서 Jetpack Compose 구성요소를 미리 볼 수 있습니다. 각각 다양한 너비와 높이 제한, 글꼴 크기 조정, 테마가 있는 구성 가능한 특정 함수의 미리보기가 여러 개 있을 수 있습니다. 앱을 개발할 때 미리보기가 업데이트되므로 변경사항을 더 빠르게 검토할 수 있습니다.

기본 레이아웃 미리보기 만들기

레이아웃 미리보기를 만들려면 매개변수를 전혀 사용하지 않는 구성 가능한 함수를 작성하고 @Preview 주석을 추가합니다. 앱을 빌드하면 미리보기 함수의 UI가 스튜디오의 Preview 창에 표시됩니다.

예를 들어 사용자에게 인사말을 표시하는 구성 가능한 함수가 있다고 가정해보겠습니다.

@Composable
fun Greeting(name: String) {
    Text (text = "Hello $name!")
}

이 함수의 UI를 미리 보려면 매개변수를 사용하지 않는 래퍼 함수를 작성하고 래퍼에 @Preview 주석을 추가합니다.

@Preview
@Composable
fun PreviewGreeting() {
    Greeting("Android")
}

간단하고 구성 가능한 'hello world' 함수, 이 함수를 호출하는 미리보기 함수, 미리보기 함수로 생성된 UI를 표시하는 미리보기 창을 표시합니다.

그림 1. 미리보기 함수로 생성된 UI를 표시하는 미리보기 창

미리보기에서 UI 요소를 클릭하면 스튜디오는 요소가 만들어진 줄로 이동합니다. 예를 들어 이 미리보기 창에서 'Hello Android!' 텍스트를 클릭하면 스튜디오는 텍스트 요소가 만들어진 Greeting()의 줄로 이동합니다.

코드가 변경되면 미리보기 창에서 refresh 버튼 Android 스튜디오 Compose 미리보기 새로고침 버튼을 클릭하여 미리보기를 업데이트합니다. 미리보기를 업데이트하려면 프로젝트를 다시 빌드해야 할 수도 있습니다. 이 작업이 필요하면 미리보기 창을 통해 알 수 있습니다.

매개변수를 @Preview 주석에 전달하여 미리보기를 맞춤설정할 수 있습니다. 예를 들어 미리보기의 라벨은 기본적으로 미리보기 함수의 이름에 기반하며 이 경우에는 PreviewGreeting입니다. name 매개변수를 전달하여 라벨을 변경할 수 있습니다.

@Preview(name = "Android greeting")
@Composable
fun PreviewGreeting() {
    Greeting("Android")
}

@Preview에 전달할 수 있는 매개변수의 전체 목록은 @Preview 참조를 확인하세요.

미리보기 창에 모두 함께 표시되는 여러 미리보기 함수를 정의할 수 있습니다. 예를 들어 다양한 종류의 입력을 테스트하는 함수를 작성할 수 있습니다.

@Preview(name = "Long greeting")
@Composable
fun PreviewLongGreeting() {
    Greeting("my valued friend, whom I am incapable of "
    + "greeting without using a great many words")
}

@Preview(name = "Newline greeting")
@Composable
fun PreviewNewlineGreeting() {
    Greeting("world\nwith a line break")
}

여러 미리보기 함수가 표시되는 미리보기 창

그림 2. 여러 미리보기 함수를 정의하면 함수의 UI가 동일한 미리보기 창에 모두 표시됨

기기에 미리보기 배포

기본 기기 또는 에뮬레이터에 미리보기를 배포하려면 deploy 버튼 Android 스튜디오 Compose 미리보기 기기에 배포 버튼을 클릭합니다. Android 스튜디오는 이 함수로 생성된 UI를 포함하는 새 활동을 만들고 기기의 앱에 배포합니다. 그러면 전체 앱을 재설치하거나 앱 위치로 이동하지 않아도 실제 기기에서 UI를 사용해 볼 수 있습니다.

미리보기 함수가 표시된 Android 기기의 스크린샷

그림 3. 가상 기기에 배포된 ComposeLongGreeting() 미리보기

대화형 미리보기

Android 스튜디오에서는 대화형 미리보기 모드를 제공합니다. 대화형 미리보기 모드에서 UI 요소를 클릭하거나 입력할 수 있으며 UI는 마치 설치된 앱에 있는 것처럼 응답합니다. 대화형 미리보기를 사용 설정하려면 미리보기 창 중 하나에서 interactive 버튼 Android 스튜디오 Compose 대화형 미리보기 버튼을 클릭합니다. 미리보기 패널은 모드를 종료할 때까지 해당 미리보기 함수의 대화형 모드로 전환됩니다.

예를 들어 사용자 클릭에 응답하는 이 함수를 살펴보겠습니다.

@Composable
fun Counter(count: Int, updateCount: (Int) -> Unit) {
    Button(
        onClick = { updateCount(count + 1) },
        colors = defaultButtonColors(
            backgroundColor = if (count > 5) Color.Green else Color.White
        )
    ) {
        Text("I've been clicked $count times")
    }
}
@Preview
@Composable
fun PreviewCounter() {
    val counterState = remember { mutableStateOf(0) }

    Counter(
        count = counterState.value,
        updateCount = { newCount ->
            counterState.value = newCount
        }
    )
}

이 함수의 일반적인 미리보기에는 UI 요소의 레이아웃이 표시됩니다. 하지만 버튼을 클릭할 때 응답하지 않으며, 대신 스튜디오에서 요소가 만들어진 줄로 이동됩니다.

반대로 대화형 미리보기 모드에서 버튼을 클릭하면 카운터가 증가합니다. 카운터가 6에 도달하면 실행 중인 앱에서처럼 버튼이 녹색으로 변경됩니다.

클릭에 응답하는 대화형 미리보기가 표시되는 미리보기 창

그림 4. 미리보기 창이 대화형 모드에 있으면 사용자 클릭에 응답함

참고: 대화형 미리보기 모드에서는 함수가 기기 저장소나 네트워크와 상호작용할 수 없습니다. 이러한 작업에 의존하는 기능을 테스트해야 한다면 가짜를 제공해야 합니다.