Compose 도구

Android 스튜디오에 새로운 Jetpack Compose 전용 기능이 많이 추가되었습니다. Android 스튜디오는 코드 중심 접근 방식을 지원하므로 개발자는 디자인 인터페이스나 코드 편집기 중에서 선택할 필요 없이 생산성을 개선할 수 있습니다.

뷰 기반 UI와 Jetpack Compose의 기본적인 차이점은 Compose가 컴포저블을 렌더링하는 데 View에 의존하지 않는다는 것입니다. 이 아키텍처 접근 방식을 사용하면 Android 스튜디오는 Android 뷰 방식과 달리 에뮬레이터를 열거나 기기에 연결하지 않고도 Jetpack Compose용 확장 기능을 제공하므로, 개발자가 더 빠른 반복 프로세스로 UI 디자인을 구현할 수 있습니다.

Android 스튜디오의 Jetpack Compose 전용 기능을 사용 설정하려면 애플리케이션 build.gradle 파일에 다음 종속 항목을 추가해야 합니다.

debugImplementation "androidx.compose.ui:ui-tooling:1.2.1"
implementation "androidx.compose.ui:ui-tooling-preview:1.2.1"

컴포저블 미리보기

컴포저블은 @Composable로 주석 처리된 함수에 의해 정의됩니다.

@Composable
fun SimpleComposable() {
    Text("Hello World")
}

'Hello World' 문구가 포함된 간단한 텍스트 요소

이 컴포저블의 미리보기를 사용 설정하려면 @Composable 및 @Preview 주석이 있는 추가 컴포저블을 만들어 처음에 만든 컴포저블을 방출해야 합니다.

@Preview
@Composable
fun ComposablePreview() {
    SimpleComposable()
}

마지막으로 분할(디자인/코드) 뷰를 클릭하여 오른쪽 측면 패널을 엽니다. 이 패널에 미리보기가 표시됩니다.

Android 스튜디오 '분할 뷰' 선택기

미리보기 창에 표시된 간단한 텍스트 뷰

코드에 매개변수를 수동으로 추가하여 Android 스튜디오의 @Preview 렌더링 방식을 맞춤설정할 수 있습니다.

`@Preview` 기능

Android 스튜디오는 컴포저블 미리보기를 확장할 수 있는 기능을 제공합니다. 컨테이너 디자인을 변경하거나 미리보기와 상호작용하거나 에뮬레이터 또는 기기에 미리보기를 직접 배포할 수 있습니다.

LocalInspectionMode

LocalInspectionMode CompositionLocal에서 읽어 컴포저블이 미리보기에서 렌더링되고 있는지 확인할 수 있습니다. 그러면 실제 데이터를 표시하는 대신 미리보기 창에 자리표시자 이미지를 표시하는 등의 작업을 실행할 수 있습니다. 컴포지션이 미리보기에서 렌더링되는 경우 LocalInspectionMode.current가 true로 평가됩니다.

if (LocalInspectionMode.current) {
    // Show this text in a preview window:
    Text("Hello preview user!")
} else {
    // Show this text in the app:
    Text("Hello $name!")
}

대화형 모드

대화형 모드를 사용하면 기기에서와 유사한 방식으로 미리보기와 상호작용할 수 있습니다. 대화형 모드는 샌드박스 환경에서 다른 미리보기로부터 격리됩니다. 샌드박스 환경에서는 요소를 클릭하여 미리보기에 사용자 입력을 제공할 수 있습니다. 미리보기에서 애니메이션도 재생됩니다. 대화형 모드를 사용하면 체크박스가 선택되어 있는지 또는 비어 있는지와 같이 컴포저블의 여러 상태 및 동작을 빠르게 테스트할 수 있습니다.

미리보기 대화형 모드는 에뮬레이터를 실행하지 않고 Android 스튜디오 내에서 직접 실행되며 따라서 일부 제한사항이 초래됩니다.

네트워크에 액세스할 수 없음
파일에 액세스할 수 없음
일부 Context API를 완전히 사용하지 못할 수도 있음

미리보기의 '대화형' 버튼을 클릭하는 사용자

미리보기와 상호작용하는 사용자의 동영상

미리보기 배포

특정 @Preview를 에뮬레이터 또는 실제 기기에 배포할 수 있습니다. 미리보기는 새 활동과 동일한 프로젝트 앱 내에 배포되므로 동일한 컨텍스트와 권한을 공유합니다. 즉, 권한이 이미 부여된 경우 권한을 요청하는 것과 같은 상용구 코드를 작성할 필요가 없습니다.

