coastdigitalgroup/coastai-skills: 유동적 여백 시스템

유동적 여백 시스템

목적

유동적 여백 시스템 스킬은 사용자의 뷰포트에 맞춰 부드럽게 조정되는 여백(마진, 패딩, 간격)의 반응형 스케일을 생성하기 위한 방법론을 제공합니다. CSS clamp() 함수를 사용하여 정의된 최소값과 최대값 사이에서 선형으로 스케일링되므로, 과도한 미디어 쿼리 없이도 시각적 조화와 일관된 비율을 유지할 수 있습니다.

사용 사례

• 새로운 디자인 시스템을 위한 기본 여백 스케일 구축.
• 모바일, 태블릿, 데스크톱 전반의 시각적 일관성을 개선하기 위해 웹사이트 현대화.
• 큰 화면에서는 여백이 여유롭고 작은 화면에서는 컴팩트하게 유지되어야 하는 고품질 레이아웃 설계.
• 고정 픽셀 기반 여백을 보다 유연하고 구현에 인식된 시스템으로 대체.

사용하지 말아야 할 경우

• 단순하고 반응형이 필요 없는 페이지: 레이아웃이 극도로 기본적이거나 반응형 요구사항이 없는 경우.
• 엄격하게 고정된 레이아웃: 모든 해상도에서 정확하고 협상 불가능한 픽셀 값을 디자인 사양에서 요구하는 경우.
• 레거시 브라우저 지원: 대상 사용자가 주로 CSS clamp()를 지원하지 않는 브라우저(예: Internet Explorer)를 사용하는 경우.

입력값

유동적 여백 시스템을 생성하려면 다음이 필요합니다:

1. 뷰포트 범위:
   • min-width: 스케일링이 시작되는 화면 너비 (예: 320px).
   • max-width: 스케일링이 중단되는 화면 너비 (예: 1280px).
2. 기본 여백 단위:
   • min-size: min-width에서의 기본 단위 (예: 16px).
   • max-size: max-width에서의 기본 단위 (예: 20px).
3. 스케일 비율:
   • 스케일에서 단계를 결정하는 승수 (예: Major Third 스케일의 경우 1.25, 또는 선형 2x/3x/4x 진행).

출력값

1. 유동적 여백 스케일: clamp()를 사용하여 "tiny"에서 "huge"까지의 값을 정의하는 CSS 변수 세트.
2. 의미론적 매핑: 이러한 토큰을 적용하는 방법에 대한 지침 (예: 컴포넌트 패딩에 --space-m, 섹션 마진에 --space-xl).
3. 사용 설명서: 수직 리듬과 수평 정렬을 유지하기 위해 단위를 결합하는 규칙.

워크플로우

1. 스케일 매개변수 정의

프로젝트의 대상 디바이스를 기반으로 유동적 시스템의 경계를 설정합니다. 예시: 320px (모바일) ~ 1440px (데스크톱), 기본 단위는 16px에서 24px로 스케일링.

2. 여백 비율 선택

여백 단계가 어떻게 증가할지 결정합니다.

• 선형/곱셈: 단계는 기본 단위의 배수입니다 (예: 0.5x, 1x, 1.5x, 2x, 4x, 8x). 예측 가능한 정렬에 가장 적합.
• 기하학적 스케일: 각 단계는 이전 단계에 비율을 곱한 값입니다 (예: 1.25). 대비가 높고 예술적인 레이아웃에 가장 적합.

3. 스케일 단계 계산

크기 범위를 생성합니다. 일반적인 스케일은 다음을 포함합니다:

• 3XS ~ XS: 미세한 디테일, 빽빽한 목록, 내부 버튼 패딩용.
• S ~ M: 표준 컴포넌트 간격 및 거터용.
• L ~ 3XL: 섹션 마진, 히어로 간격, 주요 레이아웃 간격용.

4. CSS clamp() 공식 생성

