[ JavaScript ] 브라우저에서 모바일 애플리케이션 열기 ( DeepLink / Applink / UniversalLink / Url Scheme )

김형겸·2023년 1월 12일
0
post-thumbnail

0. 들어가며


우리가 웹에서 특정 웹페이지로 이동하고자 한다면 보통은 http://” 혹은 https://” 로 시작하는 인터넷 주소를 이용합니다. 우리가 흔히 볼 수 있는 이런 문자열을 url scheme 이라고 부릅니다.

이번 아티클에서 다루는 모바일 앱에서도 이와 유사한 기능을 하는 것이 있습니다.
바로 딥링크(DeepLink) 입니다.

이번에 SOPT 31기 앱잼에서 웹개발자로 참여중인 서비스인 Pic.me(픽미) 의 플로우의 마지막인 인스타그램으로의 공유 를 위해서는 반드시 딥링크를 사용해야만 했습니다.
기능을 적용하기 위해 공부한 내용을 토대로 이 아티클을 작성합니다.

이번 아티클에서는 인스타그램을 예시로 자바스크립트에서 딥링크를 활용해 오바일 애플리케이션으로 이동하는 방법에 대해서만 설명하고자 하며, Android, Ios 에서의 딥링크 생성과 Url Scheme 에 관한 자세한 내용은 자료를 첨부하도록 하겠습니다.

1. URL Scheme?


가장 일반적으로 사용되는 딥링크 방식은 URL Scheme 방식입니다.

이 방법을 이용한 딥링크는 앱에 Scheme 값을 등록하는 형태로 앱을 구분합니다. 이 값은 앱마다 다르게 등록할 수 있으며, 특정 스킴 값을 호출하면 특정 앱이 오픈되는 기능을 수행합니다.
이번 프로젝트에서 사용된 인스타그램의 경우에는 ”instagram://”를, 인스타그램 스토리는 “instagram-stories://” 라는 스킴값을 이용하면 됩니다.
이 스킴값은 앱 개발시 효율적인 앱 오픈을 위해 자체적으로 개발사에서 자신들만의 값으로 등록을 하게 됩니다.

앱 내에서의 특정 페이지는 ‘path’ 값으로 구분합니다. 예를들어 인스타그램의 게시물 공유 창을 바로 띄우고 싶다 하면 ’intagram://share’ 이라는 값을 사용합니다.

이를 간단히 정리하면 URL Scheme 방식은 Scheme://Path 형태로 구성됩니다.

  • Scheme://Path
  • Scheme : 앱을 특정함(인스타그램, 트위터, 네이버 등)
  • Path : 앱 내 페이지를 특정함(인스타그램 내 회원가입 페이지, 네이버지도 특정 지도 길찾기 등)
const handleDeepLink = () => {
	window.location.replace('instagram://share'); // 인스타그램의 게시글 작성 창으로 넘어감
}

URL Scheme 방식의 한계

위의 인스타그램과 같이 URL 스킴의 네이밍이 거의 고유하거나 앱의 수가 상대적으로 적었던 시기에는 광고를 통해 엡을 바로 실행시키는 마케팅 수단으로써 좋은 역할을 해 왔습니다 하지만!

스킴 값은 고유한 값이 아니다 라는 문제로 인해 앱 수가 많아지자 중복이 발생합니다.

대표적인 예로 market:// 스킴 값을 사용하는 구글 플레이스토어가 있습니다. 플레이스토어만 해당 스킴 값을 사용할때는 문제가 없었지만, 원스토어, 갤럭시스토어 등등의 다른 마켓 서비스도 market 스킴값을 사용하게 되면서 서로 중복이 되는 겁니다.

  • market:// 스킴값을 불러왔을때 나타나는 세 녀석…

위의 사진같이 스킴값이 중복되는 경우 이용자들은 어떤 앱을 실행시켜야 하는지 선택해야 하는 화면을 보게 됩니다.

위와 같은 문제를 해결하기 위해 안드로이드, IOS 의 개발자들은 새로운 방법을 고민하기 시작합니다.

그 결과 안드로이드에서 제공하는 AppLink 와 IOS 에서 제공하는 UniversalLink 가 탄생합니다!

2. 앱링크와 유니버셜링크


앱링크와 유니버셜링크는 도메인 주소를 딥링크 실행 값으로 사용하는 기능을 말합니다

인스타그램의 경우에는 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 에서 모두 원환히 인스타그램 실행이 가능하려면 조치가 필요함을 깨닫게 됩니다.

3. react-device-detect 를 이용한 플랫폼 감지


react-device-detect

모바일 웹 기반의 서비스이니 만큼 플랫폼을 감지할 수 있는 라이브러리인 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/');
    }
  };

위 코드와 같이 각 플랫폼에 대응할 수 있도록 설정해주어 원활하게 인스타그램에 들어갈 수 있도록 설정하였습니다.

4. 참고자료


브라우저에서 모바일 애플리케이션 열기. Open Mobile Application From The Browser( web) , intent, deeplink, url scheme

Sharing to Feed - Instagram Platform - Documentation - Meta for Developers

DFINERY help center

네이버 앱 URL Scheme 연동 가이드

딥링크(Deeplink) : URI스킴, 유니버셜 링크, 앱링크 구분과 이해

About Document Interaction

profile
클린코드를 향해

0개의 댓글