배경

카카오톡 인앱 브라우저에서 동아리 상세 페이지 공유 링크 접근 시, 상단에 "앱열기" 버튼을 눌러 네이티브 앱으로 이동하는 기능을 구현.

시도1: kakaotalk://web/openExternal + 프로덕션 URL

const safariUrl = `kakaotalk://web/openExternal?url=${encodeURIComponent(currentUrl)}`;
window.location.href = safariUrl;

결과: 앱 설치된 경우 Safari로 이동 후 유니버셜 링크로 트리거 -> 앱 실행

문제: 앱 미설치 시 Safari에서 웹페이지만 표시됨. 앱스토어로 자동 이동 안 됨.

원인: 유니버셜 링크는 앱 설치된 경우에만 동작하고 미설치 시에는 웹페이지만 열릴 뿐 앱스토어로 가는 로직이 없었음.

시도2: kakaotalk://web/openExternal + App Store URL

window.location.href = `kakaotalk://web/openExternal?url=${encodeURIComponent(APP_STORE_LINKS.iphone)}`;

결과: 앱 미설치 시 App Store 이동

문제: 앱이 설치된 경우에도 App Store 페이지가 열리고 "열기" 버튼을 눌러야 함

시도3: kakaotalk://web/openExternal + document.hidden 타임아웃 폴백

window.location.href = `kakaotalk://web/openExternal?url=${encodeURIComponent(productionUrl)}`;

setTimeout(() => {
  if (!document.hidden) {
    window.location.href = APP_STORE_LINKS.iphone;
  }
}, 1500);

결과: 동작하지 않음.

원인: kakaotalk://web/openExternal이 실행되면 앱 설치 여부와 상관없이 항상 Safari가 열리면서 카카오톡 페이지가 백그라운드로 전환됨.

즉, 앱 설치 여부와 상관없이 document.hidden === true가 되어 타임아웃 폴백 자체가 불가능.

시도4: Smart App Banner + Universal Link

<!-- index.html -->
<meta name="apple-itunes-app" content="app-id=6755062085" />

const productionUrl = `https://${APP_HOST}${url.pathname}`;
window.location.href = `kakaotalk://web/openExternal?url=${encodeURIComponent(productionUrl)}`;