픽셀 값을 유동적 공식으로 변환합니다. clamp(min_rem, intercept_rem + slope_vw, max_rem)

기울기 계산: (max_px - min_px) / (max_viewport - min_viewport) * 100

5. 의미론적 역할 할당

추상적인 스케일을 기능적 역할에 매핑하여 팀 전체의 일관성을 보장합니다.

• space-component: --space-s
• space-layout-gutter: --space-m
• space-section: --space-xl

결정 규칙

• 8pt 그리드 원칙: 가능할 때마다 최소값과 최대값이 4 또는 8의 배수가 되도록 하여 표준 UI 패턴과 정렬합니다.
• 근접성 원칙: 관련된 요소 사이에는 관련 없는 요소 사이보다 적은 공간을 사용해야 합니다.
• 모바일 압축: 작은 여백 단위(3XS-S)는 상대적으로 안정적으로 유지합니다. 큰 단위(L-3XL)만 적극적으로 스케일링하여 모바일 레이아웃이 "터진" 느낌이 들지 않도록 합니다.
• 접근성: 가장 작은 스케일에서도 인터랙티브 요소가 충분히 큰 히트 영역(패딩 포함 최소 24x24px, WCAG 2.2 SC 2.5.8 기준; 주요 작업의 경우 44x44px 권장)을 유지하도록 합니다.
• 컨테이너 상대 여백: 뷰포트가 아닌 컴포넌트의 컨테이너에 반응해야 하는 여백(예: 좁은 사이드바나 넓은 메인 컬럼에 위치할 수 있는 카드)의 경우 clamp() 공식 내에서 vw 대신 컨테이너 쿼리 길이 단위(cqi/cqw)를 사용합니다.

제약 조건

• 반응성: 여백으로 인해 가로 오버플로가 발생하지 않아야 합니다.
• 일관성: 스케일이 정의되면 "일회성" 픽셀 값을 사용하지 마십시오.
• 계층 구조: 더 큰 콘텐츠 블록(예: 섹션)을 구분하는 데는 항상 더 큰 여백을, 내부 컴포넌트 세부 사항에는 더 작은 여백을 사용해야 합니다.
• 범위: 이 스킬은 여백 값만 다룹니다. 레이아웃 그리드를 생성하지 않고(responsive-grid-system 사용), 타이포그래피 크기를 정의하지 않으며(fluid-typography-system 사용), z-index/레이어링을 관리하지 않습니다.

일반적인 실패 패턴

• 모든 것을 동일하게 스케일링: 작은 패딩(예: 4px)을 너무 많이 스케일링하면 데스크톱에서 컴포넌트가 왜곡되어 보일 수 있습니다.
• 레이아웃 거터 무시: 유동적 컴포넌트 간격을 사용하면서 고정 그리드 거터를 사용하여 정렬 "드리프트"가 발생합니다.
• 과도한 스케일: 20개 이상의 서로 다른 여백 단계는 시스템을 사용하고 유지 관리하기 어렵게 만듭니다. 7~9단계를 목표로 하세요.
• 논리적 단계 부재: 일관된 스케일이나 비율 대신 임의의 숫자를 사용합니다.

검증 기준

• 뷰포트 크기를 조정할 때 여백이 부드럽게 스케일링됩니다.
• 모든 주요 중단점에서 수직 리듬이 유지됩니다.
• 구현 시 "일회성" 픽셀 값이 사용되지 않습니다. 모든 여백은 정의된 변수를 사용합니다.
• 시스템은 clamp() 함수의 최소 및 최대 경계에 rem 단위를 사용합니다.
• 여백 선택으로 근접성과 계층 구조가 강화됩니다.
• 유동적 스케일의 모든 지점(가장 작은 뷰포트 포함)에서 인터랙티브 요소가 최소 24x24px 히트 영역(WCAG 2.2 SC 2.5.8)을 유지합니다.