벤토 그리드 (Bento Grid)
워드프레스를 위한 벤토 그리드 블록: 디자인 프리셋을 선택하고, 드래그로 셀 크기를 조절하며, 커서 틸트와 생동감 넘치는 배경을 추가하세요. 코딩이나 Tailwind는 필요 없습니다.
벤토 그리드는 요즘 가장 인기 있는 레이아웃이지만, 관련 검색 결과는 대부분 디자인 갤러리이거나 직접 구현해야 하는 React 및 Tailwind 코드뿐입니다. Bento Grid는 코딩을 모르는 사용자도 워드프레스에서 직접 벤토 그리드를 구축할 수 있게 해주는 블록입니다. 전문가가 설계한 프리셋으로 시작해 드래그만으로 셀 크기를 조절하고, 커서를 따라 기울어지는 셀, 스크롤 시 부드러운 등장 효과, 프로스티드 글라스부터 에디토리얼 크림까지 7가지 테마, 그리고 그리드 전체를 감싸는 애니메이션 배경으로 생명력을 불어넣으세요. 모든 기능은 별도의 계정이나 코드 없이 여러분의 사이트에서 바로 작동합니다.
확인하기
말은 줄이고.
보여주는 것에 집중합니다.
A living glass dashboard. Tiles write themselves in, graphs and numbers paint on, widgets tick, and tiles flip on click. Choose a reactive background: aurora, glowing ripples, drifting fireflies, a warping grid, or a blurred photo that ripples under your cursor. Dial the motion, spacing and cursor to taste. On your site, every theme, layout and effect here is saved to your account.
Search "bento grid" and you get inspiration galleries, a definition article with a bare CSS snippet, or a React component you install with a shadcn command. The two free WordPress bento plugins are an image gallery in a bento shape and a plain resizable grid: no themes, no presets, no motion. To get the real thing you either hire a developer or paste code you cannot maintain.
Bento Grid is the missing piece: a real bento grid block you build inside WordPress with no code. Click an art-directed preset, drag to resize cells, pick one of seven themes, and switch on cursor-tilt, scroll stagger and a living animated background. Around twenty cell types fill the grid with real content, from photos and stats to a live clock, and none of it needs a shortcode or an account.
제공 기능
모든 디테일을완벽하게 처리합니다.
7가지 전문가용 프리셋
각 프리셋은 고유한 테마와 리듬, 셀 구성을 갖춘 완성된 미니 사이트입니다. Glass(프로스티드 글라스 대시보드), Feature 및 Editorial(따뜻한 크림색 매거진), Studio(다크 시네마틱 포트폴리오), Gallery(미니멀한 화이트 뮤지엄), Agency(생동감 넘치는 그라데이션), Dashboard(라이브 위젯) 등이 포함되어 있습니다. 하나를 클릭하면 그리드 전체의 간격, 서체, 색상이 즉시 변경됩니다. 빈 블록에서 시작해 디자인된 벤토 그리드를 만드는 가장 빠른 방법입니다.
실감 나는 깊이감의 커서 틸트 셀
셀이 커서를 따라 3D로 기울어지며 전체 평면이 미세하게 반응하여, 고급 하드웨어 사이트의 느낌을 그리드에 구현합니다. 각 테마는 고유한 기울기 강도와 이징을 갖추고 있어 Glass는 탄력 있게, Editorial은 차분하게 느껴집니다. GPU 효율이 높으며, 동작 줄이기 설정 시 자동으로 비활성화됩니다.
생동감 넘치는 애니메이션 배경
그리드 전체 배경에 반응형 효과를 설정하세요. Aurora(흐르는 빛의 리본), Ripples(커서에 반응하는 물결), Fireflies(부드럽게 떠다니는 입자), Grid warp(포인터에 따라 휘어지는 메쉬) 또는 직접 업로드한 이미지를 사용할 수 있습니다. 개별 셀에도 메쉬, 오로라, 노이즈 플로우 등 다양한 효과를 적용할 수 있습니다. 화면 밖으로 나가면 자동으로 일시 정지되며, 동작 줄이기 설정 시 정적인 그라데이션으로 전환됩니다.
반응하고 움직이는 셀
벤토 그리드는 셀이 움직일 때 진정한 가치를 발휘합니다. Bento Grid는 콘텐츠 셀(Ken Burns 효과 사진, 통계, 인용구, 마퀴, 아바타 스택 등), 자동 생성 셀(타이핑 효과 헤드라인, 블러 처리된 텍스트, 그래프, 프로그레스 링 등), 인터랙티브 셀(클릭 시 뒤집히는 카드, 하트 카운터, 미니 뮤직 플레이어 등), 라이브 위젯(시계, 날씨, 주식 티커 등) 등 약 20가지 셀 유형을 제공합니다. 숏코드 없이도 다채로운 콘텐츠로 그리드를 채워보세요.
통일된 모션 아이덴티티
셀은 스크롤에 맞춰 순차적으로 등장하며, 테마별로 최적화된 하나의 모션 언어를 공유합니다. 모션 제어 설정을 통해 Full, Subtle, Still 중 하나를 클릭 한 번으로 선택하여, 여러 애니메이션이 충돌하지 않는 조화롭고 세련된 느낌을 연출할 수 있습니다.
드래그 방식의 크기 조절, 모바일 최적화
모든 셀은 그리드 위에서 드래그하여 크기를 조절할 수 있으며, 모바일 환경에서 단순히 나열되는 것이 아니라 의도된 순서대로 재배치되도록 제어할 수 있습니다. 4가지 간격 프리셋(Roomy, Normal, Tight, None)을 통해 모든 화면에서 일관된 리듬감을 유지하며, 다크 모드도 기본 지원합니다.
커서 효과와 에코 웨이브
포인터가 그리드 위를 지날 때의 반응을 선택하세요. 셀을 들어 올리는 Frost 효과, 포인터를 따라다니는 Spotlight 효과, 또는 효과 끄기 중 선택 가능합니다. 클릭 시 밖으로 퍼져나가는 에코 웨이브 효과도 추가할 수 있습니다. 이러한 작은 디테일이 정적인 그리드를 살아있는 인터페이스로 변화시킵니다.
별도의 가입 절차 없음
이 플러그인은 여러분의 사이트에서 독립적으로 작동합니다. 계정 생성이나 키 입력, 외부 서버 연결이 전혀 필요 없습니다. 모든 프리셋, 테마, 효과 및 위젯은 플러그인 내부에 포함되어 로컬에서 렌더링됩니다. 따라서 외부 서비스 장애와 관계없이 사이트가 항상 안정적으로 유지됩니다.
알아두면 좋은 점
궁금한 점 해결.
벤토 그리드란 무엇인가요?
벤토 그리드는 일본의 도시락통처럼 다양한 크기의 타일을 깔끔하게 배치한 레이아웃입니다. 각 타일에는 헤드라인, 사진, 통계, 위젯 등 하나의 콘텐츠가 담깁니다. 애플이 제품 페이지에 도입하며 유명해졌고, 좁은 공간에 많은 정보를 담으면서도 차분하고 의도적인 디자인을 보여줄 수 있어 2025년과 2026년 웹 디자인의 주류가 되었습니다. Bento Grid는 이 레이아웃을 코딩 없이 워드프레스 블록으로 구현하게 해줍니다.
워드프레스에서 벤토 그리드는 어떻게 만드나요?
Bento Grid 블록을 추가하고 7가지 전문가용 프리셋 중 하나를 선택한 뒤, 드래그로 셀 크기를 조절하고 텍스트나 사진, 위젯을 채우기만 하면 됩니다. 코드나 Tailwind 설정, Figma 내보내기 과정이 필요 없습니다. React 컴포넌트를 설치하거나 복잡한 CSS를 직접 수정해야 하는 기존 방식과는 차원이 다른 편리함을 경험하세요.
기존 무료 벤토 블록과는 무엇이 다른가요?
기존의 무료 워드프레스 벤토 플러그인은 기능이 제한적입니다. 단순히 이미지를 벤토 형태로 배치하거나, 테마와 모션이 없는 단순한 그리드에 불과합니다. Bento Grid는 전문가용 프리셋, 테마, 커서 틸트, 스크롤 모션, 애니메이션 배경, 그리고 20여 가지의 풍부한 셀 유형을 모두 제공하여 단순한 박스 배치를 넘어선 진정한 디자인을 가능하게 합니다.
코딩을 할 줄 알아야 하나요?
아니요. 현재 "벤토 그리드"로 검색되는 대부분의 결과는 코딩 지식을 전제로 합니다. Bento Grid는 코드 에디터가 아닌 워드프레스 환경에서 작업하는 분들을 위해 만들어졌습니다. 클릭하고 드래그하여 채우기만 하면 플러그인이 레이아웃, 모션, 반응형 동작을 자동으로 처리합니다.
프리셋과 테마는 몇 가지나 있나요?
Glass, Feature, Studio, Gallery, Agency, Editorial, Dashboard 등 7가지 프리셋이 있습니다. 각 프리셋은 고유한 테마(프로스티드 글라스, 다크 시네마틱, 생동감 넘치는 그라데이션 등)와 레이아웃 리듬, 셀 구성을 갖추고 있어, 프리셋을 바꾸는 것만으로도 완전히 새로운 디자인 스튜디오의 결과물을 얻을 수 있습니다.
애니메이션 배경 때문에 페이지 속도가 느려지지 않나요?
아니요. 애니메이션 배경과 셀 효과는 적절한 해상도로 렌더링되며, 그리드가 화면 밖으로 나가면 자동으로 일시 정지됩니다. 또한 사용자가 동작 줄이기 설정을 켰을 경우 정적인 그라데이션으로 대체됩니다. 틸트와 스크롤 효과는 GPU 효율이 높아 성능 저하를 최소화했습니다.
벤토 그리드는 모바일에서도 반응형으로 작동하나요?
네, 모바일 우선으로 설계되었습니다. 모바일에서 단순히 한 줄로 나열되는 것이 아니라, 의도된 순서대로 재배치되도록 제어할 수 있습니다. 4가지 간격 프리셋을 통해 모든 화면 너비에서 일관된 리듬감을 유지하며, 모바일에서도 의도된 디자인을 그대로 보여줍니다.
어떤 빌더와 에디터를 지원하나요?
워드프레스 블록 에디터(구텐베르크)를 위한 최적화된 블록이며, 주요 페이지 빌더에서도 문제없이 작동합니다. 일반 블록처럼 배치하면 테마의 폰트를 상속받으면서도 Bento Grid만의 고유한 테마와 모션 효과를 적용할 수 있습니다.
효과를 실행하려면 인터넷 연결이 필요한가요?
아니요. 그리드와 모든 효과, 커서 틸트, 애니메이션 배경 등은 플러그인 내부에 포함된 코드를 통해 사이트에서 직접 렌더링됩니다. 외부 서버 호출이 없으므로 인터넷 연결 상태와 관계없이 항상 동일하게 작동합니다.
하나의 벤토 그리드를 여러 페이지에서 재사용할 수 있나요?
네. 블록을 복사하여 다른 페이지에 붙여넣거나, 워드프레스의 동기화된 패턴(재사용 가능 블록)으로 저장하면 모든 복사본을 동일하게 유지할 수 있습니다. 설정값이 블록과 함께 저장되므로 매번 새로 만들 필요가 없습니다.
디자인은 어디에 저장되나요?
다른 모든 블록과 마찬가지로 여러분의 워드프레스 데이터베이스에 저장됩니다. 외부로 전송되거나 저희 서버에 저장되지 않으므로, 여러분의 레이아웃은 온전히 여러분의 소유이며 기존의 사이트 백업 시스템을 통해 안전하게 관리됩니다.
셀을 커스터마이징할 수 있나요, 아니면 프리셋에 고정되어야 하나요?
프리셋은 시작점일 뿐입니다. 선택 후에도 셀 크기 조절, 콘텐츠 변경, 테마 교체, 배경 변경, 모션 강도 조절, 간격 조정, 커서 반응 설정 등 모든 것을 자유롭게 변경할 수 있습니다. 프리셋은 디자인의 90%를 완성해주고, 나머지 세부 설정은 여러분의 취향대로 마무리할 수 있습니다.