문제점
한 달만에 서비스를 완성하고 배포를 완료하는 것을 목표로 개발을 시작했기 때문에 웹앱을 반응형으로 제작하는 것은 일찌감치 포기한 상태였다. 따라서 디자인 파트에서 넘겨준 width와 height 대로 넓이 375px, 높이 812px로 고정하여 개발을 진행하기 시작했다.. (절대 이랬으면 안되었다.. ) 아이폰 11기준 화면크기라고 전달해 들었는데 배포 후에 아이폰 11에서 보니 넓이도 양옆으로 맞지 않고 높이도 이상하게 넘치는 현상이 발생했다. 넓이를 변형하게 된다면 내부의 컴포넌트 크기까지 다 조정해야해서 이는 어느정도 현실에 타협하고 넓이를 조정하는 일은 포기했다. 그러나 높이같은 경우는 navbar가 보이지 않는다면 너무나 유저에게 불친절한 서비스가 될 수 있기 때문에 이것만큼은 양보할 수가 없었다. (하단의 사진을 보면 얼마나 짜증나는 현상인지 알 수 있어요...) 높이 픽셀을 줄이며 navbar가 보일 때까지 조정하던 와중에 웹앱의 높이를 이렇게 멍청하게 조정하는 것이 맞나...?라는 의문이 들어 해결법을 찾아봤다.
해결법
const Wrapper = styled.div`
width: 375px;
height: 100vh;
@supports (-webkit-touch-callout: none) {
height: -webkit-fill-available;
}모든 페이지에 적용한 AppLayOut.tsx 컴포넌트의 height를 위와 같이 변경해주었다. 보통 height를 100vh로 설정해주면 높이를 화면 크기에 맞춰 꽉 채워준다. 보통 우리의 상식상 vh라고 하면 보이는 화면 자체의 사이즈를 100으로 나눈 값이라고 생각하지만 모바일 사파리에서는 주소창이 뜨는 하단바까지 다 포함하여 화면 크기 값으로 표현한다고 한다.. 그래서 vh로 설정해도 화면 하단에 주소창 때문에 navbar가 보이지 않는 현상이 발생했던 것이다... (왜죠,,,,,?)
height: -webkit-fill-available; 은 지원하지 않는 데스크탑 브라우저들이 있기 때문에 -webkit-fill-available를 iOS 환경에만 적용되도록 @supports (-webkit-touch-callout: none) { height: -webkit-fill-available; }과 같이 작성해주었다.
navbar 같은 경우 812px로 높이를 고정해서 개발을 진행할 때에는 높이에서 navbar 높이를 뺀 top에 fixed 속성을 설정해주었었는데
(왜 이렇게 멍청하게 설정했던 거지 왜,,,,왜,,,,)
const NavContainer = styled.div`
z-index: 3;
width: 343px;
&.fixed {
position: fixed;
bottom: 0px;
}
`;height를 위와 같이 변형하고 나서는 코드와 같이 bottom값을 0으로 지정해주었다.
하단에 고정이 필요했던 button이나 navbar는 모두 위와 같이 문제를 해결할 수 있었다.
사파리 화면
크롬 화면
코드를 변경해주니 크롬과 사파리에서 모두 속 시원하게 navbar가 잘보이는 것을 확인할 수 있었다.
