기능 롤아웃의 성능 모니터링

1. 개요

이 코드랩에서는 기능 출시 중에 앱의 성능을 모니터링하는 방법을 배웁니다. 샘플 앱에는 기본 기능이 있으며 Firebase 원격 구성 플래그를 기반으로 다른 배경 이미지를 표시하도록 설정됩니다. 추적을 계측하여 앱의 성능을 모니터링하고, 구성 변경을 앱에 적용하고, 효과를 모니터링하고, 성능을 개선할 수 있는 방법을 살펴보겠습니다.

배울 내용

  • 기본 측정항목(예: 앱 시작 시간, 느리거나 정지된 프레임)을 얻기 위해 모바일 앱에 Firebase Performance Monitoring을 추가하는 방법
  • 사용자 여정의 중요한 코드 경로를 이해하기 위해 사용자 지정 추적을 추가하는 방법
  • 성능 모니터링 대시보드를 사용하여 메트릭을 이해하고 기능 롤아웃과 같은 중요한 변경 사항을 추적하는 방법
  • 주요 지표를 모니터링하기 위해 성능 알림을 설정하는 방법
  • Firebase 원격 구성 변경 사항을 출시하는 방법

전제 조건

  • 안드로이드 스튜디오 4.0 이상
  • API 레벨 16 이상의 Android 에뮬레이터.
  • 자바 버전 8 이상
  • Firebase 원격 구성 에 대한 기본 이해

2. 샘플 프로젝트 설정

코드 다운로드

다음 명령을 실행하여 이 코드랩의 샘플 코드를 복제합니다. 그러면 컴퓨터에 codelab-perf-rc-android 라는 폴더가 생성됩니다.

$ git clone https://github.com/FirebaseExtended/codelab-feature-rollout-performance.git

컴퓨터에 Git이 없는 경우 GitHub에서 직접 코드를 다운로드할 수도 있습니다.

firebase-perf-rc-android-start 폴더 아래의 프로젝트를 Android Studio로 가져옵니다. 일부 런타임 예외 또는 누락된 google-services.json 파일에 대한 경고가 표시될 수 있습니다. 다음 섹션에서 이를 수정하겠습니다.

이 코드랩에서는 Firebase Assistant 플러그인을 사용하여 Android 앱을 Firebase 프로젝트에 등록하고 필요한 Firebase 구성 파일, 플러그인 및 종속성을 Android 프로젝트에 추가합니다. 이 모든 것이 Android Studio 내에서 이루어집니다 .

Firebase에 앱 연결

  1. Android Studio / 도움말 > 업데이트 확인으로 이동하여 최신 버전의 Android Studio 및 Firebase Assistant를 사용하고 있는지 확인하세요.
  2. 도구 > Firebase 를 선택하여 어시스턴트 창을 엽니다.

c0e42ef063d21eab.png

  1. 성능 모니터링 을 선택하여 앱에 추가한 다음 성능 모니터링 시작하기 를 클릭합니다.
  2. Firebase에 연결을 클릭하여 Android 프로젝트를 Firebase에 연결합니다 (이렇게 하면 브라우저에서 Firebase 콘솔이 열립니다) .
  3. Firebase 콘솔에서 프로젝트 추가 를 클릭한 다음 Firebase 프로젝트 이름을 입력합니다 (이미 Firebase 프로젝트가 있는 경우 기존 프로젝트를 대신 선택할 수 있음) . 계속 을 클릭하고 약관에 동의하여 Firebase 프로젝트와 새 Firebase 앱을 만듭니다.

다음으로 새 Firebase 앱을 Android 스튜디오 프로젝트에 연결 하는 대화상자가 표시되어야 합니다.

51a549ebde2fe57a.png

  1. 연결 을 클릭합니다.
  2. 안드로이드 스튜디오를 엽니다. 어시스턴트 창에 앱이 Firebase에 연결되었다는 확인 메시지가 표시됩니다.

40c24c4a56a45990.png

앱에 성능 모니터링 추가

Android Studio의 Assistant 창에서 Add Performance Monitoring to your app 을 클릭합니다.

필요한 모든 종속성이 추가되었는지 확인하기 위해 Android Studio에서 앱을 동기화해야 하는 변경 사항 수락 대화 상자가 표시되어야 합니다.

