9.1 KiB

Raw Blame History

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

9.1 KiB Raw Blame History