딥 링크는 Google Ads 앱 및 Web to App 캠페인을 개선하는 데 유용한 도구로, 사용자를 Flutter 애플리케이션 내의 특정 콘텐츠로 직접 유도하는 데 도움이 됩니다. 이를 통해 사용자 환경을 개선하고, 참여도를 높이고, 광고의 전환율을 크게 높일 수 있습니다. 딥 링크와 Flutter의 통합에 대해 자세히 알아보세요.
이 도움말에서는 Flutter Deeplinking Validator와 같은 도구를 활용하여 Flutter 앱의 딥 링크를 구현하고 검증하는 방법을 안내합니다.
이 페이지의 내용
성공을 위한 준비: 권장되는 딥 링크 메커니즘 사용하기
딥 링크가 작동하려면 일반적으로 앱과 연결된 웹사이트를 모두 구성해야 합니다. 안전하고 권장되는 두 가지 기본 딥 링크 메커니즘은 다음과 같습니다.
- 앱 링크(Android): 웹사이트에 속하는 것으로 확인된 HTTP/HTTPS URL로, 사용자가 명확하게 구분하지 않아도 Android 앱에서 직접 열 수 있습니다.
- 범용 링크(iOS): iOS 앱 내 콘텐츠에 안전하게 연결되는 HTTP/HTTPS URL입니다. 앱 링크와 마찬가지로 내 앱만 내 도메인의 링크를 처리할 수 있도록 웹사이트를 통해 인증해야 합니다.
myapp://과 같은 이전 맞춤 스키마 대신 이러한 기본 메커니즘을 사용하는 것이 좋습니다. 이러한 메커니즘은 더 안전하고 고유하며 앱이 설치되지 않은 경우 웹사이트로 연결하는 등 더 나은 대체 환경을 제공합니다.
Flutter 앱에서 딥 링크를 구현하고 테스트하는 방법
Flutter에서 딥 링크를 구현하려면 링크 기반 탐색을 처리하도록 Flutter 앱을 구성하고 Android 및 iOS용 플랫폼별 구성과 도메인 연결용 웹 서버 구성을 설정해야 합니다. Flutter 앱에 딥 링크를 구현하려면 아래 단계를 따르세요.
1/4단계: 앱 설정(Flutter 및 네이티브 구성)
이 단계에서는 수신되는 딥 링크 URL을 인식하고 처리하도록 Flutter 앱을 구성합니다.
A. 수신되는 URL 및 탐색 처리(Flutter 측)
Flutter 애플리케이션은 수신되는 딥 링크 URI를 수신하고 분석한 다음 적절한 화면으로 이동할 수 있어야 합니다.
- 라우팅 솔루션을 선택합니다.
go_router: 딥 링크 처리를 비롯하여 탐색을 간소화하는 Flutter용 인기 있는 선언적 라우팅 패키지입니다. 더 복잡한 앱에 권장되는 경우가 많습니다. (pub.dev의 go_router)- Navigator 2.0(선언적 탐색): Flutter의 핵심 선언적 탐색 API입니다. 강력한 기능이지만 직접 설정하는 것이 더 복잡할 수 있습니다.
go_router와 같은 패키지는 이를 기반으로 빌드됩니다. uni_links / app_links패키지: 이러한 패키지는 앱을 연 초기 링크를 가져오고 후속 수신 링크를 수신 대기하는 데 도움이 되며, 라우팅 로직을 수동으로 또는 다른 라우팅 솔루션으로 관리하려는 경우에 유용합니다.
- 링크를 가져와 분석합니다.
- 초기 링크: 딥 링크에서 앱을 열면 이 초기 URI를 가져와야 합니다.
uni_links와 같은 패키지는 이를 위해getInitialUri()를 제공합니다. - 후속 링크: 앱이 이미 실행 중이고 새 딥 링크를 수신하는 경우 수신되는 URI 스트림을 수신 대기해야 합니다.
uni_links는uriLinkStream을 제공합니다. - URI가 있으면 경로와 쿼리 매개변수를 분석하여 도착 페이지 화면과 제품 ID 등 표시할 데이터를 확인합니다.
- 초기 링크: 딥 링크에서 앱을 열면 이 초기 URI를 가져와야 합니다.
- 올바른 화면으로 이동합니다.
- 분석된 링크를 기반으로 선택한 라우팅 솔루션(예:
GoRouter.go(),Navigator.pushNamed())을 사용하여 사용자를 앱의 관련 화면으로 이동합니다.
- 분석된 링크를 기반으로 선택한 라우팅 솔루션(예:
예 (개념 - go_router와 같은 라우팅 패키지 사용):
// In your main.dart or routing configuration
final GoRouter _router = GoRouter(
routes: <RouteBase>[
GoRoute(
path: '/',
builder: (BuildContext context, GoRouterState state) {
return const HomeScreen();
},
routes: <RouteBase>[
биологии GoRoute(
path: 'product/:id', // Example: myapp.com/product/123
builder: (BuildContext context, GoRouterState state) {
final String productId = state.pathParameters['id']!;
return ProductScreen(id: productId);
},
),
// Add other deep linkable routes
// Example: myapp.com/category/electronics
GoRoute(
path: 'category/:categoryName',
builder: (BuildContext context, GoRouterState state) {
final String category = state.pathParameters['categoryName']!;
return CategoryScreen(category: category);
},
),
],
),
],
// Error handling for unknown routes
errorBuilder: (context, state) => ErrorScreen(error: state.error),
);
// In your MaterialApp
MaterialApp.router(
routerConfig: _router,
// ... other MaterialApp properties
)
B. 네이티브 Android 구성 (AndroidManifest.xml) 설정
Android 앱 링크를 사용 설정하려면 android.intent.action.MAIN이 있는 기본 <activity> 태그 내의 android/app/src/main/AndroidManifest.xml 파일에 인텐트 필터를 추가해야 합니다.
- Flutter 딥 링크를 사용 설정합니다. 기본
<activity>내에 이 메타데이터 태그를 추가하세요.<meta-data android:name="flutter_deeplinking_enabled" android:value="true" /> - HTTP/HTTPS 링크의 인텐트 필터를 추가합니다.
<intent-filter android:autoVerify="true"><action android:name="android.intent.action.VIEW" /><category android:name="android.intent.category.DEFAULT" /><category android:name="android.intent.category.BROWSABLE" /><!-- Accepts URIs that begin with https://yourdomain.com --><data android:scheme="https" android:host="yourdomain.com" /><!-- You can add multiple data tags for different hosts or pathPrefixes --><!-- Example for a specific path: --><!-- <data android:scheme="https" android:host="yourdomain.com" android:pathPrefix="/product"/> --></intent-filter><intent-filter> <!-- Also add for http if needed, though https is strongly recommended --><action android:name="android.intent.action.VIEW" /><category android:name="android.intent.category.DEFAULT" /><category android:name="android.intent.category.BROWSABLE" /><data android:scheme="http" android:host="yourdomain.com" /></intent-filter>yourdomain.com을 실제 도메인으로 바꿉니다.android:autoVerify="true"속성을 사용하면 웹사이트 연결(아래 웹 설정 참고)이 올바르게 구성된 경우 앱이data태그와 일치하는 링크의 기본 핸들러가 될 수 있습니다.
C. 네이티브 iOS 구성 설정
iOS 범용 링크의 경우 Xcode에서 연결된 도메인을 사용 설정합니다.
- Xcode에서 Flutter 프로젝트의
ios폴더를 엽니다. - 프로젝트 탐색기에서
Runner타겟을 선택합니다. - '서명 및 기능' 탭으로 이동합니다.
+ 기능버튼을 클릭하고 '연결된 도메인'을 추가합니다.- '연결된 도메인' 섹션에서
applinks:yourdomain.com형식으로 항목을 추가합니다(yourdomain.com을 내 도메인으로 대체).
2/4단계: 웹 설정(도메인 연결)
이 단계에서는 웹사이트 도메인을 앱과 연결하여 앱이 해당 도메인의 링크를 열 수 있는 권한이 있는지 확인합니다. 이러한 파일은 HTTPS를 통해 제공해야 합니다.
A. Android(앱 링크)의 경우
assetlinks.json이라는 파일을 만듭니다.- 콘텐츠는 다음과 같이 구성해야 합니다.
[{"relation": ["delegate_permission/common.handle_all_urls"],"target": {"namespace": "android_app","package_name": "com.yourcompany.yourappname", // Replace with your app's package name"sha256_cert_fingerprints": ["YOUR_SHA256_CERT_FINGERPRINT_1", // Replace with your release key fingerprint"YOUR_SHA256_CERT_FINGERPRINT_2" // Add debug key fingerprint for testing if needed]}}]``` * Replace `com.yourcompany.yourappname` with your app's actual package name (applicationId in your `build.gradle`).* Replace `YOUR_SHA256_CERT_FINGERPRINT_...` with the SHA-256 fingerprints of your app's signing certificate(s). You can get this from the Google Play Console (App integrity > App signing) or using the `keytool` command. - 다음 정확한 경로에 웹사이트에서 이 파일을 호스팅합니다.
https://yourdomain.com/.well-known/assetlinks.json(yourdomain.com을 내 도메인으로 대체). - 파일이
Content-Type: application/json으로 제공되는지 확인합니다.
B. iOS(범용 링크)
apple-app-site-association이라는 파일을 만듭니다(확장자 없음).- 콘텐츠는 다음과 같이 구성해야 합니다.
YOUR_TEAM_ID.com.yourcompany.yourappbundleid를 내 Apple 팀 ID와 내 앱의 번들 식별자로 대체합니다.paths배열은 앱에서 열 수 있는 URL 경로를 지정합니다. *를 와일드 카드로 사용하여 여러 하위 경로를 일치시킵니다(예: /product/* 는 모든 제품 세부정보 페이지와 일치합니다).NOT /path/to/exclude/*를 사용하여 특정 경로를 제외합니다.["*"]또는["/"]를 사용하면 일반적으로 앱에서 도메인의 모든 링크를 처리할 수 있습니다.
https://yourdomain.com/.well-known/apple-app-site-association또는https://yourdomain.com/apple-app-site-association(루트)에 웹사이트에서 이 파일을 호스팅합니다. 일반적으로.well-known경로가 선호됩니다.- 파일이
Content-Type: application/json으로 제공되고 gzip으로 압축되지 않았는지 확인합니다.
3/4단계: Flutter Deeplinking Validator로 딥 링크 검사
딥 링크 구현을 시작한 후에는 설정을 검사하는 것이 중요합니다. Google에서는 이 프로세스를 지원하기 위해 Flutter DevTools에 직접 통합된 도구인 Flutter 딥 링크 검사기를 제공합니다.
Flutter 딥 링크 검사기에 액세스하는 방법
- 선호하는 IDE(예: VS Code, Android 스튜디오)에서 Flutter 프로젝트를 엽니다.
- Flutter DevTools를 실행합니다.
- '딥 링크 검사기' 탭으로 이동합니다. 이 탭은 일반적으로 사용 가능한 도구 목록 아래 있습니다.
- 화면에 표시된 안내에 따라 프로젝트를 선택하고 검사를 시작합니다.
권장사항: 개발 과정 중에 검사기를 반복적으로 사용하여 딥 링크 문제를 조기에 포착하고 수정하여 앱 참여 광고와 원활하게 통합하세요.
4/4단계: 딥 링크 테스트
adb를 사용하여 인텐트 필터를 테스트합니다.adb shell am start -a android.intent.action.VIEW \-c android.intent.category.BROWSABLE \-d "https://yourdomain.com/product/123" com.yourcompany.yourappnameyourdomain.com및com.yourcompany.yourappname을 적절하게 바꿉니다.
- 인텐트 필터와 일치하는 메모, 이메일 또는 기타 앱의 링크를 클릭합니다.
iOS의 경우
- 연결된 도메인 구성과 일치하는 Safari, 메모 또는 기타 앱의 링크를 클릭합니다.
- 범용 링크를 Safari에 붙여넣어 테스트할 수도 있습니다. 올바르게 구성된 경우 앱에서 링크를 열 수 있도록 페이지 상단에 배너가 표시됩니다.
Flutter 딥 링크 권장사항
- 보안 및 안정성 우선 지정: Android 앱 링크 및 iOS 범용 링크를 사용합니다. 이 링크는 앱 콘텐츠에 안전하게 연결할 수 있는 방법을 제공하며 앱이 설치되지 않은 경우 웹사이트로 원활하게 대체됩니다.
- 일관된 URL 구조: 관리 및 추적을 용이하게 하기 위해 웹사이트와 앱 딥 링크 간에 일관된 URL 구조를 유지합니다.
- 철저한 테스트:
- Flutter 딥 링크 검사기를 정기적으로 사용합니다(특히 Android의 경우).
- 브라우저, 시뮬레이션된 광고 클릭, 다양한 기기 및 OS 버전등 다양한 소스에서 딥 링크를 테스트합니다.
- 웹사이트 접근성 및 구성:
assetlinks.json(Android) 및apple-app-site-association(iOS) 파일이 올바르게 호스팅되고, HTTPS를 통해 공개적으로 액세스할 수 있으며, 올바른Content-Type헤더(예:application/json)가 있는지 확인합니다.- iOS의 경우 서버에서 AASA 파일을 gzip으로 압축해서는 안 되며 Apple의 CDN을 통한 전파 시간을 허용해야 합니다.
- 앱이 설치되지 않은 경우에 대비: 딥 링크를 클릭했지만 앱을 설치하지 않은 사용자를 위해 모바일 웹사이트에 항상 관련 대체 환경을 제공합니다.
- 마케팅팀과 협력: 개발팀과 마케팅팀이 광고 캠페인에 사용되는 딥 링크 URL에 대해 동의하도록 합니다.
