Jetpack Compose를 사용하여 UI 개발 생산성을 56% 개선한 Mercari
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
Mercari는 수백만 명의 사용자가 거의 모든 상품을 쇼핑하고 판매할 수 있게 해줍니다. 2013년 일본에서 설립된 이 회사는 현재 일본 최대의 스마트폰 중심 C2C 마켓플레이스입니다. Mercari의 클라이언트 설계자팀은 2020년, 장기적으로 확장 가능한 최신 솔루션과 기술을 사용하여 새 애플리케이션을 위한 기술 스택을 빌드하는 것을 목표로 Jetpack Compose를 사용하기 시작했습니다.
진행한 작업
Mercari팀은 Android 뷰에서 복잡한 상태 관리 및 스타일 지정을 지원하는 디자인 시스템을 구현해야 했는데, 이는 매우 복잡한 작업이었습니다. Jetpack Compose를 사용하면서 이렇게 복잡한 시스템을 구현할 수 있었을 뿐만 아니라 각 화면을 개발하는 데 드는 시간을 줄일 수 있었습니다.
또한 Jetpack Compose는 디자인 시스템을 활용하여 새 앱의 UI 코드를 작성하여 UI 코드를 간결하고 이해하기 쉽게 만들었습니다. 따라서 팀은 어두운 테마를 실제로 지원하는 등 화면과 비즈니스 로직을 작성하는 데 더 많은 시간을 할애할 수 있습니다.
또한 Mercari팀은 구성요소 디자인에서 UI 코드를 자동으로 생성하는 디자인 시스템과 Figma를 통합하기 위한 개념 증명 도구를 작성했습니다. 팀은 선언적 특성 때문에 Compose를 사용하면 이 도구를 더 쉽게 개발할 수 있다고 말했습니다.
“Android 개발자가 Jetpack Compose 코드 작성에 익숙해지면 다시 돌아가고 싶어 하지 않습니다.” - 앤서니 앨런 콘다, Mercari Android 기술 책임자
결과
Jetpack Compose와 새로운 디자인 시스템 사이에서 Mercari는 화면 작성에 훨씬 적은 코드를 사용할 수 있었습니다. 무한 스크롤 콘텐츠가 있는 화면(일반적인 사용 사례)에서는 실제로 코드를 약 56% 줄였습니다. 그 결과, 동일한 시간 내에 더 많은 화면을 작성할 수 있었기 때문에 비즈니스 로직과 코드의 다른 부분을 작성하는 데 더 많은 시간을 할애할 수 있었습니다.
또한 애니메이션을 통합하고 AnimatedVisibility, Crossfade, Animatable 등의 직관적인 API를 사용하는 등 UI 자체로 더 많은 일을 할 수 있었습니다.
Mercari는 출시될 때까지 새 애플리케이션에서 Jetpack Compose를 계속 사용할 계획입니다. Jetpack Compose로 작성된 Android SDK를 사용하는 디자인 시스템도 Mercari 내의 여러 애플리케이션과 연동되도록 설계되었습니다.
시작하기
Jetpack Compose에 관해 자세히 알아보세요.
이 페이지에 나와 있는 콘텐츠와 코드 샘플에는 콘텐츠 라이선스에서 설명하는 라이선스가 적용됩니다. 자바 및 OpenJDK는 Oracle 및 Oracle 계열사의 상표 또는 등록 상표입니다.
최종 업데이트: 2021-05-19(UTC)
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2021-05-19(UTC)"],[],[],null,["# Mercari improves UI development productivity by 56% with Jetpack Compose\n\n[Mercari](https://play.google.com/store/apps/details?id=com.kouzoh.mercari) allows millions of people to shop and sell almost anything. The company was founded in 2013 in Japan, and it now is the largest smartphone-focused C2C marketplace in Japan. Mercari's Client Architect Team started using [Jetpack Compose](https://developer.android.com/jetpack/compose) in 2020 with the goal of using modern solutions and technologies that can scale for the long term to build their tech stack for new applications.\n\nWhat they did\n-------------\n\nThe Mercari team needed to implement a design system with complex state management and styling on Android Views --- a very complex task. Using Jetpack Compose, they were not only able to implement this complex system, it helped them spend less time developing each screen.\n\nJetpack Compose also helped the team write UI code for their new app utilizing the design system, making their UI code concise and easy to understand. As a result, the team can spend more time writing screens and business logic, such as practical support for the dark theme.\n\nIn addition, the Mercari team wrote a proof-of-concept tool for integrating Figma with the design system, which automatically generates UI code from the component designs. The team said that developing this tool was easier with Compose due to its declarative nature.\n\n*\"Once Android developers get used to writing Jetpack Compose code, they wouldn't wish to go back.\" - Anthony Allan Conda, Android Tech Lead at Mercari*\n\nResults\n-------\n\nBetween Jetpack Compose and their new design system, Mercari was able to use far less code to write screens. On screens with infinitely-scrollable content --- a common use case --- they actually reduced their code by about 56%. As a result, they were able to write more screens in the same amount of time, giving them more time to write business logic and other parts of the code.\n\nAlso, they were able to do more with the UI itself, such as incorporating animations and using intuitive APIs such as *AnimatedVisibility* , *Crossfade* , and *Animatable*.\n\nMercari is planning to continue using Jetpack Compose in their new application until its release. Their design system, with the Android SDK written in Jetpack Compose, is also designed to work with multiple applications within Mercari.\n\nGet started\n-----------\n\nLearn more about [Jetpack Compose](https://developer.android.com/jetpack/compose)."]]
