Bento Grid
일본 도시락 상자에서 영감을 받은 비대칭 그리드 레이아웃입니다.
- YEAR
- 2023
#EC4899
- 둥근 모서리
- 가는 테두리
- 가는 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
Basic Bento Grid
비대칭 그리드 레이아웃
Large Feature
주요 콘텐츠를 강조합니다
Medium
중간 크기 섹션
Wide Section
Tall Feature
세로로 긴 영역
Complex Bento Layout
복잡한 비대칭 구조
Analytics Dashboard
데이터 시각화 영역
Quick Stats
통계 정보
Users
1.2K
Featured
강조 콘텐츠
Recent Activity
Performance
Growth
Portfolio Bento Grid
포트폴리오 레이아웃에 적용
Main Project
Project 2
Project 3
Project 4
Wide showcase
Feature Grid
다양한 크기의 기능 카드
Fast Performance
최적화된 성능으로 빠른 로딩
Secure
강력한 보안
이웃 스타일
어디에 쓰나
실제로 쓰는 곳
- Apple 제품 페이지
- Stripe 랜딩
- Linear 소개 페이지
사용 사례
- 앱 피처 소개 페이지
- 포트폴리오
- SaaS 랜딩 페이지
- 대시보드
이런 프로젝트에 맞습니다
- 앱·제품 피처 소개
- SaaS 랜딩
- 포트폴리오
- 대시보드
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
핵심 원칙
- 다양성
- 구조화
- 균형
주요 특징
- 비대칭 그리드
- 다양한 카드 크기
- 명확한 구획
- 시각적 다양성
- 유연한 레이아웃
장점과 한계
장점
- 시각적 다양성으로 스크롤 유도
- 많은 정보를 한 화면에 효과적으로 배치
- Apple·Stripe 등 유명 기업이 사용해 신뢰감
한계
- 반응형 설계가 복잡
- 카드 간 균형 맞추기 어려움
- 콘텐츠 양이 다르면 레이아웃 무너질 수 있음
컬러 시스템
카드별 독립 색상 또는 통일된 팔레트. 벤토박스처럼 각 셀이 독립적으로 존재
색의 역할
- cell-background: 각 셀의 배경 — 독립 색상 또는 통일 색상
- featured-cell: 강조 셀 — primary 색상
- grid-gap: 셀 간격의 배경색 — 페이지 배경과 동일
제약
- 셀 배경이 모두 동일하면 경계 구분 필요
- 셀 수가 많을수록 색상 수 제한 (혼잡 방지)
다크모드 — 셀 배경 어둡게, 글씨 밝게
명도 대비 — 각 셀 내부 텍스트-배경 WCAG AA
타이포그래피
현대적이고 세련된 산세리프. 모던 테크 제품과 어울리는 폰트
글꼴은 최대 2종 · 스케일 비율 1.25 (Major Third)
- 셀 크기에 따라 폰트 크기 조정 — 큰 셀에 큰 텍스트
- 작은 셀에서 텍스트 overflow 방지
설계 제약
반드시 포함
- 다양한 크기의 셀 조합 (1×1, 1×2, 2×2 등)
- 셀 간 일관된 gap
- 각 셀 독립적 콘텐츠
하지 말 것
- 균일한 격자만 사용 금지 — 다양한 크기 셀이 bento의 미학
- 셀 내부 정보 과다 금지 — 각 셀은 하나의 핵심 정보
모션 — hover 시 셀 scale 또는 shadow 증가. 스크롤 진입 시 stagger 등장.
자주 묻는 질문
Bento Grid이란 무엇인가요?
일본 도시락 상자에서 영감을 받은 비대칭 그리드 레이아웃입니다.
Bento Grid의 핵심 디자인 원칙은 무엇인가요?
Bento Grid의 핵심 원칙은 다양성, 구조화, 균형입니다.
Bento Grid은 어떤 프로젝트에 적합한가요?
Bento Grid은 앱 피처 소개 페이지, 포트폴리오, SaaS 랜딩 페이지, 대시보드, 앱·제품 피처 소개, SaaS 랜딩, 포트폴리오, 대시보드 등의 프로젝트에 적합합니다.
Bento Grid의 장단점은 무엇인가요?
장점으로는 시각적 다양성으로 스크롤 유도, 많은 정보를 한 화면에 효과적으로 배치, Apple·Stripe 등 유명 기업이 사용해 신뢰감이 있습니다. 단점으로는 반응형 설계가 복잡, 카드 간 균형 맞추기 어려움, 콘텐츠 양이 다르면 레이아웃 무너질 수 있음이 있습니다.
Bento Grid에서 색상은 어떻게 사용하나요?
카드별 독립 색상 또는 통일된 팔레트. 벤토박스처럼 각 셀이 독립적으로 존재 색상 역할은 cell-background: 각 셀의 배경 — 독립 색상 또는 통일 색상, featured-cell: 강조 셀 — primary 색상, grid-gap: 셀 간격의 배경색 — 페이지 배경과 동일입니다. 주의사항: 셀 배경이 모두 동일하면 경계 구분 필요, 셀 수가 많을수록 색상 수 제한 (혼잡 방지).
Bento Grid에 어울리는 폰트 스타일은 무엇인가요?
Bento Grid에는 현대적이고 세련된 산세리프. 모던 테크 제품과 어울리는 폰트 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 셀 크기에 따라 폰트 크기 조정 — 큰 셀에 큰 텍스트, 작은 셀에서 텍스트 overflow 방지.
Bento Grid 디자인에서 하면 안 되는 것은 무엇인가요?
Bento Grid에서 피해야 할 것: 균일한 격자만 사용 금지 — 다양한 크기 셀이 bento의 미학, 셀 내부 정보 과다 금지 — 각 셀은 하나의 핵심 정보.
Bento Grid을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Bento Grid을 적용한 대표적인 제품·서비스로는 Apple 제품 페이지, Stripe 랜딩, Linear 소개 페이지 등이 있습니다.