154 lines
4.5 KiB
Markdown
154 lines
4.5 KiB
Markdown
# 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*
|