ad493bcea6
- UniversalListPage/IntegratedListTemplateV2 컴포넌트 기능 개선 - 회계, HR, 건설, 고객센터, 결재, 설정 등 전체 리스트 컴포넌트 마이그레이션 - 테스트 페이지 및 미사용 API 라우트 정리 (board-test, order-management-test 등) - 미들웨어 토큰 갱신 로직 개선 - AuthenticatedLayout 구조 개선 - claudedocs 문서 업데이트 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2.6 KiB
2.6 KiB
모바일 확대 방지 설정 가이드
목적: 모바일 웹에서 손가락 핀치/더블탭 확대 방지 상태: 미적용 (사용자 접근성 우선) 적용 시점: 필요 시 아래 설정 적용
1. Viewport 설정 (Next.js 15)
파일: src/app/[locale]/layout.tsx
1-1. import 추가
import type { Metadata, Viewport } from "next";
1-2. viewport export 추가 (metadata 아래)
// 📱 Viewport 설정 - 모바일 확대 방지 + 100% 스케일 고정
export const viewport: Viewport = {
width: 'device-width',
initialScale: 1,
minimumScale: 1,
maximumScale: 1,
userScalable: false, // 손가락 확대 방지 (Android + iOS)
viewportFit: 'cover', // 아이폰 노치/다이나믹 아일랜드 대응
};
2. iOS Safari 자동 확대 방지 (CSS)
파일: src/app/globals.css
iOS Safari는 font-size가 16px 미만인 input에 포커스하면 자동으로 확대함.
viewport 설정만으로는 방지 안 됨.
2-1. @variant 아래에 추가
/* 📱 iOS Safari 자동 확대 방지
- iOS는 font-size 16px 미만 input 포커스 시 자동 확대
- 16px 이상으로 설정하면 확대 방지됨
*/
input,
select,
textarea {
font-size: 16px !important;
}
/* 터치 동작 최적화 - 더블탭 확대 방지 */
html {
touch-action: manipulation;
}
3. 설정별 효과
| 설정 | 효과 | 적용 위치 |
|---|---|---|
userScalable: false |
핀치 확대 방지 | layout.tsx |
maximumScale: 1 |
최대 100% 고정 | layout.tsx |
minimumScale: 1 |
최소 100% 고정 | layout.tsx |
viewportFit: 'cover' |
노치 영역 커버 | layout.tsx |
font-size: 16px |
iOS input 확대 방지 | globals.css |
touch-action: manipulation |
더블탭 확대 방지 | globals.css |
4. 적용 여부 결정 기준
적용 권장 상황
- 키오스크/POS 앱처럼 고정 레이아웃 필수
- 특정 인터랙션에서 확대가 UX를 방해하는 경우
미적용 권장 상황 (현재)
- 사용자 연령대가 높아 확대 기능 필요
- 접근성(A11y) 가이드라인 준수 필요
- 텍스트가 작은 영역이 있는 경우
5. 참고사항
- iOS Safari: viewport 설정만으로는 input 포커스 확대 방지 안 됨, CSS 필수
- Android Chrome: viewport 설정만으로 대부분 방지됨
- Next.js 15:
viewport는 별도 export로 분리 (metadata와 별개)
변경 이력
| 날짜 | 내용 |
|---|---|
| 2026-01-15 | 문서 작성, 설정 롤백 (접근성 우선) |