mobile-bottom-area-guide.md - AI프롬프트 전용

mobile-bottom-area-guide.md 12.4 KiB

개요

모바일 브라우저에서 발생하는 주요 문제들:

• 동적 주소창: 스크롤 시 주소창이 나타나고 사라지면서 viewport 높이가 변경됨

• Safe Area: iOS notch, Android 제스처 바 등 시스템 UI가 앱 컨텐츠를 가림

• 100vh 문제: CSS 100vh는 주소창을 포함한 높이로 계산되어 실제 보이는 영역보다 큼

이 가이드는 위 문제들을 해결하는 3가지 핵심 기법을 제공합니다.

🎯 핵심 기법 요약

📐 기법 1: JavaScript visualViewport API

원리

모바일 브라우저의 실제 사용 가능한 viewport 높이를 JavaScript로 계산하여 CSS 변수에 저장합니다.

구현 코드

CSS에서 사용

장점

• 가장 정확한 높이 계산

• 주소창 표시/숨김 실시간 대응

• 모든 모바일 브라우저에서 동작 (fallback 포함)

🎨 기법 2: CSS dvh 단위 + Fallback 전략

원리

CSS의 새로운 viewport 단위인 dvh (Dynamic Viewport Height)를 사용하고, 구형 브라우저를 위한 fallback을 제공합니다.

3단계 Cascade 전략

dvh vs vh 비교

React/Vue 컴포넌트에서 사용

🛡️ 기법 3: Safe Area Inset 처리

원리

iOS notch, Android 제스처 바 등 시스템 UI 영역을 env() 함수로 감지하여 UI 요소가 가려지지 않도록 합니다.

1단계: viewport-fit 설정

viewport-fit=cover: safe-area-inset 환경 변수를 활성화합니다.

2단계: 하단 UI 요소 보호

Tailwind CSS 사용 예시

일반 CSS 사용 예시

모든 Safe Area Inset 변수

🔧 통합 적용 가이드

Step 1: HTML 설정

Step 2: CSS 기본 설정

Step 3: JavaScript 초기화

Step 4: 컴포넌트 적용 예시

📱 실전 예시: 다양한 Bottom UI 패턴

1. 고정 하단 버튼

2. Floating Action Button (FAB)

3. Bottom Sheet

4. Sticky Footer with Content

🌐 브라우저 호환성

visualViewport API

• ✅ iOS Safari 13+

• ✅ Chrome 61+

• ✅ Firefox 91+

• ✅ Samsung Internet 8.0+

• ❌ IE (fallback 필요)

CSS dvh 단위

• ✅ iOS Safari 15.4+

• ✅ Chrome 108+

• ✅ Firefox 110+

• ✅ Samsung Internet 21+

safe-area-inset

• ✅ iOS Safari 11.0+ (notch 대응)

• ✅ Chrome 69+ (Android)

• ✅ Samsung Internet 10.0+

⚠️ 주의사항 및 팁

1. 성능 최적화

2. SSR/SSG 환경

3. iOS Safari 특이사항

• iOS Safari는 주소창이 사라질 때 resize 이벤트가 발생하지 않을 수 있음

• visualViewport 이벤트를 반드시 함께 사용할 것

• orientationchange 이벤트도 필수

4. 테스트 방법

🎁 Bonus: TypeScript 타입 정의

📚 참고 자료

• MDN - Visual Viewport API

• MDN - CSS env()

• W3C - CSS Values and Units Level 4 (dvh)

• WebKit Blog - Designing Websites for iPhone X