웹사이트나 대시보드를 만들 때 카드 레이아웃을 사용하면 정보를 단위별로 구분하기 좋습니다. 그런데 모든 카드를 똑같은 크기로 배치하면 중요한 기능과 보조 정보가 비슷한 비중으로 보여 무엇을 먼저 봐야 할지 모호해질 수 있습니다.
이럴 때 활용할 수 있는 방식이 Bento Grid(벤토 그리드)입니다. 도시락 칸처럼 화면을 여러 영역으로 나누되, 카드마다 크기와 비중을 다르게 구성해 핵심 정보를 강조하는 레이아웃입니다.
1. Bento Grid는 어떤 모습일까?
일반적인 카드 레이아웃은 대체로 비슷한 크기의 카드를 반복해서 배치합니다. Bento Grid는 큰 카드 하나와 작은 카드 여러 개를 조합하는 등 카드의 크기와 비중에 변화를 줍니다.
예를 들어 병원용 AI 서비스 소개 페이지라면 다음처럼 구성할 수 있습니다.
큰 카드: AI 업무 도우미의 핵심 가치와 대표 화면
작은 카드 1: 간호기록 보조
작은 카드 2: 문서 요약
작은 카드 3: 업무 현황 분석
방문자는 가장 큰 영역에서 서비스의 핵심을 파악하고, 주변의 작은 카드에서 세부 기능을 빠르게 살펴볼 수 있습니다.
Bento Grid는 서비스 소개 페이지, 제품 기능 안내, 관리자 대시보드, 포트폴리오처럼 여러 정보를 한 화면에서 요약해 보여줄 때 유용합니다.
2. Card Layout과 무엇이 다를까?
Card Layout은 정보를 카드 단위로 나누는 방식에 초점을 둡니다. Bento Grid는 카드 단위로 나눈 정보를 다시 조합해 시각적 우선순위를 만드는 데 초점을 둡니다.
쉽게 말해 Card Layout이 ‘정보를 카드로 나누는 방법’이라면, Bento Grid는 ‘카드의 크기와 배치를 이용해 중요한 정보를 먼저 보이게 하는 방법’입니다.
시각적 예시를 떠올려 보세요. 같은 크기의 카드 여섯 개를 규칙적으로 배열한 화면과, 왼쪽에 큰 대표 카드 하나를 두고 오른쪽에 작은 카드 네 개를 배치한 화면은 인상이 다릅니다. 두 번째 구성에서는 대표 카드가 먼저 눈에 들어옵니다.
단, 큰 카드가 반드시 더 중요한 것은 아닙니다. 실제 사용 목적과 정보의 중요도에 맞춰 크기를 정해야 합니다.
3. AI에게 어떻게 요청해야 할까?
막연한 요청은 다음과 같습니다.
“서비스 소개 화면을 세련되게 만들어 줘.”
이렇게 요청하면 AI가 균일한 카드 목록이나 단순한 2열 배치를 만들 수도 있습니다. Bento Grid를 원한다면 카드의 개수, 상대적인 크기, 각 카드의 역할을 함께 지정하는 편이 좋습니다.
구체적인 요청 예시:
“서비스 소개 화면을 Bento Grid로 구성해 줘. 핵심 기능은 화면에서 가장 큰 카드로 강조하고, 나머지 네 가지 기능은 작은 카드로 배치해 줘. 각 카드에는 짧은 제목과 한 문장 설명을 넣고, 카드 사이 간격과 모서리 스타일은 통일해 줘.”
(*Bento 그리드 레이아웃 예시)
4. 바로 복사해서 사용하는 실전 프롬프트
아래 내용을 복사한 뒤 서비스 이름과 기능을 바꿔 사용해 보세요.
[서비스 이름]의 주요 기능을 소개하는 화면을 만들어 줘.
전체 구성은 Bento Grid 레이아웃으로 설계해 줘.
가장 중요한 기능은 다른 카드보다 약 두 배 넓은 대표 카드로 배치해 줘.
나머지 네 가지 기능은 작은 카드로 구성하고, 각 카드에는 기능명과 한 문장 설명을 넣어 줘.
대표 카드와 작은 카드의 시각적 우선순위가 분명하도록 제목 크기와 여백을 조정해 줘.
카드의 모서리, 내부 여백, 글자 스타일은 일관되게 유지해 줘.
PC에서는 여러 열을 활용하되, 태블릿과 모바일에서는 화면 너비에 맞게 자연스럽게 재배치해 줘.
모바일에서는 카드가 겹치거나 내용이 잘리지 않도록 한 열 중심으로 구성해 줘.
장식 효과는 최소화하고, 정보가 명확하게 읽히는 것을 우선해 줘.
각 카드에 버튼이 있다면 버튼의 목적과 동작을 분명하게 지정해 줘.
카드 개수나 비율은 고정된 규칙이 아닙니다. 콘텐츠 양과 화면 크기에 따라 조정하면 됩니다.
5. 결과가 마음에 들지 않을 때
대표 카드가 눈에 띄지 않는다면
“핵심 기능 카드를 더 넓게 배치하고 제목을 강조해 줘. 나머지 카드는 보조 정보로 인식되도록 시각적 비중을 낮춰 줘.”
카드 배치가 복잡하다면
“카드 수를 줄이고 큰 카드 하나와 작은 카드 네 개의 단순한 구조로 정리해 줘. 카드 사이의 간격을 일정하게 유지해 줘.”
카드마다 내용이 너무 많다면
“각 카드에는 제목과 핵심 설명만 남겨 줘. 자세한 정보는 상세 페이지에서 확인하도록 구성해 줘.”
모바일에서 레이아웃이 깨진다면
“모바일에서는 카드의 배치를 다시 정리해 한 열로 보여 줘. 중요한 카드가 먼저 나오도록 순서를 조정하고 가로 스크롤은 없애 줘.”
수정할 때는 ‘더 예쁘게’라고 요청하기보다 크기, 순서, 간격, 정보량처럼 구체적인 요소를 지정하세요. 한 번에 한두 가지씩 수정하면 어떤 변경이 효과가 있었는지 파악하기 쉽습니다.
6. Bento Grid를 사용할 때 기억할 점
큰 카드는 실제로 중요한 정보에 사용하세요. 시각적 크기와 정보의 중요도가 일치해야 합니다.
카드마다 역할을 분명히 하세요. 모든 카드가 같은 메시지를 반복하면 그리드의 장점이 줄어듭니다.
정렬과 간격을 통일하세요. 크기가 달라도 여백과 모서리 스타일이 일관되면 화면이 정돈되어 보입니다.
모바일 화면을 별도로 확인하세요. PC의 그리드를 그대로 축소하면 글자가 작아지거나 카드 순서가 어색해질 수 있습니다.
업무용 대시보드에서는 장식보다 사용성을 우선하세요. 중요한 수치와 경고가 카드의 크기나 색상 효과에 묻히지 않도록 해야 합니다.
특히 환자 정보나 병원 운영 지표를 표시하는 화면이라면 시각적 강조가 실제 위험도나 업무 우선순위와 일치하는지 확인해야 합니다.
오늘 기억할 한 가지
Bento Grid는 카드의 크기와 배치를 조합해 정보의 우선순위를 보여주는 레이아웃입니다. AI에게 요청할 때는 단순히 ‘벤토 그리드로 만들어 줘’라고 말하는 데 그치지 말고, 어떤 정보를 가장 크게 보여줄지와 나머지 카드의 역할을 함께 설명하세요.
다음 편에서는 메뉴를 화면 왼쪽에 고정해 주요 기능을 쉽게 이동할 수 있도록 하는 Sidebar Layout(사이드바 레이아웃)을 살펴보겠습니다. 병원 업무 프로그램과 관리자 화면을 예로 들어 실전 프롬프트를 알아보겠습니다.