Zepeto is a 3D social universe developed by NaverZ with over 300 million users in over 200 countries. Those users can create unique avatars, form friendships, and explore virtual realms of their own design. ZEPETO is dedicated to creating spaces that prioritize the user experience. For its engineers, that means writing to Jetpack, a smart toolkit for building Android’s native UI.
Let’s embrace Jetpack
ZEPETO was originally designed and built using Views, Unity and OpenGL, but today 20% of the UI is written primarily in Views with Jetpack Compose. ZEPETO’s developers began integrating the toolkit sequentially, knowing that it would solve several recurring engineering conflicts. In the Views system, implementing a custom UI with some special shapes, such as sliders or switches, requires implementing the onDraw method on the canvas. Jetpack Compose allows ZEPETO developers to implement these types of UI in Kotlin without having to implement custom components, simplifying the process and eliminating the extra steps required.
Cleaning up the code base
With Jetpack Compose, ZEPETO developers have rewritten complex UI features. Build a design system that helps organize fonts and sizes in a more understandable way, improving maintainability, efficiency, and UX. “Using Compose, we will rewrite parts of the app where the UI is relatively complicated and there are different business logics, such as character shopping, gifting, and face decoration,” said Android developer Hojung Kim. In places like the character shop pager and grid, Combined functions helped reduce the code size by more than 10%..
The ZEPETO team decided to move their communication classes to writing as well. This allowed the engineers to use the desired speech type in all parts of the application. “Each part of the joint interface can now be made into a single component, making it possible to create a joint dialogue just like assembling Legos,” said Joohyung Park, Android developer at ZEPETO. Streamlining the code allowed the engineers to implement commonly used application components much faster than before. By moving these parts of the speech, the team was able to clean them up. 1600+ lines of codemaking it more readable, understandable and easy to maintain.
Refining the developer experience
Jetpack Compose has greatly increased the efficiency of previewing, developing and implementing by allowing developers to reuse and share UI elements. The developers of ZEPETO have created more than that. 230 preview functions To effortlessly test and edit features in the app.
It was also relatively easy for the team to learn how to use Jetpack Compose. “It won’t take long for developers who are familiar with the existing Android View system to get to the point where they can actually use the script,” said Hojung.
Moving forward with Compose
It’s clear that Google’s growing support for Jetpack Compose, inspired by the ZEPETO team, is a high priority for Google Text Editor. They are excited about how Google is integrating more Android APIs with Text Editor, and look forward to further development of the toolkit.
A number of ZEPETO features are now written in Jetpack along with graphics built with Unity and OpenGL, such as a character shop, video and photo editors, and dialog classes, but the team doesn’t intend to stop there. Based on the improvements you’ve seen in development speed, code maintenance, and code reduction, you’ll modify existing screens and build new features with Text Editor. “In the long run,” Hojung concludes, “more than 80% of UI text will be written in Compose,” with the rest of the UI and graphics in Unity and OpenGL.
Improve your app.
Learn how to improve your UI development with Jetpack Compose.