coastdigitalgroup/coastai-skills

반응형 그리드 시스템

목적

반응형 그리드 시스템 스킬은 웹페이지의 콘텐츠를 구성하기 위한 구조적 기반을 제공합니다. 일관된 컬럼, 거터, 여백 세트를 사용하여 시각적 정렬을 보장하고, 계층 구조를 유지하며, 다양한 화면 크기(모바일, 태블릿, 데스크톱) 간 설계 전환을 단순화합니다.

사용 사례

• 새로운 웹사이트 또는 애플리케이션의 구조적 레이아웃 설계
• UI 키트 또는 디자인 시스템 컴포넌트 라이브러리 구축
• 대시보드나 데이터 중심 인터페이스와 같은 복잡한 콘텐츠 구성
• 여러 페이지에 걸친 일관된 수직 리듬과 수평 정렬 보장

사용하지 말아야 할 경우

• 실험적/브루탈리스트 디자인: 시각적 목표가 예술적 효과를 위해 표준 레이아웃 규칙을 의도적으로 깨는 경우
• 단일 목적의 단순 페이지: 콘텐츠가 너무 최소화되어(예: 단일 중앙 폼) 전체 그리드 시스템이 불필요한 오버헤드를 추가하는 경우
• 고정 너비 환경: 출력이 반응형이 아닌 미디어용으로 엄격히 제한된 경우(단, 정렬을 위해 그리드가 여전히 유용할 수 있음)

입력

반응형 그리드 시스템을 구축하려면 다음이 필요합니다:

1. 디바이스 중단점: 레이아웃이 변경되는 화면 너비(예: 600px, 900px, 1200px)
2. 컬럼 수: 각 중단점에서 콘텐츠를 위한 수직 트랙 수(표준: 데스크톱 12, 모바일 4)
3. 거터 너비: 컬럼 사이의 간격(예: 16px, 24px)
4. 외부 여백: 뷰포트 왼쪽 및 오른쪽 가장자리의 패딩(예: 모바일 20px, 데스크톱 5% 또는 고정 최대 너비)
5. 콘텐츠 요구사항: 컴포넌트 목록과 상대적 우선순위/크기

출력

1. 그리드 명세서: 각 주요 중단점에 대한 컬럼, 거터, 여백 정의
2. 레이아웃 맵: 다양한 크기에서 컴포넌트가 컬럼을 차지하는 방식을 보여주는 시각적 또는 설명적 가이드
3. 구현 로직: 시스템을 실현하기 위한 CSS(Grid 또는 Flexbox) 속성

워크플로우

1. 중단점 정의

레이아웃을 조정해야 하는 주요 화면 너비를 선택합니다. 일반적인 규모:

• 모바일: 0 - 599px
• 태블릿: 600px - 899px
• 데스크톱: 900px+ (1200px-1440px 정도의 최대 너비 컨테이너 사용)

2. 컬럼 및 거터 파라미터 설정

그리드의 "내부 로직"을 결정합니다.

• 모바일: 4컬럼, 16px 거터, 16px 여백
• 태블릿: 8컬럼, 24px 거터, 32px 여백
• 데스크톱: 12컬럼, 24px 거터, 자동 여백(중앙 정렬 컨테이너)

3. 컨테이너 동작 설정

그리드가 플루이드(뷰포트 백분율로 확장), 고정(다음 중단점까지 특정 너비 유지), 또는 적응형(혼합)인지 결정합니다. 권장: 고정 max-width와 함께 플루이드 그리드를 사용하고, clamp()로 크기를 지정(예: max-width: clamp(320px, 90vw, 1440px))하여 컨테이너가 중단점에서 점프하지 않고 부드럽게 확장되도록 합니다.

4. 콘텐츠를 그리드에 매핑

CSS Grid(grid-template-columns: repeat(12, 1fr) 및 grid-column: span N)를 사용하여 컴포넌트가 특정 컬럼을 차지하도록 할당하고, float나 inline-block 해킹은 사용하지 않습니다. 예시: 사이드바는 데스크톱(12컬럼 그리드)에서 3컬럼을, 메인 콘텐츠는 9컬럼을 차지할 수 있습니다. 모바일에서는 둘 다 4컬럼 전체를 차지(스태킹)합니다.

