iOS 웹뷰 safe area inset 이슈 해결 방법

이슈 상황

iOS 앱 내에서 웹뷰로 웹페이지를 그릴 때, 페이지의 전체 높이가 실제 기기 높이값보다 더 크게 잡혀서 상하스크롤이 항상 발생하는 이슈

기존 코드 문제점 및 해결

기존 코드에는 몇가지 문제가 혼재되어 있었다.

첫번째, meta tag viewport 속성

meta tag에 viewport 관련 속성을 넣고 있는데, <meta property='viewport' content='viewport-fit=cover,width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no' /> 와 같이 name 이 아닌 property 로 잘못 셋팅하고 있어서 실제로는 적용이 안되고 있었다.

viewport 와 같은 속성은 name 으로, open graph 관련 og 태그는 property 로 셋팅해야한다. MDN 문서

<meta name="viewport" content="width=device-width, initial-scale=1" />

<meta
  property="og:image"
  content="https://developer.mozilla.org/mdn-social-share.png" />

두번째, iOS 는 상/하단에 상태바/하단바와 같은 기본 영역이 있다는 점을 고려해야한다.

<meta name="viewport" content="viewport-fit=cover" /> 와 같이 viewport-fit: cover 로 셋팅한 웹뷰는, 기기 상단부터 하단까지 꽉 차게 페이지가 그려진다.

이 경우, 웹뷰를 단순히 100vh 로 셋팅하는 것이 아니라, 상하단의 기본 영역 (= safe area inset) 을 고려해야한다.
만약 웹뷰의 GNB 는 앱에서 렌더링하고, 내부 컨텐츠만 웹페이지를 사용하는 방식이라면 이 safe area inset 에 이 GNB 높이값도 포함된다.

<safe area inset 사용하는 방법 예시>
css 에서 env(safe-area-inset-top) 과 같이 값으로 사용할 수 있고, 아래와 같이 변수로 설정한후 변수를 사용하면 편리하다.

--sat: env(safe-area-inset-top);
--sab: env(safe-area-inset-bottom);
--sar: env(safe-area-inset-right);
--sal: env(safe-area-inset-left);

env(safe-area-inset) 플랫폼별 지원 여부는 MDN 문서 에서 확인할 수 있다.

<iOS Safe area 관련 문서들>

• Safe-Area(IOS 11 이상 대응하기)
• 예를 들어, iPhone 13 시리즈 기준 safe area 및 inset 크기는 이 링크에서 확인할 수 있다. iPhone 13 Screen Sizes

최종 해결방법

1. body 영역은 height: 100vh 로 설정후, padding-top: env(safe-area-inset-top) 만큼 적용하여, 상단의 상태바 및 앱의 GNB 영역을 제외한 순수 컨텐츠 영역부터 웹페이지가 보여지도록 했다.

2. 서비스 내에서 100vh 를 사용할 때는 100vh - env(safe-area-inset-top) 값을 사용하도록 셋팅했다.