앞으로의 방향

모바일 화면은 작고 그 작은 공간 안에서 UI가 의도대로 보이지 않는 경우가 많아요. 키보드에 요소가 가려지고, 기기마다 다른 SafeArea가 다르고, 브라우저가 보여주는 viewport와 사용자가 실제로 보는 영역의 차이가 빈번하게 발생해요.

문제: 모바일 화면에서 불안정한 UI

모바일 기기에서 사용자가 화면에서 보는 것과 개발자가 기대하는 것이 항상 일치하지는 않아요. 흔히 마주치는 상황들을 살펴볼게요:

키보드가 입력 필드를 가리는 경우: 사용자가 텍스트 입력 필드를 탭하면 온스크린 키보드가 올라오면서, 입력 필드나 하단에 고정된 제출 버튼을 완전히 가릴 수 있어요.
안전 영역의 불일치: 노치, 둥근 모서리, 홈 인디케이터(아이폰 하단 바 등)가 있는 기기에는 콘텐츠를 배치하면 안 되는 예약 영역이 있어요. 하지만 이 영역은 기기와 OS 버전마다 달라요.
뷰포트 혼란: 브라우저의 레이아웃 뷰포트와 실제 보이는 영역(비주얼 뷰포트)은 크게 다를 수 있어요. 특히 키보드가 열려 있거나 페이지가 확대된 경우에 position: fixed 요소가 예상치 못한 위치에 나타날 수 있어요.

이런 문제들은 특정 OS나 기기에 국한되지 않아요. iOS Safari든 Android Chrome이든, 어떤 모바일 브라우저든 근본적인 문제는 같아요: 보이는 영역이 예측 불가능하고, 표준 CSS만으로는 이를 안정적으로 처리할 수 없다는 것이에요.

우리의 접근: 비주얼 뷰포트에 집중

@react-simplikit/mobile은 이러한 문제들을 해결하기 위해 명확한 접근 방식을 취해요. 브라우저의 특이한 동작을 불안정한 우회 방법으로 처리하는 대신, 비주얼 뷰포트(Visual Viewport) — 사용자가 특정 순간에 실제로 볼 수 있는 화면 영역 — 를 중심으로 설계해요.

Visual Viewport API를 기반으로, 다음과 같은 훅들을 제공해요:

키보드 출현을 감지하고 대응하여 하단 고정 요소가 자연스럽게 비켜나도록 해요.
안전 영역 인셋을 읽어 노치, 홈 인디케이터 등 기기별 예약 영역을 올바르게 처리해요.
실제 보이는 영역을 추적하여 브라우저의 레이아웃 엔진이 가정하는 것이 아닌, 사용자가 실제로 보는 것을 기반으로 레이아웃을 결정할 수 있게 해요.

목표는 단순해요: 비주얼 뷰포트 안에서 UI가 안정적이고 예측 가능하게 렌더링되도록 하는 것이에요.

크로스 플랫폼, 크로스 디바이스

특정 OS나 기기 모델에 국한되고 싶지 않아요. 모바일 웹은 본질적으로 크로스 플랫폼이고, @react-simplikit/mobile은 이를 지향해요.

우리의 훅들은 다음 환경에서 일관되게 동작하도록 설계되었어요:

iOS와 Android — 두 가지 주요 모바일 플랫폼.
다양한 브라우저 — Safari, Chrome, Samsung Internet 등.
다양한 기기 폼 팩터 — 소형 폰부터 대형 화면 기기까지, 노치나 홈 인디케이터의 유무에 관계없이.

특정 API를 사용할 수 없는 환경(예: 구형 브라우저의 window.visualViewport)에서는 UI가 깨지지 않도록 안전한 폴백을 제공해요.