크로스브라우징(Cross Browsing) - iOS 환경에서 키보드가 화면을 가리는 문제 해결

문제 상황

AutoWini 클레임 프로젝트를 개발하면서 React 프로젝트를 통해 웹, 모바일, 앱에서 채팅 UI가 모두 잘 작동하도록 반응형 웹을 구현해야 했습니다. 대부분의 환경에서는 문제가 발생하지 않았지만, iOS 환경에서는 input이나 textarea를 통해 글자를 입력할 때 키보드가 올라오면서 화면의 너비를 인식하지 못해 키보드에 화면이 가려지는 문제가 발생했습니다.

 

예시 이미지

 

문제 해결

이 문제를 해결하기 위해 CSS와 JavaScript를 사용하여 화면의 높이가 변할 때 동적으로 vh(viewport height) 값을 재설정하는 방법을 사용했습니다. 구체적인 코드는 다음과 같습니다.

/* css */
#viewContainer {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
}

/* main.tsx */
useEffect(() => {
    const resizeListener = () => {
    const vh = window.innerHeight * 0.01
	document.documentElement.style.setProperty('--vh', vhpx);
	};

    resizeListener();

    window.addEventListener('resize', resizeListener);
    return () => {
    window.removeEventListener('resize', resizeListener);
    };
}, []);

 

문제를 해결하기 위해 참고한 글

https://icksw.tistory.com/87

[iOS 앱개발] 키보드가 화면을 가릴 때 해결방법! (NotificationCenter)

 

앞으로의 목표 WebView와 Native 두 마리 토끼를 잡기 위해 React Native를 학습할 생각입니다.

https://toss.tech/article/react-native-2024

토스가 꿈꾸는 React Native 기술의 미래