게임 미니앱 iOS 상단 상태바 영역이 흰색으로 남고 풀스크린이 안 됩니다

개발
1

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

질문 / 문제 해결

내용을 설명해주세요

HTML5 게임 미니앱(appName: kkangchong-hero)을 운영 중입니다.

iOS에서 게임 화면 상단 상태바 영역이 흰색으로 남고, 화면이 풀스크린(엣지투엣지)으로 채워지지 않습니다. 머지비치 같은 게임은 상태바 뒤까지 꽉 차는데, 제 앱은 그 영역이 흰색으로 비어 있습니다.

[적용한 것]

  • granite.config: webViewProps: { type: ‘game’ } → window.__appsInToss.webViewType === “game” 로 정상 인식 확인
  • viewport meta에 viewport-fit=cover 적용
  • SafeAreaInsets.get()으로 safe area 값 받아 HUD 위치 조정
  • 배경(격자)을 body 전체에 적용

위 처리를 다 했는데도 상단 상태바 영역이 흰색으로 남습니다. webview 자체가 상태바 아래부터 시작하는 것으로 보이는데, 상태바 영역까지 풀스크린으로 채우려면 추가로 어떤 설정이 필요할까요?

기기: iPhone (iOS), QR 테스트 환경에서 확인했습니다.

appName (선택)

kkangchong-hero

이미지 첨부

KakaoTalk_20260624_110929135.png
KakaoTalk_20260624_110929135.png1206×2622 220 KB

2

안녕하세요 :slight_smile:
granite.config.ts에

navigationBar: {
    transparentBackground: true 
  }

옵션을 추가 해봐주실 수 있나요?

3

저도 webview이고 SDK 2.9.3으로 올렸을 때 동일한 문제가 발생했는데 이렇게 넣으니 해결되었습니다. 감사합니다.