9.1 KiB
9.1 KiB
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 수동 오버라이드
필요시 모드별 설정 가능:
interface ResponsiveOverride {
// 크기 변경
span?: number;
height?: HeightPreset;
// 표시/숨김
hidden?: boolean;
// 내부 요소 숨김 (컴포넌트별)
hideElements?: string[];
}
5.3 표시/숨김 예시
태블릿: [제품명] [수량] [단가] [합계] [비고]
모바일: [제품명] [수량] [비고] ← 단가, 합계 숨김
설정:
{
id: "unit-price",
type: "pop-field",
visibility: {
mobile_portrait: false,
mobile_landscape: false
}
}
6. 데이터 구조 (제안)
6.1 레이아웃 데이터 (v5 제안)
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 컴포넌트 데이터
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열, 반응형 브레이크포인트 | 디바이스별 칸 수 |
핵심 원칙
- Flexbox는 도구: 그리드 시스템 안에서 사용
- 제약은 자유: 규칙이 있어야 일관된 디자인 가능
- 최소 설정, 최대 효과: 기본값이 좋으면 오버라이드 불필요
10. FAQ
Q1: 기존 v4 화면은 어떻게 되나요?
A: 하위 호환 유지. v4 화면은 v4로 계속 동작.
Q2: 컴포넌트를 그리드 칸 사이에 배치할 수 있나요?
A: 아니요. 칸 단위로만 배치. 이게 일관성의 핵심.
Q3: 그리드 칸 수를 바꿀 수 있나요?
A: 기본값(4/6/8/12) 권장. 필요시 프로젝트 레벨 설정 가능.
Q4: Flexbox와 Grid 중 뭘 쓰나요?
A: 둘 다. Grid로 칸 나누고, Flexbox로 칸 안에서 정렬.
이 문서는 계획 단계이며, 실제 구현 시 수정될 수 있습니다. 최종 업데이트: 2026-02-05