# Consistency — quality through constraints

> A 12-column grid, 4px spacing, responsive behavior, and consistency scoring

- Canonical: https://learning.reopt.ai/en/courses/design-systems/lessons/ds-l3-consistency
- Language: en
- HTML: https://learning.reopt.ai/en/courses/design-systems/lessons/ds-l3-consistency

---

[Design systems in the AI era](/en/courses/design-systems) 3. Consistency & interaction 7 / 15

# Consistency — quality through constraints

A 12-column grid, 4px spacing, responsive behavior, and consistency scoring
Concept 31 XP 6 min

AI 생성 UI의 일관성은 명확한 제약 에 달려 있습니다. 그리드·스페이싱·타입 스케일을 체계로 묶어 두면 AI는 매번 일관된 결과를 내놓습니다.

## 12컬럼 그리드 & 브레이크포인트

| 브레이크포인트 | 최소 너비 | 용도 |
| sm | 640px | 큰 모바일 |
| md | 768px | 태블릿 |
| lg | 1024px | 데스크톱 |
| xl | 1280px | 와이드 |
| 2xl | 1536px | 초와이드 |

## 4px 기반 스페이싱 스케일

| 토큰 | 값 | 용도 예 |
| spacing.2 | 8px | 아이콘-텍스트 간격 (inline) |
| spacing.4 | 16px | 기본 내부 패딩 / 폼 필드 간격 |
| spacing.6 | 24px | 카드 내부 패딩 (inset) / 카드 그리드 gap |
| spacing.8 | 32px | 페이지 상하 여백 (pageY) |
| spacing.12 | 48px | 섹션 간 간격 (section) |

금지 사항 임의값 p-[13px] , 홀수 스케일 gap-7 , 인라인 스타일 간격은 금지합니다. 토큰 조합만 허용해야 드리프트가 생기지 않습니다.

## 반응형 — mobile-first

| 컴포넌트 | 모바일 | 데스크톱(lg+) |
| 카드 그리드 | 1열 | 3~4열 (sm 2열 경유) |
| 테이블 | 카드 리스트로 변환 / 수평 스크롤 | 표준 테이블 |
| Dialog | 전체 화면 (드로어) | 중앙 모달 |
| Navigation | 햄버거 + 드로어 | 수평 메뉴 |

## 일관성 검증

layout linting 규칙(임의 간격 금지, Container 필수 등)과 가중 합 consistency score 로 일관성을 수치화해 CI에 통합합니다. 가중치는 spacing variance 0.3, alignment 0.25, grid 0.25, typography 0.2 입니다.
핵심 정리

- 12컬럼 그리드와 Container/Grid 컴포넌트로 화면 구조를 고정한다
- 4px 기반 스페이싱 스케일만 쓰고 임의값·홀수 스케일을 막는다
- 반응형은 mobile-first로, 컴포넌트별 변환 규칙을 명시한다
- consistency score(spacing 0.3·alignment 0.25·grid 0.25·typography 0.2)로 일관성을 수치화한다

[Previous](/en/courses/design-systems/lessons/ds-l2-quiz) Got it · Continue

---

Site guide for agents: https://learning.reopt.ai/llms.txt · Sitemap: https://learning.reopt.ai/sitemap.xml · Contact: https://learning.reopt.ai/contact