앱에서의 딥링크 (DeepLink) 란?

eeensu·2026년 3월 25일

React Native

목록 보기
27/38

딥링크(Deep Link)모바일 애플리케이션 내의 특정 화면이나 콘텐츠로 직접 이동하게 해주는 URI(Uniform Resource Identifier)이다.

앱을 단순히 실행(Launch)하는 것을 넘어, 앱 내부의 구체적인 경로(Path)와 데이터(Parameter)를 포함하여 호출하는 기술이다.

1. 기술적 정의

웹 브라우저에서 https://www.naver.com/news/123을 입력하면 메인 페이지가 아니라 특정 뉴스 기사가 열리는 것과 동일한 개념을 모바일 앱에 적용한 것이다.

  • 일반 실행 : 앱 아이콘을 터치 -> MainActivity (홈 화면) 실행.
  • 딥링크 실행 : 링크 클릭 -> 앱 실행 -> 특정 컴포넌트(Screen)로 라우팅 및 데이터 전달.

2. 작동 방식 (URL → 네비게이션 상태 변환)

"URL을 네비게이션 상태 객체로 변환한다" 라는 과정은 다음과 같은 기술적 흐름을 의미한다.

1단계 - OS 레벨의 인터셉트 (Intercept)

사용자가 myapp://product/42 라는 링크를 클릭하면, 모바일 OS(iOS/Android)는 이 링크(myapp://)를 등록한 앱을 찾아 실행한다.

2단계 - URL 문자열 전달

OS는 앱을 실행시키면서 myapp://product/42라는 문자열(String)을 앱의 진입점(Entry Point)에 전달한다.

3단계: 파싱 및 상태 객체 변환 (React Navigation의 역할)

React Navigation은 이 문자열을 받아서 자신이 이해할 수 있는 내부 상태 객체(State Object)로 변환한다.

  • 입력 (External URL):
    myapp://product/42
  • 설정 (Linking Configuration):
    개발자가 미리 정의한 매핑 규칙이다.
const config = {
  screens: {
    ProductDetail: 'product/:id', // URL 경로와 화면 매핑
  },
};
  • 변환 결과 (Navigation State Object):
{
  routes: [
    {
      name: 'ProductDetail', // 화면 이름
      params: { id: '42' }   // 파라미터 추출
    }
  ]
}

4단계: 렌더링

네비게이터는 위 상태 객체를 보고, 초기 화면을 건너뛰고 즉시 ProductDetail 컴포넌트를 렌더링하며 route.params.id42를 전달한다.


3. 딥링크의 두 가지 기술 표준

1) URI Scheme (Custom URL Scheme)

  • 형식 : scheme://host/path (예: kakaotalk://settings, twitter://user?id=123)
  • 앱 개발자가 임의로 지정한 고유 스키마를 사용한다.
  • 다른 앱이 같은 스키마를 사용하면 충돌이 발생할 수 있다. 앱이 설치되어 있지 않으면 오류 페이지가 뜨거나 반응이 없을 수 있다.
  • 형식 : https://www.mydomain.com/path (표준 HTTP URL)
  • 웹 사이트 주소와 앱 링크를 하나로 통일한 방식이다.
  • 앱이 설치되어 있으면 앱을 열고, 설치되어 있지 않으면 웹 브라우저로 해당 페이지를 보여준다.
  • 보안을 위해 도메인 소유자임을 인증하는 파일(apple-app-site-association, assetlinks.json)이 서버에 있어야 한다.

요약

  1. 딥링크 : 앱 내 특정 화면을 여는 URI다.
  2. 핵심 기능 : 외부의 문자열 URL(myapp://A/B)을 앱 내부의 라우팅 정보(Screen A, Params B)로 매핑하여 이동시킨다.
  3. 변환 과정 : React Navigation이 URL 문자열을 파싱 하여 네비게이션 상태 객체(JSON)로 바꾸고, 이를 바탕으로 화면을 그린다.
profile
안녕하세요! 프론트엔드 개발자입니다! (2024/03 ~)

0개의 댓글