Compose Multiplatform 1.6.0 – 리소스, UI 테스트, iOS 접근성 및 Preview 어노테이션

Jessie Cho

Read this post in other languages:

• English
,
• 日本語
,
• 简体中文

Compose Multiplatform은 개발자가 다양한 플랫폼에서 UI 구현을 공유할 수 있도록 JetBrains에서 빌드한 선언적 UI 프레임워크입니다. 1.6.0 릴리스에서는 최신 Kotlin 버전과의 호환성 및 Google의 최신 Jetpack Compose 업데이트 변경 사항과 더불어 여러 가지 강력한 기능을 제공합니다.

Compose Multiplatform 시작하기

이번 Compose Multiplatform 릴리스의 하이라이트:

• 리소스 관리 라이브러리를 개선했습니다.
• UI 테스트 API를 도입했습니다.
• iOS 접근성 지원을 추가했습니다.
• 다양한 기타 기능과 개선 사항을 제공합니다.

주요 변경 사항에 대한 자세한 설명은 Compose Multiplatform 1.6.0의 새로운 기능 페이지를 참조하거나 GitHub의 릴리스 노트를 확인하세요.

공통 리소스 API

Compose Multiplatform 1.6.0에서 가장 기대되었던 주된 변화는 공통 Kotlin 코드에서 리소스를 공유하고 액세스하기 위한 API의 개선입니다. 이제 이 API를 사용하면 Compose Multiplatform 애플리케이션에 더 많은 유형의 리소스를 포함하고 액세스할 수 있습니다.

이러한 리소스는 commonMain 소스 집합의 일부로 여러 디렉터리에 구성되어 있습니다.

• composeResources/drawable에는 이미지가 포함되어 있습니다.
• composeResources/font에는 글꼴이 포함되어 있습니다.
• composeResources/values에는 문자열이 포함되어 있습니다(strings.xml 형식).
• composeResources/files에는 다른 파일들이 포함되어 있습니다.

Compose Multiplatform은 이러한 모든 리소스 유형(files 디렉터리 제외)에 대해 타입 안전 접근자를 생성합니다. 예를 들어 composeResources/drawable 디렉터리에 벡터 이미지 compose-multiplatform.xml을 놓은 후, 생성된 Res 객체를 사용하여 Compose Multiplatform 코드에서 해당 이미지에 액세스할 수 있습니다.

import androidx.compose.foundation.Image
import androidx.compose.runtime.Composable
import kotlinproject.composeapp.generated.resources.*
import org.jetbrains.compose.resources.ExperimentalResourceApi
import org.jetbrains.compose.resources.painterResource

@OptIn(ExperimentalResourceApi::class)
@Composable
fun Logo() {
    Image(
        painterResource(Res.drawable.compose_multiplatform),
        contentDescription = "CMP Logo"
    )
}

또한 새로운 리소스 API를 사용하면 로케일, 화면 밀도 또는 테마를 비롯해 다양한 사용 사례에 동일한 리소스의 변형 형태를 제공할 수 있습니다. 텍스트를 현지화하거나, 다크 모드에서 아이콘 색상을 변경하거나, 화면 해상도에 따라 대체 이미지를 제공하는 모든 경우에 디렉터리 이름에 한정자를 추가하여 이러한 제약 조건을 표현할 수 있습니다.

리소스 한정자를 자세히 살펴보고 Compose Multiplatform 1.6.0의 새로운 리소스 API를 보다 심층적으로 개괄하려면 공식 문서를 살펴보세요.

UI 테스트를 위한 공통 API

UI 테스트는 애플리케이션이 예상대로 작동하는지 확인하는 데 도움을 줍니다. Compose Multiplatform 1.6.0에서는 프레임워크에서 지원하는 다양한 플랫폼에서 애플리케이션의 사용자 인터페이스 동작을 검증하는 Compose Multiplatform용 공통 UI 테스트를 작성할 수 있도록 실험적 API를 도입했습니다.

예를 들어, 사용자 지정 구성 요소가 적절한 접두사와 함께 정보 문자열을 올바르게 표시하는지 확인해야 할 수 있습니다.

@Composable
fun MyInfoComposable(info: String, modifier: Modifier) {
    Text(modifier = modifier, text = "[IFNO] $info")
}

최신 버전의 Compose Multiplatform에서는 이제 UI 테스트를 사용하여 렌더링 시 구성 요소가 실제로 텍스트 접두사를 올바르게 지정하는지 확인할 수 있습니다. 이를 위해 Android의 Jetpack Compose에서와 동일하게 파인더, 어설션, 액션 및 매처를 사용할 수 있습니다. 문서의 설정 지침을 따른 후, 접두사가 올바르게 추가되었는지 확인하는 테스트를 작성할 수 있습니다.

