# POP 반응형 디자인 가이드

## 쉬운 요약

### 핵심 원칙: 3가지만 기억하세요

```
1. 누르는 것 → 크기 고정 (최소 48px)
2. 읽는 것 → 범위 안에서 자동 조절
3. 담는 것 → 화면에 맞춰 늘어남
```

---

## 1. 터치 요소 (고정 크기)

손가락 크기는 화면이 커져도 변하지 않습니다.

| 요소 | 일반 | 산업현장(장갑) |
|------|-----|--------------|
| 버튼 | 48px | 60px |
| 아이콘 (누르는 용) | 48px | 60px |
| 체크박스 | 24px (터치영역 48px) | 24px (터치영역 60px) |
| 리스트 한 줄 높이 | 48px | 56px |
| 입력창 높이 | 40px | 48px |

---

## 2. 텍스트 (범위 조절)

화면 크기에 따라 자동으로 커지거나 작아집니다.

| 용도 | 최소 | 최대 |
|------|-----|-----|
| 본문 | 14px | 18px |
| 제목 | 18px | 28px |
| 설명 | 12px | 14px |

**CSS 예시**:
```css
font-size: clamp(14px, 1.5vw, 18px);
```

---

## 3. 레이아웃 (비율 기반)

컨테이너는 화면에 맞춰 늘어납니다.

| 요소 | 방식 | 예시 |
|------|-----|-----|
| 컨테이너 | 100% | 화면 전체 채움 |
| 카드 2열 | 48% + 48% | 화면 반씩 |
| 입력창 너비 | fill | 부모 채움 |
| 여백 | 8/16/24px | 화면 크기별 |

---

## 4. 환경별 설정

### 일반 (실내)
- 터치: 48px
- 대비: 4.5:1
- 폰트: 14-18px

### 산업현장 (야외/장갑)
- 터치: 60px (+25%)
- 대비: 7:1 이상
- 폰트: 18-22px (+25%)

---

## 5. 리스트/테이블 반응형

화면이 좁아지면 컬럼을 줄입니다.

```
태블릿 (넓음)              모바일 (좁음)
┌──────┬──────┬──────┬──────┐   ┌──────┬──────┐
│품번  │품명  │수량  │상태  │   │품번  │수량  │
├──────┼──────┼──────┼──────┤   ├──────┼──────┤
│A001  │나사  │100   │완료  │   │A001  │100   │
└──────┴──────┴──────┴──────┘   └──────┴──────┘
                                 ↳ 터치하면 상세보기
```

---

## 6. 폼 라벨 배치

| 화면 | 라벨 위치 | 이유 |
|------|----------|-----|
| 모바일 세로 | 위 | 입력창 너비 확보 |
| 태블릿 가로 | 옆 | 공간 여유 |

```
모바일                    태블릿
┌─────────────────┐      ┌─────────────────────────┐
│ 이름            │      │ 이름: [입력____________] │
│ [입력__________]│      └─────────────────────────┘
└─────────────────┘
```

---

## 7. 그림으로 보는 반응형

```
8인치 태블릿                    12인치 태블릿
┌─────────────────┐            ┌───────────────────────┐
│ [버튼 48px]     │            │ [버튼 48px]           │  ← 버튼 크기 동일!
│                 │            │                       │
│ ┌─────────────┐ │            │ ┌─────────────────┐   │
│ │ 입력창      │ │            │ │ 입력창          │   │  ← 너비만 늘어남
│ └─────────────┘ │            │ └─────────────────┘   │
│                 │            │                       │
│ 글자 14px       │            │ 글자 18px             │  ← 글자만 커짐
└─────────────────┘            └───────────────────────┘
```

---

## 8. 색상 대비 (야외용)

| 환경 | 최소 대비 | 권장 |
|------|----------|-----|
| 실내 | 4.5:1 | 7:1 |
| 야외 | 7:1 | 10:1+ |

**좋은 조합**:
- 흰 배경 + 검정 글자
- 검정 배경 + 흰 글자
- 노랑 경고 + 검정 글자

**피해야 할 조합**:
- 연한 회색 + 밝은 회색
- 빨강 + 녹색 (색맹 고려)

---

## 체크리스트

### 컴포넌트 만들 때 확인

- [ ] 버튼/터치 요소 최소 48px인가?
- [ ] 폰트에 clamp() 적용했나?
- [ ] 색상 대비 4.5:1 이상인가?
- [ ] 모바일에서 라벨이 위에 있나?
- [ ] 리스트가 좁은 화면에서 컬럼 줄어드나?

---

*최종 업데이트: 2026-02-03*