이 글의 성격은 무엇인가요?
질문 / 문제 해결
내용을 설명해주세요
■ 앱 정보
- appName: raise-my-building (React Native / Granite 기반, 비게임·일반(general) 미니앱)
- SDK: apps-in-toss/framework 2.6.1, toss/tds-react-native 2.0.3, granite-js/* 1.0.31
- react 19.2.3 / react-native 0.84.0
- granite.config.ts: navigationBar: { withBackButton: true }, appType 미지정(=general), brand.primaryColor #FFB300
■ 재현 환경
- iOS 실기기에서 토스앱으로 실행 (처음엔 안드로이드 이슈로 생각했으나, 실제 재현 기기는 iOS입니다.)
■ 증상
상단 내비게이션 바에서
- 우측 ⋯ | X (더보기·닫기) 버튼을 감싸는 둥근 회색 알약 배경
- 좌측 뒤로가기(<) 버튼을 감싸는 회색 원형 배경
이 또렷하게 보입니다. 같은 워크스페이스의 다른 RN 미니앱에서는 이 배경이 보이지 않고 버튼만 깔끔하게 표시됩니다. (스크린샷 첨부)
■ 직접 확인한 내용
- 내비바를 그리는 DefaultNavigationBar(framework), TopNavigation / Navigation(tds-react-native) 코드는 다른 RN 미니앱들과 동일했습니다.
- 버튼 배경색은 COLOR_PALETTE.light.backgroundColor = greyOpacity50 (rgba(0,23,51,0.02), 약 2% 불투명도), 내비바 헤더 배경은 headerStyle.backgroundColor = #ffffff 로 설정되는 것으로 확인했습니다.
- 그런데 실제 iOS 화면에서는 내비바 영역이 흰색(#ffffff)으로 채워지지 않고, 앱 콘텐츠의 배경색(크림색 #fff5e1)이 그대로 비쳐 보입니다. 그 크림색 위에서 버튼을 감싼 2% 회색 알약/원이 대비되어 도드라집니다. (흰 배경이라면 2% 알약은 거의 안 보일 텐데,
콘텐츠 색이 비쳐서 도드라지는 상황으로 추정합니다.)
■ 질문
- iOS에서 내비바 배경이 흰색으로 채워지지 않고 앱 콘텐츠 색이 비쳐 보이는 것이 정상 동작인가요? (헤더가 반투명/translucent라 그런가요?)
- 버튼을 감싸는 둥근 회색 배경(알약·원)을 제거하거나, 내비바를 불투명 흰색으로 강제할 수 있는 공식 옵션이 있나요?
- 앱 콘텐츠 최상단(내비바 뒤) 영역을 흰색으로 두면 이 현상이 사라지나요? 아니면 SDK·설정 차원에서 권장하는 처리 방법이 있나요?
appName (선택)
raise-my-building