3046f3e1f5fea06f.png

마지막으로 Android Studio의 Assistant 창에 모든 종속성이 올바르게 설정되었다는 성공 메시지가 표시되어야 합니다.

62e79fd18780e320.png

추가 단계로 "(선택 사항) 디버그 로깅 활성화" 단계의 지침에 따라 디버그 로깅 을 활성화합니다. 공개 문서 에서도 동일한 지침을 사용할 수 있습니다.

3. 앱 실행

이제 앱의 모듈(앱 수준) 디렉터리에 google-services.json 파일이 표시되고 앱이 컴파일되어야 합니다. Android 스튜디오에서 실행 > '앱' 실행 을 클릭하여 Android 에뮬레이터에서 앱을 빌드하고 실행합니다.

앱이 실행 중일 때 먼저 다음과 같은 시작 화면이 표시되어야 합니다.

ffbd413a6983b205.png

그런 다음 몇 초 후에 기본 이미지가 있는 기본 페이지가 표시됩니다.

d946cab0df319e50.png

후드 아래에서 무슨 일이 일어나고 있습니까?

시작 화면은 SplashScreenActivity 에서 구현되며 다음을 수행합니다.

  1. onCreate() 에서 Firebase 원격 구성 설정을 초기화하고 이 코드랩의 뒷부분에서 원격 구성 대시보드에서 설정할 구성 값을 가져옵니다.
  2. executeTasksBasedOnRC() 에서 seasonal_image_url 플래그의 구성 값을 읽습니다. config 값으로 URL이 제공되면 이미지를 동기적으로 다운로드합니다.
  3. 다운로드가 완료되면 앱은 MainActivity 로 이동하고 finish() 를 호출하여 SplashScreenActivity 를 종료합니다.

MainActivity 에서 원격 구성을 통해 seasonal_image_url 을 정의하면 해당 기능이 활성화되고 다운로드한 이미지가 메인 페이지의 배경으로 표시됩니다. 그렇지 않으면 기본 이미지(위에 표시됨)가 표시됩니다.

4. 원격 구성 설정

이제 앱이 실행 중이므로 새 기능 플래그를 설정할 수 있습니다.

  1. Firebase 콘솔 의 왼쪽 패널에서 참여 섹션을 찾은 다음 원격 구성 을 클릭합니다.
  2. 구성 생성 버튼을 클릭하여 구성 양식을 열고 seasonal_image_url 을 매개변수 키로 추가합니다.
  3. 설명 추가 를 클릭한 다음 다음 설명 을 입력 Shows a seasonal image (replaces default) in the main page when the restaurant list is empty.
  4. 새로 추가 -> 조건부 값 -> 새 조건 만들기 를 클릭합니다.
  5. 조건 이름으로 Seasonal image rollout 을 입력합니다.
  6. Applies if... 섹션 User in random percentile <= 0% 선택합니다. (나중 단계에서 롤아웃할 준비가 될 때까지 이 기능을 비활성화된 상태로 둡니다.)
  7. 조건 만들기 를 클릭합니다. 나중에 이 조건을 사용하여 새 기능을 사용자에게 롤아웃합니다.

7a07526eb9e81623.png

  1. 첫 번째 매개변수 생성 양식 을 열고 계절 이미지 롤아웃 값 필드를 찾습니다. 계절 이미지가 다운로드될 URL을 입력하십시오: https://images.unsplash.com/photo-1552691021-7043334e0b51
  2. 기본값을 빈 문자열로 둡니다. 즉, URL에서 다운로드한 이미지가 아니라 코드베이스의 기본 이미지가 표시됩니다.
  3. 저장 을 클릭합니다.

99e6cd2ebcdced.png

새 구성이 초안으로 생성된 것을 볼 수 있습니다.

  1. 변경 사항 게시 를 클릭하고 상단에서 변경 사항을 확인하여 앱을 업데이트합니다.

39cd3e96d370c7ce.png

5. 데이터 로딩 시간 모니터링 추가

