Bento Grid UI

페이지가 가장 스캔하기 쉬운 때는 모든 아이디어가 자신만의 칸에 있고 그 칸들이 하나의 빡빡하고 규칙적인 격자를 이루며 타일처럼 배치될 때입니다.

혼합된 스팬의 둥근 모서리 셀로 이루어진 직사각형 격자로, 각 셀은 하나의 아이디어를 담고 있으며 셀 사이에는 동일한 작은 간격이 있습니다. Apple 기능 페이지가 2022년부터 이 레이아웃을 기본 제품 레이아웃으로 만들었습니다.

기간: 2022–현재 · 시대: 컨템포러리 & 스페이셜 · 영역: 그래픽 & UI 디자인 · 다른 이름: 벤토 레이아웃, 벤토 박스 그리드, 모듈형 카드 그리드

이 스킬을 로드해야 하는 경우

사용자가 다음을 요청할 때 로드합니다: "벤토", "벤토 그리드", "벤토 박스 레이아웃", "카드 그리드", "피처 그리드", "모듈형 카드", "애플 스타일 기능", "타일 레이아웃", "대시보드 타일".

적합한 용도: 제품 기능 페이지, SaaS 랜딩 페이지, 개인 포트폴리오, 앱 대시보드, 릴리스 노트 페이지.

다음 경우에는 사용하지 마십시오:

콘텐츠가 긴 형식의 산문인 경우. 최대 30단어의 셀은 논증을 조각으로 나누기 때문입니다.
아이템에 엄격한 순서나 위에서 아래로 따라야 하는 순위가 있는 경우.
콘텐츠가 고르지 않거나 희박한 경우. 5개 미만의 셀을 가진 그리드는 눈에 띄는 빈 공간을 남깁니다.

시스템 지침

Bento Grid UI로 UI 또는 그래픽 레이아웃을 생성할 때 반드시 다음을 따라야 합니다:

페이지를 4열 또는 12열 그리드로 나누고 각 셀이 1, 2 또는 3열과 1 또는 2행을 차지하도록 합니다.
모든 셀 사이에 12px에서 16px의 균일한 간격을 유지하고 간격 크기를 혼합하지 마십시오.
모든 셀에 20px에서 28px의 반경을 지정하고 페이지의 모든 셀에 동일한 반경을 사용합니다.
각 셀에 하나의 메시지를 넣습니다: 최대 8단어의 제목, 하나의 시각 자료 또는 하나의 숫자.
피처 셀을 2x2로 만들고 다른 셀은 1x1 또는 2x1로 채워서 크기가 중요도의 순서를 나타내도록 합니다.
하나의 계열에서 2~4개의 색조로 셀을 채우고, 하나 또는 두 개의 셀은 악센트 색상으로 채웁니다.
셀 내용을 24px의 동일한 내부 여백으로 정렬하고 텍스트는 왼쪽 상단 또는 왼쪽 하단에 고정합니다.

가드레일

아래 각 줄은 스타일을 위반합니다. 반환하기 전에 출력물을 목록과 대조하여 확인하십시오.

절대 금지: 하나의 그리드 내에서 셀 사이에 다른 크기의 간격.
절대 금지: 직사각형을 깨는 그리드의 빈 구멍.
절대 금지: 한 페이지에서 모서리 반경이 다른 셀.
절대 금지: 하나의 셀에 여러 개의 메시지 또는 클릭 유도 문구.
절대 금지: 첫 번째 뷰포트에 8개 이상의 셀.
절대 금지: 타일링과 경쟁하는 두꺼운 테두리 또는 강한 그림자.
절대 금지: 셀 내부에 30단어가 넘는 단락.

벡터 프로필

축	점수	1의 의미	5의 의미
장식성	`■■□□□` 2/5	순수 미니멀	맥시멀리스트
차원성	`■■□□□` 2/5	엄격한 2D	완전한 3D / 공간적
그리드 강성	`■■■■■` 5/5	혼돈 / 유기적	엄격한 수학적 그리드
스큐어모픽 사실성	`■■□□□` 2/5	추상적 디지털	사실적인 재질
타이포그래픽 표현성	`■■■□□` 3/5	중립적 / 보이지 않음	실험적 / 일러스트적

이 점수를 유지하십시오. 요청이 축을 2점 이상 이동시키면 스타일을 벗어난 것입니다: "계통 대안"으로 이동하십시오.

공간 및 그리드 논리

