Comprehensive breakdown of Shadcn's design principles and aesthetics

원본 Gist

이 문서는 디자인 브리프를 위해 Shadcn의 디자인 원칙과 미학을 포괄적으로 분석한 내용입니다.

오픈 코드 철학 (Open Code Philosophy)
- 소유권: 개발자는 래핑이나 오버라이딩 대신 컴포넌트 소스 코드를 직접 수정합니다.
- 투명성: AI 지원 개선을 위해 컴포넌트 구현에 대한 완전한 가시성을 확보합니다.
- 사용자 정의: 스타일, 동작, 기능의 무제한적인 수정이 가능합니다.
접근성 우선 아키텍처 (Accessibility-First Architecture)
- WCAG 준수: 내장된 키보드 탐색, 포커스 관리, ARIA 속성을 지원합니다.
- 포용적 디자인: 고대비, 스크린 리더 지원, 동작 줄임 옵션을 제공합니다.
- 헤드리스 기반: 접근성 핵심을 위해 Radix UI 프리미티브를 사용합니다.
구성 우선 아키텍처 (Composition-First Architecture)
- 모듈식 디자인: 컴포넌트는 구조/동작 레이어(Radix 기반 로직)와 스타일 레이어(Tailwind 기반 시각 표현)로 나뉩니다.
- 예측 가능한 API: 컴포넌트 전반에 걸쳐 표준화된 인터페이스를 제공합니다.
- 서드파티 통합: 외부 컴포넌트를 디자인 시스템에 맞게 조정할 수 있습니다.

미니멀리스트 시각 언어 (Minimalist Visual Language)
- 여백: 넉넉한 패딩(최소 1rem)과 마진 시스템을 사용합니다.
- 깔끔한 라인: 1px 테두리 두께와 미묘한 반경(기본 0.5rem)을 적용합니다.
- 타이포그래피: 시스템 폰트 스택을 사용하며, 기본 크기는 1rem(16px), 줄 간격은 1.5입니다.
전략적 깊이 시스템 (Strategic Depth System)
- 그림자 계층: sm, DEFAULT, lg 등 명확한 그림자 계층을 통해 깊이를 표현합니다.
- 레이어 전환: 인터랙티브 요소에서 부드러운 입체감 변화를 보여줍니다.
색상 시스템 구현 (Color System Implementation)
- HSL 형식: 테마 설정을 위해 :root에 HSL 형식의 변수를 정의합니다.
- 의미론적 이름 지정: background/foreground 쌍과 muted, accent, destructive와 같은 수정자를 사용합니다.
- 다크 모드: 환경 설정에 맞는 로딩과 함께 CSS 변수 오버라이드를 지원합니다.
모션 디자인 (Motion Design)
- 마이크로 인터랙션: 상태 변경에 150ms의 트랜지션 지속 시간을 사용합니다.
- 변형: 미묘한 크기 변형(호버 시 95%)을 적용합니다.
- 이징(Easing): cubic-bezier(0.4, 0, 0.2, 1)을 사용하여 자연스러운 움직임을 구현합니다.

컴포넌트 사용자 정의
- Tailwind 패턴: 체계적인 오버라이드를 위해 @layer 지시문을 사용합니다.
- CSS 변수: var(--primary) 참조를 통해 테마를 적용합니다.
- 상태 관리: hover/focus/active 상태를 컴포넌트 전반에 걸쳐 일관되게 유지합니다.
반응형 동작
- 모바일 우선 중단점: sm, md, lg, xl 등 표준 중단점을 사용합니다.
- 적응형 컴포넌트: 접을 수 있는 내비게이션 패턴, 유동적인 그리드 등을 지원합니다.
디자인 토큰 구현
- 간격 시스템: 0.25rem 단위의 Tailwind 간격 스케일을 따릅니다.
- 테두리 시스템: 1px solid hsl(var(--border))를 사용합니다.
- 타이포그래피 스케일: xs부터 xl까지 명확한 타이포그래피 스케일을 정의합니다.