앱은 MainActivity 를 표시하기 전에 일부 데이터를 미리 로드하고 이 프로세스를 숨기기 위해 스플래시 화면을 표시합니다. 사용자가 이 화면에서 너무 오래 기다리지 않도록 하려면 일반적으로 시작 화면이 표시되는 시간을 모니터링하는 것이 좋습니다.

Firebase Performance Monitoring은 바로 그 방법을 제공합니다. 사용자 지정 코드 추적 을 계측하여 데이터 로드 시간 및 새 기능의 처리 시간과 같은 앱의 특정 코드 성능을 모니터링할 수 있습니다.

시작 화면이 표시되는 시간을 추적하려면 시작 화면을 구현하는 ActivitySplashScreenActivity 에 사용자 지정 코드 추적을 추가합니다.

  1. splash_screen_trace 라는 사용자 지정 코드 추적을 초기화, 생성 및 시작합니다.

SplashScreenActivity.java

// ...
import com.google.firebase.perf.FirebasePerformance;
import com.google.firebase.perf.metrics.Trace;
// ...

public class SplashScreenActivity extends AppCompatActivity {

    private static final String TAG = "SplashScreenActivity";
    private static final String SEASONAL_IMAGE_URL_RC_FLAG = "seasonal_image_url";

    // TODO: Initialize splash_screen_trace
    private final Trace splashScreenTrace = FirebasePerformance.startTrace("splash_screen_trace");
    
    // ...
}
  1. SplashScreenActivityonDestroy() 메서드에서 추적을 종료합니다.

SplashScreenActivity.java

@Override
protected void onDestroy() {
    super.onDestroy();

    // TODO: Stop the splash_screen_trace here
    splashScreenTrace.stop();
}

새 기능이 이미지를 다운로드하고 처리하므로 기능이 SplashScreenActivity 에 추가된 추가 시간을 추적하는 두 번째 사용자 지정 코드 추적을 추가합니다.

  1. splash_seasonal_image_processing 이라는 사용자 지정 코드 추적을 초기화, 생성 및 시작합니다.

SplashScreenActivity.java

private void executeTasksBasedOnRC(FirebaseRemoteConfig rcConfig) {
    String seasonalImageUrl = rcConfig.getString(SEASONAL_IMAGE_URL_RC_FLAG);
    Log.d(TAG, SEASONAL_IMAGE_URL_RC_FLAG + ": " + seasonalImageUrl);

    if (!seasonalImageUrl.isEmpty()) {
        // TODO: Start the splash_seasonal_image_processing here
        final Trace seasonalImageProcessingTrace = FirebasePerformance
            .startTrace("splash_seasonal_image_processing");

        // ...
    }
}
  1. RequestListener 의 onLoadFailed onLoadFailed()onResourceReady() 메서드에서 추적을 종료합니다.

SplashScreenActivity.java

Glide.with(SplashScreenActivity.this.getApplicationContext())
    .asBitmap()
    .load(seasonalImageUrl)
    .signature(new ObjectKey(Utils.getCacheUUID()))
    .listener(new RequestListener<Bitmap>() {
        @Override
        public boolean onLoadFailed(
            @Nullable GlideException e,
            Object model, Target<Bitmap> target,
            boolean isFirstResource) {

            // TODO: Stop the splash_seasonal_image_processing here
            seasonalImageProcessingTrace.stop();

            launchMainActivity();
            return true;
        }

        @Override
        public boolean onResourceReady(Bitmap resource, Object model,
            Target<Bitmap> target, DataSource dataSource,
            boolean isFirstResource) {

            // TODO: Stop the splash_seasonal_image_processing here
            seasonalImageProcessingTrace.stop();

            launchMainActivity();
            return true;
        }
     })
     .preload();

시작 화면 지속 시간( splash_screen_trace) 및 새 기능의 처리 시간( splash_seasonal_image_processing )을 추적하기 위한 사용자 지정 코드 추적을 추가했으므로 Android Studio 에서 앱을 다시 실행 합니다. Logging trace metric: splash_screen_trace , 추적 기간이 뒤따릅니다. 아직 새 기능을 활성화하지 않았기 때문에 splash_seasonal_image_processing 에 대한 로그 메시지가 표시되지 않습니다.

6. 추적에 사용자 정의 속성 추가