그리드 메커니즘: 데스크톱에서 16px 간격의 4열 그리드와 200px에서 280px의 행; 셀은 1~~3열과 1~~2행에 걸쳐 있으며, 768px 미만에서는 그리드가 1열 또는 2열로 축소됩니다.
여백 비율: 간격이 영역의 5~8%를 차지합니다. 열린 공간은 셀 내부로 이동하며, 여기서 패딩은 24px에서 32px입니다. 간격 스케일은 8, 12, 16, 24, 32 및 64px입니다.
정렬 규칙: 셀 가장자리는 두 축 모두에서 그리드에 정렬됩니다. 셀 내부의 텍스트는 왼쪽 정렬되고 상단 또는 하단에 고정됩니다. 전체 벤토 블록은 1120px에서 1280px의 컨테이너에서 중앙에 배치됩니다.
컨테이너 기하학: 셀은 24px 반경의 둥근 직사각형이며 외부 여백이 없습니다. 셀 종횡비는 1:1, 2:1 및 1:2이며 내부의 시각 자료는 동일한 반경으로 잘립니다.

타이포그래피

분류: 네오 그로테스크 산세리프 · 기하학적 산세리프
자간: 디스플레이 크기는 -0.03em; 본문은 0으로 유지; 작은 캡션은 +0.01em.
행간: 디스플레이 1.05 ~ 1.15; 본문 1.45; 캡션 1.3.
계층 규칙:
- 피처 셀 제목은 40px ~ 56px, 다른 제목은 20px ~ 28px, 캡션은 14px로 설정합니다.
- 제목에는 가중치 600, 캡션에는 400을 사용합니다. 보조 라인에는 4.5:1의 음소거된 색상을 사용합니다.
- 제목은 8단어, 캡션은 20단어로 제한합니다. 셀 공간이 작기 때문입니다.
- 각 주요 지표에 대해 64px 이상의 큰 숫자와 14px 캡션을 쌍으로 사용합니다.

글꼴 페어링

디스플레이	본문	비고
Inter Tight	Inter	짧은 셀 제목을 위한 타이트한 디스플레이 크기.
Geist	Geist	가중치 400, 500, 600의 단일 패밀리.
Plus Jakarta Sans	Inter	소비자 제품을 위한 더 따뜻한 디스플레이 서체.

색상 및 조명

팔레트 구조: 중립적인 페이지, 낮은 채도의 하나의 계열에서 2~4개의 색조로 된 셀, 그리드의 약 15%를 차지하는 하나 또는 두 개의 악센트 셀.
대비 규칙: 셀 위의 잉크는 약 17:1, 셀 위의 그라파이트는 약 5:1을 제공합니다. 악센트 블루 위의 흰색 텍스트는 약 4.7:1을 제공하여 본문 텍스트에 대해 WCAG AA를 통과합니다. 모든 셀 쌍을 4.5:1 이상으로 유지하십시오.
표면 처리: 플랫 또는 거의 플랫한 채움; 셀은 사진, 제품 렌더링 또는 두 가지 가까운 색조의 그라데이션을 포함할 수 있으며, 셀은 한 가지 이상의 표면 유형을 혼합하지 않습니다.
빛과 그림자: 대부분 없음; 선택적으로 0 1px 2px rgba(0, 0, 0, 0.06) 그림자 또는 1px rgba(0, 0, 0, 0.06) 테두리가 흰색 셀을 페이지에서 분리합니다.

팔레트

이름	Hex	역할
Page	`#F5F5F7`	페이지 배경
Cell	`#FFFFFF`	기본 셀 채움
Cell Tint	`#E8E8ED`	보조 셀 채움
Ink	`#1D1D1F`	텍스트
Graphite	`#6E6E73`	보조 텍스트
Accent Blue	`#0071E3`	악센트 셀 및 링크
Night	`#000000`	어두운 셀 채움

재질 및 질감

표면 시뮬레이션: 없음. 셀은 광택이 나는 도시락 칸으로 읽히지만 표면은 평평한 색상 또는 이미지이며 어떤 재질도 모방하지 않습니다.
테두리 규칙: 기본적으로 테두리 없음. 흰색 셀이 흰색 페이지 위에 있을 때 1px solid rgba(0, 0, 0, 0.06) 테두리가 나타납니다. 다크 모드는 1px rgba(255, 255, 255, 0.1)을 사용합니다.
블러 및 입면: 블러는 기본적으로 0px입니다. 입면은 페이지에 0 1px 2px 그림자와 호버 시 0 12px 32px rgba(0, 0, 0, 0.12) 리프트로 제한됩니다.

장식 및 아이콘그래피

아이콘그래피: 1.5px ~ 2px 선과 둥근 캡이 있는 24px ~ 32px의 심플한 아이콘, 잉크 색상 또는 악센트 셀 위에 흰색; 셀당 최대 하나의 아이콘.
일러스트레이션: 제품 렌더링, UI 스크린샷 및 큰 숫자, 셀 반경으로 잘림; 추상적인 그라데이션이 빈 셀을 채웁니다.
장식 요소: 2x2 피처 셀 · 과장된 지표 숫자 · UI 스크린샷 크롭 · 필 태그 · 그라데이션 셀

