카카오 인앱 브라우저와 결제 WebView의 터치 동작을 보강한 과정

알림 링크를 카카오톡에서 열면 일반 브라우저가 아니라 앱 내부 WebView가 사용된다. Android와 iOS는 외부 브라우저 전환 가능 범위가 달랐고, 결제 WebView에서는 safe area와 터치·스크롤 경계가 별도의 문제로 나타났다.

카카오 인앱 브라우저 여부와 OS를 분리해 판단했다

인앱 브라우저 감지는 User-Agent에 KAKAOTALK이 있는지 확인하고, 모바일 OS는 iOS·Android·기타로 구분했다.

아래 코드 예시는 설명을 위해 식별자와 운영 설정값을 일반화했습니다.

export const isEmbeddedBrowser = () =>
  /KAKAOTALK/i.test(navigator.userAgent || "");

export const detectPlatform = () => {
  const ua = navigator.userAgent || "";
  if (/iPhone|iPad|iPod/i.test(ua)) return "ios";
  if (/Android/i.test(ua)) return "android";
  return "other";
};

Android 카카오톡에서는 kakaotalk://web/openExternal 스킴으로 현재 URL을 기본 브라우저에 넘겼다. iOS는 Safari를 강제로 여는 같은 방식이 없어 주소 복사와 수동 안내를 fallback으로 사용했다.

if (detectPlatform() === "android") {
  window.location.href =
    "kakaotalk://web/openExternal?url=" + encodeURIComponent(destinationUrl);
  return true;
}
return false;

이 안내는 카카오 인앱 브라우저에서만 인증 화면 상단에 노출했다. 일반 브라우저 사용자에게 불필요한 분기를 보여주지 않기 위해서다.

결제 WebView는 터치 가능한 HTML 요소와 영역을 명확히 했다

결제 화면의 클릭 요소 일부는 스타일을 입힌 div였다. 이를 실제 button type="button"으로 바꾸고 브라우저 기본 appearance와 탭 하이라이트를 정리했다.

appearance: none;
-webkit-appearance: none;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;

페이지 스크롤 영역에는 touch-action: pan-y pinch-zoom을 적용했다. 버튼의 탭과 세로 스크롤·확대를 서로 다른 의도로 브라우저에 전달하는 설정이다.

safe area와 Bottom Sheet 스크롤을 같은 좌표계에서 처리했다

하단 고정 버튼과 결제 Bottom Sheet는 iPhone의 홈 인디케이터 영역을 고려해야 했다. 고정 padding 값에 env(safe-area-inset-bottom)을 더하고, Sheet는 viewport 안에서 최대 높이와 자체 세로 스크롤을 갖게 했다.

padding-bottom: calc(1rem + env(safe-area-inset-bottom));
max-height: calc(100dvh - env(safe-area-inset-top) - 12px);
overflow-y: auto;
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;

Sheet가 열린 동안에는 html과 body의 overflow를 잠그고 cleanup에서 이전 값으로 복원했다. 배경은 touch-action: none, 실제 Sheet는 pan-y pinch-zoom을 사용해 뒤 화면 스크롤과 내부 스크롤이 경쟁하지 않게 했다.

flowchart TD
  A[카카오 링크 진입] --> B{Android인가?}
  B -- 예 --> C[외부 브라우저 자동 전환]
  B -- 아니오 --> D[주소 복사·수동 안내]
  E[결제 WebView] --> F[실제 button과 touch-action]
  F --> G[safe area·Sheet 스크롤 분리]

이 작업은 하나의 CSS 속성으로 해결한 문제가 아니다. 팀의 외부 브라우저 안내와 후속 결제 WebView 터치 보강이 이어진 작업이다. 유입 컨테이너를 바꾸는 전략과 컨테이너 안에서 동작을 안정화하는 전략을 분리한 것이 핵심이었다.