diff --git a/apps/web/src/app.tsx b/apps/web/src/app.tsx
index f5d11c13..4f40aa68 100644
--- a/apps/web/src/app.tsx
+++ b/apps/web/src/app.tsx
@@ -20,7 +20,6 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
           <Suspense fallback={<LoadingModal purpose={"데이터를 가져오고 있어요"} />}>
             {/* <ReactQueryDevtools initialIsOpen={false} /> */}
             {/* <DevTools /> */}
-
             <Routers />
             <Toast />
           </Suspense>
diff --git a/apps/web/src/helper/preventExternalBrowser.ts b/apps/web/src/helper/preventExternalBrowser.ts
deleted file mode 100644
index 3433c411..00000000
--- a/apps/web/src/helper/preventExternalBrowser.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export function PreventExternalBrowser() {
-  const agent = navigator.userAgent;
-  const URL = document.URL;
-  alert("agent");
-
-  // NOTE: 카카오톡 인앱 브라우저 방지
-  if (agent.includes("KAKAO")) {
-    window.open(`kakaotalk://web/openExternal?url=${encodeURIComponent(URL)}`);
-  } else if (agent.includes("Instagram")) {
-    /**
-     * NOTE: 현재는 해당 인스타그램 인앱 탈출 코드가 작동하지 않는 것 같음
-     * 추후 카카오톡처럼 인스타그램 인앱 방지 분석 후 코드 추가 예정
-     */
-  }
-
-  return null;
-}
diff --git a/apps/web/src/helper/preventExternalBrowser.tsx b/apps/web/src/helper/preventExternalBrowser.tsx
new file mode 100644
index 00000000..b712340b
--- /dev/null
+++ b/apps/web/src/helper/preventExternalBrowser.tsx
@@ -0,0 +1,19 @@
+import { Fragment, PropsWithChildren } from "react";
+
+export function PreventExternalBrowser({ children }: PropsWithChildren) {
+  const agent = navigator.userAgent;
+  const URL = document.URL;
+  const isKakao = agent.includes("KAKAO");
+  const isInstagram = agent.includes("Instagram");
+
+  if (isKakao) {
+    window.open(`kakaotalk://web/openExternal?url=${encodeURIComponent(URL)}`);
+    return <span> 시스템 브라우저를 이용해주세요 </span>;
+  } else if (isInstagram) {
+    /**
+     * NOTE: 현재는 해당 인스타그램 인앱 탈출 코드가 작동하지 않는 것 같음
+     * 추후 카카오톡처럼 인스타그램 인앱 방지 분석 후 코드 추가 예정
+     */
+  }
+  return <Fragment> {children} </Fragment>;
+}
diff --git a/apps/web/src/layout/GlobalLayout.tsx b/apps/web/src/layout/GlobalLayout.tsx
index 9d80a25c..2faf45f6 100644
--- a/apps/web/src/layout/GlobalLayout.tsx
+++ b/apps/web/src/layout/GlobalLayout.tsx
@@ -5,7 +5,7 @@ import { useEffect } from "react";
 import { Outlet, useLocation } from "react-router-dom";
 
 import { Modal } from "@/component/common/Modal";
-import { PreventExternalBrowser } from "@/helper/preventExternalBrowser.ts";
+import { PreventExternalBrowser } from "@/helper/preventExternalBrowser.tsx";
 import ChannelService from "@/lib/channel-talk/service";
 import { useBridge } from "@/lib/provider/bridge-provider";
 
@@ -48,8 +48,9 @@ export default function GlobalLayout() {
       `}
     >
       <Modal />
-      <PreventExternalBrowser />
-      <Outlet />
+      <PreventExternalBrowser>
+        <Outlet />
+      </PreventExternalBrowser>
     </div>
   );
 }