디자인 아틀라스
EN
▭ 랜딩 페이지 패턴

피처 그리드

Feature grid

아이콘·제목·설명 한 세트를 균일한 칸에 반복 배치해 제품의 핵심 기능들을 나열하는 섹션.

다른 이름: Feature list3-column features
···
html
<div class="grid">
  <div class="card"><span class="icon"></span><h3>Fast setup</h3><span class="desc"></span><span class="desc w2"></span></div>
  <div class="card"><span class="icon"></span><h3>Live sync</h3><span class="desc"></span><span class="desc w2"></span></div>
  <div class="card"><span class="icon"></span><h3>Team roles</h3><span class="desc"></span><span class="desc w2"></span></div>
  <div class="card"><span class="icon"></span><h3>Audit logs</h3><span class="desc"></span><span class="desc w2"></span></div>
  <div class="card"><span class="icon"></span><h3>API access</h3><span class="desc"></span><span class="desc w2"></span></div>
  <div class="card"><span class="icon"></span><h3>Dark mode</h3><span class="desc"></span><span class="desc w2"></span></div>
</div>
css
.grid{width:min(94%,860px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.8vmin,14px)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:clamp(8px,2vmin,16px);
  display:flex;flex-direction:column;gap:clamp(5px,1.2vmin,8px);animation:rise 3.6s ease-in-out infinite}
.card:nth-child(1){animation-delay:0s}.card:nth-child(2){animation-delay:.15s}.card:nth-child(3){animation-delay:.3s}
.card:nth-child(4){animation-delay:.45s}.card:nth-child(5){animation-delay:.6s}.card:nth-child(6){animation-delay:.75s}
.icon{width:clamp(16px,3.6vmin,26px);height:clamp(16px,3.6vmin,26px);border-radius:8px;background:var(--accent)}
.card:nth-child(3n+2) .icon{background:var(--accent-2)}
.card:nth-child(3n) .icon{background:var(--accent-3)}
.card h3{margin:0;font-size:clamp(8px,1.7vmin,13px);font-weight:700}
.desc{display:block;height:clamp(4px,1vmin,7px);border-radius:2px;background:var(--line)}
.desc.w2{width:85%}
@keyframes rise{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(-3px);opacity:.85}}

보통 히어로 다음, 또는 소셜 프루프 다음에 오는 섹션으로, 제품의 핵심 기능 3~6개를 같은 크기의 카드로 나열합니다. 각 카드는 아이콘(또는 작은 일러스트), 제목(2~5단어), 짧은 설명(1~2문장)으로 구성됩니다.

칸 크기를 다르게 줘서 위계를 만드는 `bento-grid`와 달리, 피처 그리드는 모든 칸을 동일한 크기로 둬서 "이 기능들은 서로 동등하다"는 메시지를 줍니다. 열 개수는 보통 3(데스크톱) → 2(태블릿) → 1(모바일)로 반응형 처리합니다.

기능을 8개 이상 나열하면 방문자가 다 읽지 않고 이탈합니다. 정말 중요한 기능만 3~6개로 추리고, 나머지는 제품 상세 페이지나 문서로 미루는 편이 낫습니다. 아이콘 스타일이 제각각(선 아이콘과 입체 아이콘 혼용 등)이면 급조된 인상을 줍니다.

언제 쓰나

기능들의 중요도가 비슷할 때 씁니다. 하나를 특히 강조하고 싶다면 `bento-features`처럼 칸 크기가 다른 레이아웃이 낫습니다.