모션 및 상호작용

화면에서 탄생: 예
전환 물리: 셀이 40ms ~ 60ms의 간격으로 들어오며, 페이드 인 및 12px 상승; 호버 시 셀은 1.02로 확대되고 그림자가 깊어짐; 이웃은 움직이지 않습니다.
이징: cubic-bezier(0.25, 0.1, 0.25, 1)
지속 시간 (ms): 350
호버 및 활성: 호버는 셀을 1.02로 확대하고 0 12px 32px rgba(0, 0, 0, 0.12) 그림자를 추가합니다. 활성은 0.98로 축소됩니다. 포커스는 2px 오프셋으로 2px Accent Blue 링을 추가합니다.

코드 및 토큰 프라이머

루트 요소에 data-style="bento-grid-ui"를 설정하고 토큰을 붙여넣으십시오. 파일 tokens.css에는 동일한 토큰과 참조 규칙 세트가 있습니다.

[data-style="bento-grid-ui"] {
  --color-bg: #F5F5F7;
  --color-surface: #FFFFFF;
  --color-text: #1D1D1F;
  --color-muted: #6E6E73;
  --color-primary: #1D1D1F;
  --color-accent: #0071E3;
  --color-border: rgba(0, 0, 0, 0.06);
  --font-sans: "Inter", system-ui, sans-serif;
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --border-radius: 24px;
  --border-width: 1px;
  --shadow-elevation: 0 1px 2px rgba(0, 0, 0, 0.06);
  --backdrop-filter: none;
  --space-unit: 8px;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration: 350ms;
  --grid-gap: 16px;
  --cell-padding: 24px;
  --color-on-bg: #1D1D1F;
  --color-on-surface: #1D1D1F;
  --color-on-primary: #F5F5F7;
  --color-on-accent: #FFFFFF;
  --color-muted-on-bg: #6E6E73;
  --color-muted-on-surface: #6E6E73;
  --color-link: #1D1D1F;
  --color-link-on-surface: #0071E3;
  --display-weight: 600;
  --subhead-weight: 500;
  --body-weight: 400;
  --strong-weight: 600;
  --label-weight: 500;
  --display-tracking: -0.03em;
  --display-leading: 1.05;
  --display-case: none;
  --body-leading: 1.5;
  --body-size: 16px;
  --icon-stroke: 1.75;
}

Tailwind 패턴:

요소	클래스
page	`bg-[#F5F5F7] text-[#1D1D1F] font-sans antialiased p-4 md:p-8`
grid	`mx-auto grid max-w-6xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 auto-rows-[240px]`
card	`rounded-3xl border border-black/[0.06] bg-white p-6 shadow-[0_1px_2px_rgba(0,0,0,0.06)] transition duration-[350ms] hover:scale-[1.02] hover:shadow-[0_12px_32px_rgba(0,0,0,0.12)]`
feature card	`rounded-3xl bg-[#0071E3] p-8 text-white sm:col-span-2 sm:row-span-2`
heading	`font-semibold text-2xl leading-[1.1] tracking-[-0.03em]`

비주얼 팩

이 스타일의 그림과 아이콘은 파일입니다. 있는 그대로 사용하거나 사양으로 읽고 동일한 언어로 직접 그리십시오.

파일	내용
`pack/hero.svg`	히로 플레이트, 800x600. 스타일의 시각적 언어로 된 추상적인 그림.
`pack/pattern.svg`	패턴 타일, 80x80. 양방향으로 반복됩니다.
`pack/icons.svg`	아이콘 스프라이트: home, search, heart, star, bell, user, mail, calendar, image, bolt, play, check, close, sliders.

아이콘: 아웃라인, 24px 필드에서 선 굵기 1.75, 둥근 캡, 둥근 조인, 컨테이너: 둥근 모서리. 사용법: <svg class="icon"><use href="pack/icons.svg#home"/></svg>. 아이콘은 currentColor를 사용합니다.
아이콘 패밀리: 스프라이트는 Lucide Contributors의 Lucide (Regular)에서 잘라낸 것이며, 라이선스는 ISC입니다. 이유: 하나의 굵기로 된 평범한 둥근 선: 셀에서 조용하며, 현재 제품 인터페이스의 기본입니다. 데모용 오픈 소스 대체재입니다. 제품의 경우 브랜드의 아이콘 라이브러리를 사용하고 아래 규칙에 따라 패밀리를 선택하십시오.
디스플레이 유형: 가중치 600, 자간 -0.03em, 행간 1.05, 대소문자 변환: 없음.
가중치: 디스플레이 600, 부제목 500, 본문 400, 텍스트 내 볼드 600, 레이블 및 버튼 500. 스타일은 3가지 가중치(400, 500, 600)를 사용하며 그 외에는 없습니다. 디스플레이는 본문보다 200 더 무겁습니다. 악센트는 크기입니다. 더 큰 단어가 악센트이므로 가중치는 적게 유지됩니다.
본문 유형: 16px, 행간 1.5.
페이지: 히로 적층, 왼쪽 정렬, 조밀한 밀도, 악센트 기울기 0°.
텍스트 색상: --color-text는 기본 읽기 필드에만 사용됩니다. 각 필드에는 해당하는 토큰을 사용하십시오: --color-on-bg, --color-on-surface, --color-on-primary, --color-on-accent.

