[Vue3]안드로이드 키보드 스크롤 관련 이슈 1부
주니어 개발자의 고분분투기(1)
안녕하세요 Heegun입니다.
금번 글은 안드로이드에서 발생된 이슈와 이를 분석 및 해결하는 과정을 담은 글입니다.
안드로이드 환경에서 채팅 기능을 구현하기 위한 과정에서
postion:fixed로 하단에 고정해 둔 Input이 스크롤 시 같이 올라오지 않는 현상이 발생했습니다.
구현 코드입니다.
스크롤 기능 구현은 아래 포스트를 참고하여 작업하였습니다.
https://channel.io/ko/blog/cross_browsing_ios15
이제 발생한 문제에 대해 확인해보겠습니다.
문제정의
첫번째 화면에서 Chatting input을 focus하여 키보드를 열고 상단으로 스크롤 하면
Chatting input을 두고 올라오는 현상이 발생한것입니다.
문제는 여기서 그치지 않았습니다.
위의 화면은 삼성 인터넷 브라우저에서 실행했을 때 현상입니다.
Chatting input이 정상적으로 같이 올라오는 것을 볼 수 있습니다.
같은 코드인데 왜 삼성 인터넷 브라우저에서는 정상적으로 작동되는것일까요?
이는 각 브라우저마다 모바일에서 키보드가 열렸을 때 Document와 Viewport를 처리하는 방법이 다르기 때문에 발생하는 문제입니다.
(화면에 ~ms가 써있는 chip은 Nuxt프로젝트를 모바일에서 실행했을 때 생성되는 dev tool입니다. 무시하셔도 됩니다.)
Viewport
이 Viewport(뷰포트)가 무엇인지 알아보겠습니다.
뷰포트는 사용자에게 보이는 화면 정보에 대한 객체입니다.
이는 사용자의 스크롤 등 사용자의 행동에 따라 크기가 달라집니다.
당연히 키보드의 유무에 따라 상태가 달라집니다. 말 그대로 사용자에게 보이는 화면의 크기에 대한 정보를 갖기 때문이죠.
따라서 Document 객체의 정보와는 다른 그것을 가집니다.
Chrome 브라우저에서는 키보드가 열렸을 때 브라우저 창의 크기를 뷰포트의 크기로 줄이는 것이 아닌, Document 문서 자체를 키보드의 높이 만큼 위로 밀어내서 키보드의 공간을 확보합니다.
그런데 이 input에 부여된 속성인 position:fixed는 뷰포트가 아닌 document 객체를 기준으로 위치를 지정해줍니다. 그러므로 상단으로 스크롤 하면 document 객체를 기준으로 하단에 고정되어 있던 input이 밑에 남는 현상이 발생하게 되는 것이였습니다.
그와 다르게
삼성인터넷 브라우저는 키보드가 열리게 되면 document객체의 높이 자체를 뷰포트만큼 줄여버립니다.
따라서 document 기준으로 하단에 고정되어있는 chatting input이 스크롤의 이동에 따라 함께 올라오게 되는 것입니다.
Chrome 브라우저노란색으로 둘러 쌓여있는 부분이 Document 객체의 크기입니다.
빨간색은 Chatting input으로 document 객체를 기준으로 하단에 고정되어 있으며
초록색과 빨간색을 합친 것이 뷰포트 영역을 표시한 것입니다.
① 의 화면이 초기 화면 상태입니다.
이 상태에서 Chatting input을 터치하면 키보드가 열려 ②의 화면이 됩니다.
이때 Chrome 브라우저는 document 객체 자체를 밀어내며 뷰포트의 영역 크기를 줄여버립니다.
여기서 상단으로 스크롤 하게되면 wrapper div 영역이 아니라 외부인 document 객체를 스크롤 하게 되어 document 객체의 윗 부분을 보게 되는것입니다.
따라서 document 기준으로 하단에 고정되어 있던 chatting input은 아래 남게됩니다.
반면에,
삼성 인터넷 브라우저삼성 인터넷의 경우 document 객체 높이 자체를 뷰포트의 높이 만큼으로 줄여서 키보드의 공간을 확보합니다. 따라서 스크롤이 이동함에 따라 Chatting input이 제대로 하단에 붙여서 따라오게 되는 것입니다.
이를 해결하기 위해 우선적으로 각 브라우저 별 document 와 뷰포트의 높이를 확인하고자 하였습니다.
브라우저 별 Document & Viewport 높이 확인
위의 함수를 통해 순서대로 키보드가 열려 있을 때의 Document 객체의 높이, 뷰포트의 높이를 확인할 수 있습니다. 각 브라우저에서 실행해보겠습니다.
각 브라우저 별 뷰포트 크기가 다른 것은 브라우저 툴바 등에 의한 것이기에 무시해도 됩니다.
주목할만한 것은 Chrome 브라우저의 경우 키보드가 열렸을 때에도 document 객체의 높이가 뷰포트의 높이 변화와 무관하게 그대로인 것을 볼 수 있었습니다.
반면 삼성 인터넷 브라우저의 경우 단위만 다를 뿐, document와 뷰포트의 높이가 같아지게 됩니다.
이 이슈를 해결하기 위해 먼저 떠올린 방법은 document 객체의 높이를 viewport의 높이만큼 직접 줄여주는 것이였습니다.
하지만 이 방법은 불가능합니다.
document 객체의 속성 자체를 수정하는 것이 불가능 하기 때문입니다.
주니어 개발자가 어떻게 이를 해결했는지에 관해서는
다음 글에 이어서 소개해드리겠습니다.
©2023 thecompass. All rights reserved
