디자인 레이아웃
벤토 UI(Bento UI)
벤토 UI(Bento UI)는 정보의 중요도에 따라 크기가 다른 모듈을 반복되는 그리드 안에 배치하는 화면 구성 방식입니다.
쉬운 설명
크기가 다른 콘텐츠 블록을 도시락 칸처럼 하나의 그리드에 정리하는 레이아웃.
Visual sample
눈으로 보면 이렇습니다
중요도에 따라 다른 크기의 블록을 조합한 반응형 벤토 UI 샘플
- 모듈러 그리드
- 다양한 블록 크기
- 중요도가 보이는 배치
Responsive bento grid, varied card spans, clear feature hierarchy, cohesive spacing, avoid card-within-card layouts Style variations
같은 스타일도 이렇게 달라집니다
같은 격자를 사용해도 무엇을 크게 보여주느냐에 따라 제품 소개, 데이터 대시보드와 에디토리얼 홈처럼 전혀 다른 정보 흐름을 만들 수 있습니다.제품 소개형 벤토
핵심 기능은 큰 블록에, 보조 기능은 작은 블록에 배치해 한 화면에서 제품의 장점을 훑게 합니다.
Product showcase bento grid, one dominant feature tile, varied card spans, lime accent, concise feature copy 대시보드형 벤토
수치, 상태와 빠른 작업을 크기가 다른 모듈로 정리해 개인화된 업무 홈을 만듭니다.
Functional bento dashboard, responsive 12-column grid, prioritized metrics, calm blue modules, consistent gutters 에디토리얼 벤토
이미지와 큰 제목 블록의 크기를 다르게 조합해 잡지 표지처럼 탐색의 리듬을 만듭니다.
Editorial bento layout, asymmetric image and headline modules, warm cream base, pink accent, strong reading order Visual DNA
스타일을 만드는 구체적인 요소
단어 하나보다 아래 요소를 함께 지정해야 AI가 더 일관된 결과를 만듭니다.선과 테두리
0–1px · Optional격자와 배경 차이만으로 모듈이 구분되면 선을 생략합니다. 필요한 경우 중립적인 가는 선만 사용합니다.
모서리
12–24px · Consistent모든 모듈에 같은 반경 계열을 사용합니다. 큰 블록이라고 모서리 값까지 임의로 바꾸지 않습니다.
컬러 톤
Neutral + Module accents중립 배경 위에 2–3개의 연한 색면을 배치하고 가장 중요한 행동에는 짙은 대비색을 사용합니다.
타이포그래피
Sans · Scale by span큰 모듈에는 큰 제목, 작은 모듈에는 짧은 라벨을 배치해 블록 크기와 정보 중요도를 일치시킵니다.
아이콘
Simple Line / Filled모듈의 역할을 빠르게 훑을 수 있는 단순한 아이콘을 한 계열로 통일하고 장식 아이콘은 줄입니다.
그림자
0–16px · Low elevation기본 모듈은 평면으로 두고 클릭 가능한 카드나 떠 있는 상태에만 약한 그림자를 제한적으로 사용합니다.
간격과 밀도
12–24px · Shared gutter모든 모듈이 같은 gutter를 공유해야 하나의 시스템으로 보입니다. 카드 내부 여백도 단계별로 통일합니다.
모션
160–240ms · Module statehover와 선택 상태는 배경·테두리·명암으로 표시합니다. 카드 크기가 갑자기 변해 격자를 흔들지 않게 합니다.
Where it works
어떤 프로젝트에 잘 어울리나요?
스타일의 강도는 제품의 목적과 사용자가 읽어야 하는 정보량에 맞춰 조절해야 합니다.적극적으로 추천
여러 기능을 중요도에 따라 한 화면에 압축해 제품의 전체 그림을 빠르게 전달할 수 있습니다.
사용자에게 중요한 상태와 빠른 작업을 서로 다른 크기의 모듈로 우선 배치하기 좋습니다.
작업물의 성격과 비중을 크기와 이미지 비율로 표현해 탐색 리듬을 만들 수 있습니다.
강도를 조절해서 적용
프로모션 영역에는 효과적이지만 반복 상품 목록은 동일한 카드 크기가 비교에 더 유리할 수 있습니다.
상위 요약과 진입점에는 쓸 수 있지만 연속해서 읽거나 입력하는 본문까지 쪼개면 흐름이 끊깁니다.
모듈 크기 차이가 행과 열 비교를 방해하므로 표 자체보다 요약 화면에만 적용하는 편이 좋습니다.
Compare
비슷한 스타일과 무엇이 다른가요?
둘 다 정보를 독립된 표면에 담지만, 벤토 UI는 여러 크기의 모듈이 하나의 격자에서 중요도와 읽기 순서를 만들고 일반 카드 UI는 반복 가능한 동일 단위에 더 가깝습니다.벤토 UI(Bento UI)
- 블록 크기 차이가 정보 위계를 표현
- 전체 격자가 하나의 조합으로 작동
- 화면 크기에 따라 span과 순서를 재구성
Card UI
- 대체로 동일한 크기의 반복 단위
- 각 카드가 독립적으로 추가·삭제됨
- 목록 탐색과 항목 비교에 유리
Prompt recipe
AI에게 요청할 때는 이렇게 조합하세요
Responsive bento grid, varied card spans, clear feature hierarchy, cohesive spacing, avoid card-within-card layouts. Use a responsive grid with deliberate 1x1, 2x1, and 2x2 spans, one dominant module, consistent 12–24px gutters, concise copy, and a clear mobile stacking order; avoid equal-sized card walls, nested cards, arbitrary spans, and hiding essential content for visual symmetry. Final check
완성 전에 확인하세요
- 01
가장 큰 모듈이 실제로 가장 중요한 정보나 행동을 담고 있는가?
- 02
모든 블록이 같은 그리드와 gutter 규칙에 맞춰져 있는가?
- 03
각 모듈의 제목과 내용이 블록 크기에 맞게 짧고 명확한가?
- 04
동일한 크기의 카드만 반복되어 일반 카드 목록처럼 보이지 않는가?
- 05
모바일에서 중요한 순서대로 자연스럽게 한 열로 재배치되는가?
- 06
카드 안에 카드를 겹쳐 정보 구조가 불필요하게 깊어지지 않았는가?
Explore more
다른 스타일도 보러 가기
작은 미리보기로 분위기를 비교하고 다음 디자인 용어로 이어가세요.관계 지도
