[webview-iloveu] 안드로이드 딥링크 구현해보기 - 3 (다시 url 스킴에서 앱 링크 방식으로)

이전 두 글에서 안드로이드 딥링크 구현 관련 내용을 다뤘었다.

 

당시 풀리지 않은 문제가 하나 있었다.

웹 기록 챌린지 페이지(https://ohouse-web.vercel.app/record-challenge)에서 웹뷰 앱 기록 챌린지 탭(https://ohouse-web.vercel.app/record-challenge)으로 앱 링크 방식으로 딥링크를 구현하였지만, 두 url이 동일해서 그런지 앱 링크 설정이 잘 되었음에도 불구하고 웹에서 앱으로 넘어가지 못했다.

 

그래서 그때 내가 제시한 예상 해결 방안은 두 가지였는데,

1. url 스킴 방식으로 해결 
2. App Link 방식으로 하되 url에 웹과 앱 링크를 구분하기 위한 특정 매개변수 추가

 

1번 방식으로 일단 안드로이드 딥링크는 잘 동작하도록 구현은 해놨었다.

하지만, 이전에도 내가 언급했다시피 중복 스킴 문제가 발생했었다.

비록 우리는 오늘의 집 클론 앱이라고 해도... 스킴을 ohouseapp으로 등록해 놨었다.

그런데, iOS에서 접속하니 찐 오늘의 집 앱이 연결 돼버렸다.

 

Android에서는 중복 스킴 문제가 발생하면 여러 앱 중 사용자가 접속할 앱을 선택할 기회를 주지만, iOS에서는 이런 부분을 핸들링할 수가 없다.

그래서 잘 구현한 게 아닌 게 된...

 

이번에는 찐 해결책인 2번 방식으로 해결해 보기로 했다.

어려워 보이기는 하나 상당히 간단한 해결책이다.

 

지금 웹에서 앱으로 넘어갈 때 url이 동일하기 때문에 인식을 못하는 문제가 있었기 때문에 단순하게 쿼리 파라미터를 추가해서 url을 다르게 인식할 수 있도록 해줄 수 있을 거라 생각했다.

그래서 웹 기록 챌린지 페이지는 https://ohouse-web.vercel.app/record-challenge로 url을 설정하고, 앱 기록 챌린지 탭에 접속할 때는 https://ohouse-web.vercel.app/record-challenge?app_link=true로 url을 지정해 주도록 했다.

 

코드로 보면 다음과 같다.

이 경우에는 path로는 record-challenge가 넘어가게 된다.

const handleClick = () => {
  const url = `https://ohouse-web.vercel.app/${path}?app_link=true`;

  window.location.replace(url);
};

 

이렇게 설정하고 다시 실행시켜 보니 진짜 잘 되더라.

 

너무 간단한 해결책이라 살짝 당황하기는 했지만 기분이 좋아졌다.

어쨌든, 중복 스킴 문제도 해결되었기 때문에 안드로이드에서는 딥링크가 어느 정도 문제없이 해결되었다고 볼 수... 있다.

 

이제 자잘한 예외 처리 부분을 다뤄서 완성도 있는 딥링크 구현을 마무리해보고 싶다...