이 글의 성격은 무엇인가요?
질문 / 문제 해결
내용을 설명해주세요
안녕하세요.
Expo Web (React Native Web) 기반 WebView 미니앱을 개발 중인데,
앱 출시 > 테스트하기 QR 스캔 시 "잠시 문제가 생겼어요"만 표시됩니다.
환경
- appName: nasol-fans
- SDK: @apps-in-toss/web-framework 2.0.0
- 프로젝트: Expo SDK 54 + React Native Web + Vercel 배포
- 빌드: npx ait build → npx ait deploy
- 테스트 기기: Android (5G)
- 콘솔 업로드: 정상 (에러 없음, “검토 필요” 상태)
증상
- 콘솔 앱 출시 > 테스트하기 QR 스캔 → “잠시 문제가 생겼어요”
- window.onerror / onunhandledrejection 에러 로깅 스크립트를
index.html에 삽입했으나, 로그가 전혀 수집되지 않음
→ WebView(index.html)가 로드되기 전, RN 번들 실행 단계에서 크래시 추정 - 브라우저(폰)에서 동일 웹앱 직접 접속 시 정상 렌더링
시도한 것
- CORS: *.tossmini.com, *.toss.im 허용 완료
- index.html 내 절대경로 → 상대경로 변환 (src=“/…” → src=“…”)
- JS 번들 내 에셋 절대경로 → 상대경로 변환 (“/assets/” → “assets/”)
- granite.config.ts에 brand, permissions, webViewProps 설정 완료
- 순수 HTML만 포함한 최소 번들 (Expo/React 코드 없음)에서도 동일 증상 발생
granite.config.ts
import '@apps-in-toss/web-framework';
export default {
appName: 'nasol-fans',
outdir: './dist',
brand: {
displayName: '나솔팬즈',
primaryColor: '#D4537E',
icon: './assets/icon-toss-600.png',
},
permissions: [],
webViewProps: {
type: 'partner' as const,
},
web: {
commands: {
build: 'expo export -p web --clear && bash scripts/patch-dist.sh',
dev: 'expo start --web --port 3000',
},
},
};
.ait 번들 구조 (정상 생성)
bundle.ios.0_84_0.js
bundle.android.0_84_0.js
bundle.ios.0_72_6.js
bundle.android.0_72_6.js
web/index.html
web/_expo/static/js/web/entry-xxx.js
web/assets/...
RN 번들 헤더 (정상)
global.__granite.app = {
name: "nasol-fans",
scheme: 'intoss',
host: ''
};
global.__appsInToss = {
deploymentId: "...",
brandDisplayName: "나솔팬즈",
brandPrimaryColor: "#D4537E",
brandIcon: "./assets/icon-toss-600.png",
webViewType: "partner",
navigationBar: undefined
};
질문
1. 순수 HTML 번들에서도 동일하게 실패하는 걸 보면,
RN 쉘 번들 실행 단계에서 크래시하는 것 같은데
어떤 설정이 누락된 건지 확인 부탁드립니다.
2. host: ''이 빈 값인 게 WebView 로딩 실패 원인이 될 수 있나요?
3. navigationBar: undefined가 비게임 앱에서 문제가 되나요?
4. granite dev (로컬 샌드박스)에서 테스트하려면
콘솔에 샌드박스 메뉴가 보이지 않는데,
WebView 프로젝트에서 샌드박스 테스트는 어떻게 하나요?
### appName (선택)
nasol-fans