키패드는 죄가 없는걸요
1. 문제의 발단
- chatGPT의 도입으로, 서비스에 대화형 인공지능 기능을 개발했다.
- 개발은 그리 어렵지 않았다.(사실 백엔드 처리가 주요 이슈였기 때문에 에러 응답 처리 및 로딩 애니메이션, 유저 인터렉션, 컴포넌트 구현중 레이아웃 흐트러짐등 정도만 하면 되는 일이었다.)
- 하지만 생각지도 못 한 복병이 있었다. 모바일 환경에서 대화를 위한 모바일 키패드가 화면을 절반 이상 가려버렸다.
2. 환경 세팅
- 먼저, 개발 환경의 PC 상황에서는 키패드를 열 수 조차 없었다.
- 하지만 검색결과 Nexus5, Nexus5X 기기에서는 완벽하진 않아도 적당히 열 수 있는 방법이 있다고 했다.
'크기' 옆의 기기 종류를 눌러 추가 시켜주고, 가장 오른쪽의 기기 회전 아이콘에서 키보드로 바꿔주면 된다.
이렇게 다 열린다. 물론 보이는 화면은 매우 작다.
3. 어떻게 처리 할 것인가?
- 내용이 들어갈 공간을 window.innerHeight로 잡고 스크롤을 만들어 준다.
import React, { useState } from 'react';
const Container = () => {
// state로 innerHeight를 잡아 줬다.
const [innerHeight, setInnerHeight] = useState(0);
// innerHeight가 바뀔경우 다시 계산한다.
useEffect(() => {
setInnerHeight(window.innerHeight);
}, [window.innerHeight]);
// 위 헤더나, 푸터가 있을경우 innerHeight - 여분의 사이즈로 맞출 수 도 있다.
return (
<div className={tw`h-[${window.innerHeight}px]`}>
<div className={tw`h-[${innerHeight}px])`}>뭔가 굉장히 길어질 수 있는 컨텐츠</div>
</div>
)
}
4. 여담
- 위의 코드는 예시일 뿐이라 리소스 낭비가 심하다. useEffect에 timeout으로 유저의 동작이 멈췄을 경우만 innerHeight를 계산하는 방식이 옳을 것이다.
- useMemo를 이용하는 방법도 생각해 봤는데, 스크롤은 변화가 심해서 더 낭비일 것이다.
- 프로젝트 초기 세팅이 twind라서 그 기반으로 예시 코드를 작성했다. 해석에는 문제가 없을 것이다. (사실 질문 환영)
- 확실한 것은 다 구현이후, 올바르게 동작하는 것은 확인했지만, 처음부터 모바일 구성이 기획에 없었어서 급하게 사이즈만 줄여 넣자 라고 아쉽게 구현되었다. 처음에는 상단 헤더 또한 큰 사이즈를 차지해 곤란한 상황. 부랴부랴 맞춰 넣은 감이 없지 않다.