딥링크는 웹사이트에서 사용자 기기에 설치된 앱을 URI로 실행시킬 수 있도록하는 기술이다.
딥링크의 세가지 유형
이러한 딥링크에는 세가지 유형이 있다.
- URI Scheme (초기 형태)
- 보완
- Universal Link (IOS)
- App Link (Android)
URI Scheme
앱 개발자가 앱 내 특정 페이지마다 고유한 주소를 설정하고, 그 주소를 웹에서 실행시키면 설정한 특정 페이지가 열리는 형태이다. 이때 주소는 다음과 같은 형태이다.
1
myapp://post?version=1
여기서 myapp:// 부분을 Scheme(프로토콜)이라고 하고, 앱 개발자가 자신만의 Scheme를 등록할 수 있다.
하지만 이 Scheme를 소유권을 증명하지 않고 개발자가 원하는 값으로 등록할 수 있다는 점에서 Scheme값이 중복되는 문제가 발생했다. path까지 모두 동일한 주소를 사용한다면 android는 딥링크로 오픈할 앱 선택창이 노출되고, IOS는 가장 마지막에 설치한 앱이 자동으로 열린다.
이 문제점을 보완하기 위해 나온 것이 Universal Link와 App Link이다.
Universal Link, App Link
URI Scheme의 문제점을 보완하여 OS에 앱에 대한 도메인 주소를 등록함으로써 소유권을 증명한다. 도메인은 도메인 소유자만이 관리할 수 있기에 소유권이 증명되기 떄문이다.
앱 빌드 시 앱을 열 도메인을 등록하고 보안을 위해 등록한 도메인의 특정 경로에 인증 텍스트를 심어 놓는다. 그러면 앱이 설치된 후 OS 레벨에서 해당 도메인 경로의 인증 텍스트와 앱 빌드시의 값이 동일한지 검증하여 소유권을 인지한다.
검증된 도메인으로 생성된 딥링크 클릭 시,
- 앱이 설치된 경우 앱이 바로 열리고
- 앱이 설치되지 않은 경우 해당 도메인의 웹 페이지로 이동한다. 이때 웹페이지에서 마켓으로 보낼 수도 있다.
이 Universal Link와 App Link는 도메인으로 접속하기에 다음과 같이 일반적인 http, https 도메인 형식을 따른다.
1
https://myapp.com/post?version=1
딥링크 사용 시 참고사항
1) 딥링크는 OS, 브라우저마다 다르게 동작한다. 내가 겪은 것은 다음과 같다. 좀 더 자세한 OS/브라우저별 동작 차이는 이 글에 표로 정리되어있다.
- IOS Safari에서 URI Scheme 사용시 경고창이 뜸
- 앱이 설치되어있을 경우)
"{앱이름}"에서 여시겠습니까?라는 경고창이 뜸 - 앱이 설치되어있지 않은 경우)
주소가 유효하지 않기 때문에 Safari가 해당 페이지를 열 수 없습니다.경고창이 뜸.
- 앱이 설치되어있을 경우)
- URI Scheme의 소유권을 증명할 수 없다는 문제 때문에 정해진 보안 정책
Universal LInk을 사용할 때 다음과 같은 상황이 있을 수 있다.
주소창에 링크를 직접 붙여넣기할 경우 동작하지 않음
JS로 트리거 된 경우 리다이렉트가 되지 않음
openUrl과 같이 앱 내에서 프로그래밍 방식으로 링크를 열 경우 작동하지 않음
Android 에서
intent://.- Android 에서 URI Scheme 대신 다음과 같은
intent://을 사용할 수 있다.1
intent://details?id={앱id}&url={마켓주소}#Intent;scheme=market;package=${앱패키지};end; - 장점은 앱이 없을 경우 자동으로 마켓으로 리다이렉트 시켜준다는 것이다.
- Android 에서 URI Scheme 대신 다음과 같은
딥링크로 앱 여는 코드
아래 코드는 프로젝트 수행 시 사용했던 코드이다.
1
2
3
4
5
6
7
8
9
// 안드로이드
const openOnAndroid = () => {
window.location.href = `${URIscheme}`
// 1초간 변화없으면 플레이스토어 열기
setTimeout(() => {
window.location.href = `market://details?id=${package}`
}, 1000)
return;
}
- URI scheme을 사용하여 앱 열기를 시도한다. 그 후
setTimeout을 등록하여 1초간 반응이 없을 시 마켓을 연다. intent://를 지원하지 않는 상황이라 앱 여는 동작과 앱 없을 시 마켓 여는 동작을 분리했다.- 마켓은
market://이라는 URI Scheme을 사용했다.- 처음에는 플레이스토어 앱 링크를 사용했는데 정상적으로 앱이 열린 상황에서 다시 웹페이지로 돌아왔을때 플레이스토어로 리다이렉트 된 경우들이 종종 있었다. 백그라운드에서 앱링크가 동작하지 않고 URL로 인식하여 리다이렉트된 것이다. (브라우저, 버전 차이)
- 하지만
market://으로 URI Scheme을 사용하면 URL이 아니기에 리다이렉트되지 않는다. 다만, 사용자 기기에 원스토어와 같은 다른 마켓이 설치되어있으면 어떤 앱으로 마켓을 열 것인지 선택하는 창이 뜬다.
1
2
3
4
5
6
7
8
9
const openOnIos = () => {
window.location.href = `${URIScheme}`''
setTimeout(() => {
// 크롬에서는 URI 스킴으로 열어야 앱 이동 후 웹 복귀 시 마켓이 안뜸.
// ios 사파리에서는 유니버셜 링크로 앱스토어를 열어야 '"AppStore"에서 여시겠습니까?' 라는 알럿창이 뜨지 않음.
window.location.href = isChrome ? `itms-apps://itunes.apple.com/app/${appId}` : `https://itunes.apple.com/app/${appId}`
}, 1000)
}
}
- IOS에서도 URI scheme을 사용하여 앱 열기를 시도한다. 그 후
setTimeout을 등록하여 1초간 반응이 없을 시 마켓을 연다. - 이때 크롬일경우랑 그 외 브라우저일경우랑 다른 주소로 마켓을 열도록 했다.
- 크롬에서 유니버셜 링크로 마켓을 열 경우, 정상적으로 앱이 열린 상황에서 다시 웹페이지로 돌아왔을 때 앱스토어가 띄워진 경우가 있었다. 백그라운드에서 유니버셜링크가 실행된 것으로 보인다. 따라서 크롬에서는 URI 스킴을 사용해 앱을 열도록 했다.
- 다른 브라우저에서는 유니버셜링크를 사용했다. 특히 사파리에서는 URI Scheme을 사용할 경우
"AppStore"에서 여시겠습니까?라는 알럿창이 뜨기에 유니버셜링크로 마켓을 여는 것이 사용자 경험에 좋다.
출처
https://www.airbridge.io/blog-ko/deeplink-101-for-marketers-and-developers
https://www.airbridge.io/blog-ko/deeplink-101-ios-safari-alert