KOEN
Read Original
#Mobile

모두를 위한 성능: 핀터레스트의 자동화된 성능 측정 시스템

모두를 위한 성능: 핀터레스트의 자동화된 성능 측정 시스템
01

Summary

2주 걸리던 성능 측정, 이제는 'BaseSurface' 하나로 공짜로 해결합니다

핀터레스트가 60개 넘는 화면의 지연 시간을 자동화된 뷰 트리 탐색으로 정복한 방법

사용자 경험에서 성능은 '기본 기능'과 같지만, 이를 객관적으로 측정하는 것은 매우 까다롭습니다. 핀터레스트는 개별 화면마다 측정 코드를 짜는 대신, 기반 클래스 수준에서 렌더링 완료를 감지하는 범용 솔루션을 개발했습니다. 이를 통해 전사적인 성능 가시성을 확보하고 개발 효율성을 극대화한 사례를 소개합니다.

  • 01화면별로 상이한 'Visually Complete' 기준을 인터페이스로 표준화
  • 02BaseSurface 레이어에서 뷰 트리를 탐색해 렌더링 상태를 자동 추적
  • 03성능 측정 도입 비용을 '2주'에서 '0'으로 획기적 단축
  • 04모든 서비스 화면에 대해 동일한 잣대로 성능 비교 가능
  • 05안드로이드 성공 사례를 기반으로 iOS 및 Web까지 크로스 플랫폼 확장 적용

RECOMMENDATION

대규모 서비스에서 일관된 UI 성능 지표를 확보하고 싶은 모바일 엔지니어링 팀에 추천합니다. 특히 반복적인 성능 측정 코드 작성을 자동화하여 개발 생산성을 높이고 싶은 시니어 개발자에게 유용한 아키텍처 가이드를 제공합니다.

The Problem

사용자 체감 지연 시간(Visually Complete)은 화면마다 렌더링 완료 기준이 달라, 이를 측정하기 위해 매번 커스텀 로직을 작성해야 했습니다. 이로 인해 새로운 화면에 측정 도구를 도입하는 데 평균 2주의 엔지니어링 리소스가 소모되는 비효율이 발생했습니다.

The Solution

모든 UI 화면의 기반이 되는 BaseSurface 클래스에 성능 측정 로직을 내장하고, 뷰 트리(View Tree)를 순회하며 표준화된 미디어 인터페이스(PerfImageView, PerfTextView 등)의 렌더링 상태를 자동으로 감지하는 시스템을 구축했습니다.

The Result

현재 60개 이상의 화면에서 성능 지표를 자동으로 시각화하고 있으며, 개발자가 별도의 코드 작성 없이도 새로운 기능의 성능을 즉시 모니터링할 수 있게 되었습니다. 이는 안드로이드를 넘어 iOS와 웹 플랫폼으로도 확장되었습니다.

Trade-off

뷰 트리 순회 방식은 화면 구조가 복잡할 경우 런타임 오버헤드가 발생할 가능성이 있으며, 모든 UI 컴포넌트가 정해진 표준 인터페이스를 구현해야만 정확한 측정이 가능하다는 제약이 따릅니다.

03

Key Concepts

Concept · 01

Visually Complete

사용자가 동작을 수행한 순간부터 화면의 모든 주요 시각적 요소(이미지, 텍스트 등)가 렌더링을 마칠 때까지의 시간을 의미하는 핵심 성능 지표입니다.

  • 비디오 핀은 재생 시작, 검색 자동 완성은 텍스트 및 아바타 렌더링 완료를 기준으로 삼습니다.
Concept · 02

View Tree Traversal

UI의 최상위 루트 노드부터 시작하여 하위의 모든 뷰 요소들을 순차적으로 방문하여 상태를 확인하는 기법입니다.

  • BaseSurface에서 루트 뷰로부터 트리 전체를 순회하며 가시적인 뷰들이 그려졌는지 판단합니다.
Concept · 03

Perf View Interfaces

이미지, 비디오, 텍스트 등 각 미디어 타입의 렌더링 상태를 일관된 방식으로 보고하기 위해 정의된 인터페이스 세트입니다.

  • isDrawn(), isVideoLoadStarted() 등의 메서드를 통해 렌더링 여부를 추적 엔진에 전달합니다.