재시민

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

🔍 웹뷰(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 안내 필수

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

스마트워치 데이터 받기

안드로이드를 1도 모르고 게다가 스마트워치 연결하는 법도 몰라 무작정 블루투스 연결을 통해 데이터를 받으려고 했다.

하지만, 연결은 하더라도 데이터를 받아오는 방법을 아무리 찾아도 찾을 수가 없었다.

눈물이 조금씩 차오르는 찰나 안드로이드 공식문서 구석에 Data Layer API 를 사용하면 된다고 나와있었다.

Wear에서 데이터 보내기 및 동기화 | Android 개발자 | Android Developers

Data Layer API

https://github.com/BharathVishal/Message-communication-using-Wearable-Data-Layer-for-Android-Wear-OS

해당 API에 대해 구글링한 결과 기적같이 백인 형님이 만들어 놓으신 깃헙 리포지토리를 구할 수 있었다.. 만세..

시간이 얼마 없는지라 코드 분석은 제끼고 데이터를 받아오는 부분만 변경해 가속도 데이터를 전송했고, 성공했다.