330 lines
9.1 KiB
Markdown
330 lines
9.1 KiB
Markdown
# POP 화면 그리드 시스템 설계
|
|
|
|
> 작성일: 2026-02-05
|
|
> 상태: 계획 (Plan)
|
|
> 관련: Softr, Ant Design, Material Design 분석 기반
|
|
|
|
---
|
|
|
|
## 1. 목적
|
|
|
|
POP 화면의 반응형 레이아웃을 **일관성 있고 예측 가능하게** 만들기 위한 그리드 시스템 설계
|
|
|
|
### 현재 문제
|
|
- 픽셀 단위 자유 배치 → 화면 크기별로 깨짐
|
|
- 컴포넌트 크기 규칙 없음 → 디자인 불일치
|
|
- 반응형 규칙 부족 → 모드별 수동 조정 필요
|
|
|
|
### 목표
|
|
- 그리드 기반 배치로 일관성 확보
|
|
- 크기 프리셋으로 디자인 통일
|
|
- 자동 반응형으로 작업량 감소
|
|
|
|
---
|
|
|
|
## 2. 대상 디바이스
|
|
|
|
### 지원 범위
|
|
|
|
| 구분 | 크기 범위 | 기준 해상도 | 비고 |
|
|
|------|----------|-------------|------|
|
|
| 모바일 | 4~8인치 | 375x667 (세로) | 산업용 PDA 포함 |
|
|
| 태블릿 | 8~14인치 | 1024x768 (가로) | 기본 기준 |
|
|
|
|
### 참고: 산업용 디바이스 해상도
|
|
|
|
| 디바이스 | 화면 크기 | 해상도 |
|
|
|----------|----------|--------|
|
|
| Zebra TC57 PDA | 5인치 | 720x1280 |
|
|
| Honeywell CT47 | 5.5인치 | 2160x1080 |
|
|
| Honeywell RT10A | 10.1인치 | 1920x1200 |
|
|
|
|
---
|
|
|
|
## 3. 그리드 시스템 설계
|
|
|
|
### 3.1 브레이크포인트 (Breakpoints)
|
|
|
|
Material Design 가이드라인 기반으로 4단계 정의:
|
|
|
|
| 모드 | 약어 | 너비 범위 | 대표 디바이스 | 그리드 칸 수 |
|
|
|------|------|----------|---------------|-------------|
|
|
| 모바일 세로 | `mp` | ~599px | 4~6인치 폰 | **4 columns** |
|
|
| 모바일 가로 | `ml` | 600~839px | 폰 가로, 7인치 태블릿 | **6 columns** |
|
|
| 태블릿 세로 | `tp` | 840~1023px | 8~10인치 태블릿 세로 | **8 columns** |
|
|
| 태블릿 가로 | `tl` | 1024px~ | 10~14인치 태블릿 가로 | **12 columns** |
|
|
|
|
### 3.2 기준 해상도
|
|
|
|
| 모드 | 기준 너비 | 기준 높이 | 비고 |
|
|
|------|----------|----------|------|
|
|
| 모바일 세로 | 375px | 667px | iPhone SE 기준 |
|
|
| 모바일 가로 | 667px | 375px | - |
|
|
| 태블릿 세로 | 768px | 1024px | iPad 기준 |
|
|
| **태블릿 가로** | **1024px** | **768px** | **기본 설계 모드** |
|
|
|
|
### 3.3 그리드 구조
|
|
|
|
```
|
|
태블릿 가로 (12 columns)
|
|
┌──────────────────────────────────────────────────────────────┐
|
|
│ ← 16px →│ Col │ 16px │ Col │ 16px │ ... │ Col │← 16px →│
|
|
│ margin │ 1 │ gap │ 2 │ gap │ │ 12 │ margin │
|
|
└──────────────────────────────────────────────────────────────┘
|
|
|
|
모바일 세로 (4 columns)
|
|
┌────────────────────────┐
|
|
│← 16px →│ Col │ 8px │ Col │ 8px │ Col │ 8px │ Col │← 16px →│
|
|
│ margin │ 1 │ gap │ 2 │ gap │ 3 │ gap │ 4 │ margin │
|
|
└────────────────────────┘
|
|
```
|
|
|
|
### 3.4 마진/간격 규칙
|
|
|
|
8px 기반 간격 시스템 (Material Design 표준):
|
|
|
|
| 속성 | 태블릿 | 모바일 | 용도 |
|
|
|------|--------|--------|------|
|
|
| screenPadding | 24px | 16px | 화면 가장자리 여백 |
|
|
| gapSm | 8px | 8px | 컴포넌트 사이 최소 간격 |
|
|
| gapMd | 16px | 12px | 기본 간격 |
|
|
| gapLg | 24px | 16px | 섹션 간 간격 |
|
|
| rowGap | 16px | 12px | 줄 사이 간격 |
|
|
|
|
---
|
|
|
|
## 4. 컴포넌트 크기 시스템
|
|
|
|
### 4.1 열 단위 (Span) 크기
|
|
|
|
픽셀 대신 **열 단위(span)** 로 크기 지정:
|
|
|
|
| 크기 | 태블릿 가로 (12col) | 태블릿 세로 (8col) | 모바일 (4col) |
|
|
|------|--------------------|--------------------|---------------|
|
|
| XS | 1 span | 1 span | 1 span |
|
|
| S | 2 span | 2 span | 2 span |
|
|
| M | 3 span | 2 span | 2 span |
|
|
| L | 4 span | 4 span | 4 span (full) |
|
|
| XL | 6 span | 4 span | 4 span (full) |
|
|
| Full | 12 span | 8 span | 4 span |
|
|
|
|
### 4.2 높이 프리셋
|
|
|
|
| 프리셋 | 픽셀값 | 용도 |
|
|
|--------|--------|------|
|
|
| `xs` | 32px | 배지, 아이콘 버튼 |
|
|
| `sm` | 48px | 일반 버튼, 입력 필드 |
|
|
| `md` | 80px | 카드, 인디케이터 |
|
|
| `lg` | 120px | 큰 카드, 리스트 아이템 |
|
|
| `xl` | 200px | 대형 영역 |
|
|
| `auto` | 내용 기반 | 가변 높이 |
|
|
|
|
### 4.3 컴포넌트별 기본값
|
|
|
|
| 컴포넌트 | 태블릿 span | 모바일 span | 높이 | 비고 |
|
|
|----------|------------|-------------|------|------|
|
|
| pop-field | 3 (M) | 2 (S) | sm | 입력/표시 |
|
|
| pop-button | 2 (S) | 2 (S) | sm | 액션 버튼 |
|
|
| pop-list | 12 (Full) | 4 (Full) | auto | 데이터 목록 |
|
|
| pop-indicator | 3 (M) | 2 (S) | md | KPI 표시 |
|
|
| pop-scanner | 6 (XL) | 4 (Full) | lg | 스캔 영역 |
|
|
| pop-numpad | 6 (XL) | 4 (Full) | auto | 숫자 패드 |
|
|
| pop-spacer | 1 (XS) | 1 (XS) | - | 빈 공간 |
|
|
| pop-break | Full | Full | 0 | 줄바꿈 |
|
|
|
|
---
|
|
|
|
## 5. 반응형 규칙
|
|
|
|
### 5.1 자동 조정
|
|
|
|
설계자가 별도 설정하지 않아도 자동 적용:
|
|
|
|
```
|
|
태블릿 가로 (12col): [A:3] [B:3] [C:3] [D:3] → 한 줄
|
|
태블릿 세로 (8col): [A:2] [B:2] [C:2] [D:2] → 한 줄
|
|
모바일 (4col): [A:2] [B:2] → 두 줄
|
|
[C:2] [D:2]
|
|
```
|
|
|
|
### 5.2 수동 오버라이드
|
|
|
|
필요시 모드별 설정 가능:
|
|
|
|
```typescript
|
|
interface ResponsiveOverride {
|
|
// 크기 변경
|
|
span?: number;
|
|
height?: HeightPreset;
|
|
|
|
// 표시/숨김
|
|
hidden?: boolean;
|
|
|
|
// 내부 요소 숨김 (컴포넌트별)
|
|
hideElements?: string[];
|
|
}
|
|
```
|
|
|
|
### 5.3 표시/숨김 예시
|
|
|
|
```
|
|
태블릿: [제품명] [수량] [단가] [합계] [비고]
|
|
모바일: [제품명] [수량] [비고] ← 단가, 합계 숨김
|
|
```
|
|
|
|
설정:
|
|
```typescript
|
|
{
|
|
id: "unit-price",
|
|
type: "pop-field",
|
|
visibility: {
|
|
mobile_portrait: false,
|
|
mobile_landscape: false
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 6. 데이터 구조 (제안)
|
|
|
|
### 6.1 레이아웃 데이터 (v5 제안)
|
|
|
|
```typescript
|
|
interface PopLayoutDataV5 {
|
|
version: "5.0";
|
|
|
|
// 그리드 설정 (전역)
|
|
gridConfig: {
|
|
tablet: { columns: 12; gap: 16; padding: 24 };
|
|
mobile: { columns: 4; gap: 8; padding: 16 };
|
|
};
|
|
|
|
// 컴포넌트 목록 (순서대로)
|
|
components: PopComponentV5[];
|
|
|
|
// 모드별 오버라이드 (선택)
|
|
modeOverrides?: {
|
|
[mode: string]: {
|
|
gridConfig?: Partial<GridConfig>;
|
|
componentOverrides?: Record<string, ResponsiveOverride>;
|
|
};
|
|
};
|
|
}
|
|
```
|
|
|
|
### 6.2 컴포넌트 데이터
|
|
|
|
```typescript
|
|
interface PopComponentV5 {
|
|
id: string;
|
|
type: PopComponentType;
|
|
|
|
// 크기 (span 단위)
|
|
size: {
|
|
span: number; // 기본 열 개수 (1~12)
|
|
height: HeightPreset; // xs, sm, md, lg, xl, auto
|
|
};
|
|
|
|
// 반응형 크기 (선택)
|
|
responsiveSize?: {
|
|
mobile?: { span?: number; height?: HeightPreset };
|
|
tablet_portrait?: { span?: number; height?: HeightPreset };
|
|
};
|
|
|
|
// 표시/숨김
|
|
visibility?: {
|
|
[mode: string]: boolean;
|
|
};
|
|
|
|
// 컴포넌트별 설정
|
|
config?: any;
|
|
|
|
// 데이터 바인딩
|
|
dataBinding?: any;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 7. 현재 v4와의 관계
|
|
|
|
### 7.1 v4 유지 사항
|
|
- Flexbox 기반 렌더링
|
|
- 오버라이드 시스템
|
|
- visibility 속성
|
|
|
|
### 7.2 변경 사항
|
|
|
|
| v4 | v5 (제안) |
|
|
|----|-----------|
|
|
| `fixedWidth: number` | `span: 1~12` |
|
|
| `minWidth`, `maxWidth` | 그리드 기반 자동 계산 |
|
|
| 자유 픽셀 | 열 단위 프리셋 |
|
|
|
|
### 7.3 마이그레이션 방향
|
|
|
|
```
|
|
v4 fixedWidth: 200px
|
|
↓
|
|
v5 span: 3 (태블릿 기준 약 25%)
|
|
```
|
|
|
|
---
|
|
|
|
## 8. 구현 우선순위
|
|
|
|
### Phase 1: 프리셋만 적용 (최소 변경)
|
|
- [ ] 높이 프리셋 드롭다운
|
|
- [ ] 너비 프리셋 드롭다운 (XS~Full)
|
|
- [ ] 기존 Flexbox 렌더링 유지
|
|
|
|
### Phase 2: 그리드 시스템 도입
|
|
- [ ] 브레이크포인트 감지
|
|
- [ ] 그리드 칸 수 자동 변경
|
|
- [ ] span → 픽셀 자동 계산
|
|
|
|
### Phase 3: 반응형 자동화
|
|
- [ ] 모드별 자동 span 변환
|
|
- [ ] 줄바꿈 자동 처리
|
|
- [ ] 오버라이드 최소화
|
|
|
|
---
|
|
|
|
## 9. 참고 자료
|
|
|
|
### 분석 대상
|
|
|
|
| 도구 | 핵심 특징 | 적용 가능 요소 |
|
|
|------|----------|---------------|
|
|
| **Softr** | 블록 기반, 제약 기반 레이아웃 | 컨테이너 슬롯 방식 |
|
|
| **Ant Design** | 24열 그리드, 8px 간격 | 그리드 시스템, 간격 규칙 |
|
|
| **Material Design** | 4/8/12열, 반응형 브레이크포인트 | 디바이스별 칸 수 |
|
|
|
|
### 핵심 원칙
|
|
|
|
1. **Flexbox는 도구**: 그리드 시스템 안에서 사용
|
|
2. **제약은 자유**: 규칙이 있어야 일관된 디자인 가능
|
|
3. **최소 설정, 최대 효과**: 기본값이 좋으면 오버라이드 불필요
|
|
|
|
---
|
|
|
|
## 10. FAQ
|
|
|
|
### Q1: 기존 v4 화면은 어떻게 되나요?
|
|
A: 하위 호환 유지. v4 화면은 v4로 계속 동작.
|
|
|
|
### Q2: 컴포넌트를 그리드 칸 사이에 배치할 수 있나요?
|
|
A: 아니요. 칸 단위로만 배치. 이게 일관성의 핵심.
|
|
|
|
### Q3: 그리드 칸 수를 바꿀 수 있나요?
|
|
A: 기본값(4/6/8/12) 권장. 필요시 프로젝트 레벨 설정 가능.
|
|
|
|
### Q4: Flexbox와 Grid 중 뭘 쓰나요?
|
|
A: 둘 다. Grid로 칸 나누고, Flexbox로 칸 안에서 정렬.
|
|
|
|
---
|
|
|
|
*이 문서는 계획 단계이며, 실제 구현 시 수정될 수 있습니다.*
|
|
*최종 업데이트: 2026-02-05*
|