4.5 KiB
4.5 KiB
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 예시:
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