그리드 셀 내부에 중첩된 컴포넌트가 부모 그리드의 트랙에 정렬되어야 하는 경우(예: 카드의 내부 헤더/본문/푸터가 형제 카드와 정렬) 새로운 독립 그리드를 다시 선언하는 대신 subgrid(grid-template-columns: subgrid 또는 grid-template-rows: subgrid)를 사용합니다.

컴포넌트의 내부 레이아웃이 뷰포트가 아닌 자체 사용 가능한 공간에 의존하는 경우(예: 카드가 화면이 아닌 컨테이너 너비에 따라 1컬럼에서 2컬럼으로 재배치) 미디어 쿼리 대신 컨테이너 쿼리(래퍼에 container-type: inline-size, 자식에 @container (min-width: …))를 사용합니다.

5. 스태킹 및 순서 정의

화면이 축소될 때 요소가 어떻게 이동하는지 결정합니다. 일반적으로 왼쪽 요소가 오른쪽 요소 위에 스택됩니다. 그리드 거터와 여백에 논리적 속성(margin-inline, padding-block)을 사용하여 시스템이 별도의 재정의 없이 RTL 레이아웃에 올바르게 적응하도록 합니다.

결정 규칙

• 12컬럼 규칙: 데스크톱에서는 12컬럼 그리드를 사용합니다. 2, 3, 4, 6으로 나눌 수 있어 최대 유연성을 제공합니다.
• 일관성: 단일 중단점 내에서 동일한 거터 너비를 사용하여 정렬을 유지합니다.
• 모바일 우선: 항상 4컬럼 모바일 레이아웃을 먼저 설계하여 핵심 콘텐츠가 우선순위를 가지도록 합니다.
• "안전 영역": 모바일 디바이스에서 콘텐츠가 화면 가장자리에 닿지 않도록 외부 여백이 충분히 큰지 확인합니다.
• 뷰포트 vs. 컨테이너: 페이지 수준의 뷰포트 기반 레이아웃 전환(예: 전체 컬럼 수)에는 미디어 쿼리를 사용합니다. 컴포넌트가 뷰포트와 관계없이 자체 박스 크기에 적응해야 하는 경우(예: 동일한 카드 컴포넌트가 사이드바와 전체 너비 섹션에서 다르게 재배치) 컨테이너 쿼리를 사용합니다.

제약 조건

• 접근성: 컬럼이 축소될 때 텍스트가 읽기 쉽고 탭 대상(버튼)이 충분히 큰지 확인합니다. WCAG 2.2(2.5.8)는 절대 최소 24x24px를 설정하며, 기본 작업에는 44x44px가 선호됩니다.
• 반응성: 어떤 요소도 모바일 뷰포트 너비를 초과하는 고정 픽셀 너비를 가져서는 안 됩니다(가로 스크롤 방지).
• 계층 구조: 그리드를 사용하여 중요성을 강화합니다. 더 중요한 요소는 일반적으로 더 많은 컬럼을 차지하거나 스택에서 더 높게 나타나야 합니다.

일반적인 실패 패턴

• 일관성 없는 거터: 다른 컬럼 간에 다른 간격을 사용하여 시각적 "선"이 깨짐
• 거터 없는 디자인: 콘텐츠를 호흡 공간 없이 서로 바로 붙여 배치(의도적인 이미지의 경우 제외)
• 과도한 복잡성: 사소한 조정을 위해 너무 많은 중단점을 만들어 유지 관리 불가능한 CSS 초래
• "중간 지점" 무시: 320px와 1440px에서만 테스트하고 800px 또는 1024px에서 레이아웃이 어떻게 보이는지 무시

검증 기준

• 콘텐츠가 그리드의 수직선에 완벽하게 정렬됨
• 320px에서 2560px 사이의 모든 뷰포트 너비에서 가로 스크롤바가 나타나지 않음
• 중단점 간 전환이 논리적이고 콘텐츠가 읽기 쉬운 상태 유지
• 거터와 여백이 전체 페이지에서 일관됨
• 시스템이 컬럼 너비에 대해 하드코딩된 픽셀 대신 상대 단위(%, fr, rem)를 사용하여 구현됨
• 레이아웃이 자체 박스 크기에 의존해야 하는 컴포넌트에 대해 (뷰포트 미디어 쿼리 대신) 컨테이너 쿼리가 사용됨
• 탭 대상이 최소 WCAG 2.2 24x24px 기준을 충족함