이 글의 원문은 여기서 확인하실 수 있습니다.

Todoist는 세계 최고의 작업 및 시간 관리 앱입니다. 3천만 명이 넘는 사용자들이 다양한 프로젝트를 조직하거나 기획하고 협업하는 데 Todoist를 활용합니다. Todoist는 사용자들이 업무와 생활에 보다 만족스럽게 자사의 앱을 활용하도록 최선을 다하고 있으며, 다양한 기기에서 사용할 수 있게 접근성을 높이고 있습니다. 

이러한 노력의 일환으로 Todoist 개발자들은 앱을 웨어러블 기기용으로 완전히 새로 개발하기 위해 Wear OS용 Compose를 채택했습니다. 이 최신 UI 툴킷은 Android가 다른 기기에 제공했던 것과 마찬가지로 개발자들에게 간단히 사용할 수 있는 여러 기능을 제공해 앱 개발의 효율을 높이고 관리를 용이하게 합니다.

Wear OS에 최적화된 친숙한 툴킷

Todoist 개발자들은 이미 Android 모바일용 Jetpack Compose를 접해 보았기 때문에, Wear OS용 Compose에 빠르게 적응할 수 있었습니다. Todoist의 Android 책임자 Rastislav Vaško는 "새 Wear 디자인 언어와 Wear OS용 Compose가 발표될 때 무척 설렜습니다. 플랫폼의 미래에 투자할 새로운 동기이자 기회였죠.”라고 말했습니다.

모바일용 Jetpack Compose와 마찬가지로, Wear OS용 Compose 툴킷을 이용하면 맞춤 설정이 가능한 컴포넌트를 통합하여 이전에 사용했던 View 기반 레이아웃보다 훨씬 빠르게 코드를 작성하고 디자인 요구 사항을 구현할 수 있습니다. 개발자들은 Wear OS용 Compose Codelab에서 제공하는 문서와 실습 지침을 참고해 툴킷에 관한 기존 지식을 웨어러블 플랫폼에 적용할 수 있었습니다.

Rastislav는 또한 "Wear OS용 Compose는 레이아웃을 만드는 데 필요한 거의 모든 요소를 갖추고 있었습니다. Swipe-dismiss, TimeText, ScalingLazyList는 모두 기대 이상으로 훌륭히 작동하는 컴포넌트였고, 지금도 이 기능들을 사용하면 눈에 띄는 뛰어난 앱을 만들 수 있습니다."라고 덧붙였습니다. 툴킷에서 아직 제공되지 않는 기능의 경우, Todoist는 Google의 Horologist를 활용했습니다. Horologist는 Wear OS 개발자에게 공통적으로 필요하지만 아직 출시되지 않은 기능을 제공하는 오픈소스 라이브러리 그룹입니다. Todoist 개발자들은 네이티브 디자인 가이드라인을 따르는 Fade Away Modifier를 포함하고자 Horologist의 Compose Layout Library를 이용했습니다.

개발 속도를 대폭 높여주는 Wear OS용 Compose

Wear OS용 Compose를 이용하면 Wear OS용 UI를 개발하는 과정이 간단해집니다. 엔지니어들은 풍부한 Kotlin 구문과 최신 선언형 접근 방식을 통해 복잡하면서도 가독성과 유지 보수성이 높은 화면을 만들 수 있습니다. Todoist 개발자들은 이에 크게 힘입어 앱을 개발하는 시간을 단축하면서도 더 많은 목표를 달성할 수 있었습니다.

이번 앱 재정비의 핵심은 최신 Wear OS용 머티리얼 디자인에 맞도록 모든 화면과 상호작용을 다시 설계하는 것이었습니다. Todoist 개발자들은 Wear OS용 Compose를 사용하여 WearableDrawerLayout에서 벗어나 더욱 평탄한 앱 구조를 만들었습니다. Wear OS용 머티리얼 디자인 지침에 따라 이런 변화를 이루어내자 앱의 레이아웃이 혁신되었습니다.

또한 Todoist는 사용자 경험을 복잡하게 만드는 불필요한 요소를 제거하여 각 화면을 Wear OS 기기에 알맞게 각 화면을 디자인했습니다.

