# Bento Grid — 디자인 스타일 가이드
## 기본 정보
- **ID**: bento-grid
- **카테고리**: ui-pattern
- **연도**: 2023
## 설명
일본 도시락 상자에서 영감을 받은 비대칭 그리드 레이아웃입니다.
## 핵심 원칙
- 다양성
- 구조화
- 균형
## 주요 특징
- 비대칭 그리드
- 다양한 카드 크기
- 명확한 구획
- 시각적 다양성
- 유연한 레이아웃
## 사용 사례
- 앱 피처 소개 페이지
- 포트폴리오
- SaaS 랜딩 페이지
- 대시보드
## 추천 프로젝트 유형
- 앱·제품 피처 소개
- SaaS 랜딩
- 포트폴리오
- 대시보드
## 장점
- 시각적 다양성으로 스크롤 유도
- 많은 정보를 한 화면에 효과적으로 배치
- Apple·Stripe 등 유명 기업이 사용해 신뢰감
## 단점·한계
- 반응형 설계가 복잡
- 카드 간 균형 맞추기 어려움
- 콘텐츠 양이 다르면 레이아웃 무너질 수 있음
## 실제 사용 제품·서비스
- Apple 제품 페이지
- Stripe 랜딩
- Linear 소개 페이지
## 관련 스타일
- [card-design](https://ui.buildersgate.com/styles/card-design)
- [minimalism](https://ui.buildersgate.com/styles/minimalism)
- [abstract-geometric](https://ui.buildersgate.com/styles/abstract-geometric)
## 디자인 토큰
### 색상
- primary: #EC4899
- secondary: #DB2777
- accent: #F59E0B
- background: #FDF2F8
- surface: #FFFFFF
- text: #1F2937
- textSecondary: #6B7280
- border: #FCE7F3
### 헤더
- background: linear-gradient(135deg, #EC4899 0%, #9D174D 100%)
- textColor: #FFFFFF
- accentColor: #F59E0B
### 타이포그래피
- fontFamily: Inter, 'Noto Sans KR', sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: -0.02em
### 스페이싱
- unit: 8px
- scale: 1
### 그림자 (Shadows)
- sm: 0 1px 4px rgba(236,72,153,0.08)
- md: 0 4px 14px rgba(236,72,153,0.12)
- lg: 0 8px 28px rgba(236,72,153,0.16)
- xl: 0 16px 48px rgba(236,72,153,0.20)
### Border Radius
- none: 0
- sm: 8px
- md: 16px
- lg: 24px
- full: 9999px
### 테두리 (Borders)
- width: 1px
- style: solid
- color: #FCE7F3
### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.25s ease
### 애니메이션
- duration: 250ms
- easing: ease-out
### 컴포넌트 토큰
- 버튼: shape=pill / hoverEffect=lift / textTransform=none
- 카드: style=elevated / hoverEffect=lift
- 인풋: style=outlined / focusEffect=glow
- 배지: shape=pill / style=solid
- 아이콘: package=lucide / strokeWidth=1.5 / defaultSize=24
### 레이아웃
- containerStyle: fluid
- sectionSpacing: normal
### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=bento-grid
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=bento-grid&merged=true
Bento Grid
일본 도시락 상자에서 영감을 받은 비대칭 그리드 레이아웃입니다.
주요 특징
- 비대칭 그리드
- 다양한 카드 크기
- 명확한 구획
- 시각적 다양성
- 유연한 레이아웃
장단점
장점
- +시각적 다양성으로 스크롤 유도
- +많은 정보를 한 화면에 효과적으로 배치
- +Apple·Stripe 등 유명 기업이 사용해 신뢰감
단점 / 한계
- −반응형 설계가 복잡
- −카드 간 균형 맞추기 어려움
- −콘텐츠 양이 다르면 레이아웃 무너질 수 있음
적합한 사용처
사용 사례
- 앱 피처 소개 페이지
- 포트폴리오
- SaaS 랜딩 페이지
- 대시보드
이런 프로젝트에 추천
앱·제품 피처 소개SaaS 랜딩포트폴리오대시보드
실제 사용 예시
Apple 제품 페이지Stripe 랜딩Linear 소개 페이지
UI 컴포넌트 예제
이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.
Basic Bento Grid
비대칭 그리드 레이아웃
Large Feature
주요 콘텐츠를 강조합니다
Small
Small
Wide Section
Complex Bento Layout
복잡한 비대칭 구조
📊
Analytics Dashboard
데이터 시각화 영역
❤️
Portfolio Bento Grid
포트폴리오 레이아웃에 적용
Feature Grid
다양한 크기의 기능 카드
⚡
Fast Performance
최적화된 성능으로 빠른 로딩