[WEBAPP] Deep Link 연동

개요

회사 프로젝트에서 Deep Link 와 관련된 구현에 대한 과제를 맡게 되었다.

이에 진행하는 과정과 전체적인 기술 내용을 세부적으로 알아본다.

Deep Link 란 무엇일까?

URL 링크 의 일종인 딥링크는 우리가 일상생활에서 흔하게 볼 수 있다.

예를들어, 사이트에서 커머스 사이트에서 특정 상품에 대해서 공유를 했을때 받는 사람이 실제 앱 안에서 동일한 정보를 확인하기 위해서는 딥링크가 필요하다.

이는 사용자가 원하는 페이지로의 이동에 대한 사용자 경험을 크게 증가시켜준다.

현재 프로젝트 기준으로 먼저 Web View 구조의 동작 프로세스에 대해서 확인해보자.

Web App Application 구조

현재 자사의 App 은 Web App 으로 설계되었고, 모든 기능을 Web 쪽으로 몰고 있는 상황이다.

이는 Native App 내부에서 여러 Layer 를 띄우는 것이 아닌 one Layer 안에 Web 이 올라가서 뒤로가기, 팝업 등 모든 UI 가 Web 에서 이루어지게 하는 방식으로 가고있다.

기존에는 App 과 Web 의 비율이 비슷하였으나, 차세대로 옮기면서 여러가지 내부 사정으로 App 에 의존하지 않는 방법으로 가고 있다.

여러가지 이유가 있겠지만 대표적인 장점은 간단한 수정 개발이 필요할때 App 심사 및 배포하는 과정이 불필요하다는 것이다.

이에 반해 단점으로는 Web 의 로직이 복잡해지고 유지보수가 까다로워 진다는 점이 있을 것 같다.

Web App 내 Deep Link 프로세스

대략적으로 현재 프로세스는 아래와 같다.

보통 Deep Link 는 마켓팅에서 많이 쓰고 있으며 제휴 몰 혹은 제휴 사이트에서 자사의 앱으로 넘어올때 활용한다. 또한, 앱 내부에서 페이지를 다른 사람에게 공유할때 또한 많이 사용한다.

프로세스 전개 과정

프로세스의 시작 전에 자사는 특정 Solution 을 사용하고 있으며, 이는 현업이 원하는 상품 혹은 링크를 솔루션을 통해 짧은 URL 로 변경하고 사용자가 이 URL 로 접속 시 내부에 Solution 이 먼저 캐치하여 매핑된 상품 URL 을 확인해준다.

예를 들면, http://go.ShortURL.XXX 라는 짧은 URL 로 접속하게 되면 내부에서 매핑되어 있는 XXX://intent? URL 을 Native 로 전달하게 되는 것이다.

여기서 보통 딥링크는 커스텀 URL 스킴(IOS) 나 intent URL(Android) 를 활용해서 앱을 시작할 수 있기 떄문에 이러한 URL 을 맞춰서 전달해야 한다.

만약 앱 설치하지 않고 앱 내 브라우저로 보기를 사용자가 원할경우 실제 브라우저에서 매핑된 링크로 이동하면 된다.

Native -> Web 동작 과정

이제 사용자가 앱을 설치 혹은 실제 설치되어 있는 앱을 사용하는 시나리오이다.

이때는, Native App 이 Solution 으로 부터 실제 가고자하는 URL 을 스킴과 함께 받을 것이다.

이 과정에서 App 개발자와 Web 개발자의 논의가필요한데 보통 URL 에 Query 로 필요한 co_cd(인입 코드) 나, URL 등 필요한 정보들이 함께 들어있기 때문에 이러한 URL 의 파싱을 어떻게 할 지에 대해서 협의가 필요하다.

현 프로젝트 기준으로는 Web 에서 진행을 할 예정이기 때문에 Native App 에 전달된 URL 만 파싱하여 Web View Layer 를 띄어주는 것 까지만 한다.

이때 Web 에서는 딥링크로 진입 시 반드시 진입하는 gate 페이지를 만들어 두었다.

즉, 매핑된 URL 은 gate 가 포함되어 있기 떄문에 최초에 반드시 gate 페이지로 진입하고 그 뒤에 Query 로 요청된 URL 과 그외 필요 정보들을 전달하고 있는 상황이다.

따라서, gate 페이지에서는 Native App에서 gate 페이지가 호출되면 함께 전달된 Query 정보들을 파싱하고 이를 마케팅 스크립트에 넣고 최종적으로 실제 요청된 페이지로 라우팅해주는 로직까지 개발하였다.

Deferred Deep Linking

디퍼드 딥링크(Deferred Deep Linking) 는 앱이 설치되어 있지 않을때 유용하다. 앱이 설치되어 있지 않은경우 앱스토어로 들어갔다가 설치 후 다시 앱으로 들어가서 웹뷰를 띄우고 라우팅을 진행해야 하기 때문이다. 이때 디퍼드 딥링크는 기존에 안내하려던 URL 로 사용자를 이동시킬 수 있다는 장점이 있다.

Bridge Interface 개발

이렇게 되면 앱과 Web 은 어떻게 소통을 할까?

방법은 Bridge Interface 를 개발해서 서로 함수 호출을 통해 소통하는 것이다.

예를들면, 뒤로가기 물리버튼, 스크롤 새로고침 등 Native App 에서 발생할 수 있는 물리버튼 혹은 이벤트에 대해서 Web 에서 만든 Interface 를 통해서 필요한 정보를 전달한다.

반대로, App 에서는 Web 이 필요한 정보들을 Interface 로 만들어서 전달할 수 있다.

정리

사실 조금 더 디테일한 내용은 넣지 않았고, 자사 특성상 솔루션을 활용해서 생략된 부분이 많기는 하겠지만 대략적인 프로세스를 정리해 보았다.

최종적으로 완료되면 한번 더 정리가 필요할 것 같다.