ZEPETO는 NAVER Z에서 제작한 3D 메타버스 플랫폼으로, 200여 개국에 3억 명이 넘는 사용자를 두고 있습니다. ZEPETO에서는 하나뿐인 아바타를 만들고, 친구를 사귀고, 나만의 상상력으로 빚어낸 가상 공간을 탐험할 수 있습니다. 사용자 경험을 우선시하는 플랫폼을 구축하기 위한 방법의 일환으로, ZEPETO의 엔지니어들은 Android의 최신 네이티브 UI 툴킷인 Jetpack Compose로 마이그레이션을 시작하게 되었습니다.
Jetpack Compose로 통합 ZEPETO 최초 개발 당시에는 View와 Unity, OpenGL이 사용되었으나, 기존에 View로 작성된 UI 코드의 20%가 현재 Jetpack Compose로 재작성되었습니다. 이후 개발 과정에서 반복적으로 발생하는 충돌을 해결하기 위해 ZEPETO 개발자들은 순차적으로 Compose 통합 작업을 진행했습니다. View 시스템에서 Slider나 Switch처럼 특정한 모양을 띠는 커스텀 UI를 구현하려면 onDraw 메서드에서 Canvas 클래스를 호출해야 합니다. Jetpack Compose에서는 커스텀 클래스를 정의할 필요 없이 Kotlin만으로 이러한 UI를 구현할 수 있어 개발 과정이 간소화되고 추가적인 절차가 줄어듭니다.
코드베이스 축소 Jetpack Compose가 도입된 후, ZEPETO 개발자들은 복잡한 UI 기능을 재작성했습니다. 새로운 설계 시스템에서는 글꼴 및 크기를 보다 직관적인 방식으로 조정할 수 있어 유지 보수성, 효율성, 사용자 경험이 크게 개선되었습니다. Android 개발자 김호중 님은 “Compose를 사용하여 캐릭터 샵, 선물하기, 얼굴 꾸미기 화면처럼 UI가 비교적 복잡하고 다양한 비즈니스 로직이 존재하는 부분의 코드를 재작성했습니다.”라고 전했습니다. 캐릭터 샵의 페이저와 그리드 같은 영역에서는 Composable을 사용하여 코드 수를 10% 이상 줄였습니다.
ZEPETO에서는 다이얼로그 컴포넌트도 Compose로 마이그레이션하기로 했습니다. 이로써 엔지니어들은 앱 전반에 걸쳐 원하는 형태의 다이얼로그를 사용할 수 있게 되었습니다. ZEPETO 소속 Android 개발자인 박주형 님은 “이제 공통 다이얼로그의 각 구성 요소를 컴포넌트로 만들어, 마치 레고를 조립하듯 공통 다이얼로그를 만들 수 있게 되었습니다.”라고 말했습니다. 코드 모듈화 덕분에 개발자들이 자주 사용하는 앱 컴포넌트를 구축하는 속도가 더욱 빨라졌습니다. 다이얼로그 컴포넌트를 Compose로 마이그레이션하여 1600 라인 이상의 코드를 정리한 결과, 코드의 가독성과 이해도, 유지 보수성이 더욱 강화되었습니다.
한층 개선된 개발 경험 Jetpack Compose 덕분에 UI 요소를 재사용 및 공유하면서 Preview, 개발, UI 구현 작업의 효율성이 대폭 증대했습니다. ZEPETO 개발자들은 이미 230개가 넘는 Preview 기능을 생성하여 앱 전반에 걸친 기능을 손쉽게 테스트 및 디버깅하고 있습니다. 개발자들이 Jetpack Compose를 배우는 과정도 상당히 수월했습니다. 김호중 개발자는 “이미 Android View 시스템을 잘 아는 개발자들은 짧은 시간 안에 Compose를 실제 사용 가능한 수준으로 익힐 수 있었습니다.”라고 밝혔습니다.
Compose와 함께 도약하기 Compose를 최우선순위로 두고 계속해서 지원을 확대하는 Google의 방침은 ZEPETO 개발자들에게 큰 동력이 되었습니다. ZEPETO에서는 앞으로 Google이 더 많은 Android API를 통합하며 Compose를 계속해서 발전시켜 나갈 모습을 기대하고 있습니다.
현재 캐릭터 샵, 비디오 및 사진 에디터, 다이얼로그 컴포넌트 등 ZEPETO의 많은 기능은 그래픽을 구현하는 Unity, OpenGL과 함께 Jetpack Compose로 구현되었습니다. 하지만 ZEPETO는 여기서 멈추지 않고 빠른 개발 속도, 코드 유지 보수성 및 코드 축소 등 이미 증명된 장점들에 힘입어, 계속해서 Compose를 통해 화면을 마이그레이션하고 새로운 기능을 구축할 것입니다. 김호중 개발자는 “Unity와 OpenGL로 구현되는 그래픽과 나머지 UI를 제외하고, 장기적으로 UI의 80% 이상을 Compose로 구성할 계획입니다.”라고 덧붙였습니다.
갤럭시 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배 상승했습니다.
탁월한 Wear OS 앱 개발
이번 주, 새로운 모습으로 개선된 갤럭시 워치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 앱을 개발해야 할 이유가 더 많아졌습니다.
저희는 지난 I/O 이후 Jetpack Compose의 장점을 Wear OS에 담기 위해 노력했습니다. Slack을 통해 커뮤니티와 교류하고 API, 구성 요소, 도구에 관한 개발자 피드백을 수집하여 탐색, 지연 목록 크기 조정, 입력 및 동작 지원 등 다양한 구성 요소를 개선했습니다.
첫 베타 버전은 알파 버전 21에 뒤이어 출시되었습니다. 개발자 프리뷰 발표 이후의 주요 변화는 다음과 같습니다.
🆕 입력 방법 구성 요소
사용자 입력 방법 구성 요소에 관한 개발자 여러분의 요청을 반영하여, 각 시계 앱에 맞춰 사용할 수 있는 다양한 컴포저블을 추가했습니다.
사용자는 Picker로 스크롤 목록에서 항목을 선택할 수 있습니다. 기본적으로 선택 가능한 항목 목록은 회전하는 원통을 측면에서 보는 것처럼 양방향으로 ‘무한' 반복됩니다. Picker는 내부에서ScalingLazyColumn 구현을 사용하고 있어 여러 가지 고급 ScalingLazyColumn 기능을 개발하고 다듬을 수 있습니다.
사용자는 Slider로 범위 내에서 값을 선택하여 글꼴 크기나 밝기와 같은 설정을 조정할 수 있습니다.
사용자는 전체 화면 컨트롤 구성 요소인 Stepper로 범위 내에서 값을 선택하여 헤드폰 음량 등을 조절할 수 있습니다.
🆕 대화 상자
탐색 대상이나 기존의 전체 화면대화 상자처럼 활용할 수 있는 전체 화면 알림 및 확인 컴포저블이 추가되었습니다. 대화 상자는 다른 콘텐츠 위에 표시되며 스와이프하여 닫기를 지원합니다. 스와이프 동작을 진행하는 동안 백그라운드에 상위 항목 콘텐츠를 표시합니다.
시계 화면에 최적화한 Progress Indicator인CircularProgressIndicator가 추가되었습니다. Indicator는 원형 트랙을 따라 시계 방향으로 움직이면서 진행 상태를 표시합니다.
CircularProgressIndicator를 활용하는 몇 가지 방법이 있습니다. 정해지지 않은 진행 상태를 보여 주거나 진행 중인 작업의 완료 비율을 나타낼 수 있으며, Progress Indicators의 원형 트랙에는 다른 콘텐츠(예: 전체 화면의 TimeText)를 표시할 공간이 주어집니다.
스크롤과 탐색 화면 변화를 동기화하는 TimeText 및 PositionIndicator를 동반한 Navigation 인식 Scaffold
저희는 개발자가 다양한 경험을 제공하는 훌륭한 Wear OS 앱을 구축할 수 있도록 Horologist를 계속 개발하여 추가 도구를 제공하겠습니다.Github의 Horologist를 확인하여 피드백을 주시고 Wear 개발자가 유용하게 사용할 보편적인 기능을 만드는 데 기여해 보세요. 이후 출시할 버전도 많은 기대 바랍니다!
시작하기
모바일 Compose의 개발 원칙 중 다수가 Wear OS용 Compose에 적용되니, UI 툴킷에 익숙하지 않다면Jetpack Compose 기본 과정부터 시작하는 걸 추천드립니다.
