작성자: Kseniia Shumelchyk (Developer Relations Engineer), John Nichol (Tech Lead of Compose for Wear OS) 

원문은 여기서 확인하실 수 있으며, 블로그 리뷰에는 노현석(GDE)님이 참여해주셨습니다. 

 

Wear OS watch with blue background  

 

드디어 Wear OS용 Compose 베타 버전이 출시되었습니다. 이 최신 선언적 UI 툴킷을 통해 개발자는 사용자에게 훌륭한 Wear OS 경험을 제공할 수 있게 됩니다. 

 

Wear OS용 Compose는 최신 Wear OS용 머티리얼 디자인을 포함한 시계 최적화 구성 요소를 지원합니다. 이 구성 요소는 Compose의 핵심 라이브러리에 기반을 두며, 툴킷은 Modern Android Development를 활용하여 개발 과정 전반을 가속화합니다. 

 

Wear OS용 Compose의 이번 베타 버전은 올해 중 출시되는 1.0의 기능을 전부 갖추고 있어 프로덕션 환경에서 즉시 사용 가능한 앱을 구축할 수 있습니다. 정식 버전 API를 출시했으니 앞으로는 성능과 1.0 버전에 해당하는 기존 기능을 다듬는 데 중점을 둘 것입니다.  



 

달라진 베타 버전 

 

저희는 지난 I/O 이후 Jetpack Compose의 장점을 Wear OS에 담기 위해 노력했습니다. Slack을 통해 커뮤니티와 교류하고 API, 구성 요소, 도구에 관한 개발자 피드백을 수집하여 탐색, 지연 목록 크기 조정, 입력 및 동작 지원 등 다양한 구성 요소를 개선했습니다. 

 

첫 베타 버전은 알파 버전 21에 뒤이어 출시되었습니다. 개발자 프리뷰 발표 이후의 주요 변화는 다음과 같습니다.  

 

🆕 입력 방법 구성 요소 

 

사용자 입력 방법 구성 요소에 관한 개발자 여러분의 요청을 반영하여, 각 시계 앱에 맞춰 사용할 수 있는 다양한 컴포저블을 추가했습니다.  

 

  • 사용자는 Picker로 스크롤 목록에서 항목을 선택할 수 있습니다. 기본적으로 선택 가능한 항목 목록은 회전하는 원통을 측면에서 보는 것처럼 양방향으로 ‘무한' 반복됩니다. Picker는 내부에서 ScalingLazyColumn 구현을 사용하고 있어 여러 가지 고급 ScalingLazyColumn 기능을 개발하고 다듬을 수 있습니다.  

  • 사용자는 Slider로 범위 내에서 값을 선택하여 글꼴 크기나 밝기와 같은 설정을 조정할 수 있습니다. 

  • 사용자는 전체 화면 컨트롤 구성 요소인 Stepper로 범위 내에서 값을 선택하여 헤드폰 음량 등을 조절할 수 있습니다. 

 

🆕 대화 상자 

 

탐색 대상이나 기존의 전체 화면 대화 상자처럼 활용할 수 있는 전체 화면 알림 및 확인 컴포저블이 추가되었습니다. 대화 상자는 다른 콘텐츠 위에 표시되며 스와이프하여 닫기를 지원합니다. 스와이프 동작을 진행하는 동안 백그라운드에 상위 항목 콘텐츠를 표시합니다. 

 

Scaffold와의 일관성을 위해 전체 화면 대화 상자는 PositionIndicator와 Vignette을 표시합니다. 

 

🆕 Progress Indicator

 

시계 화면에 최적화한 Progress Indicator인 CircularProgressIndicator가 추가되었습니다. Indicator는 원형 트랙을 따라 시계 방향으로 움직이면서 진행 상태를 표시합니다. 

 

 

​​CircularProgressIndicator를 활용하는 몇 가지 방법이 있습니다. 정해지지 않은 진행 상태를 보여 주거나 진행 중인 작업의 완료 비율을 나타낼 수 있으며, Progress Indicators의 원형 트랙에는 다른 콘텐츠(예: 전체 화면의 TimeText)를 표시할 공간이 주어집니다. 

 

🆕 Page Indicator 

 

