[jetpack compose] 개념

FLUORITE·2025년 1월 13일
jetpack compose

안드로이드

목록 보기
1/32

  • 상호작용
    • 컴포즈는 기존 앱과 상호작용 가능함.
    • View들을 컴포즈 UI 안에 넣을 수 있고 컴포즈를 뷰 안에 넣을 수 있음.
  • 젯팩 통합
    • Compose는 Jetpack과 통합되도록 설계됨.
    • Navigation, Paging, LiveData, Flow/RxJava, ViewModel, Hilt
  • 머터리얼
    • 머터리얼 디자인 컴포넌트와 테마를 제공.
    • 아름다운 앱을 만들고 브랜드를 표현.
    • 복잡한 XML을 다루지 않고 이해하기 쉽고 추적하기 쉬움.

장점

  1. 코드 감소

"동일한 버튼 클래스의 경우 [코드] 의 규모가 10배 더 작았습니다.” (Twitter)

“RecyclerView로 빌드한 모든 화면에서 상당한 감소 효과가 나타났으며, 대부분의 화면이 여기에 해당합니다.” (Monzo)

“앱에서 목록이나 애니메이션을 만드는 데 필요한 코드 줄이 이렇게 적다는 사실이 매우 기뻤습니다. 기능마다 작성하는 코드 줄 수가 줄어든 덕분에 고객에게 가치를 제공하는 데 더욱 집중할 수 있게 되었습니다.” (Cuvva)

“Kotlin과 XML 사이를 전환하는 것이 아니라 모든 것이 같은 언어로 종종 같은 파일에서 작성되면 코드를 추적하기가 훨씬 쉬워집니다.” (Monzo)

“Compose의 레이아웃 시스템은 개념적으로 더 단순하기 때문에추론하기도 쉽습니다. 복잡한 구성요소의 코드도 쉽게 읽을 수 있습니다.” (Square)

  1. 직관적

"테마 레이어가 훨씬 더 직관적이고 읽기 쉽습니다. 멀티 레이어 테마 오버레이를 통해 속성을 정의하고 할당하는 여러 XML 파일로 확장해야 했을 일을 단일한 Kotlin 파일 내에서 달성할 수 있었습니다.” (Twitter)

"사용 및 유지관리가 쉽고 구현/확장/맞춤설정이 직관적인 스테이트리스 UI 구성요소의 새로운 세트를 제공하겠다는 목표를 세웠습니다. Compose는 이를 위한 좋은 해답이었습니다.” (Twitter)

“추론하는 동안 기억해야 하는 사항이 줄어들고 통제를 벗어나거나 제대로 이해하지 못하는 행동도 적어집니다.” (Cuvva)

  1. 빠른 개발 과정

“상호 운용성에서 Compose 통합이 시작되었으며 '사용하기 쉽다'는 사실을 알았습니다. 밝은 모드와 어두운 모드 등을 신경 쓸 필요가 전혀 없었고 전반적인 사용 환경이 매우 완벽했습니다.” (Cuvva)

"Android 스튜디오의 미리보기 덕분에 시간이 크게 절약되었습니다. 또한 여러 미리보기도 빌드할 수 있기 때문에 시간이 절약됩니다. 오류 상태나 여러 가지 글꼴 크기처럼 상태와 설정이 다양한 UI구성요소를 확인해야 하는 경우가 많습니다. 이때 여러 미리보기를만들 수 있으므로 확인하기가 쉽습니다.” (Square)

  1. 강력한 성능

"Compose는 선언적 UI보다 더 많은 문제를 해결하기도 했으며 접근성 API, 레이아웃 등 모든 항목이 개선되었습니다. 만들고 싶은 것과 실제로 만드는 것 사이의 차이가 줄어듭니다.”(Square)

“애니메이션을 Compose에 쉽게 추가할 수 있으니 색상/크기/고도 변경 등을 애니메이션으로 처리하지 않을 이유가 없습니다.”(Monzo)

“특별한 도구가 없어도 애니메이션을 만들 수 있습니다. 정적 화면을 표시하는 것과 다르지 않습니다”(Square)

"머티리얼 디자인을 기반에서 분리하면 정말 유용합니다. 자체 디자인 시스템을 구축하다 보면 머티리얼과 디자인 요구사항이 다른 경우가 많기 때문입니다.” (Square)

컴포즈에 대한 반응

“선언적 UI를 구축하는 광범위한 문제를 해결하는 대신 스퀘어와 고유한 UI 인프라의 고유한 사항에 집중할 수 있었다" (Square)

