크기가 다른 상자가 맞물리는 구성 · Bento grid

레이아웃 · 서로 다른 크기의 모듈을 격자에 맞물려 배치하는 레이아웃

조회 0추천 0

직접 만든 예시

[서비스 소개]를 bento grid로 배치해줘. 핵심 메시지는 큰 셀, 보조 기능은 작은 셀로 크기에 위계를 주고 간격을 일정하게 맞춰줘. 모바일에서는 중요도 순으로 한 열로 쌓아줘.

빈칸을 내 상황에 맞게 채워 사용하세요.

입력과 결과 비교

설명용 예시

입력 같은 기록 서비스의 소개 문구·기능 3개·CTA

Bento grid · 벤토 그리드의 특징을 적용한 시각적 변형. 문구와 기능은 같고 색·재질·배치를 비교합니다.

활용 방식을 보여주는 예시이며, 직접 실행한 결과가 아닙니다.

사진·지표·기능 설명처럼 성격이 다른 내용을 한 덩어리로 구성할 때 쓸 수 있습니다. 모든 상자를 같은 크기로 만들지 않고 중요도를 크기로 드러냅니다.

첨부 영상에서 확인한 키워드입니다. 프롬프트와 예시는 직접 제작했으며 링크는 기법 참고 문서입니다. 원출처 ↗

기존 가이드와 자세한 사용법 읽기

안녕하세요 mouseco 입니다. :)

Bento grid · 벤토 그리드은 서로 다른 크기의 모듈을 격자에 맞물려 배치하는 레이아웃입니다. 이 키워드는 레이아웃을 지정하는 데 씁니다.

복사할 문구

[서비스 소개]를 bento grid로 배치해줘. 핵심 메시지는 큰 셀, 보조 기능은 작은 셀로 크기에 위계를 주고 간격을 일정하게 맞춰줘. 모바일에서는 중요도 순으로 한 열로 쌓아줘.

가상의 기록 서비스에 같은 제목·기능·CTA를 두고 스타일을 바꿨습니다. 색상, 글자의 크기, 표면, 배치의 차이를 살펴보세요. 다른 스타일은 화면 위 선택창에서 바꿀 수 있습니다.

이 화면은 직접 만든 해석 예시이며, 해당 스타일의 유일한 정답이나 특정 모델의 성능 비교 결과는 아닙니다. 입체 화면은 CSS 3D, 메시 배경은 CSS 그라디언트로 구현했습니다.

확인일: 2026-10-18