Rastislav는 "웨어러블 기기용 앱을 개발할 때는 간결하고, 신속하며, 핵심에 집중하는 상호작용을 실현하고자 어떤 요소를 생략할 수 있을지 항상 고민합니다."라고 밝혔습니다. Todoist는 Wear OS용 Compose를 이용해 다양한 방향으로 앱 개발과 디자인을 개선했고, 그 결과 일관된 사용자 경험을 제공하면서 유지 보수성이 높은 기능도 구현할 수 있었습니다.

사용자 및 개발자 경험의 개선

Todoist 개발자들은 Jetpack Compose를 사용해 빠르고 효율적인 방식으로 앱을 Wear OS에 맞게 재탄생시켰습니다. 최신 도구와 직관적인 API를 활용하고 원활한 디자인 및 개발 프로세스를 위한 각종 리소스, 문서, 샘플을 참고하여 코드의 양을 줄이는 한편 기능성이 뛰어난 새로운 사용자 경험을 더 빠르게 제공할 수 있었습니다.

앱이 Wear OS용으로 거듭난 이후 Google Play에서는 Todoist 설치 증가율이 50% 증가했으며, Todoist 개발자들은 사내와 소셜 미디어에서 긍정적인 피드백을 받았습니다.

Todoist는 Wear OS용 Compose를 활용해 앱을 얼마나 더 훌륭히 발전시킬 수 있을지 기대하고 있습니다. 이번 재정비를 통해 웨어러블 기기의 미래에 투자한 Todoist 팀은 이제 Wear OS 3에서 작동하는 기기들이 어떤 기능으로 얼마나 더 많은 기회를 열어 줄지 기대하고 있습니다.

Wear OS용 Compose를 활용한 앱 혁신

Todoist는 Wear OS용 Compose로 앱을 완전히 새롭게 구축하고 설계하여 사용자와 개발자 양쪽의 경험을 모두 개선했습니다.

Wear OS용 Jetpack Compose에 대해 자세히 알아보세요.

• 처음 접하는 개발자를 위한 Google I/O의 Wear OS 안내
• 지금 바로 익힐 수 있는 Wear OS용 Compose Codelab
• Wear OS용 Compose를 통한 UI 구현 안내 문서
• Wear OS 개발을 보완하는 Horologist

삼성은 이번 주 갤럭시 언팩 이벤트에서 Android 생태계에 합류할 최신 기기를 출시했습니다. 아직 신제품을 보지 못하신 분들은 최신 폴더블 2종인 갤럭시 Z 폴드4와 Z 플립4, 그리고 Wear OS에서 실행되는 최신 스마트 워치 라인업인 갤럭시 워치5 시리즈를 확인해 보시기 바랍니다. 삼성 공지사항에 관한 자세한 내용은 여기에서 확인하실 수 있습니다.

새 기기에 관한 기대가 큰 가운데, 여러분의 앱이 대형 화면이나 Wear OS에서 사용자에게 멋진 경험을 제공할 수 있도록 투자하기에 지금만큼 적기가 없습니다. 시작하기 전에 알아두어야 할 정보를 정리했습니다.

갤럭시 Z 플립4와 Z 폴드4는 독보적인 폴더블 경험을 제공하는 기기로, Android 기기가 다양한 모양과 크기로 출시될 수 있음을 보여주는 아주 좋은 예입니다. Z 폴드4는 꾸준히 인상적인 성장세를 보여주고 있는 대화면 기기의 최신 기종입니다. 대화면 기기 사용자의 수가 2억 7천만 명에 육박하고 있는 바로 지금이 태블릿, 폴더블, Chrome OS에 맞춰 앱을 최적화하기에 적기입니다.

