문제 상황
웹 서비스에서 사용자가 카카오톡을 통해 링크를 공유받아 접속하는 경우가 많다. 카카오톡 인앱 브라우저는 일부 기능 제한이 있어, 사용자 경험 개선을 위해 외부 브라우저(Safari, Chrome 등)로 열리도록 유도하는 로직을 구현했다.
초대코드 기능을 통한 접속에서는 정상적으로 외부 브라우저로 전환되었으나, 일반 홈페이지 주소로 접속하는 경우 여전히 카카오톡 브라우저에서 차단되는 문제가 발생했다.
발생 환경
- 인증: Firebase 12.6.0 (Google OAuth 2.0)
- 플랫폼: 모바일 (Android/iOS)
- 브라우저: 카카오톡 인앱 브라우저
- 진입 경로: 일반 홈페이지(
/)
문제 증상
- 초대코드를 통한 접속: 카카오톡에서 링크 클릭 시 외부 브라우저로 정상 전환됨
- 일반 홈페이지 URL 접속: 카카오톡에서 링크 클릭 시 여전히 인앱 브라우저에서 열리며, 기능 제한으로 인한 접근 차단(access deny) 발생
사용자는 일반 홈페이지 링크를 카카오톡으로 공유받아도 제대로 서비스를 이용할 수 없었다.
원인 추적
처음에는 브라우저 감지 로직 자체에 문제가 있는지 의심했다. 그러나 초대코드 페이지에서는 정상 작동하는 것을 확인하고, 감지 로직의 위치에 문제가 있음을 파악했다.
기존 구조를 살펴보니:
- 카카오톡 브라우저 감지 로직이
LoginForm컴포넌트 내부에 구현되어 있었음 LoginForm은 초대코드 페이지에서만 렌더링됨- 일반 홈페이지로 접속하는 경우
LoginForm을 거치지 않아, 브라우저 감지 로직이 전혀 실행되지 않음
결국 감지 로직의 실행 범위가 특정 페이지로 제한되어 있었던 것이 근본 원인이었다.
해결 방법
카카오톡 브라우저 감지 로직을 전체 앱의 진입점으로 이동시켰다.
기존 구조: LoginForm 컴포넌트 내부
변경 구조: App.tsx (최상위 컴포넌트)
이렇게 하면 사용자가 어떤 경로로 접속하든, 앱이 렌더링되는 시점에 무조건 카카오톡 브라우저 여부를 체크하게 된다.
이제 초대코드 페이지뿐만 아니라 홈페이지, 기타 모든 페이지에서 카카오톡 브라우저 감지가 정상 작동한다.
// App.tsx
function App() {
useEffect(() => {
if (isKakaoTalkBrowser()) {
openInExternalBrwoser();
}
}, []);
return (
<Router>
{/* 라우팅 구조 */}
</Router>
);
}정리
- 핵심: 특정 환경을 감지하고 대응하는 로직은, 해당 환경이 발생할 수 있는 모든 진입점에서 실행되어야 한다.
- 팁: 페이지별로 조건부 렌더링되는 컴포넌트가 아닌,
App.tsx같은 최상위 컴포넌트에서 브라우저 감지 로직을 실행하면 누락 없이 안전하게 처리할 수 있다.
참고 자료
느낀 점
로직 자체는 이미 잘 작동하고 있었지만, 실행되는 위치를 놓쳐서 발생한 문제였다. "어디서 실행될까?"를 먼저 생각했다면 초기에 예방할 수 있었을 것 같다. 앞으로는 환경 분기 로직을 작성할 때, 실행 위치와 커버리지를 먼저 점검하는 습관을 들여야겠다.
