모바일기기에서 웹서핑을 하다가 누구나 한번쯤은 '앱으로 여시겠습니까?' 라는 문구를 본적이 있을 것이다.
이처럼 모바일 웹에서 앱을 여는 기능을 딥링크라고 한다. 모바일에서 특정 앱 접근 시 흔하게 볼 수 있는 기능이다.
앱으로 보기 클릭 시
1. 앱이 기기에 다운로드 되어있는 경우 앱을 열어 해당 페이지로 이동
2. 앱이 기기에 다운로드 되어있지 않은 경우 스토어 페이지로 이동
(안드로이드 -> 구글플레이스토어 / 아이폰 -> 앱스토어 등)
1. 딥링크(deepLink)
특정 주소 혹은 값을 입력하면 앱이 실행되거나 앱 특정 화면으로 이동시키는 기술을 딥링크라고 한다.
- URI 스킴 방식 : 앱에 uri 스킴(scheme) 값을 등록하여 딥링크 사용
- 앱링크(appLink) : Android 제공 - 도메인 주소를 이용한 딥링크 사용
- 유니버셜 링크(universalLink) : Ios 제공 - 도메인 주소를 이용한 딥링크 사용
2. URI 스킴 방식
스킴(scheme)은 앱마다 등록할 수 있는 값으로 이 값으로 앱을 구분할 수 있다. 특정 스킴값을 호출하여 특정 앱을 열 수 있다.
- Scheme://Path 요소로 구성
- 예시) naver://main
- Schemd : 앱을 특정
- Path : 앱 내 페이지를 특정
사용방법
- 안드로이드 / ios에 스킴 값을 설정한다.
- JavaScript에서 window.location.href = (URI 스킴) 구문을 통해 이동할 수 있다.
한계(?)
- 스킴이 중복될 수 있다. 특정앱으로 바로 이동하지 못하고 사용자가 선택을 해야 한다.
- market:// 은 구글플레이스토어, oneStore, 삼성앱스토어 등 여러 스토어에서 함께 사용한다.
3. Android 에서 구현
iFrame 사용
A common and old technique to solve this problem is using iframe to load the deep link URL and having a delayed JavaScript to redirect to store
URI 스킴 이동과 앱스토어 이동이 모두 일어나지만 시간차를 이용해 한가지만 일어나는것처럼 보이게 하는 일종의 트릭.
- 예시 : naver://main 으로 이동한다고 가정했을 때
- 앱이 설치되어있는 경우 앱이 실행되어 이동하고 이후 자바스크립트는 실행되지않음
- 앱이 설치되어있지 않은 경우 스킴을 호출하여도 아무 작업이 수행되지 않음. setTimeOut() 으로 인해 일정시간 뒤 마켓 주소로 이동하는 자바스크립트가 실행되어 앱을 설치할 수 있다.
- 구현방법
- 보이지 않는 iframe으로 커스텀 스킴 주소를 호출
- 응답이 없으면 0.5초 뒤 마켓으로 이동
setTimeOut(
var visitedAt = (new Date()).getTime(); // 방문시간
function(){
if((new Date()).getTime() - visitedAt < 2000) {
location.href = "{마켓 주소}"
}
}, 500);
var iframe = document.createElement('iframe');
iframe.style.visibility = 'hidden'; // 보이지 않는 iframe으로 스킴을 호출
iframe.src = '{커스텀 스킴 주소}';
document.body.appendChild(iframe);
document.body.removeChild(iframe);
Chrome Intent
Since Chrome for Android version 25 and later, the above code stopped working according to Chrome documentation Fortunately, Google provides the Intent URL for a better solution
Chrome의 경우 intent URL 방식을 도입하면서부터 iframe방식을 사용할 수 없게되었다. intent URL은 앱의 설치 여부에 따른 처리를 자동으로 해주기 때문에 유용하다.
- intent URL 동작방식
- 앱이 설치된 경우 앱 실행
- 앱이 설치되지 않은 경우 앱스토어 이동
- 형식
- intent://path/#Intent;scheme=yourapp;package=com.yourapp.example;
- 구현방법
setTimeout(function() { location.href = "intent://커스텀스킴주소#Intent; scheme=스킴; action=..;category=..; package=com.android.xxx; end;"; }, 1000);
4. Ios 에서 구현
Ios에서는 안드로이드에서 iframe 방식과 동일한 트릭을 사용하여 구현 가능
- 구현방법
setTimeout(function() { location.href = "intent://커스텀스킴주소#Intent; scheme=스킴; action=..;category=..; package=com.android.xxx; end;"; }, 1000);