# 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; componentOverrides?: Record; }; }; } ``` ### 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*