안녕하세요! 레미입니다.
4년전 작업했던 앱에서 본문을 스크롤링하면 상태바와 홈버튼 영역에 컨텐츠가
그대로 노출되는 이슈가 발생하였습니다. 홈버튼 영역의 경우 스크롤링을 하지 않아도 화면 로드시 컨텐츠가 노출이
되어 하단 버튼이 붕 - 떠보이는 현상이 있었습니다.
해당 앱은 특정 서비스가 메뉴로서 들어간 화면이었습니다. 그래서 다른 메뉴의 화면은 정상적으로 표현되나,
저희 화면만 문제가 있어서 해결하는데 좀 더 집중한 작업입니다.
그래서 기록차 글로 남겨봅니다.
1차 테스트
01정상적으로 표현되는 다른 화면과의 차이점 찾기
- safe area 이슈를 구글링하면, meta viewport 태그에 "viewport-fit:cover" 속성을 추가하라는 글을 찾을 수 있습니다. head 태그도 따로 관리가 되고 있었기 때문에 먼저 확인해 보았습니다. 허나, 다른 화면은 위 속성이 없었습니다.
- css의 차이점을 찾아보았습니다. 헤더 영역 고정 형태가 달랐습니다.
저희 헤더는 비고정이었고, 다른 화면은 고정이었습니다. 이 부분은 고정해달라는 요청도 함께 받은 상태였습니다.
02차이점 맞추기 및 테스트
- 헤더 영역을 고정 형태로 바꾸었고, "viewport-fit:cover" 속성을 추가한 뒤 관련 css 속성을 추가 해보았습니다.
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>// iOS 11.0 버전
constant(safe-area-inset-top)
constant(safe-area-inset-right)
constant(safe-area-inset-bottom)
constant(safe-area-inset-left)
// iOS 11.2 이상
env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left)
/* 위 속성만 넣어도 기본 padding 값이 있어서 늘어납니다. 값을 더 추가하면 기본값 + 더한값 표현 됩니다.*/
.header {
padding: 0 0 calc(constant(safe-area-inset-top) + 5px);
padding: 0 0 calc(env(safe-area-inset-top) + 5px);
}
.footer {
padding: 0 0 calc(constant(safe-area-inset-bottom));
padding: 0 0 calc(env(safe-area-inset-bottom));
}
해결은 되었으나, 저희가 원하는 방향이 아니였습니다.
위 방법으로는 헤더, 푸터 영역이 그대로 확장되는 방식이었습니다.
위 방법에서 조금 더 나아가서 생각한 방법도 시도 해보았습니다.
확장되는 형태라면 header에 검정색 배경을 깔고, header inner 태그에 header 스타일을 넣는건데요.
이것도 실패였습니다. 흡.
첫 화면 로드했을때는 성공한 듯 했지만, 스크롤링하니 여전히 컨텐츠가 노출되더라구요..
확장되는 형태의 앱들도 요즘 많이 보입니다. 하지만, 다른 화면과 일관성있는 view를 제공해야하기 때문에
다른 방법을 찾아야만 했습니다.
해당건을 요청한 개발자분들이 프로젝트지에 계셨고, 테스트 폰도 없는 상태셨기 때문에.
직접 프로젝트지에 테스트폰을 가지고 방문했습니다.
2차 test(방문) -> 이슈 해결
- 서로 떨어져 있는 상태에서 커뮤니케이션 하는것은 매번 해도 어려운 것 같습니다. 열심히 노력해도 서로 전달하고싶은 바를 100% 충족한다는건 쉽지 않더라구요. 그래서 테스트폰을 가지고 지원을 갔습니다.
1차에서 했던 test를 전부 다시 해보기로 했습니다.
01정상적으로 표현되는 다른 화면과의 차이점 찾기
- css의 차이점을 찾아보았습니다. 여기서 큰 차이점을 발견했습니다!! 아래 표를 보시죠.
| 같은점 | 차이점 | |
| 저희 화면 | 헤더 고정 | - 컨테이너 영역 높이 100% - 헤더 높이 만큼 padding-top으로 밀기 |
| 다른 화면 | 헤더 고정 | - 컨테이너 영역 높이 100% - 컨테이너 자제를 position:absolute한 뒤, 헤더 높이 만큼 top값을 부여 |
저희는 헤더를 고정한 뒤, 컨테이너 영역을 padding-top으로 헤더 영역에서 밀어냈고,
다른 화면은 position을 이용해서 밀어냈습니다. 아예 시작점을 밀어낸 것이죠.
margin-top 값으로 처리해도 가능합니다.
padding으로 밀게 되면 밀리긴 하나, 기본적으로는 컨테이너가 늘어나는 것이기에 height:100% + padding-top 값으로 인해 100% 이상이 되어서 상태바와 홈버튼 영역까지 확장된 것이 아닐까 생각해봅니다.
02차이점 맞추기 및 테스트
- 위에서 찾은 방법대로 컨테이너 영역에 아래와 같은 값을 부여 하였습니다.
.container {
position:absolute;
top:50px;/* 헤더 높이 값을 넣어주세요. */
left:0;
right:0;
bottom:0;
height:100%;
}홈버튼 영역의 경우 bottom:0; 으로 지정하면 됩니다. 여기서 조금 더 신경써야 하는 부분은 footer 영역이 비고정일 경우는 상관 없지만, 고정일 경우 컨테이너 하단 항목 일부가 잘려보일 수 있습니다.
그래서 컨테이너 하단에 padding-bottom값을 적당히 넣어서 밀어주어야 잘 표현될거에요.
한 앱에 footer 항목 고정/비고정이 동시에 존재할 경우엔 최상위 부모 태그에 화면별 클래스를 부여하여 padding-bottom 값을 조정해주면 됩니다.
*** 결론적으로 저는 스타일 조정으로 위 상황을 해결 했지만, 앱 개발 프레임워크(저희는 모피어스를 사용했습니다.)
최신 업데이트 버전에선 padding, margin, position 무엇을 넣든 상관없이 safearea 관련 함수를 사용해서 컨트롤하면 쉽게 해결됩니다. 위 이슈는 업데이트를 받지 못한 구 버전 프레임워크를 사용하여 생긴 문제였습니다.
본사의 다른 앱을 통해 테스트해본 후에 알게되었어요.
인터넷이 불가한 프로젝트지에서 바로 최신 버전으로 업데이트하는 것은 어렵기 때문에 추후 가능한 방법을 찾아봐야겠습니다.
결론적으로 보면 간단한 문제였지만, 해결하는 과정에서 얻게된 ios safe area에 대한 지식과 개발자분과의 소통 경험만으로도 의미있는 작업이었다고 생각합니다.
* Jae-seong, Jeong 님의 아이폰 목업 (https://dribbble.com/shots/3803481--FREE-iPhone-X-Mockup) 을 사용하여 본문의 예시 이미지를 만들었습니다.