문제 정의

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

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

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

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

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

사실 수집

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

해결 방안 수립

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

딥링크

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

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

조치 및 구현

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

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

그렇다면, Instagram 앱을 설치하지 않았다면 어떻게 될까?

위와 같은 에러가 뜬다.

앱이 설치되지 않았다면, Instagram 웹으로 이동시키면 될 듯하다. 꼭 Instagram 앱을 설치하라고 할 필요는 없다.

⇒ Instagram 웹으로 이동조차 되지 않는다. 에러가 발생한다. Instagram에서 외부 사이트에서의 웹 유입을 막아놓은 듯하다. 그렇다면, 설치가 되지 않았다면 설치를 해야 이동이 가능하다고 안내 문구를 띄워야겠다.

export default function useLaunchApp() {
  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  useEffect(() => {
    const handler = () => {
      if (!timerRef.current) return;
      clearTimeout(timerRef.current);
    };

    window.addEventListener('visibilitychange', handler);
  }, []);

  const launchApp = (baseUrl: string, deepLinkUrl?: string) => {
    if (!isMobileWeb()) {
      window.open(baseUrl);
      return;
    }

    location.href = deepLinkUrl ?? baseUrl;

    timerRef.current = setTimeout(() => {
      alert('Instagram 앱이 설치되지 않았습니다. 앱을 먼저 설치해주세요.');
    }, 2000);
  };

  return { launchApp };
}

1. timerRef는 setTimeout이 리턴하는 변수를 저장하는 ref 객체이다.
   • window라는 브라우저의 전역 객체의 visibilitychange 이벤트에 핸들러 함수를 추가할 것이다. 이 핸들러 함수는 timerRef.current, 즉 setTimeout을 종료하는 함수이다. 즉, visibilitychange 이벤트가 발생하면 setTimeout의 콜백 함수는 실행되지 않는다.

2. launchApp 함수는 실제로 앱에서 이벤트 핸들러에 추가할 함수이다. baseUrl을 기본적으로 전달받고, deepLinkUrl도 함께 전달할 경우 deepLinkUrl을 실행한다.
   • 여기서, PC인지(!isMobileWeb) 구분하여 분기 처리하였다. PC의 경우 deepLink가 존재하더라도, baseUrl로 실행해야 하기 때문이다.
3. 그리고 setTimeout을 시작해 2초 동안 실행되지 않으면 alert 경고창이 뜨도록 하였다.
   • 추후에 toast로 띄워 사용자 경험을 개선해도 좋을 것이다.

결과 관찰

instagram 설치했을 때

: instagram://user?username=posepicker로 페이지를 이동시킨다.

잘 동작한다. 이동도 잘 되고, 다시 돌아왔을 때 화면도 잘 살아있다.

instagram 미설치 시

팝업이 잘 뜬다.

link_preview