3.1x 개발 과정에서

[history8720]

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

질문 / 문제 해결

내용을 설명해주세요

안녕하세요. 비게임 WebView 미니앱을 SDK 2.5.0에서 SDK 3.1.1로 마이그레이션했습니다.

iPhone에서 콘솔 QR로 테스트하면 토스 공통 상단바 아래 WebView가 화면 위쪽 약 절반 높이로만 생성되고, 아래쪽은 흰색으로 남습니다. 앱 콘텐츠는 그 작은 영역 안에서 끝까지 스크롤되며 하단 탭바도 작은 WebView의 하단에 계속 고정됩니다. 따라서 콘텐츠 잘림이 아니라 네이티브 WebView frame 자체가 짧은 현상으로 보입니다.
앱의 html, body, #root와 앱 루트는 전체 viewport를 사용하며, 빌드된 CSS에서도 .app-shell과 시작 화면이 position: fixed; inset: 0입니다. 412×839 로컬 브라우저에서는 전체 높이를 정상 사용합니다. SDK 3.1.1 설정 스키마와 런타임 API에는 WebView 높이 또는 전체 화면 옵션이 없어 파트너 코드에서 더 확장할 방법을 찾지 못했습니다.
iOS partner WebView의 네이티브 frame 높이 및 해당 배포의 호스트 설정이 문제인것 같은데요..

[Dylan]

안녕하세요
방금 새로 스캐폴딩하여 테스트했을때는 viewport 가 전체를 차지하며 정상적으로 보이는 것 같습니다
혹시 어떻게 보이는지 캡쳐해주실 수 있을까요 ?
viewport 설정도 공유 부탁드립니다.

[history8720]

안녕하세요. 확인 감사합니다.

요청하신 실기기 캡처와 viewport 설정을 공유드립니다.

• 앱 유형: 비게임 WebView
• appName: watercheck
• SDK: @apps-in-toss/web-framework 3.1.1
• 배포 ID: 01a03815-c654-72db-b99e-34964235b193
• 테스트 방식: 앱인토스 콘솔 테스트 버튼 → iPhone 토스 앱
• iPhone 모델: I phone 14 pro
• iOS 버전: Ios 27.0 개발자 베타(8월 18일 설치)
• 토스 앱 버전: 5.274.0

첨부한 캡처들은 같은 QR 실행 화면에서 스크롤 위치만 바꿔 촬영한 것입니다.

첫 번째 캡처에서는 상단 콘텐츠가 보이고, 두 번째 캡처에서는 아래쪽 배너 광고까지 스크롤한 상태입니다. 두 캡처 모두 앱 하단 탭바의 물리적 위치와 그 아래의 흰 영역이 동일하게 유지됩니다. 콘텐츠만 작은 영역 안에서 스크롤됩니다.

현재 index.html의 viewport 설정은 다음과 같습니다.

모바일 루트 CSS는 다음과 같습니다.

html,
body,
#root {
width: 100%;
height: 100%;
min-height: 100%;
}

#root {
min-height: 100vh;
}

body {
margin: 0;
min-height: 100vh;
overflow: hidden;
}

.app-shell {
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
width: min(100%, 430px);
height: auto;
min-height: 0;
margin: 0 auto;
overflow: hidden;
}

.startup-screen {
position: fixed;
inset: 0;
}

너비 600px 이상에서만 데스크톱 레이아웃용 미디어 쿼리가 적용되며, iPhone 모바일 viewport에서는 위의 fixed/inset 설정이 적용됩니다.

동일 빌드를 412×839 로컬 모바일 브라우저에서 실행했을 때 window.innerHeight와 앱 루트 높이가 일치하고, 앱 하단도 viewport 하단까지 정상적으로 표시됩니다.

혹시 해당 배포 ID를 iOS에서 열었을 때 다음 값을 확인해 주실 수 있을까요?

1. 네이티브 WebView의 frame 또는 bounds 높이
2. WebView에 전달된 window.innerHeight
3. visualViewport.height
4. 콘솔에 등록된 비게임 WebView 유형이 SDK 3.1.1 배포에도 정상적으로 적용됐는지 여부

[Dylan]

.app-shell에 height: 100%, max-width: 430px 로 바꿔서 한번 봐주실 수 있나요 ?