daangn / seed-design 리포지토리는 당근마켓의 디자인 시스템을 구축하기 위한 포괄적인 Monorepo 프로젝트입니다. 이 시스템은 디자인 원칙과 컴포넌트, 개발 도구를 통합하여 일관된 사용자 경험을 제공하고 개발 효율성을 높이는 것을 목표로 합니다.

핵심 방법론 및 구성 요소:

1. Monorepo 아키텍처: 프로젝트는 packages 디렉토리 아래 여러 하위 패키지로 구성된 Monorepo 구조를 채택하고 있습니다. 이는 bun 워크스페이스와 같은 도구를 활용하여 각 디자인 시스템 요소를 독립적으로 개발, 관리, 배포하면서도 코드 공유 및 일관성을 유지할 수 있도록 합니다. 각 패키지는 특정 기능 영역을 담당하며, 의존성 관리는 bun.lock 및 package.json을 통해 이루어집니다.

2. 디자인 토큰 (@seed-design/rootage, @seed-design/qvism-preset):
   • @seed-design/rootage: 디자인 시스템의 가장 기본적인 단위인 디자인 토큰(색상, 타이포그래피, 간격, 그림자 등)을 정의합니다. 이는 시스템 전체의 시각적 일관성을 보장하는 핵심 기반입니다.
   • @seed-design/qvism-preset: qvism이라는 특정 프리셋 또는 테마 관련 디자인 토큰을 제공하여, rootage의 기본 토큰 위에 특정 스타일 또는 테마를 적용할 수 있는 유연성을 더합니다. 이는 다양한 제품 또는 브랜드 요구사항에 맞춰 디자인을 확장하고 재사용할 수 있도록 합니다.

3. 기반 라이브러리 (@seed-design/css):
   • 이 패키지는 디자인 시스템의 핵심 CSS 유틸리티 및 스타일링 기반을 제공합니다. 이는 일반적인 스타일 규칙, 유틸리티 클래스, 또는 CSS 변수 등을 포함하여 모든 UI 컴포넌트가 일관된 스타일을 공유하도록 돕습니다.

4. React 라이브러리 (@seed-design/react-headless, @seed-design/react, @seed-design/stackflow):
   • @seed-design/react-headless: UI 컴포넌트의 논리(동작 및 접근성)만 포함하고 시각적인 스타일은 배제한 "headless" 컴포넌트를 제공합니다. 이를 통해 개발자는 고정된 스타일에 얽매이지 않고 원하는 대로 UI를 커스터마이징할 수 있습니다.
   • @seed-design/react: @seed-design/react-headless 위에 당근마켓의 시각적 디자인이 적용된 완성된 React UI 컴포넌트들을 제공합니다. 이는 즉시 사용 가능한 컴포넌트 라이브러리로, 개발 생산성을 높입니다.
   • @seed-design/stackflow: UI 컴포넌트 외에, 페이지 전환 또는 스택(Stack) 기반 내비게이션과 같은 복잡한 UI 패턴을 구현하는 데 사용되는 React 라이브러리로 추정됩니다. 이는 애플리케이션의 전반적인 사용자 흐름 및 인터랙션 디자인을 지원합니다.

5. 통합 (@seed-design/figma, @seed-design/mcp):
   • @seed-design/figma: 디자인 도구인 Figma와의 통합을 지원하는 패키지입니다. 이는 Figma 디자인 파일과 개발 코드 간의 동기화를 돕거나, 디자인 시스템을 Figma에서 효과적으로 활용하기 위한 리소스를 제공할 수 있습니다.
   • @seed-design/mcp: mcp.json 파일과 함께 언급되어, 특정 메타 정보, 설정, 또는 내부 프로세스 관리와 관련된 통합을 담당하는 것으로 보입니다.

6. Ecosystem (@seed-design/ecosystem/*):
   • @seed-design/ecosystem/rootage, qvism, figma-extractor: 디자인 시스템의 확장 및 지원 도구들을 포함합니다. 특히 figma-extractor는 Figma에서 디자인 토큰이나 컴포넌트 정보를 추출하여 개발 코드에 활용하는 자동화 도구로 추정되며, 디자인-개발 워크플로우의 효율성을 높입니다.

7. 문서화 (@seed-design/docs):
   • 디자인 시스템의 모든 컴포넌트, 원칙, 사용 가이드라인 등이 포함된 공식 문서를 제공합니다. 이는 디자이너와 개발자가 시스템을 이해하고 올바르게 사용할 수 있도록 돕는 중요한 부분입니다.

기술 스택:
프로젝트는 TypeScript를 기반으로 개발되며, bun을 런타임 및 패키지 매니저로 활용합니다. 코드 품질 유지를 위해 biome.json (formatter/linter), knip.json (unused code detection), renovate.json (dependency updates) 등의 도구를 사용합니다. 또한 .claude 및 .coderabbit.yaml 파일은 AI 기반의 코드 리뷰 또는 개발 자동화 도구의 활용 가능성을 시사합니다.