Google은 작년에 Android 12를 태블릿과 폴더블 기기에 더 최적화하기 위한 노력의 일환으로 Android 12L을 출시했으며, 삼성 갤럭시 Z 폴드4는 시중에서 최초로 12L을 기본 탑재하고 출시되는 기기입니다. Android 12L는 대화면용으로 맞춤 제작한 UI 업데이트, 개선된 멀티태스킹 경험, 호환성 모드 강화 등을 포함하므로 출시 직후부터 더 나은 디자인의 앱을 만나볼 수 있습니다. Google에서는 12L 이후 이러한 모든 대화면 업데이트 외에 더 많은 기능이 추가된 Android 13도 출시했습니다.

관련 문서를 확인하여 폴더블 기기에 적합한 앱 개발을 시작해 보세요. Z 폴드4와 Z 플립4는 다양한 각도로 접어 사용할 수 있습니다. 예를 들어 삼성의 '플렉스 모드'의 경우, 영상 시청부터 사진 촬영에 이르기까지 모든 작업을 핸즈프리로 할 수 있습니다. 기기가 어떤 모양으로 접혀 있든 관계없이 앱의 멋진 디자인을 유지하려면 Jetpack WindowManager 라이브러리를 사용해 앱을 폴드 인식으로 설정하고 폴더블 기기에서 앱을 테스트해 보세요. 마지막으로, 대화면 앱 품질 가이드라인을 참조하면 좋습니다. 이 가이드라인은 확장을 거듭하는 대화면 기기 생태계 전반에서 앱을 최고의 모습으로 선보이는 데 도움이 되는 종합적인 체크리스트로 구성되어 있습니다.

이 작업에 착수했던 개발자들은 이제 그 성과를 확인하고 있습니다. eBay는 앱을 대화면에 맞춰 최적화한 이후 Google Play 앱 평점이 4.7점으로 상승했습니다. Chrome의 멀티태스킹 사용량도 대화면의 경우 12L에서 18배 상승했습니다.

이번 주, 새로운 모습으로 개선된 갤럭시 워치5 시리즈와 함께 Wear OS 플랫폼이 확장되었습니다. 워치 라인업은 작년에 삼성이 갤럭시 워치4 시리즈에 탑재한 삼성 Wear OS를 통해 확인된 바 있는 웨어러블 플랫폼을 기반으로 합니다.

최신 갤럭시 워치5 시리즈나 기타 모든 Wear OS 기기에 맞춰 앱 개발을 시작하고자 한다면 지금이 바로 Wear OS용 Compose 버전 1.0을 확인할 적기입니다. 이 버전은 현대적인 선언형 UI 툴킷의 첫 번째 안정화 릴리스로서 Wear OS용 앱을 더 쉽고 빠르며 직관적으로 개발할 수 있도록 고안되었습니다. 이 툴킷은 Jetpack Compose의 장점을 Wear OS에 적용하고, 개발 프로세스 속도를 높여 더 적은 수의 코드 라인으로 멋진 앱을 제작할 수 있게 지원합니다.

1.0 버전은 선언형 방식에 따라 강력한 Kotlin 구문을 제공하여 UI 개발을 간소화합니다. 또한 워치 경험에 최적화된 UI 구성 요소 세트를 다양하게 제공하며 Android 스튜디오의 다양하고 강력한 도구를 함께 제공하여 UI 반복 작업을 간소화해 줍니다. 따라서 Wear OS 앱에 맞춘 사용자 인터페이스 구축에는 Wear OS용 Compose를 권장합니다.

Wear OS용 Compose를 처음 시작하는 개발자 여러분에게 도움이 될 유익한 자료를 많이 준비했습니다! 단계별 여정을 위해 구성한 학습 경로, 빠른 시작 가이드를 포함한 문서, 실습 경험을 제공하는 Wear OS용 Compose Codelab과 Github에서 제공하는 샘플을 참조하시기 바랍니다.

Wear OS용 Compose와 마찬가지로, 타일을 더 빠르고 손쉽게 만들 수 있도록 지원하는 Wear OS 타일 구성 요소도 개발 중입니다. 타일은 Wear OS 사용자가 할 일을 신속하게 완료하기 위해 필요한 정보와 작업을 한눈에 보고 액세스하는데 유용하며, Wear OS에서 가장 많이 사용되는 기능 중 하나입니다. 이번 업데이트에서는 머티리얼 구성 요소와 레이아웃을 제공하여 Wear OS에 적합한 최신 머티리얼 디자인을 사용한 타일을 제작할 수 있도록 지원합니다. 현재는 베타 버전이지만, 곧 출시가 공지될 예정이니 기다려 주시기 바랍니다!

