# 모바일 인앱 브라우저 로그인 오류(403) 해결 명세

> **일시**: 2026-02-11 12:05
> **상태**: 🟡 진행 중 (Designing)
> **주제**: 모바일 인앱 브라우저(카카오톡 등)에서 Google 로그인 차단 문제 해결

---

## 1. 배경 및 문제 상황
- **증상**: 모바일 카카오톡 등에서 링크를 열고 Google 로그인을 시도하면 `403 disallowed_useragent` 오류 발생.
- **원인**: Google OAuth 보안 정책상 "임베디드 웹뷰(In-app WebView)"에서의 로그인을 허용하지 않음.
- **영향**: 모바일 사용자가 접근할 수 없어 서비스 이탈 발생.

## 2. 해결 방안 (Technical Solution)

### 2.1. 인앱 브라우저 탈출 (Escaping In-App Browsers)
가장 확실한 방법은 사용자가 **시스템 기본 브라우저(Chrome, Safari)**를 사용하도록 유도하는 것입니다.

#### A. 인앱 브라우저 감지 로직
User Agent 문자열을 분석하여 다음 키워드가 포함되었는지 확인합니다:
- `KAKAOTALK`, `NAVER`, `Line`, `Instagram`, `Facebook` 등

#### B. 외부 브라우저 강제 전환 (Android)
안드로이드의 경우 `intent://` 스킴을 사용하여 강제로 Chrome 브라우저를 실행할 수 있습니다.

```javascript
// Android Intent 예시
intent://insuwiki.vercel.app#Intent;scheme=https;package=com.android.chrome;end
```

#### C. 사용자 안내 UI (iOS/Common)
강제 전환이 불가능하거나 실패할 경우, 사용자에게 명시적인 안내 UI를 표시합니다.
- **메시지**: "보안을 위해 Chrome 또는 Safari에서 열어주세요."
- **버튼**: "외부 브라우저로 열기" (클립보드 복사 등 보조 수단 제공)

## 3. 구현 상세 Spec

### 3.1. `src/lib/browserUtils.ts` (신규)
브라우저 감지 및 리다이렉트 유틸리티 함수.
- `isInAppBrowser()`: boolean 반환
- `redirectToExternalBrowser()`: OS별 분기 처리하여 외부 브라우저 실행 시도

### 3.2. `src/app/login/page.tsx` (수정)
로그인 페이지 진입 시 로직 추가:
1. `useEffect`에서 `isInAppBrowser()` 체크.
2. `true`인 경우:
    - Android라면 즉시 `redirectToExternalBrowser()` 호출 시도.
    - 동시에 화면에 "외부 브라우저로 이동 중입니다..." 또는 안내 메시지 표시.
    - 로그인 폼 대신 **"외부 브라우저에서 열기"** 안내 컴포넌트 렌더링.

## 4. 검증 계획
- [ ] 카카오톡 나에게 보내기 -> 링크 클릭 -> Google 로그인 시도 -> 403 에러 없이 Chrome으로 연결되는지 확인.
- [ ] PC 및 일반 모바일 브라우저에서는 기존 기능 정상 동작 확인.

---
*본 문서는 `.agent/workflows/create-doc.md` 지침에 따라 작성되었습니다.*