import androidx.compose.ui.test.ExperimentalTestApi
import androidx.compose.ui.test.runComposeUiTest
...

class InformationTest {
    @OptIn(ExperimentalTestApi::class)
    @Test
    fun shouldPrefixWithInfoTag() = runComposeUiTest {
        setContent {
            MyInfoComposable("Important things!", modifier = Modifier.testTag("info"))
        }
        onNodeWithTag("info").assertTextContains("[INFO]", substring = true)
    }
}

타깃 플랫폼에서 이 테스트를 실행하면 테스트 결과가 표시됩니다(그리고 이 경우, 오타를 찾아 수정하는 데 도움을 줍니다!).

iOS 접근성 지원

이제 iOS용 Compose Multiplatform을 사용하면 장애가 있는 사용자도 네이티브 UI에서와 같이 편안하게 Compose UI와 상호 작용할 수 있습니다.

• 스크린 리더와 VoiceOver가 Compose Multiplatform UI의 콘텐츠에 액세스할 수 있습니다.
• Compose Multiplatform UI는 탐색 및 상호 작용을 위해 네이티브 UI와 동일한 동작을 지원합니다.

Compose Multiplatform 시맨틱 데이터가 접근성 트리에 자동으로 매핑되기 때문에 가능한 일입니다. 또한 이 데이터를 접근성 서비스에 제공하고 XCTest 프레임워크를 통한 테스트에 사용할 수도 있습니다.

현재 접근성 지원의 구현과 제한 사항에 대한 자세한 내용은 문서 페이지를 참조하세요.

Fleet에서 지원하는 @Preview 어노테이션

1.6.0 버전에서는 Compose Multiplatform에 공통 @Preview 어노테이션이 도입되었습니다(이전에는 Android 및 데스크톱에서만 사용 가능). 이 어노테이션은 JetBrains Fleet(Fleet 1.31부터)에서 지원됩니다. @Composable 함수에 @Preview를 추가하면 여백 아이콘을 통해 미리보기를 열 수 있습니다.

Kotlin Multiplatform 마법사로 생성된 프로젝트에 사용해 보세요!

현재, Fleet은 매개변수 없이 @Composable 함수에 대한 @Preview 어노테이션을 지원합니다. 이 공통 어노테이션을 사용하려면 실험적 compose.components.uiToolingPreview 라이브러리를 종속성에 추가하세요(데스크톱 및 Android에 사용되는 compose.uiTooling과 달리).

팝업, 대화상자 및 드롭다운 메뉴에 대한 별도의 플랫폼 뷰

Compose Multiplatform을 SwiftUI와 함께 사용할 때 Compose를 사용하여 특정 화면의 일부 위젯만 렌더링해야 할 수 있습니다. 버전 1.6부터 이러한 시나리오에서 Dialog, Popup 또는 Dropdown 컴포저블을 만들면 개별 위젯의 경계를 넘어 확장할 수 있습니다. 심지어, 전체 화면으로까지 확장할 수도 있습니다!

현재 실험적 기능이기는 하지만 데스크톱 타깃에도 가능합니다.

기타 주목할 만한 변경 사항

이번 릴리스에 포함된 나머지 변경 사항에 대해 알아보려면:

• 1.6.0에 도입된 개선 사항과 기능이 자세히 설명된 Compose Multiplatform 1.6.0의 새로운 기능 페이지를 참조하세요.
• GitHub의 Compose Multiplatform 릴리스 노트에는 1.6.0에 대한 병합된 풀 리퀘스트의 전체 목록이 수록되어 있습니다.

기타 유용한 글과 영상

• Compose Multiplatform 시작하기 — 튜토리얼

• Compose Multiplatform을 사용하여 iOS, Android 및 데스크톱용 앱 빌드 — 동영상

게시물 원문 작성자

Sebastian Aigner

Aleksey Zamulla

Subscribe to Kotlin Blog updates

Subscribe form

By submitting this form, I agree to the JetBrains Privacy Policy Notification icon

이 양식을 제출함으로써 본인은 JetBrains s.r.o.("JetBrains"가 본인의 이름, 이메일 주소 및 위치 데이터를 사용하여 상업적 커뮤니케이션을 포함한 뉴스레터를 보내고 이러한 목적으로 개인 데이터를 처리할 수 있음에 동의합니다. 본인은 JetBrains가 JetBrains 개인정보보호정책에 따라 이러한 목적으로 제3자 서비스를 사용하여 해당 데이터를 처리할 수 있음에 동의합니다. 본인은 내 프로필에서 언제든지 이 동의를 철회할 수 있음을 이해합니다. 또한 각 이메일에는 수신 거부 링크가 포함됩니다.

Submit

감사합니다!