# 모바일 확대 방지 설정 가이드

> **목적**: 모바일 웹에서 손가락 핀치/더블탭 확대 방지
> **상태**: 미적용 (사용자 접근성 우선)
> **적용 시점**: 필요 시 아래 설정 적용

---

## 1. Viewport 설정 (Next.js 15)

**파일**: `src/app/[locale]/layout.tsx`

### 1-1. import 추가

```tsx
import type { Metadata, Viewport } from "next";
```

### 1-2. viewport export 추가 (metadata 아래)

```tsx
// 📱 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 아래에 추가

```css
/* 📱 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 | 문서 작성, 설정 롤백 (접근성 우선) |