02-reusable-design — 디자인 자산 라이브러리

웹사이트/프로젝트에서 추출한 재사용 가능한 디자인 자산을 관리한다.

개요

프로젝트의 "테마"를 구성하는 시각적 재료 — 색상, 폰트, 간격, 애니메이션 정의, 아이콘, Tailwind 설정 등을 관리합니다. 코드가 아닌 값과 설정이 핵심이며, 02-reusable-code/와 02-reusable-page/가 이 재료를 소비합니다.

3계층 모델에서의 위치

02-reusable-design  ← "재료" ★ (색상, 폰트, 애니메이션 정의)
        │ 참조
02-reusable-code    ← "부품" (Button, hooks, utils)
        │ 조합
02-reusable-page    ← "완성품" (Footer, Header, Hero)

design에 넣는 것

• CSS 변수 선언 (:root { --color-... })
• 키프레임 정의 (@keyframes)
• Tailwind theme 확장 (extend: { colors, spacing })
• SVG 아이콘 원본 파일
• 폰트 설정 (font-face)

design에 넣지 않는 것

• React 컴포넌트 (TSX) → 02-reusable-code 또는 02-reusable-page
• 동작 로직이 있는 코드 (hooks, utils) → 02-reusable-code
• 특정 레이아웃 구조를 가진 섹션 → 02-reusable-page

폴더 구조

02-reusable-design/
├── tokens/                     → 디자인 토큰
│   ├── color-palettes/         → 색상 팔레트 모음
│   ├── typography/             → 폰트 시스템 (font-family, scale, weight)
│   └── spacing-scale/          → 간격/사이징 체계
├── css-patterns/               → CSS 패턴
│   ├── animations/             → 키프레임, 전환 효과
│   ├── layouts/                → 그리드, 플렉스 패턴
│   └── utilities/              → 유틸리티 CSS
├── tailwind-configs/           → Tailwind 설정 모음
│   ├── themes/                 → 테마 프리셋
│   └── plugins/                → 커스텀 플러그인
└── assets/                     → 에셋 패턴
    ├── icon-sets/              → SVG 아이콘 세트
    └── patterns/               → 배경 패턴, 장식 요소

파일 메타데이터

모든 파일에 출처 정보를 포함:

/**
 * @source https://example.com 또는 프로젝트명
 * @extracted YYYY-MM-DD
 * @category color-palette | typography | animation | layout | ...
 * @description 한 줄 설명
 */

추출 이력

관련 문서

• 02-reusable-code — 원자적 UI 컴포넌트 라이브러리 (부품 계층)
• 02-reusable-page — 페이지 섹션 컴포넌트 (완성품 계층)
• 코딩 컨벤션 — 재사용 코드 통일 규칙
• /kdyextract Mode B — 웹사이트에서 디자인 자산 추출
• /kdypick — 프로젝트에 디자인 자산 적용