디자인 시스템 Observability 강화 및 SEED Docs 고도화를 통한 개발 생산성 및 사용자 경험 향상 전략

핵심 기술

이번 글은 디자인 시스템의 'Observability' 강화 및 'SEED Docs' 고도화를 통해 개발 생산성과 사용자 경험을 향상시키기 위한 전략을 제시합니다. Telemetry를 활용한 디자인 시스템 사용량 추적, Variant 기반의 컴포넌트 스타일 제어, 그리고 LLM 활용을 위한 맥락 중심의 SEED Docs 구축 방안을 구체적으로 논의합니다.

기술적 세부사항

• Observability 강화 (Telemetry 활용):
  • Vite, Rsbuild, Webpack 플러그인에 telemetry 옵션을 추가하여 디자인 시스템 사용 패턴 수집.
  • 패키지별 버전 분포, 컴포넌트 사용량, Prop 사용량 등 추적 목표.
  • 수집된 데이터를 통해 합리적인 변경 및 최적화 근거 마련.
• 상호작용 가능한 디자인 시스템 만들기 (Variant 기반 스타일 제어):
  • 컴포넌트 스타일의 Variant 형태 Override 제공 (e.g., Action Button의 disabled, active 상태).
  • 개발단에서 CSS Variable을 전부 열어주는 대신, Custom Variant 형태로 상태에 대응하는 값 지정.
  • Telemetry 데이터를 활용하여 Variant 사용 빈도 분석 및 불필요한 Variant 제거, 추가.
• 생동감 넘치는 당근 앱 만들기 (Motion, Haptic):
  • (본문에서 직접적인 구현 방법은 없으나, 디자인 시스템의 목표 중 하나로 언급)
• SEED Docs 고도화 (맥락 중심 문서화):
  • 토큰 정보, 컴포넌트 스펙, 스타일 가이드라인, 구현체 인터페이스 및 사용 예시 등 모든 맥락 축적.
  • LLM 학습을 위한 llms.txt 형태의 잘 정리된 공개 정보 중요성 강조.
  • 이미지보다는 텍스트 기반 설명, 텍스트 부연설명 용도의 이미지 활용.
  • UI Generator (Lovable, Bolt 등)와의 연동 및 '당근스러운' UI 생성 가능성.
  • 문서의 브랜딩 강화 및 공식적인 느낌으로 사이트 개선.
  • MCP(Machine-Readable Content Platform)를 통한 정보 제공 (사내 LLM, 에이전트 활용).
• 상호작용 가능한 디자인 시스템 구현 (Slack Bot):
  • 당근만의 '지식의 궁전'과 디자인 시스템 맥락을 기반으로 질답하는 Slack Bot 개발.
  • RAG (Retrieval-Augmented Generation) 또는 엑셀 등 저장 공간을 활용한 지식 축적 및 제공 방식 모색.