spacinglisted

# Spacing Skill 프로젝트의 레이아웃과 간격 시스템을 구성합니다. ## Triggers - "간격", "스페이싱", "그리드", "spacing", "grid", "layout", "레이아웃", "여백" --- ## Input | 항목 | 필수 | 설명 | |------|------|------| | `aestheticDirection` | ✅ | 디자인 방향 (minimal, bold, elegant 등) | | `contentDensity` | ❌ | 콘텐츠 밀도 (compact, normal, spacious) - 기본값: normal | | `breakpointStrategy` | ❌ | 반응형 전략 (mobile-first, desktop-first) - 기본값: mobile-first | --- ## Output | 산출물 | 설명 | |--------|------| | `spacing-tokens.css` | CSS 변수로 정의된 스페이싱 토큰 | | `layout-tokens.css` | 레이아웃 관련 CSS 변수 | | `globals.css` 업데이트 | Tailwind @theme 통합 | --- ## Workflow ### Step 1: 4px 기반 그리드 시스템 **왜 4px인가?** - 대부분의 디스플레이는 4의 배수로 잘 정렬됨 - 8px 기반보다 유연한 세밀한 조정 가능 - 4, 8, 12, 16, 20, 24... 자연스러운 증가 ```css /* * Base unit: 4px * Scale: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, ... * Value: 0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 80, 96px */ ``` --- ### Step 2: 스페이싱 토큰 정의 #### globals.css 스페이싱 섹션 ```css /* app/globals.css */ :root { /* ========================================= * Spacing Scale (4px base) * ========================================= */ /* Micro spacing */ --spacing-0: 0px; --spacing-px: 1px; --spacing-0-5: 2px; /* 0.5 * 4 */ --spacing-1: 4px; --spacing-1-5: 6px; --spacing-2: 8px; --spacing-2-5: 10px; --spacing-3: 12px; --spacing-3-5: 14px; --spacing-4: 16px; /* Small spacing */ --spacing-5: 20px; --spacing-6: 24px; --spacing-7: 28px; --spacing-8: 32px;