직접 겪은 카카오 인앱 브라우저 이슈/해결 방법

사내 딥링크 중간서버를 새로 만들게 되면서 여러 브라우저에서 동작 테스트를 진행하고 있는데, 유독 카카오톡 인앱 브라우저에서 발생하는 이슈가 많았다.

 

페이스북, 인스타그램, 슬랙 등 많은 앱에서 인앱 브라우저를 제공하고 있지만, 그 중에서도 가장 유입이 많은 카카오 인앱 브라우저 기준으로 현재 발생 중인 이슈를 정리해 보았다.

 

 

---

 

 

인앱 브라우저에서 스킴 실행 후 닫기 안됨

타 모바일 브라우저에서는 앱 스킴/market 스킴을 실행하면 자동으로 해당 페이지가 닫힌다.

 

하지만 카카오 인앱 브라우저는 닫히지 않고 빈 페이지가 남아있다.

카카오 인앱 브라우저	일반 모바일 브라우저

 

 

페이지가 계속 남아있기 때문에, 필자의 경우는 인앱 브라우저로 다시 돌아올 때마다 fallback 이벤트가 계속 실행되는 이슈가 있었다.

const handleOpenApp = () => {
    if (document.visibilityState === 'hidden') {
      clearTimeout(appCheckTimer);
      return;
    }

    // 돌아왔을 때, 앱이 설치되지 않은 경우 실행
    if (document.visibilityState === 'visible') {
      setTimeout(() => {
        gotoLink(fallbackUrl);  // 이 부분이 계속 실행될 수 있음
      }, 50);
    }
};

setTimeout(() => {
    document.addEventListener('visibilitychange', handleOpenApp, false);
    openApp();
}, 100);

 

 

만약 카카오 인앱 브라우저를 닫고 싶다면, 아래와 같이 직접 앱스킴을 호출하면 된다고 한다.

// Android인 경우
'kakaoweb://closeBrowser'

// iOS인 경우
'kakaotalk://inappbrowser/close'

 

참고로 window.close() 함수는 안먹히더라...

 

 

카카오 인앱 브라우저 여부는 user-agent 혹은 x-request-with 값으로 확인할 수 있다.

// 1. 서버에서 확인
req.headers['user-agent'].toLowerCase().includes('kakao')
// 혹은
req.headers['x-requested-with'] === 'com.kakao.talk'

// 2. 클라이언트에서 확인
navigator.userAgent.toLowerCase().includes('kakao')

 

 

 

market 스킴 호출시 동작 다름

안드로이드에서 플레이스토어 앱으로 이동하는 방법은 2가지가 있다.

// 1. market 스킴 호출
location.href = 'market://details?id=[앱_패키지_코드]';

// 2. play.google.com 앱링크 호출
location.href = 'https://play.google.com/store/apps/details?id=[앱_패키지_코드]';

 

 

play.google.com 앱링크를 호출하는 경우, 브라우저 종류와 상관 없이 동일하게 플레이스토어 앱이 실행된다.

 

하지만 카카오 인앱 브라우저에서 market 스킴을 호출하는 경우, 앱이 아닌 바텀시트 형태로 열린다.

market 스킴 호출	play.google.com 앱링크 호출

 

 

앱 설치에는 문제가 없긴 하지만, 동일한 동작을 보장해야 한다면 앱링크를 호출하는 것이 좋다.

 

 

 

intent 스킴으로 플레이스토어 안열림

intent:#Intent;
  scheme=[앱_스킴명];
  action=android.intent.action.VIEW;
  category=android.intent.category.BROWSABLE;
  package=[앱_패키지명];
  S.browser_fallback_url=[실패시_이동할_링크];
end

 

안드로이드에서 intent 스킴을 실행할 때, 앱이 설치되어 있지 않다면 S.browser_fallback_url 링크가 대신 실행된다.

 

S.browser_fallback_url 값으로 play.google.com을 지정한 경우에는 마켓앱이 열리지 않고 그대로 인앱 브라우저가 종료되는 이슈가 있다.

마켓이 실행되지 않고 꺼짐

 

 

안드로이드 개발자님 말씀에 따르면, play.google.com이 앱링크로 등록되어 있어 카카오 인앱 브라우저 측에서 실행을 막는 것으로 보인다고 한다.

 

'감히 우리 앱을 벗어나려고 하다니, 정상화 맛좀 봐라' 느낌이 아닐까 싶다.

 

 

해결 방법은 play.google.com 앱링크로 리다이렉트되는 경로를 하나 추가하고, 해당 경로를 S.browser_fallback_url 값으로 넘겨주면 된다.

// 1. play.google.com으로 리다이렉트하는 경로 선언
app.get('/market', (req: Request, res: Response) =>
  res.redirect(
    'https://play.google.com/store/apps/details?id=com.ebay.kr.gmarket',
  ),
);

// 2. 해당 경로를 fallback url에 넘겨줌
location.href = 'intent:#Intent;scheme=gmarket;action=android.intent.action.VIEW;category=android.intent.category.BROWSABLE;package=com.ebay.kr.gmarket;S.browser_fallback_url=https%3A%2F%2Fappgate.gmarket.com%2Fmarket;end'

 

 

 

intent 스킴 && scheme=http/https 호출시 외부 브라우저 열림

카카오 인앱 브라우저가 워낙 폐쇠적이다 보니, 많은 개발자 분들이 카카오 인앱 브라우저를 탈출할 수 있는 방법을 찾아서 정리해 주시곤 한다.

 

(번개애비님이 정리해 주신 글이 가장 깔끔하고 인기가 많다)

카카오톡/라인 인앱브라우저에서 외부브라우저 띄우기 (2023.09.21 최신 - inapp browser bypassing)

 

 

공식 방법은 아니지만, 카카오 인앱 브라우저에서 외부 브라우저를 열 수 있는 앱스킴이 존재한다.

location.href = 'kakaotalk://web/openExternal?url=[외부_브라우저로_열_URL]';

 

 

 

안드로이드의 경우는 위 방법을 사용하지 않아도, intent 스킴 호출시 scheme 파라미터 값을 http/https로 넘기면 크롬 브라우저에서 알아서 외부 브라우저로 열어준다.

// 카카오 브라우저에서 네이버 모바일 웹을 외부 브라우저로 열기
location.href = 'intent://m.naver.com#Intent;scheme=https;action=android.intent.action.VIEW;category=android.intent.category.BROWSABLE;end';

 

 

 

 

인앱 브라우저에서 Clipboard API 사용 불가 -> (해결?)

카카오 인앱 브라우저에서 https임에도 불구하고 Clipboard API를 사용한 클립보드 복사가 동작하지 않는 이슈가 있었다.

카카오 인앱 브라우저 클립보드 미작동 문의

 

따라서 인앱 브라우저에서도 클립보드 복사 기능을 제공하려면 document.execCommand('copy') 방식을 사용해야 했다.

const textarea = document.createElement('textarea');
textarea.value = '[복사할 내용]';
document.body.appendChild(textarea);

textarea.focus();
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);

 

(혹은 event.clipboardData.setData() 사용)

 

 

 올해 하반기에 다시 시도해 보니 현재는 Clipboard API를 사용해도 복사가 잘 되는 걸로 봐선, 카카오 측에서 처리를 해준 듯 싶다.

 

 

 

그 외

위에 정리한 내용 외에도 인앱 브라우저 내 카카오 로그인 오류, 파일 다운로드 안됨 등 다양한 이슈가 발생하고 있다.

InAppBrowser(카톡/카스 인앱브라우져)

 

나머지 이슈들도 잘 해결됐으면 좋겠다.