맞춤 코드 추적의 경우 Performance Monitoring은 Firebase 콘솔 에서 추적 데이터를 필터링할 수 있도록 기본 속성(앱 버전, 국가, 기기 등의 공통 메타데이터)을 자동으로 기록합니다. 사용자 정의 속성 을 추가하고 모니터링할 수도 있습니다.

앱에서 시작 화면 지속 시간과 새 기능의 처리 시간을 모니터링하기 위해 두 개의 사용자 지정 코드 추적을 추가했습니다. 이러한 기간에 영향을 줄 수 있는 요인은 표시된 이미지가 기본 이미지인지 또는 이미지를 URL에서 다운로드해야 하는지 여부입니다. 그리고 누가 알겠습니까? 결국 이미지를 다운로드하는 다른 URL을 갖게 될 수도 있습니다.

따라서 이러한 사용자 지정 코드 추적에 계절별 이미지 URL을 나타내는 사용자 지정 속성을 추가해 보겠습니다. 이렇게 하면 나중에 이러한 값으로 기간 데이터를 필터링할 수 있습니다.

  1. executeTasksBasedOnRC 메서드 시작 부분에 splash_screen_trace 에 대한 사용자 지정 속성( seasonal_image_url_attribute )을 추가합니다.

SplashScreenActivity.java

private void executeTasksBasedOnRC(FirebaseRemoteConfig rcConfig) {
    String seasonalImageUrl = rcConfig.getString(SEASONAL_IMAGE_URL_RC_FLAG);
    Log.d(TAG, SEASONAL_IMAGE_URL_RC_FLAG + ": " + seasonalImageUrl);

    // TODO: Add a custom attribute "seasonal_image_url_attribute" to splash_screen_trace
    if (seasonalImageUrl.isEmpty()) {
        splashScreenTrace.putAttribute("seasonal_image_url_attribute", "unset");
    } else {
        splashScreenTrace.putAttribute("seasonal_image_url_attribute", seasonalImageUrl);
    }

    // ...
}
  1. startTrace("splash_seasonal_image_processing") 호출 직후 splash_seasonal_image_processing 에 대해 동일한 사용자 정의 속성을 추가합니다.

SplashScreenActivity.java

if (!seasonalImageUrl.isEmpty()) {
    // TODO: Start the splash_seasonal_image_processing here
    final Trace seasonalImageProcessingTrace = FirebasePerformance
        .startTrace("splash_seasonal_image_processing");

    // TODO: Add a custom attribute "seasonal_image_url_attribute" to splash_seasonal_image_processing
    seasonalImageProcessingTrace
        .putAttribute("seasonal_image_url_attribute", seasonalImageUrl);

    // ...
}

두 사용자 정의 추적( splash_screen_tracesplash_seasonal_image_processing )에 대한 사용자 정의 속성( seasonal_image_url_attribute )을 추가했으므로 Android Studio 에서 앱을 다시 실행 하십시오. Setting attribute 'seasonal_image_url_attribute' to 'unset' on trace 'splash_screen_trace'. 속성 값이 unset 이유는 원격 구성 매개변수 seasonImageUrl 을 아직 활성화하지 않았기 때문입니다.

Performance Monitoring SDK는 추적 데이터를 수집하여 Firebase로 보냅니다. Firebase 콘솔의 성능 대시보드 에서 데이터를 볼 수 있습니다. 코드랩의 다음 단계에서 자세히 설명하겠습니다.

7. 성능 모니터링 대시보드 구성

기능을 모니터링하도록 대시보드 구성

Firebase 콘솔 에서 Friendly Eats 앱이 있는 프로젝트를 선택합니다.

왼쪽 패널에서 릴리스 및 모니터 섹션을 찾은 다음 성능 을 클릭합니다.

메트릭 보드의 첫 번째 데이터 포인트가 포함된 성능 대시보드가 ​​표시되어야 합니다! Performance Monitoring SDK는 앱에서 성능 데이터를 수집하고 수집 후 몇 분 이내에 표시합니다.

f57e5450b70034c9.png

