문제 정의

1. 인스타그램이 설치되어 있을 경우

Untitled

웹앱에서 Instagram 링크(https://www.instagram.com/posepicker)로 이동하면, Instagram 앱이 켜지며 Posepicker의 인스타그램으로 이동한다.

그런데 문제는, 다시 웹앱으로 돌아왔을 때 빈 화면이 뜬다는 점이다.

2. 인스타그램이 설치되어 있지 않은 경우

Untitled

아예 이동이 되지 않고 오류가 뜬다.

사실 수집

현재, https://www.instagram.com/posepicker 사이트로 단순히 이동시키고 있다는 것이다.

해결 방안 수립

웹앱 혹은 웹뷰에는 ‘딥링크’라는 개념이 존재한다. 그래서 이 딥링크에 대해 공부해보았다.

딥링크

: 모바일 환경에 놓인 유저가 웹사이트 혹은 다른 앱에서 URL을 클릭했을 때, 앱을 실행시키고 특정 페이지로 이동하도록 돕는 기술

• URL Scheme, App Link(Android), Universal Link(iOS) 등의 방법이 존재한다.
• 자세한 내용: DeepLink(딥링크)

조치 및 구현

const handleButton = () => {
  location.href = "instagram://user?username=posepicker";
};

CodeSandBox에서 테스트한 결과, 정상적으로 앱에 이동하고 돌아왔을 때 기존 페이지를 잘 보여준다.