Flutter에서 iOS Universal Links 설정하기: 딥 링크 구현 가이드

Flutter 애플리케이션에서 iOS Universal Links를 설정하면 사용자가 웹 링크를 통해 앱의 특정 화면으로 바로 이동할 수 있습니다. 이 기능은 앱 접근성을 높이고 사용자 경험을 개선하는 데 매우 유용합니다. 이번 글에서는 Universal Links를 설정하고 활용하는 방법을 단계별로 설명합니다.

참고. Set up universal links for iOS

Universal Links란 무엇인가?

Universal Links는 iOS에서 http 또는 https 프로토콜로 구성된 링크를 앱과 연결하여 앱의 특정 화면을 열 수 있도록 지원하는 기능입니다. 이를 통해 사용자는 브라우저 대신 Flutter 앱을 직접 실행할 수 있습니다.

Universal Links 설정 방법

1. Flutter 애플리케이션 생성 및 라우팅 구성

먼저 Flutter 프로젝트를 생성하고 go_router 패키지를 사용해 라우팅을 설정합니다.

1. 새로운 Flutter 프로젝트 생성:
2. flutter create deeplink_cookbook
3. go_router 패키지 추가:
4. flutter pub add go_router
5. main.dart에서 라우터 구성:
6. import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; void main() => runApp(MaterialApp.router(routerConfig: router)); final router = GoRouter( routes: [ GoRoute( path: '/', builder: (_, __) => Scaffold(appBar: AppBar(title: const Text('Home Screen'))), routes: [ GoRoute( path: 'details', builder: (_, __) => Scaffold(appBar: AppBar(title: const Text('Details Screen'))), ), ], ), ], ); ``

2. iOS 프로젝트 설정

Xcode에서 Flutter iOS 프로젝트를 열고 필요한 설정을 추가합니다.

1. iOS 프로젝트 열기:
   • 경로: ios/Runner.xcworkspace
2. FlutterDeepLinkingEnabled 키 추가:
   • Info.plist에서 새 키를 추가합니다:
     • Key: FlutterDeepLinkingEnabled
     • Type: Boolean
     • Value: YES
3. Associated Domains 추가:
   • Xcode에서 Signing & Capabilities 섹션을 열고 + Capability를 클릭해 Associated Domains를 추가합니다.
   • 도메인 입력 형식: applinks:<your-domain> (예: applinks:example.com).

3. apple-app-site-association 파일 생성 및 호스팅

Universal Links를 구현하려면 웹 도메인에 apple-app-site-association 파일을 생성하여 업로드해야 합니다.

1. appID 생성:
   • Team ID와 Bundle ID를 결합하여 생성합니다.
     • 예: S8QB4VV633.com.example.deeplinkCookbook
2. JSON 파일 작성:
3. { "applinks": { "apps": [], "details": [ { "appIDs": ["S8QB4VV633.com.example.deeplinkCookbook"], "paths": ["*"] } ] }, "webcredentials": { "apps": ["S8QB4VV633.com.example.deeplinkCookbook"] } }
4. 파일 업로드:
   • JSON 파일을 다음 경로에 업로드:

     <web-domain>/.well-known/apple-app-site-association

5. 파일 접근성 테스트:
   • 브라우저에서 해당 파일 URL에 접근하여 확인.

테스트 및 검증

1. iOS 시뮬레이터에서 테스트

• Flutter 앱을 실행한 후 Xcode CLI를 사용해 Universal Links를 테스트:

  xcrun simctl openurl booted https://<your-domain>/details

2. 실제 기기 테스트

• 메모 앱에서 링크를 입력한 후 클릭하여 앱이 열리는지 확인.

3. 딥 링크 검증 도구 사용

• Flutter DevTools의 딥 링크 검증 도구를 활용해 링크 동작을 확인합니다.

Universal Links의 장점

1. 사용자 경험 개선:
   • 브라우저 대신 앱에서 콘텐츠를 직접 확인할 수 있어 편리합니다.
2. 브랜드 노출 강화:
   • URL을 통해 사용자에게 브랜드와 앱 연결성을 제공.
3. SEO 효과:
   • 검색 엔진이 앱 콘텐츠를 인덱싱할 가능성 증가.

유용한 팁

1. 다중 스키마 지원:
   • 앱이 여러 빌드 변형을 사용하는 경우, 각 변형의 appID를 JSON 파일에 추가하세요.
2. 실시간 디버깅:
   • 테스트 링크가 제대로 작동하지 않으면 Xcode 로그를 확인해 디버깅합니다.
3. HTTPS 필수:
   • Universal Links는 반드시 HTTPS 프로토콜을 사용해야 합니다.

---

결론

Flutter 앱에서 iOS Universal Links를 설정하면 사용자가 더욱 직관적이고 간편하게 앱에 접근할 수 있습니다. 위 가이드를 따라 설정을 완료하고 앱의 접근성과 사용자 만족도를 높여보세요.