이 메트릭 보드는 앱의 주요 메트릭을 추적할 수 있는 곳입니다. 기본 보기에는 앱 시작 시간 추적의 기간이 포함되지만 가장 관심 있는 측정항목을 추가할 수 있습니다. 추가한 새 기능을 추적하고 있으므로 사용자 지정 코드 추적 splash_screen_trace 의 기간을 표시하도록 대시보드를 조정할 수 있습니다.

  1. 메트릭 선택 상자 중 하나를 클릭합니다.
  2. 대화 상자 창에서 사용자 정의 추적 의 추적 유형과 추적 이름 splash_screen_trace 를 선택하십시오.

1fb81f4dba3220e0.png

  1. Select metric 을 클릭하면 대시보드에 추가된 splash_screen_trace 기간이 표시됩니다!

이러한 동일한 단계를 사용하여 관심 있는 다른 메트릭을 추가하여 시간이 지남에 따라 그리고 다른 릴리스에서도 성능이 어떻게 변하는지 빠르게 확인할 수 있습니다.

1d465c021e58da3b.png

메트릭 보드는 사용자가 경험한 주요 메트릭의 성능을 추적하는 강력한 도구 입니다. 이 Codelab의 경우 좁은 시간 범위에 작은 데이터 집합이 있으므로 기능 롤아웃의 성능을 이해하는 데 도움이 되는 다른 대시보드 보기를 사용하게 됩니다.

8. 기능 출시

이제 모니터링을 설정했으므로 이전에 설정한 Firebase 원격 구성 변경( seasonal_image_url) 을 롤아웃할 준비가 되었습니다.

변경 사항을 적용하려면 Firebase 콘솔의 원격 구성 페이지 로 돌아가서 타겟팅 조건의 사용자 백분위수를 늘리십시오. 일반적으로 새 기능을 소수의 사용자에게 롤아웃하고 문제가 없다고 확신하는 경우에만 기능을 늘립니다. 하지만 이 코드랩에서는 앱의 유일한 사용자이므로 백분위수를 100%로 변경할 수 있습니다.

  1. 페이지 상단의 조건 탭을 클릭합니다.
  2. 이전에 추가한 Seasonal image rollout 조건을 클릭합니다.
  3. 백분위수를 100%로 변경합니다.
  4. 조건 저장 을 클릭합니다.
  5. 변경 사항 게시 를 클릭하고 변경 사항을 확인합니다.

70f993502b27e7a0.png

Android Studio로 돌아가 에뮬레이터에서 앱을 다시 시작하여 새 기능을 확인합니다. 시작 화면 이후에 새로운 빈 상태의 메인 화면이 표시되어야 합니다!

b0cc91b6e48fb842.png

9. 성능 변화 확인

이제 Firebase 콘솔의 성능 대시보드 를 사용하여 스플래시 화면 로딩의 성능을 확인해 보겠습니다. Codelab의 이 단계에서는 대시보드의 다른 부분을 사용하여 성능 데이터를 봅니다.

  1. 기본 대시보드 탭에서 추적 테이블까지 아래로 스크롤한 다음 사용자 정의 추적 탭을 클릭합니다. 이 표에는 이전에 추가한 사용자 지정 코드 추적과 일부 기본 제공 추적이 표시됩니다.
  2. 이제 새 기능을 활성화했으므로 이미지를 다운로드하고 처리하는 데 걸린 시간을 측정한 사용자 지정 코드 추적 splash_seasonal_image_processing 을 찾습니다. 추적의 Duration 값에서 이 다운로드 및 처리에 상당한 시간이 소요됨을 알 수 있습니다.

439adc3ec71805b7.png

  1. splash_seasonal_image_processing 에 대한 데이터가 있으므로 대시보드 탭 상단의 메트릭 보드에 이 추적 기간을 추가할 수 있습니다.

이전과 유사하게 빈 메트릭 선택 상자 중 하나를 클릭합니다. 대화 상자 창에서 추적 유형 Custom traces 및 추적 이름 splash_seasonal_image_processing 을 선택하십시오. 마지막으로 메트릭 선택 을 클릭하여 이 메트릭을 메트릭 보드에 추가합니다.

