웹뷰 대응 - ScreenLayout 고정 프레임 해제 및 화면 꽉 채우기

[leegain1]

어떤 기능인가요?

추가하려는 기능에 대해 간결하게 설명해주세요

ScreenLayout의 375x812 고정 프레임을 걷어내고, 화면을 꽉 채우는 것을 기본으로 바꾼다. 아이폰 프레임 흉내는 데스크톱 뷰포트에서만 유지한다.

배경

이 서비스는 stream-client-app의 WebView로 감싸 앱스토어에 출시할 예정이다. 즉 실사용자는 전부 폰 웹뷰 안에서 이 웹을 본다. PC 브라우저 접속은 사실상 개발 중에만 발생한다.

그런데 지금은 반대로 되어 있다.

• src/components/ui/ScreenLayout.tsx:43 — h-[812px] w-[375px] 고정
• src/app/App.tsx:11 — bg-[#e5e5e5]로 남는 공간을 채우고 가운데 정렬 (주석: "데스크톱에서 보기 좋게 아이폰 화면 크기로 가운데 정렬만 해준다")

데스크톱 개발 편의를 위한 장치인데, 실제 환경인 폰에서는 이게 문제가 된다. 요즘 아이폰의 CSS 폭은 390~430px, 높이도 812px보다 커서 웹뷰 안에서 사방에 회색 여백이 생기고 화면이 꽉 차지 않는다. 앱에서 실기기로 확인해 재현된 사항이다.

기본값을 실제 환경(꽉 채움)에 맞추고, 개발 편의 장치를 조건부로 내려야 한다.

📝 작업 상세 내용

• ScreenLayout의 고정 크기를 걷어내고 기본을 w-full + 뷰포트 높이(h-[100dvh] 등)로 변경
• 데스크톱 뷰포트(sm 이상 등)에서만 375x812 프레임과 회색 배경을 유지하도록 조건부 처리
• App.tsx의 bg-[#e5e5e5]·가운데 정렬도 같은 브레이크포인트로 묶기
• 본문 스크롤이 여전히 정상 동작하는지 확인 (헤더·Bottom Nav 고정, 본문만 스크롤)
• BottomNav의 h-[34px] 스페이서 제거 또는 데스크톱 프레임 전용으로 조건부 처리 (src/components/ui/BottomNav.tsx:94) — 홈 인디케이터 흉내용인데 앱 셸이 이미 bottom 인셋을 확보하고 있어 웹뷰에서는 여백이 두 번 들어간다
• 앱 웹뷰에서 실기기 확인 (stream-client-app)

📁 참고 자료 (선택)

세이프에어리어는 웹에서 처리하지 않는다

현재 앱 셸이 useSafeAreaInsets()로 노치·홈 인디케이터 영역을 이미 확보하고, 그 스트립을 웹 화면과 같은 색(위 #F7F7F8 / 아래 #FFFFFF)으로 칠하고 있다. 따라서 웹은 주어진 영역을 100%로 채우기만 하면 된다.

웹에서 env(safe-area-inset-*)로 직접 처리하려면 앱 쪽 인셋 처리를 걷어내야 한다. 둘 중 한쪽만 담당해야 하며, 양쪽 다 처리하면 여백이 두 번 들어간다. 현재 구조(네이티브가 담당)를 유지하는 쪽이 단순하다.

같은 이유로 BottomNav의 h-[34px] 스페이서도 웹뷰에서는 네이티브 bottom 인셋과 겹친다. 데스크톱 프레임에서 아이폰 흉내로 남길지 아예 걷어낼지는 위 프레임 조건부 처리와 같은 브레이크포인트로 묶어 판단한다.

관련

• 앱 웹뷰 셸 구현: 웹뷰 셸 구현 - stream-client-web을 앱에 띄우기 stream-client-app#3 / PR [Feat/#3] 웹뷰 셸 구현 stream-client-app#4
• 실기기 확인 시 웹 dev 서버는 pnpm dev --host로 띄워야 폰에서 닿는다