아이콘 팩 선택 방법

아이콘 팩은 그림을 위한 서체입니다. 텍스트 서체와 동일한 주의를 기울여 선택하십시오. 이 규칙은 오픈 소스 세트와 라이선스 라이브러리 모두에 적용됩니다.

선이 세로 획과 일치합니다. 텍스트 크기에서 본문 텍스트 옆에 아이콘을 배치하십시오. 아이콘의 선과 글자의 세로 획이 같은 굵기를 가집니다.
터미널과 모서리는 반경 토큰을 따릅니다. 버트 캡과 마이터 조인은 반경 0과 함께 사용합니다. 둥근 캡과 둥근 조인은 부드러운 반경과 함께 사용합니다.
채움 모드는 시대의 기술을 따릅니다. 인쇄 시대는 단색 형태를 잘라냅니다. 깊이가 있는 화면 시대는 형태를 채우고 음영을 줍니다. 현재 제품 인터페이스는 아웃라인을 그립니다.
은유는 스타일보다 젊지 않습니다. 각 그림은 그 시대가 알고 있던 물체입니다. 더 늦은 시대의 은유가 있는 아이콘은 시대를 깨뜨립니다.
하나의 패밀리, 하나의 그리드. 모든 아이콘은 하나의 패밀리와 하나의 변형에서 나오며, 하나의 필드에 그려집니다. 한 표면에서 패밀리를 혼합하지 마십시오.
패밀리는 제품을 포괄합니다. 커밋하기 전에 제품에 필요한 각 개념을 나열하십시오. 그중 하나에 대한 아이콘이 없는 패밀리는 잘못된 패밀리입니다.
색상은 토큰입니다. 아이콘은 currentColor를 사용합니다. 두 번째 색조는 파일이 아닌 토큰에서 가져옵니다.
라이선스가 사용을 허용합니다. 세트의 라이선스를 읽으십시오. 라이선스가 요구하는 곳에 크레딧을 표시하십시오. 브랜드가 있는 제품은 라이선스가 있는 라이브러리를 사용하고 패밀리를 선택하는 데 동일한 규칙을 적용합니다.

계통 대안

사용자가 변형을 요청할 때 즉흥적으로 대응하지 마십시오. 여기에 명명된 이웃 쪽으로 혼합하고 해당 스킬을 로드하십시오.

사용자가 더 질서 있는 것을 요청하면: swiss-international (스위스 국제 스타일) 쪽으로 이동하십시오. 반경을 0px로 설정하고 셀 채움을 제거하고 셀을 1px 규칙으로 나누십시오. 12열 그리드와 서체 스케일은 유지하십시오.
사용자가 더 유리 같은 것을 요청하면: glassmorphism (글래스모피즘) 쪽으로 이동하십시오. 셀을 rgba(255, 255, 255, 0.18)로 채우고 그라데이션 페이지 위에 backdrop-filter blur(20px)를 적용하십시오. 간격과 반경은 유지하십시오.
사용자가 더 대담한 것을 요청하면: neo-brutalism-ui (네오 브루탈리즘 UI) 쪽으로 이동하십시오. 3px 검은색 테두리와 4px 4px 0 0 #000000 그림자를 추가하고 셀을 강렬한 평평한 색조로 채우십시오. 그리드와 16px 간격은 유지하십시오.
사용자가 더 평평한 것을 요청하면: flat-design (플랫 디자인) 쪽으로 이동하십시오. 그림자와 테두리를 제거하고 사진 없이 단색 셀 채움을 사용하십시오. 24px 반경과 간격은 유지하십시오.
유래 (더 정통적인 버전을 원하면 여기로): flat-design, swiss-international
잘 혼합되는 스타일: glassmorphism, swiss-international
벡터 프로필 기준 가장 가까운 스타일: bauhaus, material-design, swiss-international

감성적 목표

질서 정연한 호기심: 뷰어는 제품이 체계적이고 간결하며 몇 초 안에 스캔하기 쉽다고 느낍니다.

키워드

...

[번역을 위해 잘림]

벤토 그리드 UI