기능을 카테고리로 묶어 플랜을 비교하는, sticky 헤더와 모바일 카드 전환 매트릭스.
한 줄 요약
기능을 카테고리로 묶어 여러 플랜을 한눈에 비교하는 매트릭스 sticky 플랜 헤더, 인기 강조, 월/연 토글, 행 hover 강조.
플랜제품 간 차이를 명확히 보여줘야 할 때 요금제 페이지, 제품 비교, 기능표.
데스크톱은 시맨틱 table로 scope 헤더와 카테고리 그룹 행을 둔다.
스크롤 컨테이너 안에서 thead를 sticky로 고정한다.
인기 플랜을 ring배지tint로 강조하고 행 hover를 전 열에 적용한다.
모바일은 플랜별 스택 카드로 전환한다.
가로 스크롤을 피하려면 모바일에서 카드로 접는다.
/에 sr-only 텍스트로 의미를 준다.
sticky가 동작하려면 스크롤 컨테이너 높이를 잡아준다.
SaaS 요금제 페이지
제품/기능 비교 섹션
import type { Metadata } from "next";
import { ComparisonTableDemo } from "./-components/ComparisonTableDemo";
export const metadata: Metadata = {
title: "요금제 비교 매트릭스 (데모)",
description:
"기능을 카테고리로 묶어 플랜별로 비교하는 매트릭스. 인기 플랜 강조, sticky 헤더, 월/연 토글, 모바일 카드 전환을 지원합니다.",
robots: { index: false, follow: false },
};
export default function Page() {
return (
<main className="flex min-h-[100dvh] items-center justify-center bg-white">
<ComparisonTableDemo />
</main>
);
}