또 한 가지 주목해야 할 출시 공지로는 Android 스튜디오의 최신 버전인 Android 스튜디오 Dolphin이 있습니다. 더 수월한 웨어러블 앱 개발을 위해 고안된 다음 기능에 주목해 주시기 바랍니다.

• Wear OS 에뮬레이터 툴바를 업데이트하여 Wear OS 기기에서 이용 가능한 버튼과 동작(손바닥으로 가리기, 기울이기, 두 개의 물리적 버튼 시뮬레이션 등)을 추가하였습니다.
• 에뮬레이터 페어링 도우미로 여러 대의 Wear OS 기기를 가상 또는 실물 스마트폰 한 대와 페어링할 수 있습니다. Android 스튜디오가 종료 후 페어링을 저장하므로 기기 관리자에서 Wear 기기를 확인할 수 있습니다.
• 다이렉트 서피스 론치를 통해 Wear OS 타일, 시계 모드 및 정보 표시용 실행/디버그 구성을 생성하고 이를 Android 스튜디오에서 직접 실행할 수 있습니다.

Google은 Jetpack Compose, 타일 구성 요소, Android 스튜디오 Dolphin 간의 Wear OS 앱 개발을 간소화하고 있습니다. 게다가 Wear OS 생태계에 갤럭시 워치5 시리즈가 추가되면서 탁월한 Wear OS 앱을 개발해야 할 이유가 더 많아졌습니다.

최적화를 시작할 적기, 바로 지금입니다!

올해는 폼 팩터가 대세입니다. Google은 개발자 여러분이 다양한 폼 팩터 전반에서 앱을 최적화하고 개발할 수 있도록 올해 Google I/O에서 선보인 세션과 워크숍, Android 스튜디오 기능 등 새로운 콘텐츠와 도구를 제공하는 데 최선을 다하고 있습니다. 또한 여러분의 최적화 여정을 돕고자 대화면 및 Wear OS용 머티리얼 디자인 가이드도 마련하였습니다.

삼성 갤럭시 언팩 이벤트는 워치5 시리즈부터 Z 폴드4에 이르기까지 다양한 크기와 형태의 화면을 아우르는 혁신의 장이었습니다. Android 기기 생태계 전체에서 멋진 모습의 앱을 선보일 수 있도록 준비하세요!

이 글의 원문은 여기서 확인할 수 있습니다. 

올해 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 라이브러리를 사용해야 합니다.

아래 표를 참고하여 차이점을 비교해볼 수 있습니다.

Wear OS 종속 항목 (androidx.wear.*)	비교	모바일 종속 항목 (androidx.*)
androidx.wear.compose:compose-material	오른쪽 대신	androidx.compose.material:material ₁
androidx.wear.compose:compose-navigation	오른쪽 대신	androidx.navigation:navigation-compose
androidx.wear.compose:compose-foundation	오른쪽 항목에 추가	androidx.compose.foundation: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),

     /*...*/ },

    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을 다수 도입했습니다.

칩	ToggleChip	BasicCurvedText	TimeText

또한, 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에 적합한 레이아웃을 지원합니다.

TimeText	Vignette	PositionIndicator

코드는 모바일에서 작성하는 코드와 무척 흡사합니다.

시작하기

Jetpack Compose를 Wear OS에 사용해 더 빠르고 쉽게 시계를 개발할 수 있게 되어 기쁩니다. 지금 바로 앱을 만들어보려면 빠른 시작 가이드를 확인해보세요. 간단하거나 복잡한 작업 예제는 모두 샘플 저장소에서 살펴볼 수 있습니다.

개발자 프리뷰는 API에 개발자 여러분의 의견을 반영할 좋은 기회이니, 여기에서 여러분의 피드백을 남겨주시고 Slack의 #compose-wear 채널에 참여해 알려주세요!