벤토 그리드 (Bento Grid)

일본식 도시락(弁当, bento)의 칸막이에서 온 이름이에요. 애플 이벤트 요약 화면과 랜딩 페이지들이 이 스타일을 유행시켰습니다. 균일한 격자와 달리 타일 크기로 위계를 만들 수 있다는 게 핵심이에요 — 제일 중요한 것은 큰 칸, 부가 정보는 작은 칸.

언제 쓰나요?#

기능 소개 섹션, 대시보드, 포트폴리오처럼 성격이 다른 정보 덩어리들을 한눈에 보여줄 때 좋습니다. 반대로 같은 성격의 항목이 반복되는 목록(상품, 글)은 균일한 그리드가 맞아요 — 크기 차이가 의미 없는 위계를 만들어버리거든요.

AI에게 시키기#

랜딩의 기능 소개 섹션을 벤토 그리드로 만들어줘.
- CSS Grid 기반, 4열 × 2행에서 타일이 1×1, 2×1, 1×2로 섞이게
- 핵심 기능 하나는 2×2 큰 타일로 강조
- 모바일에서는 1열로 자연스럽게 쌓이게
- 타일 hover 시 살짝 떠오르는 효과

"카드 여러 개 배치해줘"라고 하면 균일한 격자가 나옵니다. 벤토라는 단어가 크기 위계까지 실어 나릅니다.

혼동 주의#

• 메이슨리(Masonry): 핀터레스트식 — 열 너비는 같고 높이만 제각각이며, 콘텐츠 양이 크기를 결정. 벤토는 디자이너가 크기를 의도적으로 배정
• 균일 그리드: 모든 칸이 같은 크기 — 항목이 대등할 때