Google for Developers Korea Blog: ZEPETO가 앱 UI의 80% 이상을 Jetpack Compose로 마이그레이션할 예정입니다

Google for Developers Korea Blog

한국의 개발자들을 위한 Google for Developers 국문 블로그입니다.

ZEPETO가 앱 UI의 80% 이상을 Jetpack Compose로 마이그레이션할 예정입니다

2022년 11월 7일 월요일

이 글의 원문은 여기서 확인하실 수 있습니다.
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를 실제 사용 가능한 수준으로 익힐 수 있었습니다.”라고 밝혔습니다. We rewrote the Character Shop feature in Compose. It was much faster to write it in Compose, and we reduced the amount of code by over 10% ≫
Hojung Kim Android developer, ZEPETO

We rewrote the Character Shop feature in Compose. It was much faster to write it in Compose, and we reduced the amount of code by over 10% ≫
Hojung Kim Android developer, ZEPETO

Compose와 함께 도약하기
Compose를 최우선순위로 두고 계속해서 지원을 확대하는 Google의 방침은 ZEPETO 개발자들에게 큰 동력이 되었습니다. ZEPETO에서는 앞으로 Google이 더 많은 Android API를 통합하며 Compose를 계속해서 발전시켜 나갈 모습을 기대하고 있습니다.
현재 캐릭터 샵, 비디오 및 사진 에디터, 다이얼로그 컴포넌트 등 ZEPETO의 많은 기능은 그래픽을 구현하는 Unity, OpenGL과 함께 Jetpack Compose로 구현되었습니다. 하지만 ZEPETO는 여기서 멈추지 않고 빠른 개발 속도, 코드 유지 보수성 및 코드 축소 등 이미 증명된 장점들에 힘입어, 계속해서 Compose를 통해 화면을 마이그레이션하고 새로운 기능을 구축할 것입니다. 김호중 개발자는 “Unity와 OpenGL로 구현되는 그래픽과 나머지 UI를 제외하고, 장기적으로 UI의 80% 이상을 Compose로 구성할 계획입니다.”라고 덧붙였습니다.

지금 앱 최적화하기Jetpack Compose와 함께 UI 개발의 새로운 장을 열어 보세요.

라벨: Android , compose , Jetpack Compose

Contents

ML/Tensorflow
Android
Flutter
Web/Chrome
Cloud
Google Play
Community
Game
Firebase

검색

Tag

Archive

2024
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2023
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2022
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2021
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2020
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2019
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2018
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2017
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2016
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2015
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2014
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2013
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2012
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 3월
- 2월
- 1월

2011
- 12월
- 11월

Feed

Google
Privacy
Terms