재시민

📱 카카오톡 웹뷰에서 내 웹앱이 안 될 때: 안드로이드와 아이폰 각각의 해결 방법

🔍 웹뷰(WebView)란 무엇이고, 왜 문제가 될까?

요즘은 많은 사람들이 카카오톡, 인스타그램 같은 앱 안에서 링크를 클릭해 웹사이트를 열어본다.

이때 뜨는 창이 바로 웹뷰(WebView) 이다. 웹뷰는 앱 내부에 내장된 간이 브라우저라서, 일반 브라우저와는 다르게 기능 제한이 많다.

대표적으로,

• 새 창 열기(window.open)가 막혀 있거나,
• 특정 스킴 호출(intent, deeplink)이 차단되어 있는 경우가 많다.

문제는, 이런 제한된 환경에서는 내 웹앱이 예상대로 동작하지 않는다는 점이다. 특히 외부 브라우저에서 열기를 유도해야 하는 경우(ex. 결제, 다운로드, 고급 기능 사용 등)에는 웹뷰를 탈출시키는 처리가 꼭 필요하다.

이 글에서는, 카카오톡 웹뷰에서 내 웹앱이 제대로 작동하지 않았던 문제를 만나고, 이를 Android와 iOS 각각에서 해결해나간 과정을 정리했다.

💡 문제 상황

회사 플랫폼을 사용하는 사용자들이 카카오톡 웹뷰에서 구글 로그인을 시도해 막혔다는 피드백을 받게 되었다. 왜 그런지 알아보니 웹뷰에서는 이러한 SNS 로그인을 차단한다는 것을 알게 되었다.

"카카오톡으로 열었더니 버튼이 안 눌려!"

직접 확인해보니 카카오톡 웹뷰에서는 다음 문제가 공통적으로 발생했다:

• window.open('_blank')로 새 창을 열었는데, 화면이 리프레시만 됨
• 특히 iOS(아이폰)에서는 링크 클릭 후 아무 반응 없음
• 안드로이드는 새 창 대신 웹뷰에서 그대로 머무름

즉, 내가 의도한 “외부 브라우저로 이동” 기능이 전혀 동작하지 않았다.

🔧 해결 과정 1 – Android: intent://로 Chrome 강제 열기

Android의 경우 다행히 해결이 빨랐다.

intent:// 스킴을 사용하면 카카오톡 웹뷰에서도 Chrome을 강제로 실행할 수 있었다:

const url = location.href;
location.href = `intent://${url.replace(/^https?:\/\//, '')}#Intent;scheme=https;package=com.android.chrome;end;`;

이 코드를 버튼에 연결하니, Chrome이 정상적으로 실행되고 내 웹사이트가 바로 열렸다.

❗ 추가 문제 상황 – iOS는 window.open('_blank')가 안 됨

그런데 iPhone에서는 다르게 굴었다.

window.open('_blank')도, window.location.href = ...도 웹뷰 안에서만 동작하고, Safari나 Chrome으로 넘어가질 않았다.

특히 iOS의 카카오톡 웹뷰는 새 창 열기 기능을 거의 완전히 차단하고 있었다.

🛠 해결 과정 2 – iOS: googlechrome:// 스킴으로 해결

알아보니 iOS용 Chrome은 커스텀 스킴을 통해 열 수 있다는 사실을 알게 됐다.

function openInChromeiOS() {
  const chromeURL = "googlechrome://" + location.href.replace(/^https?:\/\//, '');
  window.location.href = chromeURL;

  // Chrome이 없을 경우 대비
  setTimeout(() => {
    alert("Chrome이 설치되어 있지 않다면, 우측 상단 메뉴에서 Safari로 열어주세요.");
  }, 1000);
}

이 코드를 통해 iOS 기기에서도 Chrome이 설치되어 있다면 문제없이 내 웹사이트가 열렸다.

단, Chrome이 설치되어 있지 않은 경우엔 아무 반응이 없기 때문에, 사용자에게 안내 메시지를 함께 보여주는 처리가 필요했다.

📌 최종 UX 구성

<button onclick="openInChromeiOS()">브라우저에서 열기</button>
<p>혹시 안 열릴 경우, 카카오톡 우측 상단 ••• 메뉴에서 Safari 또는 Chrome으로 열어주세요.</p>

✍️ 마무리하며

웹앱을 배포할 때 ‘브라우저에서는 되니까 끝!’이라고 생각했지만,

실제 사용 환경인 인앱 웹뷰에서는 동작 방식이 전혀 다르다는 것을 이번에 확실히 체감했다.

• Android는 intent://로 대응
• iOS는 googlechrome:// 스킴으로 대응
• Chrome 미설치 시를 고려한 UX 안내 필수

앞으로는 웹앱 초기 설계 단계부터 인앱 브라우저 대응 전략도 함께 고려해야겠다고 다짐했다.