ios Safe Area : 앱 컨텐츠가 아이폰 노치와 겹친다면!!!!!

원래 나는 웹개발을 먼저 공부했는데 요새 하는 일 때문에 앵귤러와 같은 프레임워크를 활용해 하이브리드 앱을 열심히 만들어보는 중이다.

그런데 오늘 깜짝!!!놀란 일이 있었으니 ios빌드했더니 노치 영역에 내가 열심히 만들어둔 컨텐츠들이 겹치는게 아닌가!

 

찾아보니 컨텐츠가 디바이스의 다른 요소에 겹치거나 가려지지 않도록 '무적권 노출되는 것이 보장되는' 안전 영역 (Safe Area)이라는 개념이 있더라....

The Safe Area of an Interface. 출처: Apple Developer Docs(링크 하단)

 

애플 Docs 참고↓(Positioning Content Relative to the Safe Area)

Apple Developer Documentation

아무튼....

 

#wrap{
  width:100%;
  height: 100%;
  background-color: white;
  color: black;
  }

 

원래는 이랬었는데  

 

#wrap{
  width:100%;
  height: 100%;
  background-color: white;
  color: black;
  margin-top: env(safe-area-inset-top);
  margin-bottom: env(safe-area-inset-bottom);
}

 

이렇게 css를 수정해줬다!!!!!

 

그 결과 아래 사진처럼 콘텐츠가 상태바 부분이랑 겹치던게

 

아래처럼 정상적으로 출력된다.

 

참고로 저기 css에 env() 속성은 아이폰X에서 사용 가능상 속성이고, 하위 버전에 대응하기 위해서는 constant()를 사용해야 한다고 한다!!!!

 

프론트엔드는 참 귀찮다.