Compose를 사용하여 개발자 효율성과 속도 증가를 확인한 Twitter
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
트위터는 가장 널리 사용되는 소셜 미디어 플랫폼 중 하나로, 사용자는 트위터를 통해 항상 세상에서 어떤 일이 일어나고 있는지 파악할 수 있습니다. 엔지니어링팀은 Jetpack Compose를 사용하여 디자인 시스템을 현대화하기 시작했습니다.
진행한 작업
Twitter 앱의 UI 구성요소와 테마 시스템은 약 10년 전에 개발되었으며 엄청난 유지관리 노력이 필요한 기존 구성요소로 구성되어 있었기 때문에 엔지니어링팀은 사용 및 유지관리가 쉽고 구현, 확장, 맞춤설정이 직관적인 스테이트리스 UI 구성요소를 사용하여 확장 가능한 새로운 디자인 시스템을 빌드하기를 원했고, 이에 따라 Compose를 사용하기로 했습니다.
팀은 내부 디자인 시스템을 통해 구성요소별 교체를 시작하고 기존 설정에 의존하지 않는 새 화면에 Compose를 도입했습니다.
결과
Compose는 개발자 속도, 개발자 만족도, UI 코드/구성요소 유지관리 가능성을 개선한다는 목표에 대한 확실한 답을 제공했습니다. Compose를 사용하기 시작한 후 Twitter 엔지니어들은 '한마디로 놀랍습니다.
내부적으로는 Android UI 2.0이라고 하며, 기존 뷰 시스템을 다시 살펴보기가 매우 어렵습니다. Compose로 특별히 개발한 항목의 효율성과 속도가 향상되었습니다."
개발 및 실험 속도가 개선되었습니다. 'Compose에서 채택한 모든 항목의 디자인 변경사항에 대한 처리 속도가 이전보다 훨씬 빠릅니다. 또한 제품 변경사항 내에서 실험을 많이 진행하는데, Compose와 Kotlin으로 작성하면 훨씬 더 빠르고 쉽게 진행할 수 있습니다.”
작성하는 코드가 더 직관적일 뿐만 아니라 작성 속도도 빠르고 읽기도 쉽습니다. “또한 테마 레이어가 훨씬 더 직관적이고 읽기 쉽습니다. 멀티 레이어 테마 오버레이를 통해 속성을 정의하고 할당하는 여러 XML 파일로 확장해야 했을 일을 단일한 Kotlin 파일 내에서 달성할 수 있었습니다. Compose 컨텍스트 내에서 전체 테마 구조를 다시 구현하는 데는 며칠에서 몇 주밖에 걸리지 않았으며, 이미 기존 테마 시스템보다 훨씬 더 강력하고 직관적인 것으로 입증되었습니다.”
시작하기
Compose에 대해 자세히 알아보세요.
이 페이지에 나와 있는 콘텐츠와 코드 샘플에는 콘텐츠 라이선스에서 설명하는 라이선스가 적용됩니다. 자바 및 OpenJDK는 Oracle 및 Oracle 계열사의 상표 또는 등록 상표입니다.
최종 업데이트: 2021-07-28(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-07-28(UTC)"],[],[],null,["[Twitter](https://twitter.com) is one of the most widely used social\nmedia platforms where users can see what's happening in the world at any given\nmoment. The engineering team started using Jetpack Compose to **modernise their\ndesign system.**\n\nWhat they did\n\nBecause the Twitter app's UI components and theming system was developed around\n10 years ago and was comprised of legacy components that required tremendous\nmaintenance efforts, the engineering team wanted to build a new, scalable\ndesign system; with stateless UI components that were easy to use and maintain;\nand intuitive to implement, extend and customize, so they decided to use\nCompose.\n\nThe team started a component-by-component replacement through their internal\ndesign system and by introducing Compose into new screens that don't depend on\ntheir legacy setup.\n\nResults\n\nCompose provided a solid answer to their goal of improving developer velocity,\ndeveloper happiness, and UI code/component maintainability. After starting to\nuse Compose, Twitter engineers say that it's *\"In a word: incredible.\nInternally we refer to it as Android UI 2.0, and it makes it very difficult to\ndelve back into our legacy view system. It has **increased our efficiency and\nvelocity** for things we've developed specifically in Compose.\"*\n\nThey've seen improvements in the speed of development and experimentation: *\"The\n**turn-around on design changes** for anything we've adopted in Compose **is much\nfaster** than we would have experienced previously. Additionally, we experiment\nvery heavily within our product changes, and this is facilitated much better\nand quicker when written in Compose and Kotlin.\"*\n\nThe code they write is not only more intuitive, but also faster to write, and easier to\nread: *\"Additionally, **our theming layer is vastly more intuitive and legible**\nand we've been able to accomplish within a single Kotlin file what otherwise\nextended across multiple XML files that were responsible for attribute\ndefinitions and assignments via multiple layered theme overlays. Reimplementing\nour entire theming structure within the context of Compose took only a matter\nof days to weeks, and has already proven to be much **more robust and intuitive**\nthan our legacy theme system ever has been.\"*\n\nGet started\n\nLearn more about [Compose](/jetpack/compose)."]]