@Preview 주석 옆이나 미리보기 상단에 있는 Deploy to Device 아이콘 을 클릭하면 Android 스튜디오에서 연결된 기기나 에뮬레이터에 @Preview를 배포합니다.

미리보기의 '배포' 버튼을 클릭하는 사용자

기기에 미리보기를 배포하는 사용자의 동영상

다중 미리보기 주석

다중 미리보기를 사용하면 자체적으로 다양한 구성과 함께 여러 @Preview 주석을 포함하는 주석 클래스를 정의할 수 있습니다. 구성 가능한 함수에 이 주석을 추가하면 다양한 미리보기가 모두 한 번에 자동 렌더링됩니다. 예를 들어, 이 주석을 사용하면 하나의 컴포저블에 관한 정의를 모두 반복하지 않고도 여러 기기, 글꼴 크기, 테마를 동시에 미리 볼 수 있습니다.

먼저 나만의 맞춤 주석 클래스를 만듭니다.

@Preview(
    name = "small font",
    group = "font scales",
    fontScale = 0.5f
)
@Preview(
    name = "large font",
    group = "font scales",
    fontScale = 1.5f
)
annotation class FontScalePreviews

미리보기 컴포저블에 이 맞춤 주석을 사용할 수 있습니다.

@FontScalePreviews
@Composable
fun HelloWorldPreview() {
    Text("Hello World")
}

작은 글꼴과 큰 글꼴이 포함된 컴포저블을 보여주는 Android 스튜디오 디자인 탭

여러 개의 다중 미리보기 주석과 일반 미리보기 주석을 조합하여 더 완전한 미리보기 조합을 만들 수 있습니다. 다중 미리보기 주석을 결합한다고 해서 여러 조합이 모두 표시되는 것은 아닙니다. 대신 각 다중 미리보기 주석이 독립적으로 작동하며 다중 미리보기 주석 고유의 변형만 렌더링합니다.

@Preview(
    name = "dark theme",
    group = "themes",
    uiMode = UI_MODE_NIGHT_YES
)
@FontScalePreviews
@DevicePreviews
annotation class CombinedPreviews

@CombinedPreviews
@Composable
fun HelloWorldPreview() {
    MyTheme { Surface { Text("Hello world") } }
}

모든 구성의 컴포저블이 표시된 Android 스튜디오 디자인 탭

코드 탐색 및 컴포저블 개요

미리보기 위로 마우스를 가져가면 미리보기 내에 포함된 컴포저블의 개요가 표시됩니다. 컴포저블 개요를 클릭하면 편집기 뷰가 컴포저블 정의로 이동합니다.

`@Preview` 렌더링 복사

렌더링된 모든 미리보기는 마우스 오른쪽 버튼으로 클릭하여 이미지로 복사할 수 있습니다.

미리보기를 클릭하여 이미지로 복사하는 사용자

배경 색상 설정

기본적으로 컴포저블은 투명한 배경에 표시됩니다. 배경을 추가하려면 showBackground 및 backgroundColor 매개변수를 추가하세요. backgroundColor는 Color 값이 아니라 ARGB Long입니다.

@Preview(showBackground = true, backgroundColor = 0xFF00FF00)
@Composable
fun WithGreenBackground() {
    Text("Hello World")
}

'Hello World' 문구가 있는 녹색 직사각형

크기

기본적으로 콘텐츠를 래핑하기 위해 @Preview 크기가 자동으로 선택됩니다. 크기를 수동으로 설정하려면 heightDp 및 widthDp 매개변수를 추가하면 됩니다. 이 값은 이미 Dp로 해석되므로 값의 끝에 .dp를 추가할 필요가 없습니다.

@Preview(widthDp = 50, heightDp = 50)
@Composable
fun SquareComposablePreview() {
    Box(Modifier.background(Color.Yellow)) {
        Text("Hello World")
    }
}

'Hello World' 문구가 있는 노란색 정사각형

언어

여러 사용자 언어를 테스트하려면 locale 매개변수를 추가해야 합니다.

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

'Bonjour' 단어와 프랑스 국기가 포함된 간단한 텍스트 요소

시스템 UI

미리보기 내에 상태 표시줄과 작업 모음을 표시해야 하는 경우 showSystemUi 매개변수를 추가하세요.

@Preview(showSystemUi = true)
@Composable
fun DecoratedComposablePreview() {
    Text("Hello World")
}

활동을 상태 표시줄 및 작업 모음과 함께 보여주는 미리보기 창

