이번에 모바일 웹에서 앱을 여는 기능을 개발하게 되었다. 아래 이미지에서 볼 수 있듯이, 이미 우리는 흔하게 사용하고 있는 기능이다. Show 하지만 처음 개발해 보는 내용이라 고생도 많이 했고, 새롭게 안 용어들도 많아서 이번 기회에 정리해 보려고 한다. ➕ Issue개발 요구사항은 다음과 같다.
참 심플한 기능이다. 심지어 이미 사용하고 있는 공통 모듈도 있었기 때문에, 구현하는 데 어려움이 없어 보였다. 처음에 구현한 방식은 다음과 같았다.
하지만 안드로이드에서 원하는 페이지가 나오지 않는 문제가 생겼다!
➕ Progress공통 모듈을 사용하여 쉽게 구현하려 했으나 실패하였으므로, 모듈을 이해하여 코드를 수정할 수 밖에 없었다. 1. 딥링크(deep link)이런 식으로 “특정 주소 혹은 값을 입력하면 앱이 실행되거나 앱 내 특정 화면으로 이동시키는 기능” 을 딥링크라고 한다. 딥링크는 다음 3가지 방식으로 구분할 수 있다.
2. URI 스킴 방식모듈에서는 URI 스킴 방식을 사용하고 있었기 때문에 이를 집중적으로 살펴봤다. 스킴(Scheme)은 앱마다 등록할 수 있는 값으로, 이를 통해 우리는 앱을 구분할 수 있다. 그래서 우리는 특정 스킴 값을 호출하여 특정 앱을 열 수 있다. URI 스킴 방식은
URI 스킴 사용 방법
URI 스킴의 한계URI 스킴에서 가장 문제가 되는 점은, 스킴이 중복될 수 있다는 것이다. 즉, 앱으로 바로 이동하지 못하고 어떤 앱으로 이동할 지 사용자가 선택을 해야 한다는 것이다. 실제로 스킴이 중복되는 것은 마케팅적으로 문제가 된다. 스킴의 생성 목적이 앱 사용자 수를 늘리기 위함인데, 자신들의 앱으로 연결하지 못한다면 의미가 없기 때문이다. 3. Android에서 딥링크 구현iframe 사용
결과적으로는 URI 스킴 이동과 앱스토어 이동이 모두 일어나지만, 시간차를 이용해 한 가지만 일어나는 것처럼 보이게 하는 일종의 트릭이다.
Chrome Intent 사용
Chrome의 경우 intent URL 방식을 도입하면서부터 iframe 방식을 사용할 수 없게 되었다. 하지만 intent URL은 앱의 설치 여부에 따른 처리를 자동으로 해주기 때문에 더욱 유용하다.
4. iOS에서 딥링크 구현iOS에서는 안드로이드에서 iframe 방식과 동일한 트릭을 사용하여 구현 가능하다. 대신 iframe을 통해 이동할 필요 없이, 그냥 스킴 주소를 통해 이동할 수 있다.
➕ Conclusion안드로이드 intent 방식을 사용했을 때만 인코딩 이슈가 있었기 때문에, 결과적으로는 기존 방식에서 사용하던 트릭을 그대로 이용하기로 결정했다. (intent 방식으로 처리할 때 내부적인 로직으로 인해 인코딩이 풀리는 것으로 보인다. 혹시 정확한 원인을 아시는 분이 있다면 댓글 부탁드린다.. 나는 원인을 찾지 못했다 ㅠㅠ)
➕ References
|