07374c826c
- claudedocs 폴더 구조 재정리: archive/sessions, guides/migration·mobile·universal-list, refactoring 분류 - 오래된 세션 컨텍스트/체크리스트 문서 정리 (아카이브 이동 또는 삭제) - AuthContext → authStore(Zustand) 전환 시작, RootProvider 간소화 - GenericCRUDDialog 공통 다이얼로그 컴포넌트 추가 - PermissionDialog 삭제 → GenericCRUDDialog로 대체 - RankDialog/TitleDialog GenericCRUDDialog 기반으로 리팩토링 - toast-utils.ts 삭제 (미사용) - fileDownload.ts 개선, excel-download.ts 정리 - menuStore/themeStore Zustand 셀렉터 최적화 - useColumnSettings/useTableColumnStore 기능 보강 - 세금계산서/견적/작업자화면/결재 등 소규모 개선 Co-Authored-By: Claude Opus 4.6 <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 | 문서 작성, 설정 롤백 (접근성 우선) |