@PreviewParameter

@PreviewParameter 주석이 있는 매개변수를 추가하여 컴포저블 미리보기 함수에 샘플 데이터를 전달할 수 있습니다.

@Preview
@Composable
fun UserProfilePreview(
    @PreviewParameter(UserPreviewParameterProvider::class) user: User
) {
    UserProfile(user)
}

샘플 데이터를 제공하려면 PreviewParameterProvider를 구현하고 샘플 데이터를 시퀀스로 반환하는 클래스를 만듭니다.

class UserPreviewParameterProvider : PreviewParameterProvider<User> {
    override val values = sequenceOf(
        User("Elise"),
        User("Frank"),
        User("Julia")
    )
}

시퀀스에서는 데이터 요소당 미리보기 하나가 렌더링됩니다.

여러 미리보기에 같은 제공자 클래스를 사용할 수 있습니다. 필요하다면 limit 매개변수를 설정하여 렌더링할 미리보기 수를 제한합니다.

@Preview
@Composable
fun UserProfilePreview(
    @PreviewParameter(UserPreviewParameterProvider::class, limit = 2) user: User
) {
    UserProfile(user)
}

UI 모드

uiMode 매개변수는 모든 Configuration.UI_* 상수를 사용할 수 있으므로 개발자가 적절하게 미리보기의 동작을 변경할 수 있습니다. 예를 들어 미리보기를 야간 모드로 설정하여 테마가 어떻게 반응하는지 확인할 수 있습니다.

편집기 작업

Android 스튜디오의 편집기 영역 내부에는 Jetpack Compose로 생산성을 개선할 수 있는 기능도 있습니다.

라이브 템플릿

Android 스튜디오에 Compose 관련 라이브 템플릿이 추가되었습니다. 이 템플릿을 사용하면 상응하는 템플릿 약어를 입력하여 코드 스니펫을 빠르게 삽입할 수 있습니다.

comp: @Composable 함수 설정
prev: 구성 가능한 @Preview 함수 만들기
paddp: dp에 padding 수정자 추가
weight: weight 수정자 추가
W, WR, WC: 현재 컴포저블을 Box, Row 또는 Column 컨테이너로 둘러싸기

여백 아이콘

여백 아이콘은 줄 번호 옆 사이드바에 표시되는 상황별 작업입니다. 개발자가 편리하게 사용할 수 있도록 Android 스튜디오에 Jetpack Compose 전용 여백 아이콘이 여러 개 추가되었습니다.

미리보기 배포

여백 아이콘에서 직접 에뮬레이터 또는 실제 기기에 @Preview를 배포할 수 있습니다.

색상 선택 도구

컴포저블 내부 또는 외부에서 색상이 정의될 때마다 여백에 미리보기가 표시됩니다. 다음과 같이 색상을 클릭하여 색상 선택 도구를 통해 변경할 수 있습니다.

여백에서 색상을 클릭하고 색상 선택 도구를 표시하는 사용자

이미지 리소스 선택 도구

컴포저블 내부 또는 외부에서 드로어블, 벡터 또는 이미지가 정의될 때마다 여백에 미리보기가 표시됩니다. 다음과 같이 이미지 리소스를 클릭하여 이미지 리소스 선택 도구를 통해 변경할 수 있습니다.

여백의 아이콘을 클릭하고 리소스 선택 도구를 표시하는 사용자

반복적 코드 개발

모바일 개발자는 일반적으로 앱의 UI를 모두 한 번에 개발하는 대신 단계별로 개발합니다. Android 스튜디오는 Jetpack Compose를 통해 전체 빌드가 없어도 검사, 값 수정, 최종 결과 확인이 가능한 도구를 제공하여 이러한 개발 방식을 지원합니다.

리터럴 실시간 편집

Android 스튜디오는 미리보기, 에뮬레이터, 실제 기기 내 컴포저블에 사용되는 상수 리터럴을 실시간으로 업데이트할 수 있습니다. 지원되는 유형은 다음과 같습니다.

Int
String
Color
Dp
Boolean

소스 코드에서 리터럴을 변경하는 사용자의 동영상 및 동적으로 업데이트되는 미리보기

리터럴 실시간 편집 UI 표시기를 통해 리터럴 장식을 사용 설정하여 컴파일 단계 없이 실시간 업데이트를 트리거하는 상수 리터럴을 확인할 수 있습니다.

리터럴 실시간 편집 사용 설정

실시간 편집

