---
type: knowledge
domain: design
status: active
last-reviewed: 2026-07-06
---

# 벤토 그리드 (Bento Grid)

> 한 줄 정의
> 도시락(bento)처럼 크기가 다른 칸을 빈틈없이 짜맞춰 기능·스펙을 한 화면에 진열하는 레이아웃. Apple 이벤트 요약 슬라이드가 이름을 유행시켰고, linear.app이 웹 문법(다크 셀 + 보더 + 글로우)의 표준을 만들었다.

![[preview-bento.jpg]]

## 언제 쓰나 / 피하나

| 적합 | 부적합 |
|------|--------|
| 제품 기능 소개 (피처 그리드의 상위호환) | 서사가 필요한 스토리텔링 (벤토는 병렬 — 흐름이 없다) |
| 대시보드형 마케팅·스펙 요약 | 진열할 항목이 5개 미만 (칸이 안 짜짐) |
| 포트폴리오 요약 한 장 | 롱폼·독서 화면 |

## 스타일 DNA

### 팔레트 — 셀은 같은 재질, 내용물만 다르게

| 토큰 | 값 | 역할 |
|------|-----|------|
| surface | `#0B0C10` | 페이지 바탕 (다크가 표준이 됐지만 라이트도 성립) |
| cell | `#15171C` | 셀 배경 |
| stroke | `rgba(255,255,255,.08)` | 셀 보더 |
| text | `#EDEEF2` | 본문 |
| glow | 브랜드색 1개 | 포인트 셀 1~2곳 전용 |

- 칸마다 다른 색 금지 — 도시락 칸은 같은 그릇이다. 다양성은 내용물(비주얼)이 낸다.

### 구조 — 위계가 벤토를 만든다

- 그리드: 4컬럼(또는 12), `gap`·`radius`는 **전역 상수** (16~20px / 16~24px).
- 셀 위계: **히어로 셀 1개(2×2)가 주인공**, 나머지는 조연 — 전부 같은 크기면 벤토가 아니라 그냥 카드 그리드.
- 셀 내부는 "라벨 + 한 줄 카피 + 비주얼 1개"로 절제. 문단·CTA가 필요하면 별도 섹션으로.

### 타이포

- 중립 산세리프(Inter) 하나로 충분 — 벤토는 타이포가 아니라 밀도와 리듬이 주인공.
- 셀 라벨은 12~13px 보조색, 수치는 크게 — [[데이터 디자인]]의 tabular 감각을 빌려온다.

## 핵심 레시피 (CSS)

```css
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 180px;
  gap: 16px;                       /* gap·radius는 전역 상수 */
}
.cell {
  background: #15171C;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 24px;
  overflow: hidden;                /* 비주얼은 칸 밖으로 나가지 않는다 */
}
.cell--hero { grid-column: span 2; grid-row: span 2; }
.cell--wide { grid-column: span 2; }
.cell:hover {
  background: #191C22;
  border-color: rgba(255,255,255,.16);   /* 셀이 깨어나는 정도면 충분 */
}
@media (max-width: 720px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .cell--hero, .cell--wide { grid-column: auto; grid-row: auto; }
}
```

- 셀 안 비주얼은 일부러 크게 넣고 `overflow: hidden`으로 자르면 "가득 찬 도시락" 밀도가 난다.
- 모바일에서는 span을 전부 풀고 1열 스택 — 벤토는 본질적으로 데스크톱 형식임을 받아들여라.

## 흔한 실수

- 모든 셀 동일 크기 → 카드 그리드로 강등. 히어로 셀부터 정하고 시작하라.
- gap·radius 셀마다 제각각 → 칸막이가 뒤틀린 도시락. 두 값은 상수다.
- 셀마다 CTA·긴 문단 → 벤토 셀은 한 입 거리. 씹을 게 많으면 섹션으로 빼라.
- 글로우 남발 → 포인트 셀 1~2개만. 전부 빛나면 아무것도 안 빛난다.
- 서사를 벤토로 → 순서를 읽어야 하는 콘텐츠는 스크롤 섹션으로.

## 실물 레퍼런스

**정석**
- [Linear](https://linear.app) — 다크 벤토 + 보더 + 글로우 문법의 표준을 만든 제품 사이트.
- Apple 이벤트 키노트 요약·제품 페이지 — "벤토"라는 이름을 유행시킨 원조. 시즌마다 바뀌므로 구조(히어로 셀 배치·밀도)만 관찰.

**갤러리**
- [Bento Grids](https://bentogrids.com) — 벤토만 모은 큐레이션 갤러리. 셀 위계·간격 리듬 관찰용.
- [One Page Love — bento 태그](https://onepagelove.com/tag/bento) — 실서비스 원페이지 벤토 모음.
- [Dribbble — bento-grids 태그](https://dribbble.com/tags/bento-grids) — 컨셉 벤토 대량 (실구현 아님 주의).

**기법**
- [A Complete Guide to CSS Grid (CSS-Tricks)](https://css-tricks.com/complete-guide-css-grid-layout/) — span·auto-rows 등 벤토 구현 문법의 사전.
- [An Interactive Guide to CSS Grid (Josh Comeau)](https://www.joshwcomeau.com/css/interactive-guide-to-grid/) — 인터랙티브 데모로 그리드 배치 감각 자체를 익히는 입문 결정판.

**폰트**
- [Inter](https://fonts.google.com/specimen/Inter) — 중립 산세리프면 충분. 밀도가 주인공이다.

- 검색 키워드: `bento grid ui`, `apple bento slide`

- 로컬 데모(코드=이 문서 레시피): `스타일/_previews/스타일-데모.html`

## 관련 문서

- [[디자인 스타일 카탈로그]] · 인접 스타일: [[데이터 디자인]] (정보 밀도 축 — 수치 셀의 조상), [[리퀴드 글라스]] (셀 재질을 유리로 바꾼 변주), [[스위스 인터내셔널]] (그리드 순수주의 vs 상품 진열)