HTTP : URI Sheme and Deep Link

정윤호·2024년 5월 21일

코드잇잇잇!

목록 보기

21/30

개요

웹 및 모바일 개발 분야에서 URI 스킴과 딥링크는 사용자 탐색 및 상호 작용을 향상시키는 데 중요한 역할을 한다. 개발자는 이러한 개념을 이해하면 앱이나 웹사이트 내의 특정 콘텐츠로 사용자를 안내하여 원활한 사용자 경험을 만들 수 있다. 이 글에서는 URI 스킴의 정의, 작동 방식, 딥링크와의 관계에 대해 살펴본다.

URI Scheme 이 뭐야?:

URI(Uniform Resource Identifier) 스킴은 특정 구문을 사용하여 인터넷에서 리소스를 식별하는 방법이다.
|500
URI syntax : URI = scheme ":" ["//" authority] path ["?" query] ["#" fragment]

스킴은 리소스에 액세스하는 데 사용되는 프로토콜 또는 방법을 나타내는 URI의 초기 부분으로, 일반적인 URI 스킴에는 http, https, ftp, mailto 및 file이 포함된다.
각 스킴은 리소스를 지정하고 액세스하는 방식이 다르다.

URI Schemes 예시

<!-- http와 https: 해당 주소와 HTTP 통신을 한다 -->
<a href="http://example.com">Visit Example</a>
<a href="https://example.com">Secure Visit Example</a>

<!-- mailto: 해당 주소로 이메일을 보낸다 -->
<a href="mailto:someone@example.com">Email Us</a>

mailto 는 바로 메일 어플리케이션으로 연결되고

<!-- tel: 해당 주소로 전화를 건다 -->
<a href="tel:+1234567890">Call Us</a>

tel 은 바로 전화 어플리케이션으로 접근하며

<!-- file: -->
<a href="file:///C:/Users/Username/Documents/file.txt">Open File</a>

file은 사용자 디렉토리에 접근한다.

위 예시처럼 URI 스킴을 적극적으로 활용하면, 단순한 페이지 로드 뿐 아닌 사용자와의 다양한 동적인 상호작용을 꾀할 수 있을 것이다.
위에는 대표적인 URI 스킴 4가지에 대해 소개했는데, 이 외에도 공식적으로 사용되는 URI 스킴의 종류는 매우 매우 많다.

IANA/uri-schemes 해당 페이지에 수많은 URI 스킴에 대해 소개하고 있다.

IANA: 글로벌 IP 주소 할당, 자율 시스템 번호 할당, 도메인 이름 시스템(DNS)의 루트 영역 관리, 미디어 유형, 기타 인터넷 프로토콜 관련 기호 및 인터넷 번호를 감독하는 표준 기관

위키피디아/URI 스킴/비공식 스킴 해당 페이지에는 공식적이지는 않지만, 흔히 사용되는 스킴들에 대해서 다루고 있다.
이미지에서 볼 수 있듯이, Slack, Zoom 등 특정한 어플리케이션과도 상호작용이 가능하다.

Deep Link 는 뭔가요?

딥링크는 홈페이지가 아닌 웹사이트나 애플리케이션 내의 특정 위치로 사용자를 안내하는 하이퍼링크를 말한다. 딥링크는 사용자를 관심 있는 콘텐츠로 바로 연결하여 사용자 경험을 향상시킨다.

URI Scheme와 Deep Links 사이의 관계

URI 스킴은 딥링크의 기초를 형성한다. 사용자 지정 URI 스킴을 정의함으로써 앱은 특정 딥링크를 처리하여 앱 내에서 정확한 탐색과 상호 작용을 할 수 있다. 이를 통해 개발자는 사용자에게 필요한 정확한 콘텐츠로 안내하여 원활한 사용자 환경을 만들 수 있다.

Deep Link 유형

기존 방식의 딥링크: 사용자 지정 URI 체계를 사용하여 사용자를 앱 내의 특정 콘텐츠로 안내한다.

앱 개발자가 쉽게 등록하고 설정할 수 있기 때문에 널리 사용되었으나, 점차 앱의 수가 증가하면서 소유권을 증명할 수 없다는 문제로 인해, 스킴 값이 중복되는 경우가 발생
2개의 앱이 중복된 스킴을 가질 경우, 둘 중 하나의 딥링크는 하이재킹되어 유실될 수 있음

<a href="myapp://product/12345">Open Product in App</a>

유니버설 링크(iOS)/앱 링크(Android): 표준 웹 URL을 사용하여 사용자를 안내한다. 앱이 설치되어 있으면 링크를 통해 앱이 열리고, 설치되어 있지 않으면 해당 웹 페이지가 열린다.

<a href="https://www.example.com/product/12345">View Product</a>

지연 딥링크(deferred deep link): 앱이 설치되지 않은 경우를 처리하여 사용자에게 앱 설치 프로세스를 안내한 다음 원하는 콘텐츠로 이동한다.

<a href="https://www.example.com/install-and-open?target=product/12345">Get the App and View Product</a>

|500

URI Scheme 으로 Deep Links 구현하기

사용자 정의 URI 스킴 정의하기

사용자 지정 URI 스킴을 정의하려면 특정 URI 스킴을 처리하도록 앱을 등록해야 한다.

안드로이드의 경우

<activity android:name=".MainActivity">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="myapp" android:host="product" android:path="/12345" />
    </intent-filter>
</activity>

IOS의 경우

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>myapp</string>
        </array>
    </dict>
</array>

앱에서 Deep Links 처리하기

URI 스킴이 정의되면 들어오는 URI를 처리하고 해당 콘텐츠로 이동해야 한다.

리액트 네이티브에서의 예시 코드

import { Linking } from 'react-native';
import { useEffect } from 'react';

const App = () => {
  useEffect(() => {
    const handleDeepLink = (event) => {
      const route = event.url.replace(/.*?:\/\//g, '');
      // Navigate to the route in your app
      console.log('Deep link route:', route);
    };

    Linking.addEventListener('url', handleDeepLink);

    return () => {
      Linking.removeEventListener('url', handleDeepLink);
    };
  }, []);

  return (
    <View>
      <Text>Welcome to the app!</Text>
    </View>
  );
};

export default App;

결론:

URI 스킴과 딥링크는 웹 및 모바일 애플리케이션 내에서 직관적이고 효율적인 탐색을 만드는 데 필수적인 도구다. 이러한 개념을 이해하고 구현하면 사용자 참여도와 유지력을 크게 향상시켜 사용자가 필요한 콘텐츠에 더 쉽게 액세스할 수 있다. 웹사이트의 특정 페이지로 연결하든 앱의 특정 화면으로 사용자를 안내하든 URI 스킴과 딥링크를 활용하면 전반적인 사용자 경험을 향상시킬 수 있다.