벤토 그리드 디자인 — 요즘 핀터레스트에서 유행하는 부품 9개
벤토 그리드 디자인은 도시락 칸처럼 크기가 다른 사각형 타일을 한 격자에 채워 화면을 구성하는 방식으로, 핀터레스트·드리블에서 포트폴리오와 SaaS 랜딩 페이지를 중심으로 유행하고 있습니다. 특징은 다섯 가지입니다.
아래는 이 스타일로 실제로 만든 원페이지 랜딩입니다. 내비게이션부터 푸터까지 스크롤하면서 전체 흐름을 먼저 보십시오.
원페이지를 이루는 부품 아홉 개를 하나씩 뜯어서 격자로도 모아 뒀습니다. 각 부품은 히어로부터 시작해서 방문자가 실제로 페이지를 훑는 순서(눈에 띄기, 둘러보기, 값 확인, 신뢰, 행동, 가입)를 따라갑니다.
자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip
- 01 벤토형 히어로 2×2
- 02 둥근 필 내비게이션
- 03 핵심 벤토 카드 격자
- 04 아이콘+숫자 기능 카드
- 05 크기로 차등화한 요금제
- 06 인용 카드 섞어 배치
- 07 가로로 긴 CTA 카드
- 08 링크 묶음을 칸으로
- 09 radius 12 필 버튼
01히어로
히어로 영역을 하나의 큰 블록이 아니라 크기가 다른 타일 세 개로 쪼갭니다. 가장 큰 타일에 헤드라인과 CTA 버튼을 넣고, 작은 두 칸에는 상태 배지와 색 블록 하나만 둡니다.
<div class="grid grid-cols-3 grid-rows-2 gap-4">
<div class="col-span-2 row-span-2 flex flex-col justify-center gap-4
rounded-tile bg-white p-10 shadow-bento">
<h1 class="text-4xl font-extrabold">일과 팀을 한 화면에</h1>
<button class="w-fit rounded-pill bg-ink px-6 py-3 text-sm font-bold text-cream">
무료로 시작
</button>
</div>
<div class="flex items-center gap-3 rounded-tile bg-white p-6 shadow-bento">
<span class="h-3 w-3 rounded-full bg-accent"></span>
<span class="text-sm font-semibold">실시간 동기화</span>
</div>
</div>
02내비게이션
메뉴 전체가 알약 모양 하나에 담기고, 안쪽의 진한 칩이 현재 위치를 표시하며 항목 사이를 옮겨 다닙니다. 브랜드와 CTA 버튼은 알약 바깥 양 끝에 고정합니다.
<nav class="flex items-center gap-4 rounded-pill bg-white/80 backdrop-blur
px-3 py-2 shadow-bento">
<span class="pl-3 font-display font-extrabold text-sm">Nectar</span>
<div class="relative flex flex-1 rounded-pill bg-ink/5 p-1">
<span class="absolute inset-y-1 left-1 w-1/4 rounded-pill bg-accent"></span>
<span class="relative z-10 flex-1 text-center text-xs font-semibold py-2">홈</span>
<span class="relative z-10 flex-1 text-center text-xs font-semibold py-2">기능</span>
</div>
<button class="rounded-pill bg-accent px-4 py-2 text-xs font-bold text-cream">
무료로 시작
</button>
</nav>
03카드 격자
이 스타일의 몸통입니다. 칸마다 열·행 폭이 달라 한눈에 훑을 때 시선이 가장 큰 칸부터 멈추고, 나머지 칸으로 차례로 흘러갑니다.
<div class="grid grid-cols-3 grid-rows-2 gap-4">
<div class="row-span-2 flex flex-col justify-end gap-3 rounded-tile
bg-white p-5 shadow-bento hover:shadow-bento-hover transition-shadow">
<div class="flex-1 rounded-[14px] bg-accent/10"></div>
<p class="text-sm font-semibold">빠른 검색</p>
</div>
<div class="rounded-tile bg-white p-5 shadow-bento">자동 정리</div>
<div class="col-span-2 rounded-tile bg-white p-5 shadow-bento">리포트</div>
</div>
04기능 목록
기능마다 아이콘 자리와 강조 숫자 하나를 카드 안에 크게 배치해 스캔하기 쉽게 합니다. 숫자 아래 얇은 바는 그 값의 크기를 시각적으로 보여줍니다.
<div class="flex gap-4">
<div class="flex-1 rounded-tile bg-white p-6 shadow-bento">
<span class="mb-2 block h-6 w-6 rounded-lg bg-accent"></span>
<p class="text-2xl font-extrabold">12,000+</p>
<p class="text-xs font-semibold text-ink/70">연동 앱</p>
<span class="mt-3 block h-1 w-full rounded-pill bg-accent"></span>
</div>
</div>
05가격
추천 플랜만 칸을 1.1배 크게 잡고 배지를 얹어, 비교 표 없이도 어떤 플랜을 밀고 있는지 바로 보이게 합니다. 나머지 플랜은 옅은 배경으로 물러납니다.
<div class="flex items-end gap-4">
<div class="flex-1 rounded-tile bg-white/60 p-6">
<p class="font-bold">무료</p>
</div>
<div class="relative flex-[1.1] rounded-tile bg-white pt-8 p-6 shadow-bento-hover">
<span class="absolute -top-3 left-6 rounded-pill bg-accent px-3 py-1
text-xs font-bold text-cream">추천</span>
<p class="font-bold">프로</p>
<p class="mt-1 text-sm text-ink/70">월 19,000원</p>
</div>
</div>
06후기
후기 카드를 격자 사이사이에 섞어 넣어 광고 캐러셀처럼 몰려 보이지 않게 합니다. 별점 칸 하나를 더해 신뢰 신호를 시각적으로 한 번 더 반복합니다.
<div class="grid grid-cols-3 gap-4">
<div class="col-span-2 rounded-tile bg-white p-6 shadow-bento">
<p class="text-sm font-semibold">"덕분에 온보딩 시간이 반으로 줄었어요"</p>
<p class="mt-3 text-xs text-ink/60">김도현 · 프로덕트 매니저</p>
</div>
<div class="rounded-tile bg-white p-6 shadow-bento">
<p class="text-sm font-semibold">"복잡한 툴 세 개를 이걸로 정리했어요"</p>
</div>
</div>
07CTA 띠
격자 안에서 한 칸만 가로 전체를 차지하게 해 마지막으로 시선이 그 칸에 멈추게 합니다. 어두운 배경 위에 은은한 빛 하나를 얹어 CTA 버튼 쪽으로 무게를 실었습니다.
<div class="relative overflow-hidden rounded-tile bg-ink px-10 py-12">
<span class="absolute -right-16 -top-24 h-64 w-64 rounded-full
bg-accent opacity-30 blur-sm"></span>
<h3 class="relative max-w-md text-3xl font-extrabold text-cream">
지금 팀에 합류시켜 보세요
</h3>
<button class="relative mt-6 rounded-pill bg-cream px-6 py-3
text-sm font-bold text-ink">무료로 시작</button>
</div>
08푸터
푸터의 링크 묶음마다 옅은 칸 하나씩을 줘서 격자 스타일을 페이지 끝까지 끌고 갑니다. 구분선 대신 배경 톤 차이만으로 칸을 나눕니다.
<footer class="grid grid-cols-3 gap-4">
<div class="rounded-tile bg-ink/[.04] p-5">
<p class="mb-2 text-xs font-bold uppercase text-ink/50">제품</p>
<p class="text-sm font-semibold">기능</p>
</div>
<div class="rounded-tile bg-ink/[.04] p-5">
<p class="mb-2 text-xs font-bold uppercase text-ink/50">회사</p>
<p class="text-sm font-semibold">소개</p>
</div>
</footer>
09버튼·입력
버튼과 입력창의 모서리 반경을 카드와 같은 값으로 맞춰 화면 전체가 하나의 규격으로 보이게 합니다. 포커스 링도 카드 반경보다 살짝 더 둥글게 감쌉니다.
<form class="flex gap-3 rounded-tile bg-white p-6 shadow-bento">
<label class="relative flex-1 rounded-[12px] bg-cream">
<input class="w-full rounded-[12px] bg-transparent px-4 py-3 text-sm
outline-none ring-2 ring-accent/40" type="email"
placeholder="이메일 주소">
</label>
<button class="rounded-[12px] bg-accent px-5 py-3 text-sm font-bold text-cream">
가입하기
</button>
</form>
tailwind.config 커스텀
원페이지와 부품 아홉 개가 전부 이 값 하나에서 나옵니다. 반경·그림자·간격을 여기서만 바꾸면 전체 페이지의 톤이 한 번에 바뀝니다.
theme: {
extend: {
colors: {
cream: "#fff7e6",
ink: "#17141a",
accent: "#2f6df6",
line: "rgba(23,20,26,.08)",
},
fontFamily: {
display: ["'Plus Jakarta Sans'", "system-ui", "sans-serif"],
body: ["'Inter'", "system-ui", "sans-serif"],
},
borderRadius: {
tile: "20px",
pill: "999px",
},
boxShadow: {
bento: "0 14px 24px rgba(23,20,26,.10)",
"bento-hover": "0 20px 32px rgba(23,20,26,.16)",
},
spacing: {
gutter: "14px",
},
},
},
바이브코딩 프롬프트
이 config를 프로젝트에 넣고 Claude Code·Cursor에 아래 조각처럼 시키면 됩니다. 전체 프롬프트 원문은 zip의 prompt.md에 있습니다.
히어로는 하나의 큰 블록이 아니라 크기가 다른 타일 여러 개(2x2 비대칭 모자이크)로 나눈다.
모든 카드는 rounded-tile, shadow-bento 를 쓴다. 호버하면 shadow-bento-hover 로
그림자만 커진다 — 위치는 움직이지 않는다.
배경은 cream 하나. 강조가 필요한 곳에만 accent 를 쓰고 그라데이션으로 채우지 않는다.
위 프롬프트를 실제로 page/index.html에 적용해 나온 결과를 1280px 뷰포트에서 전체 페이지로 캡처했습니다.
어디서 깨지는가 — 함정
타일 크기를 세 가지 넘게 섞으면 격자가 아니라 콜라주가 됩니다. grid-template-areas로 큰 화면에서 짠 배치는 컨테이너 폭이 좁아지면 특정 칸이 다른 칸을 밀어내며 겹치기 쉬운데, MDN CSS Grid Layout 문서가 안내하는 대로 좁은 폭에서는 영역 이름을 아예 다시 선언하는 편이 안전합니다. 이 프로젝트도 처음엔 칸 넷을 그대로 세로로만 쌓았더니 큰 칸의 여백이 모바일 화면에서 절반 넘게 비어 보였고, 결국 폭 640px 아래에서는 큰 칸의 높이를 줄이는 규칙을 따로 추가했습니다. 그림자를 칸마다 다르게 주는 실수도 흔합니다. shadow-bento와 shadow-bento-hover 두 단계로 못을 박아 둔 것은, 칸마다 그림자 진하기가 달라지면 페이지가 아니라 서로 다른 사이트를 붙여 놓은 것처럼 보이기 때문입니다. 이 아홉 개 부품과 원페이지 소스가 담긴 zip의 압축 비밀번호는 j7zbg3ef이고, 아래 버튼으로 받을 수 있습니다.
강조색을 두 개 이상 쓰는 것도 벤토 그리드에서는 함정입니다. accent 하나로 시선을 모으는 게 이 스타일의 핵심이라, 두 번째 강조색이 들어오는 순간 어느 칸이 진짜 중요한 칸인지 알 수 없어집니다.
접근성
ink(#17141a) 텍스트를 accent(#2f6df6) 배경 위에 올리는 배지·CTA 버튼은 대비가 낮은 편이라, 크기가 작은 배지 글자는 cream 배경 위로 옮기고 버튼처럼 큰 요소에만 accent 배경을 씁니다. 애니메이션이 들어간 09번 데모의 포커스 링·CTA 띠의 은은한 빛은 MDN prefers-reduced-motion 문서가 정의한 미디어 쿼리로 감쌌고, 동작 줄이기를 켠 방문자에게는 움직임 대신 정지된 상태만 보입니다. 원페이지의 CTA 버튼은 텍스트만으로도 뜻이 통하게 썼고, 색 블록으로 채운 자리는 나중에 실제 아이콘이나 이미지가 들어갈 때 alt를 채우도록 zip의 README에 적어 뒀습니다.
다른 트렌드는 디자인 트렌드 카테고리에 모아 뒀고, 사이트가 무엇을 다루는지는 소개 페이지에 정리했습니다.
FAQ
벤토 그리드는 CSS Grid로만 만들 수 있나요?
Flexbox로도 비슷하게 흉내는 낼 수 있지만, 칸마다 열·행을 몇 칸씩 차지할지 지정하려면 grid-column·grid-row를 쓰는 CSS Grid 쪽이 코드가 훨씬 짧습니다. 이 편의 부품 아홉 개도 격자가 필요한 03·06·08번은 Grid, 한 줄로 충분한 나머지는 Flexbox를 씁니다.
사진이나 일러스트 없이도 벤토 그리드가 어울리나요?
네, 오히려 색 블록만으로도 충분히 신뢰감 있게 보입니다. 이 편의 원페이지와 부품 데모 전부 사진 한 장 없이 accent 색 블록과 아이콘 자리만으로 채웠고, 실제 서비스 화면을 넣기 전 와이어프레임 단계에서 특히 유용합니다.
타일이 몇 개부터 벤토 그리드라고 부를 수 있나요?
정해진 기준은 없지만 최소 네 칸은 있어야 크기 차이가 눈에 들어옵니다. 이 편의 03번 카드 격자처럼 큰 칸 하나와 작은 칸 셋을 섞는 4칸 구성이 가장 흔하고, 섹션이 넓다면 06번 후기처럼 6~8칸까지 늘려도 무리 없습니다.