이 글의 원문은 여기서 확인할 수 있습니다.
올해 Google I/O에서, 저희는 최고의 Jetpack Compose를 Wear OS에 도입한다고 발표했습니다. 여러 차례 성공적으로 알파 버전을 선보인 끝에, 드디어 Wear OS용 Compose를 개발자 프리뷰로 제공합니다.
Compose는 UI 개발을 간소화하고 가속화합니다. 더 적은 코드로도 멋진 앱을 만들 수 있도록 Material You 지원이 기본으로 제공되는 Wear OS용 Compose도 마찬가지입니다.
또한, Jetpack Compose로 모바일 앱을 빌드하면서 터득한 사항을 Wear OS 버전에도 그대로 적용할 수 있습니다. 모바일과 마찬가지로, 언제든 즉시 테스트를 시작할 수 있으며 라이브러리의 초기 버전에 개발자 여러분의 의견을 반영한 후 베타 버전을 출시하고자 합니다.
이번 블로그 게시물에서는 저희 팀이 빌드한 주요 Composable을 소개해드리고 이를 사용하는데 필요한 리소스를 알려드리겠습니다.
시작해 봅시다!
종속 항목
Wear 관련 변경은 대부분 최상위 아키텍처 레이어에서 이루어집니다.
이는 곧 Jetpack Compose와 함께 이미 사용하는 많은 종속 항목이 Wear OS를 대상으로 할 때 변경되지 않는다는 뜻입니다. 예를 들어 UI, Runtime, Compiler, Animation 종속 항목은 동일하게 유지됩니다.
하지만 이전에 모바일 앱에서 사용한 라이브러리와는 다른, 적절한 Wear OS Material, Navigation 및 Foundation 라이브러리를 사용해야 합니다.
아래 표를 참고하여 차이점을 비교해볼 수 있습니다.
1. 개발자는 Wear Compose 머터리얼 라이브러리를 이용해 확장된 머티리얼 리플 및 머티리얼 아이콘과 같은 다른 머티리얼 관련 라이브러리를 계속 사용할 수 있습니다.
Wear OS에서 모바일 종속 항목을 사용하는 것은 가능하지만, 최상의 경험을 위해 항상 Wear 전용 버전을 사용하는 것을 권장합니다.
참고: 향후 출시에서는 더 많은 Wear Composable을 추가할 예정입니다. 누락된 항목이 있으면 알려주시기 바랍니다.
다음은 build.gradle 파일의 예입니다.
// Example project in app/build.gradle file
dependencies {
// Standard Compose dependencies...
// Wear specific Compose Dependencies
// Developer Preview starts with Alpha 07, with new releases coming soon.
def wear_version = "1.0.0-alpha07"
implementation "androidx.wear.compose:compose-material:$wear_version"
implementation "androidx.wear.compose:compose-foundation:$wear_version"
// For navigation within your app...
implementation "androidx.wear.compose:compose-navigation:$wear_version"
// Other dependencies...
}
알맞은 Wear Material, Foundation 및 Navigation 종속 항목을 추가했으면 시작할 준비가 완료된 것입니다.
Composable
지금 바로 사용할 수 있는 몇 가지 Composable을 살펴보겠습니다.
일반적으로 모바일 버전에 해당하는 Wear Composable 중 다수가 똑같은 코드를 사용할 수 있습니다. MaterialTheme을 통한 색상, 입력 체계, 모양의 스타일 지정 코드 역시 모바일과 동일합니다.
예를 들어 Wear OS 버튼을 생성하는 코드는 다음과 같습니다.
Button(
modifier = Modifier.size(ButtonDefaults.LargeButtonSize),
onClick = { /*...*/ },
enabled = enabledState
) {
Icon(
painter = painterResource(id = R.drawable.ic_airplane),
contentDescription = "phone",
modifier = Modifier
.size(24.dp)
.wrapContentSize(align = Alignment.Center),
)
}
위의 코드는 모바일 쪽과 매우 흡사하지만, 라이브러리는 Wear OS에 최적화된 버전의 버튼, 즉 Wear OS Material 지침을 따라 원형이며 ButtonDefaults로 크기가 조정된 버튼을 생성합니다.
다음은 라이브러리에서 발췌한 여러 가지 구성 가능한 예입니다.
그 밖에도, Wear 환경을 개선하는 새로운 Composable을 다수 도입했습니다.
또한, Wear에 최적화된 목록 Composable인 ScalingLazyColumn도 제공하여, 원형 표면을 보다 잘 지원하도록 LazyColumn을 확장하고, 확장 및 투명도 변경 사항을 추가합니다. 아래 앱에서는 가독성을 높이려고 화면 상단과 하단에서 콘텐츠가 축소되면서 희미해지는 모습을 볼 수 있습니다.
코드를 보면 이름만 다를 뿐 LazyColumn과 동일함을 알 수 있습니다.
val scalingLazyListState: ScalingLazyListState =
rememberScalingLazyListState()
ScalingLazyColumn(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.spacedBy(6.dp),
state = scalingLazyListState,
) {
items(messageList.size) { message ->
Card(/*...*/) { /*...*/ }
}
item {
Card(/*...*/) { /*...*/ }
}
}
스와이프하여 닫기
Wear에는 자체적인 Box 버전인 SwipeToDismissBox가 포함되어 있어 (모바일의 뒤로 버튼/제스처와 비슷하게) 스와이프하여 닫는 기능을 지원합니다.
간단한 코드 예시를 보여드리겠습니다.
// Requires state (different from Box).
val state = rememberSwipeToDismissBoxState()
SwipeToDismissBox(
modifier = Modifier.fillMaxSize(),
state = state
) { swipeBackgroundScreen ->
// Can render a different composable in the background during swipe.
if (swipeBackgroundScreen) {
/* ... */
Text(text = "Swiping Back Content")
} else {
/* ... */
Text( text = "Main Content")
}
}
다음은 좀 더 복잡한 동작을 보여주는 예입니다.
Navigation
마지막으로, 모바일에서 NavHost처럼 작동하지만 스와이프하여 닫기 동작도 기본적으로 지원하는(실제 내부적으로는 SwipeToDismissBox를 사용함) Navigation Composable인 SwipeDismissableNavHost도 제공합니다.
한 가지 코드 예시를 보여드리자면 아래와 같습니다.
Scaffold
Scaffold는 모바일과 마찬가지로 일반적인 패턴으로 화면을 정렬하는 데 도움이 되는 레이아웃 구조를 제공하지만 App Bar, FAB 또는 Drawer 대신 Time, Vignette 및 스크롤/위치 표시기와 같은 최상위 구성 요소를 채택해 Wear에 적합한 레이아웃을 지원합니다.
코드는 모바일에서 작성하는 코드와 무척 흡사합니다.
시작하기
Jetpack Compose를 Wear OS에 사용해 더 빠르고 쉽게 시계를 개발할 수 있게 되어 기쁩니다. 지금 바로 앱을 만들어보려면 빠른 시작 가이드를 확인해보세요. 간단하거나 복잡한 작업 예제는 모두 샘플 저장소에서 살펴볼 수 있습니다.
개발자 프리뷰는 API에 개발자 여러분의 의견을 반영할 좋은 기회이니, 여기에서 여러분의 피드백을 남겨주시고 Slack의 #compose-wear 채널에 참여해 알려주세요!
