Monzo, Compose를 사용하여 더 강력하고 품질이 높은 앱을 빌드

Monzo는 디지털 금융 서비스를 제공하는 은행 및 앱입니다. 모든 사람이 돈을 효과적으로 활용할 수 있도록 돕는 것을 사명으로 삼고 있습니다. Monzo의 디자인 시스템이 Material Design에서 벗어나기 시작했기 때문에 지속적으로 발전하는 맞춤 구성요소를 쉽게 작성하고 유지관리할 수 있는 방법을 원했고, Jetpack Compose를 선택했습니다.

진행한 작업

Compose를 사용하면 Material Design 구성요소가 디자인 시스템에 구애받지 않는 기본 API 위에 레이어로 제공됩니다. Monzo는 Material 구성요소를 참조로 사용하여 파운데이션 API를 통해 자체 구성요소 라이브러리를 빌드했습니다. 한 번에 하나의 화면을 이전하는 것으로 시작하여 이제 모든 새 화면에서 Compose를 사용합니다. 이제 모든 Android 엔지니어가 프로덕션에서 Compose를 사용합니다. '심각한 문제가 발생하지 않아 일부 새로운 기능에 사용하기 시작했고 결국 모든 새로운 기능에 사용해도 된다고 생각했습니다.'

결과

Monzo팀은 새로운 화면을 쉽게 빌드할 수 있는 구성요소를 만들었습니다. '즉시 제공되는 구성요소를 사용하면 Compose를 배우면서 화면을 빌드하는 것이 훨씬 원활한 경험이 됩니다. 슬롯 기반 API는 작은 빌드 블록을 많이 사용하여 더 큰 구성요소를 쉽게 빌드할 수 있는 훌륭한 패턴입니다.'

Compose를 사용해 Monzo팀은 더 높은 품질의 앱을 빌드하고 이전에는 스프린트에서 구현할 수 없었던 유쾌한 기능을 추가할 수 있었습니다. '한 가지 예로 애니메이션을 들 수 있습니다. Compose에서는 애니메이션을 매우 쉽게 추가할 수 있으므로 색상/크기/고도 변경과 같은 요소에 애니메이션을 적용하지 않을 이유가 거의 없습니다. 이러한 '있으면 좋은' 애니메이션은 뷰 시스템에서 노력과 복잡성을 감수할 만큼 가치가 없는 경우가 많습니다.'

이제 코드가 더 짧아지고 읽고 이해하고 유지하기가 더 쉬워졌습니다. '선언적 코드는 변경 가능한 UI 계층 구조를 조작하는 코드보다 추론하기가 훨씬 쉽습니다. Kotlin과 XML 사이를 전환하는 것이 아니라 모든 것이 같은 언어로 종종 같은 파일에서 작성되면 코드를 추적하기가 훨씬 쉬워집니다. XML 테마와 스타일은 말할 것도 없고요. Compose에서는 테마를 훨씬 쉽게 이해할 수 있습니다. 테마는 정의된 속성으로만 구성되고 값은 기기 간에 일관되며 Kotlin으로 되어 있어 IDE에서 검색하고 따라가기가 정말 쉽습니다.'

Compose를 통해 Monzo팀은 앱을 쉽게 테스트하고 앱의 접근성을 보장할 수 있었습니다. 'Compose는 덜 깨지기 쉽고 안정적으로 실행되며 앱이 실제로 사용자에게 제공되는지 확신할 수 있는 테스트를 작성하는 데 도움이 되었습니다. 시맨틱 시스템을 통한 테스트는 화면이 최소한 합리적으로 기본적으로 액세스 가능하도록 보장합니다.'

시작하기

Compose에 대해 자세히 알아보세요.