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 내의 요소를 대체하기 위해 ComposeViews를 많이 사용하면 컴포지션 오버헤드가 발생한다는 것을 알게 되었습니다. 전체 ViewHolder에 단일 ComposeView를 사용하도록 마이그레이션을 확장하여 더 나은 결과를 얻었습니다.

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

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

Jetpack Compose 시작하기

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