모바일 글쓰기 모달 키보드 이슈 해결기

이전 문제

/ 메인 화면에서 피드가 보이고, 그위에서 입력을 누르면 입력 모달이 뜹니다. 여기에서 에디터 창에서 입력을 하면 줌인 효과가 발생합니다. 그리고 키보드가 아래에 보이죠. 키보드를 내려도 줌인 효과는 사라지지 않기 때문에 입력 버튼을 누른다거나 글 입력을 취소하기 위해 화면 우측 상단의 X버튼을 누르거나 하는 것이 피곤해집니다. 화면을 줄여야 가능하죠.

이러한 문제를 해결하기 위한 해결 방법을 정리해봤습니다.

모바일에서 글쓰기 모달을 열었을 때 키보드가 올라왔다가 바로 사라지고,
X 버튼이 화면 밖으로 밀려 사라지는 문제가 발생했다.
이 글은 그 원인과 해결 과정을 정리한 해결기다.

1) 문제 상황

에디터를 터치하면 키보드가 잠깐 보였다가 즉시 사라짐 → 입력 불가
키보드가 올라오면 모달이 위로 밀리고 X 버튼이 안 보임
키보드를 내려도 모달이 “풀화면”으로 복귀되지 않아 사용성이 불편

특히 iPhone에서 증상이 심하게 나타났다.

2) 원인 분석

(1) 키보드 자동 내리기 훅이 즉시 blur 발생

모바일에서 스크롤 시 키보드를 내리는 훅을 사용 중이었는데,
이 훅이 터치/스크롤 이벤트를 감지해 input/textarea에 즉시 blur를 걸었다.
결과적으로 키보드가 올라오자마자 바로 내려가 버렸다.

(2) iOS Safari 자동 줌(Zoom-in) 문제

iOS Safari는 input/textarea의 폰트가 16px 미만이면 자동 확대한다.
에디터 textarea가 text-sm(14px)이어서,
키보드가 올라올 때 화면이 확대되고 X 버튼이 화면 밖으로 밀려났다.

(3) 모달 내부 스크롤 구조 문제

모달 전체가 스크롤되면서 헤더(X 버튼 포함)가 함께 밀렸다.
키보드가 열리는 순간 헤더가 상단으로 사라져 사용자가 닫기 버튼을 찾기 힘들었다.

3) 해결 방법

✅ 1. 키보드 자동 blur 훅 제거

글쓰기 폼에서 키보드 내리기 훅을 제거했다.
이로써 입력 즉시 키보드가 내려가는 문제가 사라졌다.

✅ 2. 모달 헤더 고정 + 본문만 스크롤

모달을 “헤더 고정 + 본문 스크롤” 구조로 바꿨다.

<Modal stickyHeader ...>
  ...
</Modal>

헤더가 항상 보이기 때문에 키보드가 떠도 X 버튼은 유지된다.

✅ 3. iOS 자동 확대 방지 (16px 폰트 유지)

모바일에서 에디터 폰트를 text-base로 올렸다.

className="text-base sm:text-sm"

이렇게 하면 iOS Safari 자동 줌이 발생하지 않아
키보드가 올라와도 화면이 확대되지 않는다.

✅ 4. safe-area 여백 + 키보드 닫힘 시 스크롤 복원

iPhone 노치 영역을 고려해 상단/하단 safe-area 여백을 추가하고,
키보드가 내려갈 때 모달 스크롤을 자동으로 상단으로 복원했다.

resetScrollOnKeyboardHide

4) 결과

키보드가 더 이상 “올라왔다가 바로 사라지지 않음”
X 버튼이 항상 상단에 고정되어 접근 가능
키보드가 내려가면 모달이 정상 풀화면으로 복귀

모바일 UX가 크게 개선됐다.

5) 체크리스트 (향후 재발 방지용)

모바일 input/textarea는 폰트 16px 이상
모달은 헤더 고정 / 본문 스크롤 구조
iPhone safe-area 여백 반영
키보드 내리기 훅은 “해당 화면에서만” 제한적으로 사용

위와 같은 방법으로 다음과 같이 개선되었습니다. 내용을 입력하고 키보드를 내려도 이젠 화면에 꽉차게 모달 화면이 잘보입니다. X를 누르던지 저장버튼을 누르든지 하면 됩니다.