7fb64d2340410576.png

  1. 차이점을 더 확인하기 위해 splash_screen_trace 에 대한 데이터를 자세히 살펴볼 수 있습니다. 측정항목 보드에서 splash_screen_trace 카드를 클릭한 다음 측정항목 세부정보 보기 를 클릭합니다.

b1c275c30679062a.png

  1. 세부 정보 페이지의 왼쪽 하단에 이전에 생성한 사용자 지정 속성을 포함하여 속성 목록이 표시됩니다. 사용자 정의 속성 seasonal_image_url_attribute 를 클릭하여 오른쪽에서 각 계절 이미지 URL의 시작 화면 지속 시간을 확인합니다.

8fa1a69019bb045e.png

  1. 스플래시 화면 지속 시간 값은 위의 스크린샷과 약간 다를 수 있지만 기본 이미지("설정 해제"로 표시)를 사용하는 것보다 URL에서 이미지를 다운로드할 때 더 긴 지속 시간 이 있어야 합니다.

이 코드랩에서는 이 더 긴 기간의 이유가 간단할 수 있지만 실제 앱에서는 그렇게 명확하지 않을 수 있습니다. 수집된 기간 데이터는 다양한 네트워크 연결 조건에서 앱을 실행하는 다른 장치에서 가져오며 이러한 조건은 예상보다 나쁠 수 있습니다. 이것이 실제 상황이라면 이 문제를 어떻게 조사할지 살펴보겠습니다.

  1. 페이지 상단의 성능 을 클릭하여 대시보드 기본 탭으로 돌아갑니다. 640b696b79d90103.png
  2. 페이지 하단의 추적 테이블에서 네트워크 요청 탭을 클릭합니다. 이 표에는 images.unsplash.com/** URL 패턴을 포함하여 URL 패턴으로 집계된 앱의 모든 네트워크 요청이 표시됩니다. 이 응답 시간 값을 이미지 다운로드 및 처리에 걸리는 전체 시간(예: splash_seasonal_image_processing 추적 기간)과 비교하면 이미지 다운로드 에 많은 시간이 소요됨을 알 수 있습니다.

6f92ce0f23494507.png

성능 결과

Firebase Performance Monitoring을 사용하여 새로운 기능이 활성화된 최종 사용자에게 다음과 같은 영향을 미치는 것을 확인했습니다.

  1. SplashScreenActivity 에 소요되는 시간이 증가했습니다.
  2. splash_seasonal_image_processing 기간이 매우 깁니다.
  3. 지연은 이미지 다운로드에 대한 응답 시간과 이미지에 필요한 해당 처리 시간으로 인한 것입니다.

다음 단계에서는 기능을 롤백하고 기능 구현을 개선할 수 있는 방법을 식별하여 성능에 미치는 영향을 완화합니다.

10. 기능 롤백

시작 화면에서 사용자의 대기 시간을 늘리는 것은 바람직하지 않습니다. 원격 구성의 주요 이점 중 하나는 사용자에게 다른 버전을 릴리스하지 않고도 롤아웃을 일시 중지하고 되돌릴 수 있다는 것입니다. 이를 통해 문제(예: 마지막 단계에서 발견한 성능 문제)에 신속하게 대응하고 불행한 사용자의 수를 최소화할 수 있습니다.

빠른 완화를 위해 롤아웃 백분위수를 다시 0 으로 재설정하여 모든 사용자가 기본 이미지를 다시 볼 수 있도록 합니다.

  1. Firebase 콘솔의 원격 구성 페이지 로 돌아갑니다.
  2. 페이지 상단의 조건 을 클릭합니다.
  3. 이전에 추가한 Seasonal image rollout 조건을 클릭합니다.
  4. 백분위수를 0%로 변경합니다.
  5. 조건 저장 을 클릭합니다.
  6. 변경 사항 게시 를 클릭하고 변경 사항을 확인합니다.

18c4f1cbac955a04.png

Android Studio에서 앱을 다시 시작하면 원래의 빈 상태 기본 화면이 표시되어야 합니다.

d946cab0df319e50.png

11. 성능 문제 수정

시작 화면용 이미지를 다운로드하면 앱 속도가 느려진다는 것을 Codelab의 앞부분에서 발견했습니다. 다운로드한 이미지를 자세히 살펴보면 2MB가 넘는 이미지의 원래 해상도 를 사용하고 있음을 알 수 있습니다! 성능 문제에 대한 한 가지 빠른 수정은 이미지를 다운로드하는 데 걸리는 시간을 줄이기 위해 품질을 보다 적절한 해상도로 낮추는 것입니다.

원격 구성 값 다시 출시

  1. Firebase 콘솔의 원격 구성 페이지 로 돌아갑니다.
  2. seasonal_image_url 매개변수에 대한 편집 아이콘을 클릭하십시오.
  3. 계절 이미지 롤아웃의 값https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640 으로 업데이트한 다음 저장 을 클릭합니다.

828dd1951a2ec4a4.png

  1. 페이지 상단의 조건 탭을 클릭합니다.
  2. Seasonal image rollout 을 클릭한 다음 백분위수를 다시 100%로 설정합니다.
  3. 조건 저장 을 클릭합니다.

1974fa3bb789f36c.png

  1. 변경 사항 게시 버튼을 클릭합니다.

12. 수정 사항 테스트 및 경고 설정

로컬에서 앱 실행

다른 다운로드 이미지 URL을 사용하도록 설정한 새 구성 값으로 앱을 다시 실행합니다. 이번에는 시작 화면에서 보낸 시간이 이전보다 짧아진 것을 알 수 있습니다.

b0cc91b6e48fb842.png

변경 사항의 성능 보기

Firebase 콘솔의 성능 대시보드 로 돌아가서 측정항목이 어떻게 보이는지 확인하세요.

  1. 이번에는 추적 테이블을 사용하여 세부정보 페이지로 이동합니다. trace 테이블 아래에 있는 Custom traces 탭에서 사용자 지정 trace splash_seasonal_image_processing 을 클릭하여 기간 측정항목에 대한 자세한 보기를 다시 확인하세요.

2d7aaca03112c062.png

  1. 사용자 정의 속성 seasonal_image_url_attribute 를 클릭하여 사용자 정의 속성의 분석을 다시 확인하십시오. URL 위로 마우스를 가져가면 축소된 이미지의 새 URL과 일치하는 값이 표시됩니다 ?w=640 https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640 끝에). 이 이미지와 관련된 기간 값은 이전 이미지의 값보다 상당히 짧고 사용자가 더 수용할 수 있습니다!

10e30c037a4237a2.png

  1. 이제 시작 화면의 성능이 향상되었으므로 추적이 설정한 임계값을 초과할 때 알리도록 경고를 설정할 수 있습니다. 성능 대시보드 를 열고 splash_screen_trace 에 대한 오버플로 메뉴(점 3개) 아이콘을 클릭하고 경고 설정 을 클릭합니다.

4bd0a2a1faa14479.png

  1. 토글을 클릭하여 기간 알림을 활성화합니다. 귀하의 splash_screen_trace 가 임계값을 초과하면 이메일을 받을 수 있도록 임계값을 보고 있는 값보다 약간 높게 설정하십시오.
  1. 저장 을 클릭하여 경고를 만듭니다. trace 테이블 까지 아래로 스크롤한 다음 Custom traces 탭을 클릭하여 알림이 활성화되었는지 확인합니다.

2bb93639e2218d1.png

13. 축하합니다!

축하합니다! Firebase Performance Monitoring SDK를 활성화하고 추적을 수집하여 새 기능의 성능을 측정했습니다. 새로운 기능의 롤아웃에 대한 주요 성능 지표를 모니터링하고 성능 문제가 발견되었을 때 신속하게 대응했습니다. 이는 원격 구성으로 구성을 변경하고 실시간으로 성능 문제를 모니터링하는 기능으로 가능했습니다.

우리가 다룬 내용

  • 앱에 Firebase Performance Monitoring SDK 추가
  • 특정 기능을 측정하기 위해 코드에 사용자 지정 코드 추적 추가
  • 새 기능을 제어/롤아웃하기 위한 원격 구성 매개변수 및 조건부 값 설정
  • 성능 모니터링 대시보드를 사용하여 롤아웃 중 문제를 식별하는 방법 이해
  • 앱 성능이 설정한 임계값을 초과할 때 알려주도록 성능 알림 설정

더 알아보기