Bento Grid

ベントーグリッド / 2020s / 레이아웃 / 정보 디자인

성격이 다른 정보를 독립된 상자로 나누어, 전체를 한눈에 보여 준다.

Bento Grid — AI가 생성한 해석 이미지 1 — AI가 생성한 해석 이미지입니다. 참고 작품이 아닙니다

Bento Grid — AI가 생성한 해석 이미지 2 — AI가 생성한 해석 이미지입니다. 참고 작품이 아닙니다

Bento Grid — AI가 생성한 해석 이미지 3 — AI가 생성한 해석 이미지입니다. 참고 작품이 아닙니다

한눈에 판단

시각적 특징

크고 작은 카드
정렬된 간격
한 화면 요약
모듈

적합한 용도

여러 기능을 하나의 이야기로 소개할 때
정보량을 지키면서도 친근하게 보이고 싶을 때

이 양식 사용하기

짧은 지침을 프로젝트에 적용하거나 구조화된 사양을 AI 도구에 넘길 수 있습니다.

design.md 이미지 프롬프트 JSON API MCP·기계 접근 겹치기

ChatGPT에서 열기 Claude에서 열기 Google AI에서 열기

자세한 제작법과 출처제작 규칙, 실제 사례, 비교, 연구, 인용 형식

사전 항목

타이포그래피: 담백한 산세리프로 숫자와 짧은 제목을 크게 쓴다
구성: 4열에서 6열 사이에 크고 작은 카드를 빈틈없이 깐다
재료: 면마다 역할을 달리하고 장식은 카드 안으로 제한한다
주의: 모든 카드를 똑같이 만들지 말고 중요도에 따라 면적과 밀도를 바꾼다.
더 읽을거리: modular dashboard layouts / product storytelling grids

관련 항목

Swiss (スイス・スタイル)공통 인상: Trust.Bento Grid와 Swiss 비교
Glassmorphism (グラスモーフィズム)의미 있는 대비를 위해 편집상 연결된 항목입니다.Bento Grid와 Glassmorphism 비교

정보 디자인 더 보기

정보 디자인에서 공통 인상이 많은 항목을 우선해 골랐습니다.

Isotype (アイソタイプ)공통 인상: Trust / Technique / Intimacy.
Pictogram System (案内用ピクトグラム)공통 인상: Trust / Technique / Intimacy.
Schematic Transit Diagram (スキーマティック路線図)공통 인상: Trust / Technique.

정보 디자인 전체 보기

이 항목을 인용하기

사전은 링크되기 위해 있다. 글을 쓰는 자리에 맞는 형식을 그대로 가져가면 된다.

Link: https://indexstyle.org/ko/styles/bento-grid
Markdown: [Bento Grid — IndexStyle](https://indexstyle.org/ko/styles/bento-grid)
HTML: <a href="https://indexstyle.org/ko/styles/bento-grid">Bento Grid — IndexStyle</a>

색인의 원래 위치로