wshobson/design-system-patterns

design-system-patterns은(는) 무엇을 하나요?

디자인 토큰, 테마 인프라, 컴포넌트 아키텍처 패턴을 사용하여 확장 가능한 디자인 시스템을 구축합니다. 디자인 토큰 생성, 테마 전환 구현, 컴포넌트 라이브러리 구축 또는 디자인 시스템 기반 확립 시 사용하세요.

개요

이 스킬은 디자인 시스템을 체계적으로 구축하고 유지 관리하는 방법을 설명합니다. 디자인 토큰을 통해 디자인 결정을 코드로 표현하고, 테마 인프라를 통해 다양한 모드(라이트, 다크 등)를 지원하며, 컴포넌트 아키텍처 패턴을 통해 재사용성과 확장성을 보장합니다.

주요 개념

1. 디자인 토큰 (Design Tokens)

디자인 토큰은 색상, 간격, 타이포그래피 등 디자인 속성을 저장하는 작은 조각입니다. 일반적으로 JSON 또는 YAML 파일로 관리됩니다.

tokens:
  color:
    primary:
      value: "#3498db"
      type: "color"
    background:
      value: "#ffffff"
      type: "color"
  spacing:
    small:
      value: "8px"
      type: "dimension"
    medium:
      value: "16px"
      type: "dimension"

2. 테마 인프라 (Theming Infrastructure)

테마 인프라는 여러 테마를 전환할 수 있는 메커니즘을 제공합니다. CSS 변수, Context API, 또는 상태 관리 라이브러리를 활용할 수 있습니다.

React 예시

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);

3. 컴포넌트 아키텍처 패턴 (Component Architecture Patterns)

재사용 가능한 컴포넌트를 설계하기 위한 패턴입니다. 합성(Composition), 컨테이너/프레젠테이션 분리, 커스텀 훅 등을 활용합니다.

합성 패턴 예시

const Card = ({ children }) => (
  <div className="card">{children}</div>
);

Card.Header = ({ children }) => (
  <div className="card-header">{children}</div>
);

Card.Body = ({ children }) => (
  <div className="card-body">{children}</div>
);

// 사용
<Card>
  <Card.Header>제목</Card.Header>
  <Card.Body>내용</Card.Body>
</Card>

사용 방법

1. 디자인 토큰 생성: 먼저 프로젝트의 디자인 토큰을 JSON/YAML 파일로 정의하세요.
2. 테마 시스템 구현: 디자인 토큰을 기반으로 라이트/다크 테마를 지원하는 시스템을 구축하세요.
3. 컴포넌트 라이브러리 구축: 디자인 토큰과 테마 시스템을 활용하여 재사용 가능한 컴포넌트를 만드세요.
4. 확장 및 유지보수: 새로운 디자인 요구사항에 따라 토큰과 컴포넌트를 확장하세요.

참고 자료

• 디자인 토큰 형식 (W3C)
• Styled Components
• Storybook (컴포넌트 문서화 도구)

라이선스

이 스킬은 MIT 라이선스에 따라 제공됩니다.