# Bento Grid — 디자인 스타일 가이드
## 기본 정보
- **ID**: bento-grid
- **카테고리**: ui-pattern
- **연도**: 2023
## 설명
일본 도시락 상자에서 영감을 받은 비대칭 그리드 레이아웃입니다.
## 핵심 원칙
- 다양성
- 구조화
- 균형
## 주요 특징
- 비대칭 그리드
- 다양한 카드 크기
- 명확한 구획
- 시각적 다양성
- 유연한 레이아웃
## 컬러 시스템 가이드
카드별 독립 색상 또는 통일된 팔레트. 벤토박스처럼 각 셀이 독립적으로 존재
### 색상 역할
- cell-background: 각 셀의 배경 — 독립 색상 또는 통일 색상
- featured-cell: 강조 셀 — primary 색상
- grid-gap: 셀 간격의 배경색 — 페이지 배경과 동일
### 색상 제약 조건
- 셀 배경이 모두 동일하면 경계 구분 필요
- 셀 수가 많을수록 색상 수 제한 (혼잡 방지)
### 다크모드 전략
셀 배경 어둡게, 글씨 밝게
### 대비 요구사항
각 셀 내부 텍스트-배경 WCAG AA
## 타이포그래피 가이드
- **폰트 성격**: 현대적이고 세련된 산세리프. 모던 테크 제품과 어울리는 폰트
- **권장 폰트 수**: 최대 2개
- **타입 스케일**: 1.25 (Major Third)
### 타이포그래피 제약
- 셀 크기에 따라 폰트 크기 조정 — 큰 셀에 큰 텍스트
- 작은 셀에서 텍스트 overflow 방지
## 하면 안 되는 것 (안티패턴)
- 균일한 격자만 사용 금지 — 다양한 크기 셀이 bento의 미학
- 셀 내부 정보 과다 금지 — 각 셀은 하나의 핵심 정보
## 반드시 포함해야 하는 것
- 다양한 크기의 셀 조합 (1×1, 1×2, 2×2 등)
- 셀 간 일관된 gap
- 각 셀 독립적 콘텐츠
## 모션 가이드
hover 시 셀 scale 또는 shadow 증가. 스크롤 진입 시 stagger 등장.
## 사용 사례
- 앱 피처 소개 페이지
- 포트폴리오
- 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
## 자주 묻는 질문 (FAQ)
### Q: Bento Grid이란 무엇인가요?
A: 일본 도시락 상자에서 영감을 받은 비대칭 그리드 레이아웃입니다.
### Q: Bento Grid의 핵심 디자인 원칙은 무엇인가요?
A: Bento Grid의 핵심 원칙은 다양성, 구조화, 균형입니다.
### Q: Bento Grid은 어떤 프로젝트에 적합한가요?
A: Bento Grid은 앱 피처 소개 페이지, 포트폴리오, SaaS 랜딩 페이지, 대시보드, 앱·제품 피처 소개, SaaS 랜딩, 포트폴리오, 대시보드 등의 프로젝트에 적합합니다.
### Q: Bento Grid의 장단점은 무엇인가요?
A: 장점으로는 시각적 다양성으로 스크롤 유도, 많은 정보를 한 화면에 효과적으로 배치, Apple·Stripe 등 유명 기업이 사용해 신뢰감이 있습니다. 단점으로는 반응형 설계가 복잡, 카드 간 균형 맞추기 어려움, 콘텐츠 양이 다르면 레이아웃 무너질 수 있음이 있습니다.
### Q: Bento Grid에서 색상은 어떻게 사용하나요?
A: 카드별 독립 색상 또는 통일된 팔레트. 벤토박스처럼 각 셀이 독립적으로 존재 색상 역할은 cell-background: 각 셀의 배경 — 독립 색상 또는 통일 색상, featured-cell: 강조 셀 — primary 색상, grid-gap: 셀 간격의 배경색 — 페이지 배경과 동일입니다. 주의사항: 셀 배경이 모두 동일하면 경계 구분 필요, 셀 수가 많을수록 색상 수 제한 (혼잡 방지).
### Q: Bento Grid에 어울리는 폰트 스타일은 무엇인가요?
A: Bento Grid에는 현대적이고 세련된 산세리프. 모던 테크 제품과 어울리는 폰트 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 셀 크기에 따라 폰트 크기 조정 — 큰 셀에 큰 텍스트, 작은 셀에서 텍스트 overflow 방지.
### Q: Bento Grid 디자인에서 하면 안 되는 것은 무엇인가요?
A: Bento Grid에서 피해야 할 것: 균일한 격자만 사용 금지 — 다양한 크기 셀이 bento의 미학, 셀 내부 정보 과다 금지 — 각 셀은 하나의 핵심 정보.
### Q: Bento Grid을 사용하는 실제 서비스나 제품은 무엇이 있나요?
A: Bento Grid을 적용한 대표적인 제품·서비스로는 Apple 제품 페이지, Stripe 랜딩, Linear 소개 페이지 등이 있습니다.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=bento-grid
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=bento-grid&merged=true
장점으로는 시각적 다양성으로 스크롤 유도, 많은 정보를 한 화면에 효과적으로 배치, 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 소개 페이지 등이 있습니다.