페이지로 나누기를 구현할 수 있도록, UI 툴킷에서 전체 페이지 수와 선택한 페이지를 나타내는 HorizontalPageIndicator 구성 요소를 제공합니다. 

 

 

HorizontalPageIndicator는 화면 모양에 따라 활성화한 페이지와 남은 페이지를 폼 팩터에 적합하게 시각화하여 표시합니다. 

 

개선 사항 

 

  • ScalingLazyColumn: 기본 동작을 개선하여 Wear OS용 머티리얼 디자인과 일관성을 유지합니다. 예를 들어, 계측 매개변수를 업데이트하고 추가 패딩을 기본값으로 설정했으며, 콘텐츠 크기로 크기를 측정하도록 했습니다. 

  • Scaffold: PageIndicator 슬롯을 추가하여 원형 기기에 항목을 올바르게 표시합니다. 

  • Navigation: Compose Navigation과 동일한 기능을 보장하고, 전체 화면 전환과 페이지 스크롤 시 가장자리 스와이프를 지원합니다. 

  • 곡선 요소: CurvedModifier와 새 DSL을 추가하여 방사형, 각도, 훑기, (반)시계 방향, 원내/원외와 같은 곡선 영역에 적절한 구성을 사용할 수 있습니다. CurvedLayout으로는 직선과 곡선 영역을 연결하고, curvedComposable을 사용하여 기존의 컴포저블 구성 요소를 도입하는 데 활용할 수 있습니다. 

 

최근 추가한 사항들 덕분에 Wear OS용 Compose 머티리얼 카탈로그의 구성 요소가 View 기반 레이아웃보다 더 다양해져 새로운 Wear OS 디자인 가이드라인을 독창적으로 구현할 수 있습니다.  

 

도구 

 

Android Studio Electric Eel에서 제공하는 최신 기능으로 Wear OS용 Compose와 함께하는 개발의 편리함을 느껴 보세요.  

 

  • 자동 완성과 편집기 작업을 개선하는 편집기와 도구 지원 

  • Wear OS용 컴포저블 미리보기 

  • 🆕 실시간 디버깅을 지원하는 Live Edit 

  • 🆕 Wear OS 프로젝트 템플릿용 Compose 

  

Horologist 

 

드디어 Horologist를 출시했습니다. 이는 Google의 오픈소스 프로젝트로 Wear OS용 Compose와 기타 Wear OS API의 기능을 보충해 주는 Wear 라이브러리 세트를 제공합니다. 

Gears of a watch 

 시계학에 관해 읽어 보세요 

 

Horologist에서는 유용한 Compose 확장 프로그램을 제공합니다. 

 

  • 재생 컨트롤과 음량 화면 등 미디어 UI 구성 요소 

  • 머티리얼의 날짜 및 시간 선택 도구 

  • 스크롤과 탐색 화면 변화를 동기화하는 TimeText 및 PositionIndicator를 동반한 Navigation 인식 Scaffold 

 

저희는 개발자가 다양한 경험을 제공하는 훌륭한 Wear OS 앱을 구축할 수 있도록 Horologist를 계속 개발하여 추가 도구를 제공하겠습니다. Github의 Horologist를 확인하여 피드백을 주시고 Wear 개발자가 유용하게 사용할 보편적인 기능을 만드는 데 기여해 보세요. 이후 출시할 버전도 많은 기대 바랍니다! 

 

시작하기 

 

모바일 Compose의 개발 원칙 중 다수가 Wear OS용 Compose에 적용되니, UI 툴킷에 익숙하지 않다면 Jetpack Compose 기본 과정부터 시작하는 걸 추천드립니다. 

 

Wear OS용 Compose를 시작하는 데 도움이 될 자료를 몇 가지 준비했습니다. 

 

 

Wear OS용 Compose 베타 버전이 출시되었으니 이제 Compose로 앱을 생동감 있게 구현하고 기존 UI를 새롭게 업데이트해 보세요. Wear OS 앱 구축에 관한 자세한 내용은 개발자 사이트를 참고하시기 바랍니다. 

 

Wear OS용 Compose로 앱을 구축한 여러분의 경험에 귀 기울이고자 합니다! Kotlin Slack #compose-wear 채널에서 이야기를 나누고 Issue Tracker에 피드백을 제출해 주세요.  

 

Compose와 함께라면 개발이 즐거워집니다!