“고품질 화면을 더 빨리 구축할 수 있다.” (Monzo)

“우리는 컴포즈를 사랑한다! ❤” (Twitter)

Twitter

Twitter는 Compose로 개발 효율과 속도를 높였습니다

  • Twitter 앱은 10년에 걸친 레거시.
  • 확장 가능한 디자인 시스템 구축을 원함.
  • 컴포즈 선택
    • 사용 및 유지관리가 용이한 stateless UI 콤포넌트
    • 확장과 커스터마이징이 편함.
    • 컴포넌트 단위로 레거시 설정에 의존하지 않고 변경함.

“한마디로: 놀랍습니다. 내부적으로 우리는 그것을 Android UI 2.0 이라고 부르며, 그것은 우리의 레거시 뷰 시스템으로 되돌아가는 것을 매우 어렵게 만듭니다. Compose에서 특별히 개발한 작업의 효율성과 속도가 향상되었습니다.”

“Compose에서 채택한 모든 것에 대한 디자인 변경에 대한 전환은 이전에 경험했던 것보다 훨씬 빠릅니다. 또한 우리는 제품 변경 사항 내에서 매우 많은 실험을 수행하며 Compose 및 Kotlin으로 작성할 때 훨씬 더 빠르고 원활하게 수행할 수 있습니다.”

“또한 우리의 테마 레이어는 훨씬 더 직관적이고 가독성이 높으며 여러 계층의 테마 오버레이를 통해 속성 정의 및 할당을 담당하는 여러 XML 파일에 걸쳐 확장되었던 작업을 단일 Kotlin 파일 내에서 수행할 수 있었습니다. Compose의 컨텍스트 내에서 전체 테마 구조를 다시 구현하는 데 며칠에서 몇 주 밖에 걸리지 않았으며 기존 테마 시스템보다 훨씬 강력하고 직관적인 것으로 이미 입증되었습니다.” (Twitter 엔지니어)

square

스퀘어는 Compose로 생산성을 향상시켰습니다

• 스퀘어는 POS, 결제 등을 만드는 회사.
• Retrofit, OkHttp, Dagger 1, Picasso, Moshi, Javapoet 오픈소스 라이브러리 강자.
• Square는 이미 선언형 도구 (Workflow)로 앱을 개발했었음.MVI에 가까운 Unidirectional Data Flow.
• 하지만 UI는 Mosaic란 내부 툴을 사용했지만 JetpackCompose로 변경.
• Android 도구와의 통합의 장점이 있다.

“제품 엔지니어가 한 번에 한 화면씩 Compose로 전환하는 것이 정말 쉽습니다."

“때때로 너무 단순해서 더 복잡할 것이라고 예상할 수 있습니다. 모든 것이 제대로 작동합니다.”

"Compose를 사용하면 선언적 UI 프레임워크를 구축하는 더 광범위한 문제를 해결하는 대신 Square와 UI 인프라에 고유한 사항에 집중할 수 있습니다."

“구성 요소의 스타일을 지정하는 것이 더 간단하고 빠릅니다. 복잡한 구성 요소에 대한 코드 읽기도 더 쉽습니다. 코드를 구성하고 Compose에서 읽을 수 있도록 만드는 것이 더 쉽습니다.Compose의 레이아웃 시스템은 개념적으로 더 간단하므로 추론하기가 더 쉽습니다. 미리보기는 구성 요소를 구축할 때 시간을 크게 절약해 줍니다.”

monzo (은행)

“슬롯 기반 API는 많은 작은 빌딩 블록에서 더 큰 구성 요소를 쉽게 구축할 수 있게 해주는 환상적인 패턴입니다.”

“한 가지 예는 애니메이션입니다. Compose에 추가하기가 너무 쉬워서 색상/크기/고도 변경과 같은 것을 애니메이션하지 않을 이유가 거의 없습니다. 이러한 '있으면 좋은' 애니메이션은 View 시스템
의 노력과 복잡성을 감당하기에는 너무 어려운 경우가 많습니다.”

“선언적 코드는 변경 가능한 UI 계층을 조작하는 코드보다 추론하기가 훨씬 쉽습니다. 또한 Kotlin과 XML 사이를 오가는 대신 코드가 모두 동일한 언어와 종종 동일한 파일로 작성되면 코드를 통해 추적하는 것이 훨씬 쉽습니다. XML 테마 및 스타일을 시작하지 마십시오!”

