우리가 웹에서 특정 웹페이지로 이동하고자 한다면 보통은 ”http://” 혹은 “https://” 로 시작하는 인터넷 주소를 이용합니다. 우리가 흔히 볼 수 있는 이런 문자열을 url scheme 이라고 부릅니다.
이번 아티클에서 다루는 모바일 앱에서도 이와 유사한 기능을 하는 것이 있습니다.
바로 딥링크(DeepLink) 입니다.
이번에 SOPT 31기 앱잼에서 웹개발자로 참여중인 서비스인 Pic.me(픽미) 의 플로우의 마지막인 인스타그램으로의 공유 를 위해서는 반드시 딥링크를 사용해야만 했습니다.
기능을 적용하기 위해 공부한 내용을 토대로 이 아티클을 작성합니다.
이번 아티클에서는 인스타그램을 예시로 자바스크립트에서 딥링크를 활용해 오바일 애플리케이션으로 이동하는 방법에 대해서만 설명하고자 하며, Android, Ios 에서의 딥링크 생성과 Url Scheme 에 관한 자세한 내용은 자료를 첨부하도록 하겠습니다.
가장 일반적으로 사용되는 딥링크 방식은 URL Scheme 방식입니다.
이 방법을 이용한 딥링크는 앱에 Scheme 값을 등록하는 형태로 앱을 구분합니다. 이 값은 앱마다 다르게 등록할 수 있으며, 특정 스킴 값을 호출하면 특정 앱이 오픈되는 기능을 수행합니다.
이번 프로젝트에서 사용된 인스타그램의 경우에는 ”instagram://”를, 인스타그램 스토리는 “instagram-stories://” 라는 스킴값을 이용하면 됩니다.
이 스킴값은 앱 개발시 효율적인 앱 오픈을 위해 자체적으로 개발사에서 자신들만의 값으로 등록을 하게 됩니다.
앱 내에서의 특정 페이지는 ‘path’ 값으로 구분합니다. 예를들어 인스타그램의 게시물 공유 창을 바로 띄우고 싶다 하면 ’intagram://share’ 이라는 값을 사용합니다.
이를 간단히 정리하면 URL Scheme 방식은 Scheme://Path 형태로 구성됩니다.
const handleDeepLink = () => {
window.location.replace('instagram://share'); // 인스타그램의 게시글 작성 창으로 넘어감
}
위의 인스타그램과 같이 URL 스킴의 네이밍이 거의 고유하거나 앱의 수가 상대적으로 적었던 시기에는 광고를 통해 엡을 바로 실행시키는 마케팅 수단으로써 좋은 역할을 해 왔습니다 하지만!
스킴 값은 고유한 값이 아니다 라는 문제로 인해 앱 수가 많아지자 중복이 발생합니다.
대표적인 예로 market:// 스킴 값을 사용하는 구글 플레이스토어가 있습니다. 플레이스토어만 해당 스킴 값을 사용할때는 문제가 없었지만, 원스토어, 갤럭시스토어 등등의 다른 마켓 서비스도 market 스킴값을 사용하게 되면서 서로 중복이 되는 겁니다.
위의 사진같이 스킴값이 중복되는 경우 이용자들은 어떤 앱을 실행시켜야 하는지 선택해야 하는 화면을 보게 됩니다.
위와 같은 문제를 해결하기 위해 안드로이드, IOS 의 개발자들은 새로운 방법을 고민하기 시작합니다.
그 결과 안드로이드에서 제공하는 AppLink 와 IOS 에서 제공하는 UniversalLink 가 탄생합니다!
앱링크와 유니버셜링크는 도메인 주소를 딥링크 실행 값으로 사용하는 기능을 말합니다
인스타그램의 경우에는 https://www.instagram.com/ 을 도메인으로 가지고 있는데, 이를 딥링크 실행값으로 사용하여 바로 인스타그램 앱이 열리며 사용될 수 있도록 하였습니다.
const handleDeepLink = () => {
window.location.replace('https://www.instagram.com/');
// 함수가 실행되면 모바일 환경에서 인스타그램 앱으로 넘어감
}
Pic.me 에서는 인스타그램 실행 후 바로 스토리를 공유할 수 있도록 URL Scheme 에서의 Path 와 같이 뒤에 인스타그램 스토리 카메라가 실행이 되게끔 설정 해 주었습니다.
const handleDeepLink = () => {
window.location.replace('https://www.instagram.com/create/story');
// 함수가 실행되면 모바일 환경에서 인스타그램 카메라가 실행되며 스토리 공유창으로 넘어감
}
이 두 방식도 물론 한계는 존재합니다. 모든 앱에서 앱링크와 유니버셜 링크 오픈을 지원하는 것이 아니기 때문인데요.
앱링크는 구글에서 만든 앱에서만, 유니버셜링크는 애플에서 만든 앱 이외에는 정상적으로 동작하지 않습니다.
따라서 하나의 방식이 모든 환경에 완벽하게 대응하지는 못하므로 ios, android 에서 모두 원환히 인스타그램 실행이 가능하려면 조치가 필요함을 깨닫게 됩니다.
모바일 웹 기반의 서비스이니 만큼 플랫폼을 감지할 수 있는 라이브러리인 react-device-detect 를 사용하였습니다.
const handleDeepLink = () => {
if (isIOS) { // 기기가 ios 인 경우
window.location.replace('https://www.instagram.com/create/story');
} else if (isAndroid) { // 기기가 android 인 경우
window.location.replace('intent://instagram.com/#Intent;scheme=https;package=com.instagram.android;end');
} else { // 그 외(윈도우 데스크탑 등)
window.location.replace('https://www.instagram.com/');
}
};
위 코드와 같이 각 플랫폼에 대응할 수 있도록 설정해주어 원활하게 인스타그램에 들어갈 수 있도록 설정하였습니다.
브라우저에서 모바일 애플리케이션 열기. Open Mobile Application From The Browser( web) , intent, deeplink, url scheme
Sharing to Feed - Instagram Platform - Documentation - Meta for Developers