플러터 초보자를 위한 Firebase Dynamic Links 사용법: go_router와 함께 딥 링크 구현하기

Firebase Dynamic Links와 go_router로 플러터 앱에 딥 링크 설정하기

플러터 앱을 개발하면서, 앱이 특정 콘텐츠를 바로 열 수 있도록 하는 딥 링크를 설정하는 방법을 배우고 싶다면, Firebase Dynamic Links와 go_router 패키지를 활용할 수 있습니다.

이 글에서는 Firebase Dynamic Links와 go_router를 사용하여, 사용자가 앱을 실행할 때 특정 URL을 통해 바로 원하는 페이지로 이동할 수 있도록 설정하는 방법을 초보자도 따라 할 수 있도록 자세히 설명합니다.

1. Firebase Dynamic Links 설정하기

1.1 Firebase 프로젝트 만들기

Firebase를 사용하려면 먼저 Firebase 콘솔에서 프로젝트를 만들어야 합니다.

1. Firebase 콘솔에 접속하여 Firebase에 로그인합니다.
2. 새 프로젝트를 만들거나 기존 프로젝트를 선택합니다.

1.2 Firebase Dynamic Links 활성화하기

1. Firebase 콘솔에서 Dynamic Links 서비스를 활성화합니다.
2. Dynamic Links 메뉴에서 Get Started 버튼을 클릭합니다.
3. Domain Name을 입력합니다. 이 도메인은 나중에 생성할 딥 링크의 URL에 포함됩니다. 예를 들어, https://example.page.link와 같은 형태입니다.

2. Firebase Dynamic Links Flutter 설정

2.1 Firebase SDK 설치

Firebase를 플러터 앱에서 사용하려면 몇 가지 패키지를 설치해야 합니다.

firebase_core와 firebase_dynamic_links 패키지를 pubspec.yaml에 추가합니다.

dependencies:
  firebase_core: ^2.10.0
  firebase_dynamic_links: ^5.0.0
  go_router: ^5.0.0

2.2 Firebase 초기화

main.dart에서 Firebase를 초기화합니다. Firebase를 사용하려면 앱이 시작되기 전에 초기화해야 합니다.

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:firebase_dynamic_links/firebase_dynamic_links.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routeInformationParser: _router.routeInformationParser,
      routerDelegate: _router.routerDelegate,
    );
  }
}

3. go_router 패키지 설정하기

go_router 패키지는 플러터에서 라우팅을 쉽게 관리할 수 있도록 도와주는 패키지입니다. 이를 사용하여 딥 링크를 처리할 수 있습니다.

3.1 go_router 설정

라우팅을 설정하여, 앱의 페이지를 관리합니다. 아래와 같이 기본 라우팅을 설정합니다.

final GoRouter _router = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => HomePage(),
    ),
    GoRoute(
      path: '/product/:id',
      builder: (context, state) {
        final productId = state.params['id']!;
        return ProductPage(id: productId);
      },
    ),
  ],
);

이 코드는 / 경로에서 홈 페이지를 열고, /product/:id 경로에서는 id 파라미터를 이용해 상품 페이지로 이동합니다.

4. Firebase Dynamic Links로 딥 링크 처리하기

Firebase Dynamic Links를 사용하면, 앱을 열 때 특정 URL로 이동할 수 있습니다. onLink 메서드를 사용하여 딥 링크를 처리할 수 있습니다.

4.1 딥 링크 처리하기

앱이 시작될 때, Firebase Dynamic Link를 통해 전달된 링크를 처리하는 코드를 작성합니다.

void handleDynamicLink() async {
  final PendingDynamicLinkData? data = await FirebaseDynamicLinks.instance.getInitialLink();
  final Uri? deepLink = data?.link;

  if (deepLink != null) {
    final productId = deepLink.queryParameters['id'];
    if (productId != null) {
      _router.go('/product/$productId');
    }
  }

  FirebaseDynamicLinks.instance.onLink(
    onSuccess: (dynamicLink) async {
      final Uri deepLink = dynamicLink?.link!;
      final productId = deepLink.queryParameters['id'];
      if (productId != null) {
        _router.go('/product/$productId');
      }
    },
    onError: (e) async {
      print('Error: ${e.message}');
    },
  );
}

이 코드는 딥 링크가 앱을 통해 열렸을 때, 링크에 포함된 id 값을 읽어 해당 페이지로 이동합니다.

5. 딥 링크 테스트하기

Firebase 콘솔에서 생성한 Dynamic Link를 클릭하여 앱을 실행합니다.

앱이 열리고 링크가 지정한 페이지로 이동하는지 확인합니다.

예를 들어, https://example.page.link/?id=123와 같은 링크를 클릭하면 앱이 열리고 /product/123 페이지로 이동합니다.

6. 결론

이제 Firebase Dynamic Links와 go_router를 사용하여 플러터 앱에서 딥 링크를 구현할 수 있습니다.

Firebase Dynamic Links는 사용자가 앱을 열 때 원하는 콘텐츠로 바로 이동할 수 있도록 도와주며, go_router는 앱 내 라우팅을 간편하게 관리할 수 있게 해줍니다.

이 두 가지를 함께 사용하면 더 나은 사용자 경험을 제공할 수 있습니다.

7. 추가 팁

• Firebase Dynamic Links를 활용하여 마케팅 캠페인에서 사용자를 특정 페이지로 유도할 수 있습니다.
• go_router는 상태 관리와 네스트된 라우팅을 지원하므로, 복잡한 앱 구조에서도 효과적으로 사용할 수 있습니다.

이 글을 따라 하면, 플러터 앱에서 Firebase Dynamic Links와 go_router를 이용하여 간단한 딥 링크 기능을 구현할 수 있습니다.

딥 링크를 활용하여 앱 사용자 경험을 더욱 향상시킬 수 있습니다!

 

구독!! 공감과 댓글,

광고 클릭은 저에게 큰 힘이 됩니다.

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