📱 버튼 어디갔니...?
1. 문제 상황
1차 MVP 개발을 마친 후, 데모데이를 1일 남기고 모바일 Safari 브라우저에서 absolute로 고정한 하단 버튼이 주소창에 가려져 스크롤을 해야만 보이는 현상을 알게 됐다. PC에서는 문제없이 잘 보이더니.. 쓸데 없는 스크롤이 생겨버렸다 😫
우리 서비스는 모바일을 기준으로 개발되었고, 모바일에서 Safari의 브라우저 점유율이 2위였기에 이 문제는 꼭 해결해야겠다고 생각했다..! (스크롤해야 버튼을 누를 수 있는건 너무 불편하잖아)
출처: statcounter
2. 문제 원인
문제의 원인은 아래와 같이 height를 고정해두었기 때문이었다.
<div
className={`flex-grow ${bgColor}`}
style={{ height: "calc(100vh - 56px)" }}
>
{children}
</div>vh (Viewport Height)란?
1vh는 뷰포트(브라우저 창)의 높이의 1%를 의미한다.
하지만, 모바일 Safari 브라우저의 경우, 주소창과 툴바가 화면 위에 고정되어 있어서 화면을 스크롤할 때 그 크기를 제외한 실제 높이를 반영하지 않는다. 즉, vh를 사용할 경우 브라우저 툴바를 포함한 전체 뷰포트 높이가 적용되기 때문에 실제로 보여지는 콘텐츠 영역이 vh 값으로 계산된 것보다 작아 보이는 이유로 발생한 문제임을 확인할 수 있었다.
3. 문제 해결
💡그렇다면 svh (Small Viewport Height)는 무엇일까?
svh는 실제 사용자 화면에서 보이는 콘텐츠 영역의 높이에 해당한다. 즉, 브라우저 툴바나 주소창을 제외한 실제로 보여지는 영역만을 기준으로 뷰포트 높이를 계산한다고 한다.
모바일 Safari에서는 svh를 사용하면 주소창이나 툴바를 제외한 진짜 콘텐츠 영역만을 기준으로 계산되므로, 예상대로 화면을 띄울 수 있다.
따라서, 상단 Header를 제외하고 실제 사용자가 보이는 영역만큼 height를 설정할 수 있었고....
⭐ 짜잔. 버튼이 가려지지 않고 잘 보였다. 휴..
마치며,
이번 문제를 해결하며 처음으로 svh 단위를 알게 되었다. svh는 주소창이나 툴바 등으로 인해 동적으로 변하는 뷰포트 높이를 정확하게 측정할 수 있어서 모바일 환경에서 사용자 경험을 더 잘 개선할 수 있다는 걸 깨달았다.
또한, svh 이외에도 lvh (Large Viewport Height)도 있다는 걸 알게 되었는데, 이런 단위들은 다양한 화면 크기와 브라우저 환경에서 뷰포트 크기를 제대로 다룰 수 있도록 도와주어 반응형 웹 디자인을 구현할 때 특히 유용할 것 같다!
이번 경험을 통해 일관된 사용자 경험을 제공하려면 다양한 화면 크기와 해상도, 브라우저 환경에서 뷰포트 크기나 레이아웃이 정확하게 적용되어야 하기 때문에 단위 계산이 얼마나 중요한지 다시 한 번 느꼈고, 앞으로도 다양한 환경에서 일관된 사용자 경험을 제공할 수 있도록 이런 뷰포트 단위와 CSS 특성들을 더욱 주의깊게 살펴봐야겠다! 🧠👁️
