본문 바로가기

시각 스타일과 조합해 사용하는 구성·상호작용 기법입니다.

W31 / 레이아웃 기법

벤토 그리드

Bento Grid

여러 크기의 모듈을 하나의 정돈된 격자 안에 배치한다. 기능·숫자·그림처럼 성격이 다른 정보를 각 칸의 중요도에 맞춰 구성한다.

기존 배치 패턴

벤토 그리드 학습용 웹 화면. 관찰할 특징: 크기가 다른 둥근 모듈, 그리드에 맞춘 경계, 큰 기능과 작은 기능의 위계.
구성·상호작용 기법을 설명하기 위해 직접 제작한 학습용 화면입니다.그림 원본 열기 ↗

어디에 적용할까요?

제품 기능 소개·성과 개요·개인 포트폴리오·대시보드의 요약 화면에 활용한다.

함께 살펴볼 점

모든 칸을 장식 카드로 만들기보다 한눈에 파악할 핵심부터 정한다. 작은 화면의 배열 순서는 의미에 맞게 다시 구성한다.

MAKE YOUR OWN

이 기법으로 만들어 보세요

목적과 콘텐츠를 내 작업에 맞게 바꿔 사용하세요.

출처와 확인일

확인일 2026-09-20. 정의와 자료 맥락의 근거이며, 위 그림은 이 도감을 위해 별도로 제작했습니다.

함께 살펴볼 항목

그림을 나란히 비교하기 →

← 구성·상호작용 참고 보기