디자인 시스템 엔지니어링 원칙

# 실용적인 디자인 시스템 엔지니어의 디자인 시스템 취향 - 색상, 간격, 타이포그래피, 반경 및 모션에 대한 디자인 토큰을 하나의 소스 파일에서 정의하고, 이를 통해 CSS 변수와 플랫폼 출력물을 생성합니다. 신뢰도: 0.90 - 토큰 이름은 color-text-muted 또는 space-inset-md와 같이 목적에 따라 지정하며, gray-500 또는 16px와 같은 원시 값으로 지정하지 않습니다. 신뢰도: 0.85 - 의미론적 토큰 값을 교체하여 라이트 및 다크 테마를 지원하며, 개별 컴포넌트 스타일을 재정의하지 않습니다. 신뢰도: 0.90 - Radix UI 또는 React Aria와 같은 접근 가능한 헤드리스 프리미티브를 기반으로 컴포넌트를 구축하며, 포커스 및 키보드 로직을 재구현하지 않습니다. 신뢰도: 0.85 - 모든 토큰 쌍에 대해 WCAG 2.2 AA 대비를 충족하고, 토큰이 변경될 때 자동으로 확인합니다. 신뢰도: 0.90 - 컴포넌트 API를 작게 유지합니다: 잘 명명된 몇 가지 변형과 크기가 수십 개의 불리언 props보다 낫습니다. 신뢰도: 0.85 - 대화상자 및 메뉴와 같은 복잡한 컴포넌트의 경우 구성 객체보다 슬롯 또는 children을 사용한 합성을 선호합니다. 신뢰도: 0.80 - refs를 전달하고 나머지 props를 루트 요소에 확산하여 컴포넌트가 폼, 툴팁 및 테스트와 함께 작동하도록 합니다. 신뢰도: 0.85 - 컴포넌트 내부에 색상, 간격 또는 글꼴 크기를 하드코딩하지 않으며, Stylelint 또는 ESLint 규칙으로 원시 값을 린트합니다. 신뢰도: 0.85 - 모든 컴포넌트를 Storybook에 사용 지침, 해야 할 것과 하지 말아야 할 것 예시, 라이브 컨트롤과 함께 문서화합니다. 신뢰도: 0.85 - 모든 풀 리퀘스트에서 Chromatic 또는 Playwright 스크린샷으로 시각적 회귀 테스트를 실행합니다. 신뢰도: 0.80 - 컴포넌트 테스트에서 axe로 자동 접근성 검사를 실행하고, 출시 전에 키보드 및 스크린 리더 흐름을 수동으로 테스트합니다. 신뢰도: 0.85 - 라이브러리를 Changesets로 생성된 변경 로그와 함께 시맨틱 버전 관리가 적용된 버전 패키지로 게시합니다. 신뢰도: 0.90 - 이름이 변경된 prop 또는 제거된 변형을 주요 변경 사항으로 취급하고, 대규모 마이그레이션을 위해 codemods를 제공합니다. 신뢰도: 0.75 - 제거 전에 폐기: 이전 API를 표시하고, 개발 전용 경고를 기록하며, 다음 주요 버전에서 제거합니다. 신뢰도: 0.85 - 트리 쉐이킹이 가능한 컴포넌트별 진입점과 함께 ESM을 제공하고, CSS 파일을 사이드 이펙트로 올바르게 표시합니다. 신뢰도: 0.80 - prefers-reduced-motion을 존중하고 모션 토큰을 짧고 목적에 맞게 유지합니다. 신뢰도: 0.80 - 아이콘을 일관된 크기와 스트로크 토큰을 가진 최적화된 SVG 컴포넌트의 별도 패키지로 유지합니다. 신뢰도: 0.75 - margin-inline-start와 같은 논리적 CSS 속성을 사용하여 컴포넌트가 오른쪽에서 왼쪽 레이아웃에서 작동하도록 합니다. 신뢰도: 0.75 - 토큰 이름을 공유하고 매 릴리스마다 드리프트를 검토하여 Figma 컴포넌트와 코드 컴포넌트를 동기화 상태로 유지합니다. 신뢰도: 0.70 - 제품 저장소에서 라이브러리 가져오기 및 일회성 재정의를 스캔하여 채택률을 측정합니다. 신뢰도: 0.65 - 코드 작성 전에 사용 사례, API 및 접근성을 다루는 짧은 제안 템플릿을 통해 기여를 수락합니다. 신뢰도: 0.70