아이폰 노치 환경에서의 웹 개발 - viewport-fit, safe-area-inset-*

처음 보는 코드가 있어도 오.. 이건 뭐람? 하고 막상 내 일로 닥치기 전까진 절대 찾아보지 않음.

그리고 오늘 닥쳤음.

노치 디자인이 적용되던 날... 많은 웹뷰 개발자들은 눈물 흘렸다...

대략적인 설명은 웹킷 공식 홈페이지에 잘 나와있다. 벗 웹킷 홈페이지 있는지 오늘 처음 알았음 ^^

The section below about safe area insets was updated on Oct 31, 2017 to reflect changes in the iOS 11.2 beta.

webkit.org

2017년 글 지금 읽기... 잘한다 잘해.

아이폰 X부터 사파리 브라우저에서 노치 디자인의 아이폰인 경우 콘텐츠를 노치 영역을 제외하고 여백을 두고 표시하도록 자동 삽입 처리해서 이런 식으로 렌더링이 된다고 함. 저렇게 못생기게 만들어놓고 여백은 기본 배경색을 따르기 때문에 대부분의 웹사이트에서는 문제없이 처리됩니다.라고 말하는 게 어이가 없음. 니들 눈엔 저게 문제없어 보여?

그래서 노치 영역까지 풀로 채워서 렌더링 하기 위해서는 메타태그 viewport-fit 프로퍼티 값을 cover로 지정해 줘야 한다고 함.

이렇게

그럼 이제 콘텐츠가 다시 노치랑 충돌함.

그래서! 노치를 피하기 위해서는 콘텐츠 영역을 어떻게 잡아야 하는가, 여기에서 쓰이는 게 env(safe-area-inset-*)라고 한다.

env는 css 함수로 var()와 유사하지만 사용자 정의 변수가 아닌 user-agent에 따라 알아서 정의되는 값이라는 게 차이점. (자세한 MDN 참고하시고)

The env() CSS function can be used to insert the value of a user-agent defined environment variable into your CSS, in a similar fashion to the var() function and custom properties. The difference is that, as well as being user-agent defined rather than author-defined, environment variables are globa...

developer.mozilla.org

그래서 viewport-fit=cover를 사용하는 경우 env 함수의 인자로 safe-area-inset-*을 써서 패딩이든 마진이든 알아서 띄워주는 처리가 필요함. (아니면 고객님들의 역정을 들을 수 있음)

이런 식으로.

- env 함수 두 번째 인자로 값을 넣으면 첫 번째 인자를 지원하지 않는 경우의 fallback 값이 된다.

- ios11까지는 env 대신 constant로 제공됐지만 fallback이 필요한 것 아닌 이상 env 사용을 권고.

내가 추적하고 있는 문제는 아이폰 & 크롬 디바이스에서 실행할 때만 버튼 위치가 바뀌는 이슈인데 코드 뒤져보니 크롬 브라우저일 때만 값을 오버라이딩 하는 코드가 있더라고. 아무래도 이게 아이폰이 노치 디자인과 함께 사파리 업데이트하면서 다른 브라우저 알 게 뭐임 낼름 사파리부터 지원하니까 크롬의 경우 fallback처럼 수동으로 노치값을 넣어준 것으로.. 추측된다. 약 3년 전에 쓰인 코드니까.. 가능성 있어... 아무튼 내 생각에 지금은 그냥 날려도 되는 코드 같은데 아무도 확답을 못 줘서 못 날리고 있음... 어쩌란 말인가 트위스트 추면서...

아무튼 css 파일 열 때 가끔 env(safe-area-inset-*) 얘네랑 눈 마주치면 피해 다녔는데... 이번 기회로 강제로 뭔지 찾아보게 됐네. 아휴 지겨웡 ( ◠‿◠ )