TikTok은 대규모 사용자층과 혁신적인 기능으로 유명한 글로벌 쇼트 동영상 플랫폼입니다. TikTok팀은 사용자를 위해 업데이트, 실험, 새로운 기능을 지속적으로 출시하고 있습니다. 기술 부채를 관리하면서 속도를 유지해야 하는 문제에 직면한 TikTok Android팀은 Jetpack Compose를 사용하기로 했습니다.

TikTok팀은 제품 요구사항을 더 빠르고 더 높은 품질로 반복할 수 있기를 원했습니다. Compose를 활용하여 코드를 더 적게 작성하고 인지 부하를 줄여 엔지니어링 효율성을 개선하는 동시에 성능과 안정성을 개선하고자 했습니다. 

복잡한 UI를 간소화하여 개발자 생산성 가속화

TikTok 페이지는 겉보기보다 복잡하며 여러 개의 계층화된 조건부 요구사항을 포함합니다. 이러한 복잡성으로 인해 유지관리하기 어렵고 최적이 아닌 구조의 뷰 계층 구조와 과도한 뷰 중첩이 발생하여 측정 패스 수가 증가하여 성능이 저하되는 경우가 많았습니다.

Compose는 이 구조적 문제에 대한 직접적인 솔루션을 제공했습니다. 

또한 Compose의 측정 전략은 이중 과세를 줄여 측정 성능을 더 쉽게 최적화할 수 있도록 지원합니다. 

개발자 생산성을 개선하기 위해 TikTok의 중앙 디자인 시스템팀은 다양한 앱 기능을 작업하는 팀을 위한 구성요소 라이브러리를 제공합니다. TikTok팀은 Compose의 개발이 간단하며, 작은 구성 가능한 함수를 활용하는 것이 매우 효과적이고, 조건부 로직이 있는 대규모 UI 블록을 통합하는 것이 간단하며 오버헤드가 최소화된다는 것을 확인했습니다.

전략적 마이그레이션을 통한 향후 경로 구축

Jetpack Compose를 전략적으로 채택함으로써 TikTok은 기술 부채를 관리하는 동시에 사용자에게 훌륭한 경험을 제공하는 데 계속 집중할 수 있었습니다. 조건부 로직을 깔끔하게 처리하고 구성을 간소화하는 Compose의 기능을 통해 TikTok팀은 새 페이지 또는 완전히 다시 작성된 페이지에서 페이지 로드 시간을 최대 78% 단축할 수 있었습니다. 이 개선사항은 소규모 사례에서는 20~30%, 전체 다시 작성 및 새로운 기능에서는 70~80% 였습니다. 또한 뷰에서 빌드된 동일한 기능과 비교했을 때 코드 크기를 58%줄일 수 있었습니다,  TikTok팀은 몇 가지 학습 내용을 추가로 공유했습니다.

TikTok팀의 전반적인 전략은 특정 사용자 여정을 점진적으로 이전하는 것이었습니다. 이를 통해 마이그레이션하고, 측정 가능한 혜택을 확인한 다음, 더 많은 화면으로 확장할 수 있었습니다. Compose를 사용하여 QR 코드 기능의 전반적인 구조를 간소화하는 것으로 시작하여 개선사항을 확인했습니다. 이후 TikTok팀은 로그인 및 가입 환경으로 마이그레이션을 확장했습니다. 

TikTok팀은 몇 가지 추가 학습 내용을 공유했습니다.

마이그레이션 중에 성능을 확인하는 동안 TikTok팀은 단일 ViewHolder 내의 요소를 대체하기 위해 많은 작은 ComposeViews를 사용하면 구성 오버헤드가 발생한다는 것을 발견했습니다. 마이그레이션을 확장하여 전체 ViewHolder에 단일 ComposeView를 사용함으로써 더 나은 결과를 얻었습니다.

실험에 따라 UI를 숨기고 표시하는 맞춤 높이 로직과 조건부 로직이 있는 ViewPager 내에서 프래그먼트를 이전할 때 성능은 영향을 받지 않았습니다. 이 경우 ViewPager를 구성 가능한 함수로 이전하는 것이 프래그먼트를 이전하는 것보다 더 나은 성능을 보였습니다. 

준 셴은 Compose가 '기능 개발에 필요한 코드 양을 줄이고, 테스트 가능성을 개선하며, 제공을 가속화한다'는 점을 매우 좋아합니다. TikTok팀은 Compose 채택을 꾸준히 늘려 장기적으로 선호하는 프레임워크로 만들 계획입니다. Jetpack Compose는 개발자 경험과 프로덕션 측정항목을 대규모로 개선하는 강력한 솔루션임이 입증되었습니다.

Jetpack Compose 시작하기

Jetpack Compose가 팀에 어떤 도움이 되는지 자세히 알아보세요 .