버벅거림 문제를 해결하여 피드 스크롤을 60% 늘린 ShareChat

소개

ShareChat은 사용자가 자신의 의견을 공유하고 자신의 삶을 기록하며 모국어로 새 친구를 사귈 수 있는 인도의 선도적인 소셜 미디어 플랫폼입니다. 다른 기능으로는 사용자가 동영상, 농담, 노래 및 기타 언어 기반 소셜 콘텐츠를 공유할 수 있게 해주는 채팅방과 비공개 메시지도 포함됩니다. ShareChat은 인도의 인터넷 혁명을 선도하기 위한 사명으로 10억 명의 새로운 사용자가 인터넷에서 상호작용하는 방식을 바꾸고 있습니다.

숫자로 보는 앱

  • 1억 이상 다운로드
  • 1억 8천만 명+ 월간 활성 사용자 수
  • 3,200만 명 이상의 콘텐츠 크리에이터
  • 15가지 인도 언어
  • 매일 생성되는 게시물 약 150만 개

과제

매일 수천 명의 사람들이 ShareChat을 사랑하게 되면서 새로운 프레임을 지속적으로 제공하는 데 어려움을 겪었고, 이로 인해 응답 시간이 길어져 사용자 경험을 방해하게 되었습니다.

그 결과 앱에서 드롭 또는 지연된 프레임('버벅거림'이라고도 함)이 증가했습니다. 모든 사용자에게 원활한 환경을 제공하려면 느린 프레임과 정지된 프레임을 개선하여 버벅거림 문제를 해결하는 것이 매우 중요했습니다. 이는 또한 사용자가 앱에서 더 많은 시간을 보내고 참여율을 높이고 Android Play 스토어에서 ShareChat의 평점을 높이는 데 중요한 역할을 합니다.

실험 방식

ShareChat은 Google의 개발자 관계팀과 협력하여 앱의 느린 프레임과 정지된 프레임 (Jank)을 개선하여 버벅거림을 줄이고 비즈니스에 긍정적인 영향을 미쳤습니다. 구체적으로 다음과 같은 문제를 개선하기 위해 노력했습니다.

  • 공유 RecyclerView 풀 - 프로파일링을 통해 여러 뷰 홀더를 생성하는 데 시간이 더 오래 걸리고 이를 최소화하기 위해 공유 RecyclerView 풀이 생성되었음을 확인했습니다. 또한 유사한 피드의 뷰 홀더 생성 비용을 없앨 수 있었습니다.

  • 과도한 레이아웃 패스l - 프로파일링을 통해 일부 뷰 홀더가 추가 requestLayouts를 요청하는 것도 확인되었습니다. 최적화를 위해 모든 바인딩이 아닌 생성 시간에 값을 취하도록 코드를 업데이트하여 추가 requestLayout 비용을 절감했습니다.

  • OverDraw: 레이아웃을 단순화하여 레이어링을 줄이고 각 레이어에 별도로 설정된 색상을 삭제했습니다.

  • 계층 구조 평탄화 - 여러 화면의 프로파일링과 수동 검사를 통해 긴 확장이 관찰됩니다. 이 문제를 해결하기 위해 ConstraintLayout을 사용하여 계층 구조가 평면화되었습니다.

  • 과도한 뷰 확장: 프로파일링하는 동안 특정 뷰의 긴 확장 시간이 확인되었습니다. 이러한 뷰는 뷰 스텁으로 전환되었습니다.

  • UI 스레드에서 과도한 작업 삭제 - 프로파일러를 사용하면 모든 recyclerView 바인딩의 태그 지정 및 스타일 지정, BlurHash 디코딩 등으로 SpannableStringBuilder를 만드는 등 기본 스레드에서 과도한 작업이 진행되고 있는 몇몇 위치를 관찰할 수 있습니다. 이러한 작업은 UI 스레드에서 삭제되고 백그라운드 스레드로 이동했습니다.

  • Rx에서 코루틴으로 이전 - 메모리 소비로 인해 GC 호출이 자주 발생했으며 100개가 넘는 RX 스레드를 통한 스레드 수가 매우 많았습니다. 이러한 문제를 해결하기 위해 많은 사용 사례를 코루틴으로 이동했습니다.

  • 이미지 로드에 Coil 채택: Glide는 이미지를 로드하는 동안 특히 Jetpack Compose를 통해 빌드된 구성요소에서 문제를 일으키는 문제를 일으켰습니다. 또한 LazyColumn에서 이미지를 로드하는 동안 렌더링 기준 막대가 높은 것으로 확인되었습니다. 이러한 상황으로 인해 이미지 로드에 Coil이 채택되었습니다.

  • 기존 코드 정리 및 리팩터링 - 이전 코드와 실험을 삭제하여 UI에서 불필요하게 숨겨진 뷰를 삭제하고 일부 화면을 더 나은 방식으로 다시 작성할 수 있었습니다.

결과

ShareChat은 개선 영역을 분석하고 최적화 전략을 파악함으로써 참여율과 Play 스토어 평점을 높이는 동시에 사용자의 전반적인 사용자 경험을 개선할 수 있었습니다. 다음은 ShareChat이 달성한 성과를 정량적으로 나타낸 것입니다.

  • Play 스토어에서 '느린 렌더링' 프레임 약 45% 감소
  • Play 스토어에서 '정지' 프레임 최대 30% 감소
  • 렌더링된 10,000개 프레임당 버벅거리는 프레임 속도를 10.72% 에서 3.98%로 줄임
  • 피드 스크롤이 60% 증가
  • 스토어의 전체 평점이 약 4.0에서 4.3으로 증가했습니다.
  • 게시물 소비 10% 증가

"ShareChat의 목표는 사용자에게 즐거움을 주는 최고의 소셜 미디어 앱이 되는 것입니다.이는 앱 성능 면에서 최고의 성과를 낸다는 것을 의미합니다. Google의 개발자 관계팀과 협업한 덕분에 가장 많이 사용하는 저가형 사용자 기기의 개선 영역을 파악할 수 있었습니다. 정지된 프레임, 버벅거림, 오버드로, ANR을 식별하고 수정하기 위한 권장사항과 도구를 배웠습니다."

– 비한 베르마, ShareChat의 Android팀 엔지니어링 관리자