원본 Gist
Shadcn UI/UX 디자인 시스템
Shadcn UI/UX 디자인 시스템에 대한 구체적이고 실행 가능한 지침입니다.
1. 기하학 & 레이아웃 (Geometry & Layout)
- 그리드: 12-컬럼 그리드를 사용하고, 기준선은 4px씩 증가시킵니다.
- 정렬: 주요 콘텐츠는 최대 너비
1280px(w-full max-w-7xl)에서 중앙 정렬합니다. - 수직 마진: 섹션 사이의 수직 마진은 데스크톱에서 48px–64px, 모바일에서는 32px를 적용합니다.
- 대칭: 의도적으로 특정 요소를 강조하는 경우가 아니라면 비대칭을 피합니다.
2. 타이포그래피 (Typography)
- 기본 폰트:
Inter또는Sans를 기본 폰트로 설정하고, 본문 크기는 16px로 합니다. - 제목 스케일:
- H1: 48px / Bold
- H2: 36px / Semibold
- H3: 28px / Semibold
- Body: 16px / Regular
- 줄 간격: 모든 본문 텍스트에 1.5의 줄 간격을 적용합니다.
- 폰트 두께: 한 화면에서 두 가지 이상의 폰트 두께를 혼용하지 않습니다.
3. 색상 팔레트 (Color Palette)
- 기본 회색조:
#F8FAFC(gray-50)부터#0F172A(gray-900)까지의 스케일을 사용합니다. - 강조 색상: 차분한 톤의 브랜드 색상(예:
blue-600,indigo-700)을 절제하여 사용합니다. - 명암비: 본문 텍스트와 배경의 명암비는 4.5:1 이상을 유지합니다.
- 다크 모드: 배경을 어두운 회색(예:
#020617)으로, 텍스트는 거의 흰색으로 반전시킵니다.
4. 배경 (Backgrounds)
- 평면 디자인: 배경은 단색(예:
bg-white또는bg-slate-50)이나 미묘한 그라데이션(예:from-slate-50 to-slate-100)으로 평평하게 유지합니다. - 그림자: 카드나 팝업과 같은 요소에만 가벼운 그림자(
shadow-md,shadow-lg)를 적용합니다. - 블러 효과: 모달이나 네비게이션 바에만 블러 오버레이(예:
backdrop-blur-sm)를 사용합니다.
5. 모서리 반경 (Corner Radius)
- 기본:
rounded-md(6px) - 카드/모달:
rounded-lg(8px) - 작은 버튼/입력창:
rounded-sm(4px) - 심리적 원칙: 작은 곡선은 날카롭고 집중된 느낌을, 큰 곡선은 친근하고 매력적인 느낌을 줍니다.
6. 간격 시스템 (Spacing System)
- 기본 단위: 4px
- 표준 간격: 4/8/12/16/24/32/48/64px 단위로 사용합니다.
- 내부 패딩:
- 버튼: 세로 12px / 가로 20px
- 입력창: 모든 면에 12px
- 반응형 간격: 중단점(
sm,md,lg)에서 세로 패딩을 점진적으로 두 배씩 늘립니다.
7. 상호작용 요소 (Interactive Elements)
- 호버(Hover): 배경색의 투명도를 조절(
opacity-90)하거나 약간 어둡게 만듭니다. 버튼의 경우 2%–5% 크기 확대를 적용할 수 있습니다. - 포커스(Focus): 버튼이나 입력창에는 항상 2px 두께의
outline-ring을 표시합니다. - 애니메이션 타이밍: 150ms–200ms,
ease-in-out곡선을 사용합니다. - Framer Motion 프리셋: 페이지 로드 및 전환 시 0.2초의 페이드 + 슬라이드업 애니메이션을 사용합니다.
8. 디자인 철학 (Design Philosophy)
- 기능 우선: 장식보다 기능을 우선시합니다.
- 스타일 독립성: 컴포넌트는 스타일이 없어도 작동해야 합니다. 스타일은 추가적인 향상 요소입니다.
- 의미 있는 미니멀리즘: 공간을 의미 있게 채우고, 빈 화면으로 두지 않습니다.
- 절제된 디자인: 과도한 그림자, 큰 그라데이션, 지나친 애니메이션을 피합니다.
- Shadcn의 정체성: Shadcn은 Tailwind UI나 Material Design과 다르며, 커스텀 우선의 확장 가능한 원시(raw) 컴포넌트입니다.