개요
반응형 디자인으로 제작한 웹을 배포하였다. ChatGPT와 같은 인공지능 채팅 서비스로, 사용자가 원하는 변수명을 추천해주는 기능을 가지고 있다. 사용자의 스크롤 위치가 어디든 항상 하단 고정을 해야 했다.
문제 상황
웹사이트에서는 마우스 휠로 화면을 스크롤하는 반면, 모바일에서는 사용자가 손가락으로 화면을 터치하여 위아래로 이동하는 차이가 있다. 문제는 모바일 브라우저에서 발생했다. 브라우저 스크롤이 최하단에 도달했을 때, 사용자가 화면을 아래로 더 내리면 브라우저 창 아래에 공백이 생기고, 이로 인해 브라우저가 위로 올라가는 것처럼 보인다. 이 상황에서 하단에 고정되어 있는 입력 폼이 브라우저 바깥의 공백 부분에 위치하게 되는데, 이는 사용자 경험(UX)에 부정적인 영향을 미칠 수 있다고 생각했다.
원인
원인은 입력폼을
postion: fixed;
bottom: 0;으로 하단 고정하였기 때문이었다. position: fixed; 속성은 해당 요소를 문서의 흐름에서 제거하고 부모 요소와의 관계를 무시하게 만든다. 이러한 특성 때문에, 모바일 브라우저가 최하단을 넘어 공백이 생겼을 때, 입력 폼 컴포넌트가 브라우저를 넘어서 모바일 화면 자체의 하단에 고정되어 있었던 것이다.
해결 과정
부모 요소에
position: relative;
height: 100vh;를 부여하고,
해당 요소에
position: absolute;
bottom: 0;로 수정함으로 간단하게 해결 할 수 있었다.
결론
이 문제를 해결하는 과정에서, 모바일 환경에서의 웹 개발의 복잡성과 중요성을 다시금 깨닫게 되었다. position: fixed의 사용은 편리하지만, 모바일 브라우저의 특정 동작에는 예기치 않은 문제를 야기할 수 있음을 보여줍준다. 모바일 환경에서의 스크롤 동작과 브라우저 인터페이스의 상호작용은 데스크톱 환경과 다르기 때문에, 이에 대한 충분한 이해와 테스트가 필요할 것이다.
