일관성 — 제약이 만드는 품질
12컬럼 그리드·4px 스페이싱·반응형·일관성 점수
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) |
반응형 — 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 입니다.