[feature] device_locale 수집 - 네이티브 Mixpanel 등록 및 WebView 주입

[seongwon030]

개요

외국인 유학생 수요를 데이터로 파악하기 위해 기기 언어 설정(device_locale)을 Mixpanel Super Property로 수집합니다.

웹 쪽은 먼저 적용되었습니다 → Moadong/moadong#1920

웹 배포만으로도 수집은 시작됩니다. 웹뷰는 window.deviceLocale이 없으면 navigator.language로 폴백하고, 이 값이 iOS·Android 웹뷰 모두 기기 언어 설정을 따라가기 때문입니다. 따라서 이 이슈는 긴급하지 않으며 다음 앱 릴리즈에 묶어서 처리하면 됩니다.

왜 앱 작업이 필요한가

앱은 mixpanel-react-native로 웹과 별개의 Mixpanel 인스턴스를 씁니다(utils/mixpanel.ts). 그래서 웹뷰 껍데기 바깥 네이티브 UI에서 쏘는 아래 이벤트에는 device_locale이 붙지 않습니다.

이벤트	위치
SUBSCRIBE_BUTTON_CLICKED	ui/club-detail/club-detail-screen.tsx:85,103,122
BACK_BUTTON_CLICKED	ui/club-detail/club-detail-screen.tsx:68
PERMISSION_DIALOG_SHOWN/CLOSED/CONFIRMED	components/permission-dialog.tsx

이 중 구독은 웹에 없는 앱 전용 기능이라 네이티브에만 존재하는 데이터입니다. 즉 이 작업 전까지는 "유학생의 구독 전환율"을 볼 수 없습니다.

(홈의 카테고리·클럽카드·검색·배너 클릭도 네이티브 버전이 있지만, app/index.tsx:15-21의 웹뷰 로드 실패 fallback 경로라 실제로는 거의 발생하지 않습니다.)

구현 필요 사항

1. expo-localization 설치

현재 미설치 상태입니다. getLocales()[0].languageTag가 기기 선호 언어를 ko-KR 형식으로 반환합니다.

⚠️ iOS에서 Locale.current.identifier는 앱이 번들한 언어와 협상된 결과를 돌려줍니다. 앱이 한국어만 지원하면 중국어 기기에서도 ko_*가 나올 수 있어 이 지표 목적에 맞지 않습니다. expo-localization 또는 Locale.preferredLanguages.first를 써야 합니다.

2. 네이티브 Mixpanel에 Super Property 등록

utils/mixpanel.ts의 getMixpanel() 초기화 직후 1회 등록합니다.

await mixpanelInstance.init();
await mixpanelInstance.registerSuperProperties({
  device_locale: getLocales()[0]?.languageTag ?? '',
});
isInitialized = true;

3. WebView에 window.deviceLocale 주입

웹뷰 정확도 개선용입니다(폴백이 있으므로 선택). WebView는 3곳입니다.

• ui/home/home-webview-screen.tsx:193
• ui/club-detail/club-detail-screen.tsx:172
• app/webview/[slug].tsx:155

utils/webview.ts에 getWebViewUserAgent()처럼 공통 헬퍼를 두고 3곳에서 재사용하는 게 기존 패턴과 맞습니다.

export const getDeviceLocaleInjection = (): string =>
  `window.deviceLocale = ${JSON.stringify(getLocales()[0]?.languageTag ?? '')}; true;`;

⚠️ 반드시 injectedJavaScriptBeforeContentLoaded를 써야 합니다. club-detail-screen.tsx:179가 쓰는 injectedJavaScript는 로드 후 실행이라, 웹의 mixpanel.register()가 이미 끝난 뒤여서 주입값이 무시됩니다.

체크리스트

• expo-localization 설치
• utils/mixpanel.ts에 registerSuperProperties({ device_locale }) 추가
• utils/webview.ts에 주입 스크립트 헬퍼 추가
• WebView 3곳에 injectedJavaScriptBeforeContentLoaded 적용
• 기기 언어를 영어/중국어로 바꿔 Mixpanel에서 device_locale 값 확인

참고

지표 해석 주의: 중국인 유학생이 폰을 한국어로 쓰면 ko-KR로 잡힙니다. ko 외 locale 사용자는 확실히 외국인이지만 그 역은 성립하지 않아, 실제 유학생 수의 하한선으로만 읽어야 합니다.

웹 구현체: frontend/src/utils/getDeviceLocale.ts (Moadong/moadong)