“테마 지정은 Compose에서 훨씬 이해하기 쉽습니다. 우리 테마는 우리가 정의한 속성으로만 구성되어 있고 값은 기기 간에 일관되며 Kotlin에 있기 때문에 IDE에서 검색하고 따라가기가 정말 쉽습니다.”

Google Play

  • 10년 이상된 레거시 기술 부채
  • 네트워크 계층부터 픽셀 렌더링까지 다년간 마이그레이션 로드맵을 만듬.
  • 현대적이고 선언적인 대안을 찾다 알파 버전의 Compose를 도입하기로 결정.
  • 50%가 적은 코드로 UI를 작성.
  • 가장 크게 고려했던 부분
    • 개발자 생산성
      • 수백명의 엔지니어가 개발하기 편하고 재밌어야 함.
    • 성능
      • 지연시간과 버벅거림이 민감한 비지니스
      • Android Go 디바이스 대응해야 함.

“그것은 우리가 덜 취약하고 안정적으로 실행되는 테스트를 작성하는 데 도움이 되었으며 우리 앱이 사용자의 손에서 실제로 작동한다는 많은 확신을 줍니다. 시맨틱 시스템을 통한 테스트를 통해 기본적으로 화면에 최소한 합리적으로 액세스할 수 있는지도 확인합니다.”

선언형 UI란

선언형의 사전적인 의미
• 사전적인 의미: 어떻게 무엇을 할지 대신 무엇을 하는지 기술하는 법
• UI = f(state)라고도 이야기 함.

React의 선언형 정의
인터액티브한 UI를 고통없이 만들게함.

앱에서 각 상태의 심플한 뷰를 디자인하면, 데이터가 변경될 때 리액트가 효율적으로 갱신하고 필요한 구성요소만 렌더링함.

HTML이나 기존 안드로이드 View 시스템은 선언형 UI 툴킷이라 말하기 어려움.

• React(2013)가 선언형 UI 방식을 제안한 후 업계의 여러 도구들이 받아들임.
• Flutter (2017) - Google의 클로스플랫폼 프레임워크
• SwiftUI (2019) - iOS의 공식적인 툴킷
• Jetpack Compose(2021) - Android의 공식적인 툴킷

안드로이드 레거시 View 시스템

  • UI를 업데이트하기 위해,
  • 뷰 객체를 가져와야함
    • findViewById()와 같은 함수로 뷰를 찾음.
  • 뷰는 상태를 가지고 있어 함수로 상태를 가져옴
    • getText()같은 함수로 상태를 가져옴.
  • 뷰의 상태를 업데이트하기 위해 여러 함수를 사용.
    • setText()로 업데이트
    • container.addChild()
    • img.setImageBitmap()
  • 각 콤포넌트마다 상태를 가지고 있고 이를 관리하는 것이 쉽지 않음.

Compose는

데이터

• 데이터가 갱신 되면 따라 내려가며 필요한 콤포넌트를 새로 그림
• 갱신되지 않은 부분은 새로 그리지 않음.

이벤트

이벤트는 상위 계층으로 타고 올라와서 반영.

선언형 UI의 단점

• 선언형 개념을 이해해야 함. 함수형 프로그래밍에 조금 가까움, 명령형과 다름
• 상태 관리에 대해 이해가 필요 (rememberXXX)
• 모든 파트가, 다시 호출되지 않고, 같은 스레드이지 않을 수 있고, 반복적으로 수행될 수 있다 가정해야 함.
• 코드가 줄어들지언정 어려운 부분이 존재.

써드 파티의 선언형

  • 써드파티들도 여러 도구들을 만들었음.
    • 대부분 프리뷰나 핫 로드에서 단점을 가짐.
    • DSL로 UI를 위한 파일을 안 만드는데 중점.
  • Anko (Jetbrains)
    • Android DSL로 코틀린 코드에 UI 통합
    • 선언형이라 보기는 어려움
  • Texture (Facebook)
    • iOS 기반의 선언형 UI 도구
  • Litho (Facebook)
    • Android 기반의 선언형 UI 도구
  • Epoxy (Airbnb)
    • Android를 위한 선언형 UI 도구
  • Workflow (Square)
    • 뷰는 안드로이드 ViewBinding에 의존하되 선언형. (혼종)
  • Contour (Square)
    • XML을 제거하는 것이 목표. 선언형이 아님.
profile
FLUORITE
모두 이루어져라
다음 포스트

[jetpack compose] 컴포넌트

0개의 댓글