앱 개발에 중요한 부분이 딥링크와 유니버설 링크 (앱 링크)이죠. 이 부분이 접목이 되면 앱이 웹에 노출이 쉽게 되어 마케팅에 많은 효과를 가지고 올 수 있습니다.
온라인에 아주 많은 글들이 올라와 있는데요, 제가 이 개발 작업을 하면서 이 포스팅에서 한 곳에 모아 보았습니다. 이 포스팅은 React Native 앱에서 Android와 iOS에서 딥링크 와 유니버설 링크의 생성을 하는 방법입니다
기본 문서
이 포스팅의 방법은 React Navigation 6을 이용하여 딥링크와 유니버설 링크를 생성합니다. 다음의 두가지 공식 문서를 참조 하였습니다:
React Navigation - 링크 설치하기 https://reactnavigation.org/docs/configuring-links/
React Navigation - 딥 링킹 https://reactnavigation.org/docs/deep-linking/
환경 설정 - Domain Asset Verification
유니버설 링크 (앱 링크)를 세팅하기 위해서는 구글이나 애플사에게 앱이 자신의 도메인의 소유가 되어 있다는 것을 보여주어야 합니다. 그러므로써 웹 페이지에서 앱으로 트래픽을 유도해 주게 됩니다. 그러기 위해서는 구글와 애플이 원하는 방법을 이용하여 소유권 파일을 업로드 해 놓아야 합니다. 딥링크만 이용하시려면 이 스텝은 넘어가셔도 됩니다.
이 포스팅은 React로 만들어진 웹 페이지를 이용하므로 /public/.well-known 폴더에 소유권 파일을 넣고 배포를 합니다. 배포가 되면 구글이나 애플은 https://yourdomain/.well-known 에 위치한 소유권 파일을 액세스하게 됩니다.
다음의 두 섹션은 Android와 iOS의 앱 소유권 파일 생성과 확인 테스트 방법입니다:
Android
assetlinks.json
package_name과 sha256_cert_fingerprints는 구글 플래이 콘솔 계정에서 확인 합니다 (Google Play Console > App signing). 페이지의 제일 아래 부분에 Digital Asset Link JSON 코드 블럭이 있습니다. 그 내용을 붙여넣기 해도 무관 합니다.
GOOGLE 앱 소유권 확인 테스트 하기
아래의 링크에서 테스트를 할 수 있습니다:
iOS
apple-app-site-association
중요: 확장자가 없습니다!
appID 는 애플 개발자 사이트에서 확인 가능 합니다 (Apple Developer > Account > Certificates, IDs & Profiles > Identifiers > 해당 앱을 셀렉트 함).
appID 는 다음과 같이 기입합니다 [App ID Prefix].[Bundle ID]
IOS 주의점:
STEP 1:
애플 개발자 계정에서 Associated Domains 기능이 활성화가 되어야 합니다 (Apple Developer > Account > Certificates, IDs & Profiles > Identifiers > 해당 앱을 셀렉트 함).
STEP 2:
애플의 앱 소유권 확인 파일은 GET 메서드를 이용하여 확인시에 Response header의 Content-Type가 application/json으로 셋이 되어야 합니다. 각 프레임워크나 호스팅 서비스 마다 방법이 약간씩 차이가 있습니다.
아래의 방법은 AWS CloudFront에서 호스팅을 할 시의 방법 예제입니다 (사이트를 호스팅하는 distribution의 custom response header policy를 생성해 주는 방법입니다):
1. AWS 로그인
2. CloudFront > Policies > Response headers
3. Create response headers policy 버튼 클릭
4. 다음의 옵션을 이용하여 커스텀 policy를 생성:
Name은 아무것이나 괜찮음
Custom headers
Name: content-type
Value: application/json
Origin override: enabled
5. Distribution의 configuration으로 가서 새로운 Behaviors를 생성함:
Path pattern: /.well-known/apple-app-site-association
Origin and origin groups: 사이트 파일을 호스팅하는 S3 버킷
Viewer protocol policy: HTTPS only
Response headers policy: [4번에서 생성된 policy 이름]
다른 모든 부분은 기본 값으로 남겨둠
APPLE 앱 소유권 확인 테스트 하기
아래의 링크를 이용하여 소유권 파일을 테스트 합니다:
환경 설정 - App
도메인 사이트에서 앱 소유권 파일로 환경 설정을 한 후에는 앱에서 환경 설정을 해야 합니다. 딥링크만 설정하는 분은 딥링크 섹션만 설정을 하면 됩니다.
Android
AndroidManifest.xml
이 파일에 두개의 intent 코드 블럭 (deep link와 universal link)을 넣어 줍니다.
iOS
AppDelegate.m
이 포스팅의 제일 위에 위치한 React Navigation 6 링크를 참조하여 해당 파일에 코드 삽입을 합니다.
(your app).entitlements
entitlements 파일에는 다음의 예제와 같이 도메인 이름을 넣어 줍니다. 주의점! 애플 개발자의 앱 계정에 Associated Domain 기능이 활성화가 되어 있어야 합니다 (위 도메인 환경 설정 섹션을 참고하세요)
React Native App 샘플 코드 블럭
App.js
import NavigationContainer
const App = () => { } 의 코드 블럭 내에 다음의 코드를 삽입
