[Flutter] Firebase Performance

개요

이번 블로그 포스트에서는 Flutter로 개발한 앱의 성능을 모니터링하기 위해, Firebase의 Performance를 설정하는 방법에 대해서 알아보겠습니다.

firebase_performance

블로그 시리즈

이 블로그는 시리즈로 제작되었습니다. 다음 링크를 통해 다른 블로그 포스트도 확인해 보시기 바랍니다.

Firebase 프로젝트 생성 및 설정

Flutter에서 Firebase를 사용하기 위해서는 Firebase 프로젝트를 생성하고, firebase_core 패키지를 설치할 필요가 있습니다. 아래의 링크를 통해 자세한 내용을 확인하시기 바랍니다.

[Flutter] Firebase Core

firebase_performance 설치

Flutter 프로젝트에서 Firebase Performance를 사용하기 위해서는 firebase_performance 패키지를 설치할 필요가 있습니다. 다음 명령어를 실행하여 firebase_performance 패키지를 설치합니다.

flutter pub add firebase_performance

그리고 다음 명령어를 실행하여 Firebase Performance 설정을 합니다.

flutterfire configure

Firebase Performance는 이렇게 설치하고 설정하기만 하면, 자동으로 앱의 성능을 측정하고 Firebase Console에서 확인할 수 있습니다.

자동 수집 데이터

Firebase Performance는 별도의 코드 없이도 다음과 같은 데이터를 자동으로 수집합니다.

앱 시작 시간(App start time): 앱이 시작되어 사용자가 상호작용할 수 있을 때까지의 시간
화면 렌더링(Screen rendering): 각 화면이 렌더링되는 데 걸리는 시간과 느린 프레임, 정지된 프레임 수
HTTP/S 네트워크 요청(Network requests): 네트워크 요청의 응답 시간, 페이로드 크기, 성공률

커스텀 트레이스

자동 수집 데이터 외에도, 특정 작업의 성능을 측정하고 싶다면 커스텀 트레이스(Custom Trace)를 사용할 수 있습니다.

import 'package:firebase_performance/firebase_performance.dart';

Future<void> fetchData() async {
  // 트레이스 생성 및 시작
  final Trace trace = FirebasePerformance.instance.newTrace('fetch_data_trace');
  await trace.start();

  try {
    // 측정하고 싶은 작업 수행
    final response = await api.fetchData();

    // 성공 시 메트릭 기록
    trace.setMetric('data_count', response.data.length);
  } catch (e) {
    // 에러 발생 시 속성 기록
    trace.putAttribute('error', e.toString());
  } finally {
    // 트레이스 종료
    await trace.stop();
  }
}

커스텀 속성 추가

트레이스에 커스텀 속성을 추가하여 더 상세한 정보를 기록할 수 있습니다.

final Trace trace = FirebasePerformance.instance.newTrace('user_action_trace');
await trace.start();

// 커스텀 속성 추가 (문자열)
trace.putAttribute('user_type', 'premium');
trace.putAttribute('screen_name', 'home');

// 커스텀 메트릭 추가 (숫자)
trace.setMetric('item_count', 10);
trace.incrementMetric('tap_count', 1);

await trace.stop();

HTTP 요청 모니터링

HTTP 요청의 성능을 더 상세하게 모니터링하고 싶다면, HttpMetric을 사용할 수 있습니다.

import 'package:firebase_performance/firebase_performance.dart';

Future<void> fetchUserData() async {
  final HttpMetric metric = FirebasePerformance.instance.newHttpMetric(
    'https://api.example.com/users',
    HttpMethod.Get,
  );

  await metric.start();

  try {
    final response = await http.get(Uri.parse('https://api.example.com/users'));

    // 응답 정보 설정
    metric.responsePayloadSize = response.contentLength ?? 0;
    metric.responseContentType = response.headers['content-type'];
    metric.httpResponseCode = response.statusCode;
  } finally {
    await metric.stop();
  }
}

Firebase Console에서 확인

성능 데이터는 Firebase Console의 Performance 메뉴에서 확인할 수 있습니다.

Firebase Console에 접속합니다.
프로젝트를 선택한 후, 왼쪽 메뉴에서 Performance를 선택합니다.
대시보드에서 앱 시작 시간, 화면 렌더링, 네트워크 요청 등의 데이터를 확인할 수 있습니다.
커스텀 트레이스는 Custom traces 탭에서 확인할 수 있습니다.

데이터가 표시되기까지 최대 24시간이 걸릴 수 있습니다.

완료

이것으로 Flutter에서 Firebase Performance를 사용하기 위해 Flutter 프로젝트에 firebase_performance를 설정하는 방법에 대해서 알아보았습니다. Firebase Performance를 사용하면 앱의 시작 시간, 화면 렌더링 성능, 네트워크 요청 성능 등을 모니터링하여 사용자 경험을 개선할 수 있습니다.

Github Sponsor

Buy me a coffee

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!