인앱 브라우저 감지 및 외부 브라우저로 리디렉션하는 방법

소셜 로그인 실패, 버튼 클릭 무반응, 앱 비정상 종료 등

문제 원인 분석: 인앱 브라우저는 일반 브라우저가 아니다

• window.open() 차단

• 팝업 로그인(OAuth) 실패

• 쿠키 및 로컬 스토리지 제한

• 외부 링크 차단

• 사용자 에이전트 조작 등

해결 전략: 외부 브라우저로 유도하자

인앱 브라우저 접속을 감지하고, React 앱 진입 시 외부 브라우저(크롬/사파리)로 유도하는 방식으로

접근성과 기능 안정성을 확보하자.

구현 요약

핵심 전략

1. userAgent 기반 인앱 브라우저 감지

2. 플랫폼(Android/iOS) 분기 처리

3. 카카오톡/라인 등 앱별 대응

4. Safari에선 URL 복사 및 안내 메시지 제공

5. React useEffect 활용한 자동 리디렉션

실제 코드

import { useEffect } from "react";
const OpenExternalBrowser = () => {
  useEffect(() => {
    const userAgent = navigator.userAgent.toLowerCase();
    const currentUrl = window.location.href;

    const inappdeny_exec_vanillajs = (callback) => {
      if (document.readyState !== "loading") {
        callback();
      } else {
        document.addEventListener("DOMContentLoaded", callback);
      }
    };

    const redirect = () => {
      if (userAgent.includes("kakaotalk")) {
        window.location.href = "kakaotalk://web/openExternal?url=" + encodeURIComponent(currentUrl);
      } else if (userAgent.includes("line")) {
        window.location.href =
          currentUrl.indexOf("?") !== -1
            ? currentUrl + "&openExternalBrowser=1"
            : currentUrl + "?openExternalBrowser=1";
      } else if (
        userAgent.match(
          /inapp|naver|snapchat|wirtschaftswoche|thunderbird|instagram|everytimeapp|whatsApp|electron|wadiz|aliapp|zumapp|iphone(.*)whale|android(.*)whale|kakaostory|band|twitter|DaumApps|DaumDevice\/mobile|FB_IAB|FB4A|FBAN|FBIOS|FBSS|SamsungBrowser\/[^1]/i,
        )
      ) {
        if (/iphone|ipad|ipod/.test(userAgent)) {
          alert(
            'URL주소가 복사되었습니다.\n\nSafari가 열리면 주소창을 길게 터치한 뒤, "붙여놓기 및 이동"를 누르면 정상적으로 이용하실 수 있습니다.',
          );
          copyToClipboard(currentUrl);
          window.location.href = "x-web-search://?";
        } else {
          window.location.href =
            "intent://" +
            currentUrl.replace(/https?:\/\//i, "") +
            "#Intent;scheme=https;package=com.android.chrome;end";
        }
      }
    };

    const copyToClipboard = (val) => {
      const textarea = document.createElement("textarea");
      document.body.appendChild(textarea);
      textarea.value = val;
      textarea.select();
      document.execCommand("copy");
      document.body.removeChild(textarea);
    };

    inappdeny_exec_vanillajs(redirect);
  }, []);

  return null;
};

export default OpenExternalBrowser;

적용 효과

• 인앱 브라우저에서의 소셜 로그인 오류 사라짐

• 버튼 무응답, 화면 깨짐 문제 해결

• 크롬/Safari 기준의 안정적인 UX로 통일

• QA 재현이 어려운 플랫폼별 이슈 예방

전체 트래픽의 절반 이상이 인앱 브라우저였다는 점에서,

사전 대응 없이는 서비스 신뢰도에 큰 영향을 줄 수 있는 문제였습니다.

회고: 환경도 UX의 일부다

결론