700 조회 vs 8% 전환: 내가 Next.js 사이트를 Bento Grid로 재디자인한 이유 (Day 3)

Source: Dev.to

현실 점검 📉

나는 “공개적으로 만들기” 챌린지를 시작한 지 3일째다. 어제 알고리즘이 나에게 축복을 내렸다: 700+ 조회수가 내 업데이트 영상에 달렸다.

나는 생각했다: “이게 전부다. 매출이 올 거야.”

현실

• 실제 방문자는 60명.
• 8 % 전환율.

트래픽은 있었지만 유지율은 낮았다. 랜딩 페이지가 사용자를 새어나가게 했고, 전반적으로 일반적이었다.

전환점: 벤토 그리드 🍱

나는 Bento Grid 패턴을 사용해 레이아웃을 재설계하기로 했다. Linear와 Vercel 같은 최고 수준의 개발 도구에서 인기 있는 패턴이다. Bento Grid는 복잡한 정보를 소화 가능한 “박스”로 정리하고 프리미엄한 느낌을 준다.

VS Code를 열고 기존 레이아웃을 삭제한 뒤 Next.js 14와 Tailwind CSS로 페이지를 다시 만들었다.

코드 (구현 방법)

Tailwind에서 Bento Grid를 구현하려면 grid-cols와 col-span을 잘 활용해야 한다. 아래는 주요 그리드 컴포넌트의 간소화된 버전이다:

export default function BentoGrid() {
  return (
    <div className="grid grid-cols-2 gap-4">
      {/* Hero Box - Spans 2 columns */}
      <div className="col-span-2 bg-gray-100 p-6">
        <h2>## The Ultimate Kit</h2>
        <p>Boost your workflow instantly.</p>
      </div>

      {/* Feature A */}
      <div className="bg-white p-4">
        <span>🚀</span>
        <h3>Next.js Ready</h3>
      </div>

      {/* Feature B */}
      <div className="bg-white p-4">
        <span>🎨</span>
        <h3>Tailwind CSS</h3>
      </div>

      {/* Pricing Box - High Contrast */}
      <div className="bg-black text-white p-6">
        <h3>Get it now</h3>
        <p>Limited offer</p>
        <p>€3</p>
      </div>
    </div>
  );
}

가격 전략 🏷️

마찰이 디자인 때문인지, 가격 때문인지 테스트하기 위해 가격을 €3으로 설정했다. 커피 한 잔보다 저렴한 “무조건 사게 만드는” 가격대다.

다음은?

새 버전이 라이브됐다. 나는 두 가지 핵심 지표를 추적하고 있다:

1. 그리드 요소에 대한 클릭‑through 비율.
2. 최종 구매 전환율.

실제 결과를 보거나 챌린지를 지원하고 싶다면 여기에서 확인해 주세요:
https://veloxweb.gumroad.com/l/launch-ui

Day 4 지표를 기대해 주세요! 🚀