카톡 인앱 브라우저에서 홈페이지가 이상할 때, 감지하고 외부 브라우저로 안내하는 법
카톡으로 받은 홈페이지 링크를 누르면 대부분 카카오톡 인앱 브라우저에서 열립니다.
그런데 크롬이나 사파리에서는 멀쩡하던 구글 로그인, 파일 다운로드, 결제 창이 여기서만 막히는 경우가 있습니다.
이럴 때는 인앱 브라우저를 감지해서, 방문자가 직접 외부 브라우저로 옮겨 갈 수 있게 안내하는 편이 가장 현실적입니다.
💡 왜 카톡 안에서만 문제가 생길까요?
인앱 브라우저는 앱 안에 넣은 웹뷰라서 일반 브라우저와 권한이나 동작이 조금씩 다릅니다. 대표적으로 구글은 보안 정책상 웹뷰 안에서의 구글 계정 로그인을 막고 있어서, 카톡에서 연 페이지의 "구글로 로그인" 버튼이 오류 화면으로 넘어가곤 합니다. 문의 내역을 보면 "링크가 안 열려요"라는 말이 실제로는 이 경우인 일이 꽤 많습니다.
1. 사용자 에이전트로 카카오톡 인앱 브라우저 감지하기
카카오톡 인앱 브라우저는 사용자 에이전트(navigator.userAgent) 문자열에 KAKAOTALK가 들어 있습니다. 이 값으로 판별해서 html 태그에 클래스를 하나 붙여 두면, 이후 처리는 CSS로 간단하게 나눌 수 있습니다.
// 카카오톡 인앱 브라우저인지 확인
var ua = navigator.userAgent;
var isKakao = /KAKAOTALK/i.test(ua);
if (isKakao) {
// 안내 띠를 보여주기 위한 표시용 클래스
document.documentElement
.classList.add('is-inapp');
}2. 자동으로 튕기지 말고, 안내 띠와 버튼으로 맡기기
감지하자마자 바로 외부 브라우저로 보내 버리면 방문자 입장에서는 화면이 갑자기 바뀌어 당황스럽고, 기기에 따라 빈 창만 남기도 합니다. 그래서 실무에서는 상단이나 하단에 얇은 안내 띠를 띄우고, 누를지는 방문자가 고르게 합니다. 로그인이나 결제처럼 문제가 되는 페이지에만 띄우면 더 깔끔합니다.
<!-- 평소에는 숨겨 두는 안내 띠 -->
<div class="inapp-bar">
카카오톡 안에서는 일부 기능이 제한됩니다.
<button type="button" id="openExt">
다른 브라우저로 열기
</button>
</div>
<style>
.inapp-bar { display: none; }
.is-inapp .inapp-bar { display: flex; }
</style>3. 버튼을 누르면 외부 브라우저로 열기
카카오톡에는 지정한 주소를 외부 브라우저로 여는 kakaotalk://web/openExternal?url= 스킴이 있습니다. 주소는 꼭 encodeURIComponent로 감싸야 UTM 같은 파라미터가 깨지지 않습니다.
document.getElementById('openExt')
.addEventListener('click', function () {
var url = encodeURIComponent(location.href);
location.href =
'kakaotalk://web/openExternal?url=' + url;
});적용 전에 알아 둘 점
- 이 스킴은 카카오 개발 문서에 정식으로 안내된 기능이 아니라서, 앱 업데이트에 따라 동작이 달라질 수 있습니다.
- 스킴이 안 먹히는 경우를 대비해 "오른쪽 아래 메뉴에서 다른 브라우저로 열기" 같은 안내 문구를 함께 두는 게 안전합니다.
- 네이버, 인스타그램 앱도 각자 인앱 브라우저를 쓰니, 문제가 생기는 유입 경로부터 확인하고 순서대로 대응하세요.
"고객이 링크를 어디서 눌렀는지까지 생각해야 문의가 끊기지 않습니다."
나눔웹은 카톡, 문자, 검색 등 실제 유입 경로에서 직접 열어 보며 사이트를 점검합니다.
크롬에서만 확인하고 끝내지 않는 것, 그게 저희가 지키는 기본입니다.