실기기(iPhone) Sandbox에서 "Loading from Metro..." 이후 검은 화면 (iOS bundle 단계 이후 무응답)

이 글의 성격은 무엇인가요?

질문 / 문제 해결

내용을 설명해주세요

안녕하세요

WebView 연동 테스트 중, iPhone(Sandbox 앱)기기 에서 테스트중 아래 문제가 지속되어 문의드립니다.

1. 문제 현상

  • Sandbox 앱에서 앱 실행 시 상단에 Loading from Metro...가 표시됩니다.
  • 터미널에는 Building React Native bundle... (platform: ios)까지 출력된 뒤, 추가적으로 로그가 더 이상 출력되지 않습니다.
  • 그 상태에서 앱 화면은 검은 화면으로 유지되며, 웹 콘텐츠가 전혀 렌더링되지 않습니다.

2. 테스트 환경

  • OS: macOS
  • 디바이스: 실제 iPhone (iOS Simulator 아님)
  • 네트워크: Mac과 iPhone 동일 Wi-Fi
  • 프론트엔드: React + Vite + TypeScript
  • 사용중인 패키지: @apps-in-toss/web-framework@^1.14.1, @toss/tds-mobile@^2.2.1

3. 절차

  1. 프로젝트에서 npm run dev:toss 실행
  2. iPhone Sandbox 앱에서 Metro 서버 주소 설정 후 앱 실행
  3. 화면상단에 Loading from Metro... 표시되지만 검은 화면 지속, 터미널 로그도 추가 출력 없음

4. 터미널에서 확인되는 출력

 ██████╗ ██████╗  █████╗ ███╗   ██╗██╗████████╗███████╗
██╔════╝ ██╔══██╗██╔══██╗████╗  ██║██║╚══██╔══╝██╔════╝
██║  ███╗██████╔╝███████║██╔██╗ ██║██║   ██║   █████╗  
██║   ██║██╔══██╗██╔══██║██║╚██╗██║██║   ██║   ██╔══╝  
╚██████╔╝██║  ██║██║  ██║██║ ╚████║██║   ██║   ███████╗
 ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═══╝╚═╝   ╚═╝   ╚══════╝

                  Welcome to Granite

Listening on http://0.0.0.0:8081

  VITE v7.3.1  ready in 125 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.0.228:5173/
  ➜  press h + enter to show help
Building React Native bundle... (platform: ios)




5. 설정 파일 (granite.config.ts)

import { defineConfig } from "@apps-in-toss/web-framework/config";

export default defineConfig({
  appName: "clawmap",
  brand: {
    displayName: "ClawMap",
    primaryColor: "#3182F6",
    icon: "",
  },
  web: {
    host: "192.168.0.228",
    port: 5173,
    commands: {
      dev: "vite --host",
      build: "vite build",
    },
  },
  webViewProps: {
    type: "partner",
  },
  outdir: "dist",
  permissions: [],
});

6. 문의 사항

  • 위 증상에서 우선적으로 확인해야 할 필수 점검 항목(설정/버전/네트워크)이 있을까요?
  • React+Vite 기반 WebView에서 granite dev 사용 시 알려진 이슈 또는 권장 우회 방법이 있을까요?
  • 원인 파악을 위해 추가로 제공해야 할 로그(예: verbose 실행 옵션, Sandbox 로그 수집 방법)가 있다면 안내 부탁드립니다.

감사합니다.

appName (선택)

clawmap

- 원인: `@apps-in-toss/web-framework` 버전 이슈

- 해결: `@apps-in-toss/web-framework`를 `^1.14.1` → `^2.0.5`로 업데이트 후 정상 동작 확인