벤토 그리드 레이아웃 시스템은(는) 무엇을 하나요?
목적
벤토 그리드 레이아웃 시스템은 다양한 콘텐츠(핵심 성과 지표, 시각적 일러스트레이션, 대화형 위젯, 인용문, 제품 기능 미리보기 등)를 통일된 모듈식 그리드로 구성하는 방법론을 제공합니다. 전통적인 일본식 도시락(bento box)에서 영감을 받아 다양한 셀 높이와 너비에 걸쳐 비대칭적 균형을 설정합니다. 이 시스템은 엄격한 비례 규칙, 일관된 내부 패딩, 체계적인 타이포그래피 스케일을 적용하여 대시보드, 랜딩 페이지, 포트폴리오의 시각적 단편화라는 디자인 문제를 해결합니다. 혼란스러워질 수 있는 레이아웃을 세련되고, 훑어보기 쉬우며, 접근 가능한 시각적 위계로 변환합니다.
사용 사례
- SaaS 기능 소개: 다양한 제품 기능, 성능 통계, 시스템 통합 및 대화형 UI 미리보기를 단일 랜딩 페이지 섹션에 표현합니다.
- 데이터 및 메트릭 대시보드: 핵심 성과 지표(KPI), 차트, 운영 요약을 고밀도 시각적 블록으로 그룹화합니다.
- 포트폴리오 및 사례 연구: 창작물, 프로젝트 이미지, 고객 인용문, 디자인 워크플로를 동적이고 비선형적인 프레젠테이션으로 보여줍니다.
- 전자상거래 컬렉션: 주요 제품, 한정 컬렉션, 프로모션 배너, 사회적 증거를 임팩트 있는 편집 레이아웃으로 강조합니다.
사용하지 말아야 할 경우
- 균일한 콘텐츠 목록: 페이지가 동일한 반복 요소(예: 일반 블로그 게시물 목록 또는 제품 그리드)로 구성된 경우
card-ui-system또는responsive-grid-system을 사용하세요. - 순수 계층적 스토리텔링: 선형적이고 순차적인 내러티브(예: "1단계, 2단계, 3단계")에 의존하는 레이아웃의 경우
step-progress-system또는section-composition-system을 사용하세요. - 복잡한 대용량 표 데이터: 사용자가 정확한 기술 값을 비교하거나 영숫자 데이터 행을 읽어야 하는 경우
data-table-ui-system을 사용하세요. - 콘텐츠 중심 기사: 중단 없는 텍스트 흐름이 핵심인 편집 페이지의 경우
article-layout-system을 사용하세요.
입력
- 콘텐츠 인벤토리 및 우선순위: 벤토 그리드에 배치할 항목 목록으로, 계층 구조(코어 히어로 1개, 서포트 2
3개, 악센트 24개)로 분류됩니다. - 시각적 자산 분류: 각 셀의 자산 유형(정적 이미지, 애니메이션 일러스트레이션, 대화형 슬라이더, 일반 텍스트, 숫자 메트릭)입니다.
- 대상 열 및 중단점: 데스크톱 열 시스템(일반적으로 4열 마스터 그리드), 태블릿 적응(일반적으로 2열), 모바일 쌓기 규칙입니다.
- 유동 간격 스케일: 거터 및 내부 셀 레이아웃을 위한 유동 여백 및 패딩 토큰입니다(
fluid-spacing-system에서 가져옴). - 브랜드 디자인 토큰: 타이포그래피 스케일, 테두리 반경, 테두리 스타일, 배경 채우기 스케일, 높이 토큰입니다(
elevation-and-depth-system및fluid-typography-system에서 가져옴).
출력
- 벤토 그리드 지오메트리 맵: 각 셀에 대한 열 범위(
grid-column: span X)와 행 범위(grid-row: span Y)를 지정하는 비례 좌표 청사진입니다. - 내부 카드 구조 명세: 다양한 셀 종횡비 내에서 구조적 간격, 콘텐츠 중첩 및 정렬에 대한 규칙입니다.
- DOM 순서 및 접근성 맵: HTML 소스 구조가 불규칙한 시각적 위치에서 접근성을 유지하는 방법을 보여주는 논리적 탭 순서입니다.
- 반응형 쌓기 계획: 비대칭 그리드가 태블릿 및 모바일 화면으로 단순화되는 방식을 보여주는 정확한 전환 사양입니다.
워크플로우
1. 그리드 지오메트리 및 열 설정
기본 좌표 그리드를 정의하는 것으로 시작합니다.
- 마스터 그리드 구조: 데스크톱 레이아웃(1200px 이상)의 경우 4열 CSS 그리드를 표준으로 사용합니다. 이는 셀 너비(1/4, 2/4, 3/4 또는 4/4 너비)에 대해 뛰어난 수학적 요소를 제공합니다.
- 비대칭 트랙 높이: 행 높이를 명시적으로 설정하거나
grid-auto-rows: minmax(180px, auto)를 사용하여 정사각형 또는 가로 직사각형 비례 베이스(단위당 종횡비 1:1 또는 2:1)를 설정합니다. - 유동 거터: 그리드 간격에 유동 간격 토큰을 사용합니다(예:
gap: clamp(16px, 2vw, 24px)). 셀을 시각적으로 분리하면서도 긴밀하게 묶어줍니다.
2. 시각적 계층 구조별 콘텐츠 매핑 및 할당
항목을 무작위로 흩뿌리지 마세요. 각 셀을 세 가지 구조적 계층 중 하나로 분류합니다.
- 코어 히어로 셀(2x2 또는 3x2 트랙 범위): 그리드 영역의 약 40~50%를 차지합니다. 가장 중요한 시각적 자산, 비디오 또는 메트릭을 호스팅합니다. 전체 섹션의 시각적 진입점을 결정합니다.
- 서포트 셀(2x1 또는 1x2 트랙 범위): 중간 기능이나 주요 통계를 강조합니다. 그래픽과 함께 구조화된 텍스트를 수용하기 위해 기본 블록보다 더 크거나 넓습니다.
- 악센트 셀(1x1 트랙 범위): 작은 시각적 요소, 단일 값 메트릭, 아이콘 또는 배지용으로 예약됩니다. 직사각형 컨테이너를 유지하기 위해 그리드를 완성합니다.
3. 벤토 셀의 내부 구조 설계
셀의 응집력을 유지하기 위해 엄격한 내부 간격 제약 조건을 적용합니다.
- 통일된 패딩: 모든 셀에 걸쳐 일관된 내부 패딩을 적용합니다(일반적으로 유동 패딩 토큰, 예:
padding: var(--space-m)). 예외: 악센트 셀(1x1)은 약간 더 좁은 패딩(--space-s)을 사용할 수 있습니다. - 내부 정렬 모드: 셀 내부에서 플렉스박스(
display: flex; flex-direction: column; justify-content: space-between)를 사용하여 텍스트 블록을 상단에 수직 정렬하고 시각적 강조 요소(메트릭, 그래픽)를 하단에 정렬합니다. - 배경 및 테두리: 모든 셀에 걸쳐 균일한 테두리 반경(예:
border-radius: 16px~24px)을 표준화합니다. 미묘한 배경 채우기(예: 중립 색조, 반투명 유리 모양 배경, 또는 저대비 카드 표면)를 사용하여 뚜렷한 카드 경계를 설정합니다.
4. 키보드 및 스크린 리더 접근성을 위한 DOM 순서 구성
불규칙한 그리드 레이아웃은 시각적 읽기 순서와 물리적 DOM 순서 간의 불일치를 유발할 수 있습니다.
- 자연스러운 읽기 흐름: HTML 문서의 요소를 읽는 순서대로 왼쪽에서 오른쪽, 위에서 아래로 논리적으로 시퀀싱합니다.
- 순서 수정 금지: CSS에서
order를 사용하거나 포커스 가능한 요소를 건너뛰는 방식으로 셀을 임의로 배치하지 마십시오. 셀 1이 왼쪽 위, 셀 2가 오른쪽 위에 있으면 CSS 그리드 레이아웃이 다르게 적용되더라도 DOM에서 해당 순서로 나타나야 합니다. - 의미론적 제목: 콘텐츠가 많은 각 셀에 명확하고 설명적인 제목 태그(일반적으로
<h3>또는<h4>)를 지정하여 상위 섹션의<h2>개요와 일치시킵니다.
5. 반응형 쌓기 및 중단점 정의
그리드가 뷰포트 크기 조정을 적절하게 처리하는지 확인합니다.
- 데스크톱(1200px 이상): 4열 레이아웃. 비대칭 열 및 행 범위.
- 태블릿(768px - 1199px): 2열 그리드로 전환합니다. 1x1이었던 셀은 1열, 2x1 셀은 두 열(전체 너비 2열)을 차지하도록 범위를 다시 매핑합니다.
- 모바일(767px 이하): 그리드를 완전히 1열 수직 스택(
grid-template-columns: 1fr)으로 축소합니다. 명시적 행 높이(grid-auto-rows: auto)를 제거하고 요소가 자연스럽게 흐르도록 하며, 높이는 내부 패딩과 콘텐츠 크기에 따라 결정됩니다.
결정 규칙
열과 행 범위를 결정하는 시점
| 항목 콘텐츠 유형 | 범위 결정 규칙 | 권장 데스크톱 지오메트리 |
|---|---|---|
| 임팩트 높은 메트릭 / 주요 기능 | 초점 중심을 만들기 위해 열과 행을 모두 범위로 지정합니다. | grid-column: span 2; grid-row: span 2; |
| 넓은 시각 자료 / 타임라인 / 차트 | 시선을 수평으로 끌기 위해 열을 수평으로 범위 지정하고 높이는 1행으로 유지합니다. | grid-column: span 2; grid-row: span 1; |
| 긴 텍스트 목록 / 높은 이미지 | 시선을 아래로 끌기 위해 행을 수직으로 범위 지정하고 너비는 1열로 유지합니다. | grid-column: span 1; grid-row: span 2; |
| 단일 메트릭 / 배지 / 아이콘 | 범위를 지정하지 않습니다. 표준 정사각형 블록으로 유지합니다. | grid-column: span 1; grid-row: span 1; |
벤토 셀의 타이포그래피 스케일링
- 적응형 크기 조정: 모든 카드에 동일한 타이포그래피 크기를 사용하지 마십시오. 타이포그래피 스케일을 카드 크기에 비례하도록 유지합니다.
- 히어로 카드: 제목에
font-size: clamp(1.5rem, 4cqi, 2.25rem)를 사용합니다(지원되는 경우 컨테이너 쿼리 단위cqi사용). - 악센트 카드(1x1): 제목을
font-size: clamp(1rem, 2.5cqi, 1.25rem)로 제한하고 설명은 간략하게(최대 2줄) 유지하거나 아이콘 + 메트릭을 위해 설명을 완전히 생략합니다.
콘텐츠 포함 vs. 넘침
- 포함 레이아웃: 텍스트와 테두리 사이에 최소
16px의 여유 공간을 두고 콘텐츠를 카드 패딩 안에 완전히 배치합니다. 텍스트가 많고 정보를 제공하는 카드에 가장 적합합니다. - 넘침 레이아웃: 시각적 요소(제품 스크린샷, 상세 3D 목업, 복잡한 차트)를 카드의 하단 및/또는 오른쪽 가장자리 밖으로 흘러나가게 하고(
overflow: hidden으로 셀에서 오버플로 마스킹), 텍스트는 상단에 패딩되어 읽기 쉽게 유지합니다. 코어 히어로 및 서포트 시각 카드에 사용합니다.
제약 조건
- 포커스 가시성(WCAG 2.2 SC 2.4.11 / 2.4.13): 셀이 포커스 가능한 경우(예: 큰 링크 카드 역할) 명시적이고 고대비인
:focus-visible아웃라인이 있어야 합니다. 포커스 표시기는 상위 그리드 컨테이너나 카드 경계에 의해 잘려서는 안 됩니다. - 터치 대상(WCAG 2.2 SC 2.5.8): 벤토 셀 내의 모든 대화형 요소(버튼, 확장 토글, 슬라이더)는 최소 크기
24x24px이상이어야 하며 충분한 주변 공간을 확보해야 하고, 모바일 트리거의 경우44x44px를 권장합니다. - 읽기 순서 정렬(WCAG 2.1 SC 1.3.2): 스크린 리더가 구문 분석하는 콘텐츠의 순서는 벤토 그리드의 의미론적 의미 및 시각적 순서와 일치해야 합니다. 왼쪽 위 셀은 소스 DOM에서 항상 오른쪽 아래 셀보다 먼저 나타나야 합니다.
- 대비 비율(WCAG AA): 벤토 카드 내의 모든 텍스트는 카드 배경에 대해 최소
4.5:1의 대비를 충족해야 합니다. 색조가 있는 카드 내부의 설명에 저대비 미묘한 회색을 사용하지 마십시오.
일반적인 실패 패턴
- "시각적 잡동사니 서랍" 효과: 단지 들어맞는다는 이유로 임의의 요소를 벤토 그리드에 집어넣는 것입니다. 모든 셀은 상위 페이지에 대한 응집력 있는 스토리텔링 목적을 제공해야 합니다.
- DOM-시각적 불일치: 한 순서로 카드를 시각적으로 배치하면서 HTML에서는 완전히 다른 순서로 남겨두는 것입니다. 스크린 리더와 키보드 탭 탐색이 그리드 주위를 혼란스럽게 이동합니다.
- 모바일 레이아웃 폭발: 모바일 화면에서 하드코딩된 열 범위를 유지하여 카드가 축소되도록 강제하고, 텍스트가 넘쳐 완전히 읽을 수 없게 되는 현상입니다.
- 과도한 테두리 반경 충돌: 카드에 큰 테두리 반경을 사용하면서 작고 날카로운 여백을 유지하거나, 외부 카드의 동심원 코너 곡선과 일치하지 않는 테두리 반경을 가진 내부 요소를 중첩하는 경우입니다.
- 초점 앵커 부재: 모든 셀이 정확히 동일한 크기(예: 모두 1x1 또는 모두 2x1)인 그리드를 만들어 레이아웃의 진입점을 제거하고 스캔 피로를 유발하는 경우입니다.
검증 기준
- 통일된 지오메트리: 그리드는 균일한 거터가 있는 기본적이고 일관된 좌표 프레임워크(이상적으로는 데스크톱에서 4열 레이아웃)를 사용합니다.
- 명확한 계층 구조: 단일 "히어로" 블록이 시각적으로 지배적이며 명확한 레이아웃 진입점을 설정합니다.
- 자연스러운 탭 순서: 그리드 요소를 탭으로 이동하면 시각적 레이아웃과 일치하여 왼쪽에서 오른쪽, 위에서 아래로 예측 가능하게 이동합니다.
- 모바일 스택 가능성: 레이아웃이 모바일 뷰포트(< 768px)에서 수평 오버플로 없이 단일 열 스택으로 깔끔하게 전환됩니다.
- 내부 간격 일관성: 유사한 모든 카드에서 셀 패딩이 동일하며 요소의 수직 정렬이 균일합니다.
- 대비 AA 준수: 모든 카드 내부의 모든 텍스트 블록 및 상태 표시기의 대비 비율이 최소 WCAG AA 표준 4.5:1을 충족합니다.
- 대화형 안전: 벤토 카드 내부의 모든 위젯에 대한 탭 대상이 WCAG 2.2 24x24px 최소 기준을 충족합니다.