# Ant Design — 디자인 스타일 가이드
## 기본 정보
- **ID**: ant-design
- **카테고리**: design-language
- **연도**: 2015
- **제작자**: Ant Group
## 설명
엔터프라이즈급 UI 디자인 언어로, 중국 알리바바 그룹에서 개발했습니다.
## 역사·배경
2015년 알리바바 그룹 내부 디자인 시스템으로 시작. 현재 GitHub에서 가장 많은 스타를 보유한 디자인 시스템 중 하나.
## 핵심 원칙
- 자연스러움 (Natural)
- 확실함 (Certain)
- 의미있음 (Meaningful)
- 성장 (Growing)
## 주요 특징
- 풍부한 컴포넌트 라이브러리
- 일관된 디자인 토큰
- 국제화 지원
- 명확한 시각적 계층
- 효율적인 작업 흐름
## 색상 팔레트
- Daybreak Blue (#1890FF): Primary — 브랜드 색상
- Blue 7 (#096DD9): Primary Hover
- Success Green (#52C41A): 성공 상태
- Warning Gold (#FAAD14): 경고 상태
- Error Red (#FF4D4F): 오류 상태
- Gray 1 (#FFFFFF): Background
- Text Primary (#000000D9): 텍스트 Primary
## 사용 사례
- 중국계 테크 스타트업
- B2B SaaS 대시보드
- 관리자 패널
- React 기반 웹앱
## 추천 프로젝트 유형
- B2B SaaS
- React 기반 관리자 페이지
- 기업용 대시보드
- 중국 시장 제품
## 장점
- 컴포넌트 수가 매우 풍부 (60개 이상)
- React 생태계 최고 인기 UI 라이브러리 중 하나
- 디자인 토큰 커스터마이징 용이
- 국제화(i18n) 내장
## 단점·한계
- 번들 사이즈가 큰 편
- 디자인이 Material보다 독특함이 부족
- 중국 기업 이미지로 일부 시장에서 거부감
## 실제 사용 제품·서비스
- Alibaba 내부 툴
- Ant Financial
- 다수의 중국 SaaS 제품
## 접근성
기본 접근성 지원. aria 레이블 제공. WCAG AA 부분 준수.
## 관련 스타일
- [material-design](https://ui.buildersgate.com/styles/material-design)
- [carbon-design](https://ui.buildersgate.com/styles/carbon-design)
- [atlassian-design](https://ui.buildersgate.com/styles/atlassian-design)
## 디자인 토큰
### 색상
- primary: #1890FF
- secondary: #52C41A
- accent: #FAAD14
- background: #FFFFFF
- surface: #FAFAFA
- text: #000000
- textSecondary: #595959
- border: #D9D9D9
### 헤더
- background: linear-gradient(135deg, #1890FF 0%, #096DD9 100%)
- textColor: #FFFFFF
- accentColor: #FAAD14
### 타이포그래피
- fontFamily: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0em
### 스페이싱
- unit: 8px
- scale: 1
### 그림자 (Shadows)
- sm: 0 2px 8px rgba(0, 0, 0, 0.15)
- md: 0 4px 12px rgba(0, 0, 0, 0.15)
- lg: 0 9px 28px rgba(0, 0, 0, 0.15)
- xl: 0 16px 48px rgba(0, 0, 0, 0.15)
### Border Radius
- none: 0
- sm: 2px
- md: 4px
- lg: 8px
- full: 9999px
### 테두리 (Borders)
- width: 1px
- style: solid
- color: #D9D9D9
### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)
### 애니메이션
- duration: 300ms
- easing: cubic-bezier(0.645, 0.045, 0.355, 1)
### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=lift / textTransform=none
- 카드: style=elevated / hoverEffect=lift
- 인풋: style=outlined / focusEffect=border
- 배지: shape=rounded / style=solid
- 아이콘: package=tabler / strokeWidth=1.5 / defaultSize=20
### 레이아웃
- containerStyle: boxed
- sectionSpacing: normal
### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=ant-design
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=ant-design&merged=true
Ant Design
엔터프라이즈급 UI 디자인 언어로, 중국 알리바바 그룹에서 개발했습니다.
2015년 알리바바 그룹 내부 디자인 시스템으로 시작. 현재 GitHub에서 가장 많은 스타를 보유한 디자인 시스템 중 하나.
색상 팔레트
Daybreak Blue
#1890FF
Primary — 브랜드 색상
Blue 7
#096DD9
Primary Hover
Success Green
#52C41A
성공 상태
Text Primary
#000000D9
텍스트 Primary
주요 특징
- 풍부한 컴포넌트 라이브러리
- 일관된 디자인 토큰
- 국제화 지원
- 명확한 시각적 계층
- 효율적인 작업 흐름
장단점
장점
- +컴포넌트 수가 매우 풍부 (60개 이상)
- +React 생태계 최고 인기 UI 라이브러리 중 하나
- +디자인 토큰 커스터마이징 용이
- +국제화(i18n) 내장
단점 / 한계
- −번들 사이즈가 큰 편
- −디자인이 Material보다 독특함이 부족
- −중국 기업 이미지로 일부 시장에서 거부감
적합한 사용처
사용 사례
- 중국계 테크 스타트업
- B2B SaaS 대시보드
- 관리자 패널
- React 기반 웹앱
이런 프로젝트에 추천
B2B SaaSReact 기반 관리자 페이지기업용 대시보드중국 시장 제품
접근성기본 접근성 지원. aria 레이블 제공. WCAG AA 부분 준수.
실제 사용 예시
Alibaba 내부 툴Ant Financial다수의 중국 SaaS 제품
UI 컴포넌트 예제
이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.
Ant Design Buttons
엔터프라이즈급 버튼 컴포넌트
Ant Design Cards
명확한 시각적 계층의 카드 컴포넌트
Card Title
Ant Design의 카드는 깔끔하고 명확한 경계를 가집니다.
Another Card
일관된 디자인 토큰으로 통일성을 유지합니다.
Project Created
2024-01-01
프로젝트가 시작되었습니다.
Development Phase
2024-01-15
개발 단계에 진입했습니다.
Testing
2024-02-01
테스트 진행 중입니다.
Tag 1SuccessWarningErrorClosable Ant Design Typography
엔터프라이즈 환경에 최적화된 명확한 타이포그래피 시스템
Body (14px)
Ant Design은 알리바바 그룹에서 개발한 엔터프라이즈급 UI 디자인 언어입니다. 풍부한 컴포넌트 라이브러리와 일관된 디자인 토큰을 제공합니다.
Link TextSuccess TextWarning TextDanger Text
Caption (12px)
Ant Group © 2015 · 开放设计体系