Svelte 5 & Tailwind CSS: 반응형 벤토 그리드(Bento Grid) 시스템 가이드

애플 스타일의 세련된 레이아웃을 구현하기 위한 최적의 방법인 벤토 그리드 시스템입니다. 이 시스템의 핵심은 '1개 컬럼의 너비가 1개 행의 높이와 실시간으로 일치'하도록 설계되어, 어떤 해상도에서도 완벽한 정분사각형 유닛을 유지한다는 점입니다.

1. 시스템 핵심 메커니즘

이 레이아웃 엔진은 Svelte 5의 새로운 상태 관리 방식인 룬(Runes)을 적극 활용합니다.

• 실시간 너비 측정: bind:clientWidth를 통해 부모 컨테이너(BentoGrid)의 너비를 실시간으로 추적합니다.

• 유닛 크기 계산: $derived 룬을 사용하여 (전체 너비 - 간격) / 컬럼 수 공식을 통해 1개 유닛의 정확한 픽셀 크기를 산출합니다.

• 동적 스타일 바인딩: 계산된 유닛 크기를 CSS 변수(--unit-size)로 선언하고, grid-auto-rows에 적용하여 모든 행의 높이를 유동적으로 제어합니다.

2. BentoGrid.svelte: 레이아웃 엔진

그리드 시스템의 전체 골격을 담당하는 컴포넌트입니다.

주요 속성 (Props)

• cols: 그리드의 전체 컬럼 수입니다. (기본값: 12)

  • 12컬럼 설정: 2, 3, 4, 6분할이 가능하여 가장 높은 자유도를 제공합니다.

  • 10컬럼 설정: 2, 5분할로 딱 떨어지는 정돈된 느낌을 줄 때 유리합니다.

• gap: Tailwind CSS의 gap 수치입니다. (기본값: "6")

  • 수치 "4"는 1rem(16px), "6"은 1.5rem(24px)에 해당합니다.

• class: 컨테이너에 추가할 커스텀 클래스입니다. (기본값: "")

핵심 특징

• grid-flow-dense 적용으로 아이템들이 빈 공간을 자동으로 찾아 메우는 효율적인 배치를 지원합니다.

• 순수 자바스크립트와 Svelte 5 룬 기반으로 작성되어 가볍고 빠릅니다.

3. BentoItem.svelte: 콘텐츠 유닛

그리드 내부에 배치되는 개별 카드 컴포넌트입니다.

레이아웃 설정 (Props)

• span: 가로 폭 점유 설정입니다. (기본값: 'col-span-4')

• rowSpan: 세로 높이 점유 설정입니다. (기본값: 'row-span-4')

  • 팁 (12컬럼 기준): 3분할은 4/4, 4분할은 3/3, 대형 카드는 8/8 조합을 추천합니다.

콘텐츠 및 스타일 (Props)

• image: 배경으로 사용할 이미지 경로입니다. (기본값: null)

• title: 카드에 표시할 제목입니다.

• description: 제목 하단에 표시할 보조 설명입니다.

• onclick: 클릭 이벤트 핸들러입니다. 함수가 존재하면 커서가 pointer로 자동 변경됩니다.

• hasBorder: 테두리 표시 여부입니다. (기본값: true)

• borderWidth / borderColor: 테두리의 두께와 색상을 Tailwind 클래스로 제어합니다.

지능형 타이포그래피

• 외부 CSS 의존성 없이 clamp() 함수를 이용한 유동형 텍스트 시스템이 내장되어 있습니다.

• 제목(Title): 화면 너비에 따라 1.125rem에서 2.2rem 사이로 자동 조절됩니다.

• 본문(Body): 화면 너비에 따라 0.875rem에서 1.125rem 사이로 자동 조절됩니다.

4. 사용 방법 예시

SvelteKit 환경에서 자바스크립트를 사용하여 구현한 예시 코드입니다.

<script>
    import BentoGrid from './BentoGrid.svelte';
    import BentoItem from './BentoItem.svelte';

    const handleClick = () => alert('카드 클릭!');
</script>

<BentoGrid cols={12} gap="6">
    <BentoItem 
        span="col-span-4" 
        rowSpan="row-span-4" 
        title="COFFEE SOLUTION" 
        description="전문적인 커피 브랜딩과 컨설팅을 제공합니다."
        image="/images/bg-1.jpg"
        onclick={handleClick}
    />

    <BentoItem 
        span="col-span-8" 
        rowSpan="row-span-4" 
        title="DESIGN ARCHIVE" 
        description="심플하고 직관적인 유저 인터페이스 디자인 시스템입니다."
        image="/images/bg-2.jpg"
    />

    <BentoItem span="col-span-12" rowSpan="row-span-2" title="TOTAL STATISTICS">
        <div class="mt-4 flex gap-6 text-white/80">
            <div>Project: 24+</div>
            <div>Client: 12+</div>
        </div>
    </BentoItem>
</BentoGrid>

5. 활용 및 최적화 팁

• 반응형 레이아웃: span 속성에 md:col-span-6과 같은 반응형 접두사를 사용하여 모바일에서는 1단, 데스크톱에서는 다단으로 구성할 수 있습니다.

• 이미지 효과: imgClass 속성에 group-hover:scale-105를 추가하면 마우스 호버 시 이미지가 부드럽게 확대되는 효과를 줄 수 있습니다.

• 번(Bun) 기반 워크플로우: 이 컴포넌트 시스템은 최신 Svelte 5 표준을 따르므로 Bun 런타임 환경에서 매우 빠르고 안정적으로 동작합니다.