들어가며

최근 모바일 애플리케이션과 연계되는 웹사이트를 오픈하면서 딥링크(Deeplink)를 사용하게 되었어요. 자주 사용되지는 않지만 알아두어야 하는 것이어서 짧게 포스트로 남겨놓아요.

딥링크(Deeplink)란?

딥링크는 특정 주소 혹은 값을 입력하면 앱이 실행되거나 앱 내 특정 화면으로 이동시키는 기능을 수행해요.

딥링크는 3가지 방식으로 구분돼요.

• URI 스킴 방식 : 앱에 URI 스킴(scheme) 값을 등록하여 딥링크 사용
• 앱링크(App Link) : Android 제공 - 도메인 주소를 이용한 딥링크 사용
• 유니버설 링크 (Universal Link) : iOS 제공  - 도메인 주소를 이용한 딥링크 사용

그중에서도 URI Scheme 방식을 사용했어요.

URI Scheme 방식의 딥링크

URI 스킴을 이용한 딥링크는 가장 일반적으로 사용되는 딥링크 방식으로 ‘특정 스킴값을 호출하면 특정 앱을 실행한다.‘라는 약속을 하고, 앱에 Scheme 값을 등록하는 형태로 앱을 구분해요.
우리가 앱을 실행하고자 한다면 트위터(twitter://), 카카오톡(kakaotalk://), 토스(supertoss://), 네이버(naversearchapp://) 등의 앱을 스킴값을 이용하면 되고, 앱 내에서의 특정 페이지로 이동시키고자 한다면 ‘path’ 값으로 구분할 수 있어요.
트위터 앱의 회원가입 화면으로 실행하고자 한다면 twitter://signup 이라고 할 수 있어요.

그래서 어떻게 하면 될까?

간단하게 샘플 코드를 만들어볼게요.

const MyApp = () => {
  const gotoApp = () => {
    // Scheme을 통해 앱을 실행하며 세팅 화면으로 이동할거에요.
    // 앱이 설치되어있지 않은 경우 아무 것도 실행되지 않아요.
    const url = 'myapp://settings';
    location.href = url;

    // 앱이 실행되면 아래 부분은 실행하지 않게 해야 하는 부분은 생략...

    // 앱이 설치되어있지 않은 경우 앱을 다운로드 받을 것인지 사용자에게 물어보아요.
    const ua = navigator.userAgent.toLowerCase();

    if (window.confirm('스토어로 이동할까요?')) {
      // Confirm 확인
      location.href = ua.indexOf('android') > -1 ? 'paly store url' : 'app store url';
    } else {
      // Confirm 취소시 무언가를 할거라면.
    }
  };

  return <button onClick={gotoApp}>앱 실행</button>;
};

export default MyApp;

웹에서 앱을 실행해 주려면 앱이 설치가 되어있어야 하죠.
딥링크를 사용하면 앱의 사용자 수를 늘리는 데 도움이 될 수 있어요.
사용자가 앱을 다운로드하지 않았지만 웹에서 링크를 누르면 앱 다운로드 페이지로 연결하거나 모바일 OS에 맞는 스토어로 바로 연결되어 앱 다운로드 및 설치를 유도할 수 있어요.
이렇게 우리의 서비스를 이용할 수 있도록 앱을 다운로드하고 설치할 수 있게 유도해 주면 사용자에게 더 좋은 경험을 줄 수 있다고 생각해요.

마치며

URI Scheme 방식을 이용할 때에 유의해야 할 점이 있어요.
앱을 개발하는 개발자가 자신이 적용한 스킴 값이 다른 앱은 사용하지 않는 고유값인지 확인할 수 있는 방법이 없고 방지할 방법이 없다는 단점이 있어요.
여러 개의 앱이 동일한 Scheme을 설정해놓았을 경우 어떤 앱을 실행시켜야 하는지에 대한 선택 화면을 보게 되어 사용자에게 불편함을 줄 수 있어요.

이 문제를 해결하기 위해 나온 방식이 앱 링크(App Link)와 유니버설 링크(Universal Link) 방식이에요. 다음에 기회가 되면 글을 정리해 볼께요. :)