TikTok, Jetpack Compose로 코드 크기를 58% 줄이고 새로운 기능의 앱 성능 개선

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

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

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

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

Compose는 이러한 구조적 문제에 대한 직접적인 해결책을 제공했습니다. 

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

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

전략적 마이그레이션을 통한 향후 계획 수립

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

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

팀에서 추가로 공유한 내용은 다음과 같습니다.  

마이그레이션 중에 성능을 확인한 결과, TikTok팀은 단일 ViewHolder 내의 요소를 대체하기 위해 작은 ComposeView를 많이 사용하면 컴포지션 오버헤드가 발생한다는 것을 알게 되었습니다. ViewHolder 전체에 단일 ComposeView를 사용하도록 이전 범위를 확대하여 더 나은 결과를 얻었습니다.

실험에 따라 UI를 숨기고 표시하는 맞춤 높이 로직과 조건부 로직이 있는 ViewPager 내부의 프래그먼트를 이전할 때 성능에 영향을 미치지 않았습니다. 이 경우 ViewPager를 Compose로 이전하는 것이 프래그먼트를 이전하는 것보다 실적이 더 좋았습니다. 

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

Jetpack Compose 시작하기

Jetpack Compose 가 팀에 어떤 도움을 줄 수 있는지 자세히 알아보세요.