POP 크기 프리셋 가이드
컴포넌트별 기본 크기
컴포넌트를 만들면 자동으로 적용되는 크기입니다.
버튼 (PopButton)
| 사이즈 |
높이 |
최소 너비 |
폰트 |
용도 |
| sm |
32px |
60px |
12px |
보조 버튼 |
| md |
40px |
80px |
14px |
일반 버튼 |
| lg |
48px |
100px |
16px |
POP 기본 |
| xl |
56px |
120px |
18px |
주요 액션 |
| industrial |
60px |
140px |
20px |
장갑 착용 |
// POP에서는 lg가 기본
<PopButton size="lg">확인</PopButton>
// 산업현장
<PopButton size="industrial">작업 완료</PopButton>
입력창 (PopInput)
| 사이즈 |
높이 |
폰트 |
용도 |
| md |
40px |
14px |
일반 |
| lg |
48px |
16px |
POP 기본 |
| xl |
56px |
18px |
강조 입력 |
// 입력창 너비는 항상 부모 채움 (fill)
<PopInput size="lg" />
리스트 행 (PopListItem)
| 사이즈 |
높이 |
폰트 |
용도 |
| compact |
40px |
14px |
많은 데이터 |
| normal |
48px |
16px |
POP 기본 |
| spacious |
56px |
18px |
여유로운 |
| industrial |
64px |
20px |
장갑 착용 |
<PopListItem size="normal">
<span>작업지시 #1234</span>
</PopListItem>
아이콘 (PopIcon)
| 사이즈 |
크기 |
터치 영역 |
용도 |
| sm |
16px |
32px |
뱃지 안 |
| md |
20px |
40px |
텍스트 옆 |
| lg |
24px |
48px |
POP 기본 |
| xl |
32px |
56px |
강조 |
// 아이콘만 있는 버튼
<PopButton icon="check" size="lg" />
// 텍스트 + 아이콘
<PopButton icon="save" size="lg">저장</PopButton>
카드 (PopCard)
| 요소 |
크기 |
| 패딩 |
16px |
| 제목 폰트 |
18px (heading) |
| 본문 폰트 |
16px (body) |
| 모서리 |
8px |
| 최소 높이 |
100px |
<PopCard>
<PopCard.Header>작업지시</PopCard.Header>
<PopCard.Body>내용</PopCard.Body>
</PopCard>
숫자패드 (PopNumberPad)
| 요소 |
크기 |
| 버튼 크기 |
60px x 60px |
| 버튼 간격 |
8px |
| 전체 너비 |
240px |
| 폰트 |
24px |
┌─────────────────────┐
│ [ 123 ] │ ← 디스플레이 48px
├─────┬─────┬─────────┤
│ 7 │ 8 │ 9 │ ← │ ← 각 버튼 60x60
├─────┼─────┼─────────┤
│ 4 │ 5 │ 6 │ C │
├─────┼─────┼─────────┤
│ 1 │ 2 │ 3 │ │
├─────┼─────┼─────│ OK│
│ 0 │ . │ +- │ │
└─────┴─────┴─────────┘
상태 표시 (PopStatusBox)
| 사이즈 |
너비 |
높이 |
아이콘 |
용도 |
| sm |
80px |
60px |
24px |
여러 개 나열 |
| md |
120px |
80px |
32px |
POP 기본 |
| lg |
160px |
100px |
40px |
강조 |
<PopStatusBox
label="설비 상태"
value="가동중"
status="success"
size="md"
/>
KPI 게이지 (PopKpiGauge)
| 사이즈 |
너비 |
높이 |
용도 |
| sm |
120px |
120px |
여러 개 나열 |
| md |
180px |
180px |
POP 기본 |
| lg |
240px |
240px |
강조 |
간격 (Gap/Padding)
| 이름 |
값 |
용도 |
| xs |
4px |
아이콘-텍스트 |
| sm |
8px |
요소 내부 |
| md |
16px |
컴포넌트 간 |
| lg |
24px |
섹션 간 |
| xl |
32px |
영역 구분 |
반응형 조절
화면 크기에 따라 자동 조절되는 값들:
| 요소 |
8인치 태블릿 |
12인치 태블릿 |
| 본문 폰트 |
14px |
18px |
| 제목 폰트 |
18px |
28px |
| 컨테이너 패딩 |
12px |
24px |
| 카드 간격 |
12px |
16px |
고정되는 값들 (변하지 않음):
- 버튼 높이: 48px
- 입력창 높이: 48px
- 리스트 행 높이: 48px
- 터치 최소 영역: 48px
적용 예시
// 컴포넌트 내부에서 자동 적용
function PopButton({ size = "lg", ...props }) {
const sizeStyles = {
sm: { height: 32, minWidth: 60, fontSize: 12 },
md: { height: 40, minWidth: 80, fontSize: 14 },
lg: { height: 48, minWidth: 100, fontSize: 16 }, // POP 기본
xl: { height: 56, minWidth: 120, fontSize: 18 },
industrial: { height: 60, minWidth: 140, fontSize: 20 },
};
return (
<button style={sizeStyles[size]} {...props} />
);
}
최종 업데이트: 2026-02-03