Android 스튜디오 Android 스튜디오의 카나리아 릴리스에서 실시간 편집을 사용하여 Compose 개발 환경을 가속화할 수 있습니다. 실시간 편집은 리터럴의 더 강력한 실시간 편집 버전입니다. 이 기능을 사용하면 에뮬레이터 또는 기기에 코드 변경사항을 자동으로 배포하여 컴포저블의 업데이트 효과를 실시간으로 확인할 수 있습니다.

실시간 편집 UI 개요

변경사항 적용

변경사항 적용 기능을 사용하면 앱을 에뮬레이터 또는 실제 기기에 다시 배포할 필요 없이 코드 및 리소스를 업데이트할 수 있습니다(일부 제한사항이 있음).

컴포저블을 추가, 수정 또는 삭제할 때마다 이 버튼을 클릭하여 앱을 다시 배포할 필요 없이 앱을 업데이트할 수 있습니다.

'변경사항 적용' 버튼을 클릭하는 사용자

Layout Inspector

Layout Inspector를 사용하면 에뮬레이터나 실제 기기에서 실행 중인 앱 내의 Compose 레이아웃을 검사할 수 있습니다.

재구성 횟수 가져오기

Layout Inspector를 사용하여 컴포저블이 재구성되거나 건너뛰는 빈도를 확인할 수 있습니다. UI 성능이 낮은 경우는 종종 UI가 과도하게 재구성되어야 하는 코딩 오류로 인한 것입니다. 반대로 일부 코딩 오류로 인해 UI가 재구성되어야 할 때 재구성되지 않는 경우도 있습니다. 즉, UI 변경사항이 화면에 표시되지 않습니다. 재구성을 추적하면 이러한 종류의 문제를 모두 찾는 데 도움이 됩니다.

재구성을 추적하려면 뷰 옵션에서 Show Recomposition Counts를 사용 설정합니다.

뷰 옵션에서 재구성 횟수가 사용 설정됨

재구성 횟수가 사용 설정된 후 Layout Inspector의 왼쪽에는 재구성 횟수가 표시되고 오른쪽에는 건너뛴 재구성이 표시됩니다.

Layout Inspector에 표시되는 재구성 횟수

Layout Inspector에서 컴포저블을 더블클릭하면 분석에 맞는 대응 코드로 이동합니다.

애니메이션

Android 스튜디오를 사용하면 애니메이션 미리보기에서 애니메이션을 검사할 수 있습니다. 컴포저블 미리보기에 애니메이션이 표시되는 경우, 변화 과정 동안 애니메이션을 디버그하기 위해 특정 시간에 각 애니메이션된 값의 정확한 값을 검사하거나 애니메이션을 일시중지하거나 반복하거나 빨리 감거나 느리게 재생할 수 있습니다.

AnimatedVisibility 재생, 스크러빙, 속도 저하

애니메이션 미리보기를 사용하여 애니메이션 곡선을 그래프로 시각화할 수도 있습니다. 이는 애니메이션 값이 제대로 구성되었는지 확인하는 데 유용합니다.

애니메이션 곡선 시각화

애니메이션 미리보기는 Start Animation Inspection 아이콘 으로 표시되는 검사 가능한 애니메이션을 자동으로 감지합니다.

Design 창의 Start Animation Inspection 아이콘

애니메이션 미리보기는 현재 updateTransition API를 지원합니다. updateTransition과 함께 애니메이션 미리보기를 사용하려면 Compose 버전 1.0.1 이상을 사용하세요.

실험용 기능 사용 설정

일부 기능은 Android 스튜디오 환경설정에 있는 실험용 섹션(File > Settings > Experimental, Mac에서는 Android Studio > Preferences > Experimental)에서 수동으로 사용 설정한 후에만 사용할 수 있습니다.

Android 스튜디오 실험용 환경설정에서 사용 설정된 Compose 도구

Compose 도구

컴포저블 미리보기

@Preview 기능

LocalInspectionMode

대화형 모드

미리보기 배포

다중 미리보기 주석

코드 탐색 및 컴포저블 개요

@Preview 렌더링 복사

배경 색상 설정

크기

언어

시스템 UI

@PreviewParameter

UI 모드

편집기 작업

라이브 템플릿

여백 아이콘

미리보기 배포

색상 선택 도구

이미지 리소스 선택 도구

반복적 코드 개발

리터럴 실시간 편집

실시간 편집

변경사항 적용

Layout Inspector

재구성 횟수 가져오기

애니메이션

실험용 기능 사용 설정

`@Preview` 기능

`@Preview` 렌더링 복사