Getting Started

Overview#

Getting Started는 여러분의 웹서비스나 토이 프로젝트에 Cabinet Design을 단 5분 만에 가져와 바로 사용할 수 있도록 돕는 실전 적용 가이드입니다.

Adoption Strategy#

Cabinet Design은 소스코드를 프로젝트 내부에 직접 소유(Code Ownership)하는 모던 컴포넌트 가이드 방식을 채택했습니다.

Step 1. Copy Tokens#

Cabinet Design의 시각적 일관성은 3개의 순수 CSS 토큰 파일에서 나옵니다. 여러분 프로젝트의 스타일 폴더(예: src/styles/tokens)에 토큰 파일을 복사합니다.

your-project/
├── src/
│   ├── styles/
│   │   ├── tokens/
│   │   │   ├── primitive.css    # 원시 물리값 (팔레트, 간격, 폰트)
│   │   │   ├── semantic.css     # UI 역할 토큰 (text, surface, border)
│   │   │   └── component.css    # 컴포넌트 토큰 (button, select, field)
│   │   ├── typography.css       # 타이포그래피 스케일
│   │   └── utilities.css        # 스크롤바, 스킵링크 보조 유틸
│   └── app/
│       └── globals.css          # 토큰 불러오기

globals.css (또는 엔트리 CSS) 최상단에서 토큰을 불러옵니다.

/* globals.css */
@import './styles/tokens/primitive.css';
@import './styles/tokens/semantic.css';
@import './styles/tokens/component.css';
@import './styles/typography.css';
@import './styles/utilities.css';

Step 2. Customize Theme#

Cabinet Design의 모든 컴포넌트는 --color-brand 토큰을 중심으로 동작합니다. 아래 체험기에서 원하는 브랜드 색상을 클릭해 보세요. 버튼, 체크박스, 라디오, 셀렉트, 뱃지가 어떻게 실시간으로 변신하는지 직접 확인하실 수 있습니다.

/* globals.css 또는 theme.css 에 추가 */
:root {
  /* [라이트 모드] 고대비 브랜드 토큰 */
  --guide-brand-600: #38471d;
  --guide-brand-700: #2b3716;
  --guide-line-checked: #38471d;
  --guide-button-primary-default-bg: #38471d;
  --guide-badge-accent-solid-bg: #38471d;
}

[data-theme='dark'] {
  /* [다크 모드] 고대비 발광 브랜드 토큰 */
  --guide-brand-300: #abc284;
  --guide-line-checked: #abc284;
  --guide-line-focus: #abc284;
  --guide-text-brand: #abc284;
  --guide-button-primary-default-bg: #abc284;
  --guide-button-primary-default-text: #141c0a;
  --guide-badge-accent-solid-bg: #abc284;
  --guide-badge-accent-solid-text: #141c0a;
  --guide-badge-accent-line: #abc284;
}

Step 3. Add Components#

디자인 토큰이 준비되었다면, 여러분이 필요한 컴포넌트 소스(TSX 및 CSS)를 프로젝트의 src/components/ui 폴더로 복사합니다.

// src/app/page.tsx
import { Button } from '@/components/ui/button';

export default function MyPage() {
  return (
    <main className="p-8 space-y-4">
      <h1>내 프로젝트 시작하기</h1>
      <div className="flex gap-2">
        <Button variant="primary" size="md">
          확인
        </Button>
        <Button variant="outline" size="md">
          취소
        </Button>
      </div>
    </main>
  );
}

각 컴포넌트의 상세 마크업과 Props 스펙은 사이드바의 Button, Select, Checkbox 등 각 컴포넌트 페이지의 Code Example 섹션에서 손쉽게 원클릭으로 복사하실 수 있습니다.

Step 4. Dark Mode Setup#

Cabinet Design의 토큰 시스템은 다크 모드를 기본 지원합니다. <html> 요소에 data-theme="dark" 속성을 부여하기만 하면 모든 배경, 텍스트, 경계선, 폼 컨트롤이 1초 만에 최적의 다크 대비로 자동 반전됩니다.

<!-- 라이트 모드 -->
<html data-theme="light">

<!-- 다크 모드 -->
<html data-theme="dark">

function toggleTheme() {
  const current = document.documentElement.getAttribute('data-theme');
  const next = current === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', next);
  localStorage.setItem('theme', next);
}

Framework Tips#

주요 프레임워크 환경에서 Cabinet Design을 사용할 때 참고할 수 있는 팁입니다.

@theme inline {
  --color-brand: var(--color-brand);
  --color-surface: var(--guide-bg-base);
  --color-foreground: var(--guide-text-primary);
}

Next Steps#

기본 적용을 마쳤다면, 세부 디자인 원칙과 각 컴포넌트의 상세 스펙을 살펴보세요.