# Ant Design — 디자인 스타일 가이드
## 기본 정보
- **ID**: ant-design
- **카테고리**: design-language
- **연도**: 2015
- **제작자**: Ant Group
## 설명
엔터프라이즈급 UI 디자인 언어로, 중국 알리바바 그룹에서 개발했습니다.
## 역사·배경
2015년 알리바바 그룹 내부 디자인 시스템으로 시작. 현재 GitHub에서 가장 많은 스타를 보유한 디자인 시스템 중 하나.
## 핵심 원칙
- 자연스러움 (Natural)
- 확실함 (Certain)
- 의미있음 (Meaningful)
- 성장 (Growing)
## 주요 특징
- 풍부한 컴포넌트 라이브러리
- 일관된 디자인 토큰
- 국제화 지원
- 명확한 시각적 계층
- 효율적인 작업 흐름
## 컬러 시스템 가이드
Ant Blue 기반 semantic token 시스템. 기능별 색상을 엄격히 구분하는 기업용 팔레트
### 색상 역할
- primary (Brand Blue): CTA, 링크, 활성 상태
- success (Green): 성공·완료 상태
- warning (Yellow/Orange): 경고 상태
- error (Red): 오류·위험 상태
- info (Blue variant): 정보성 메시지
- neutral (Gray): 텍스트, 배경, 구분선 계층
### 색상 제약 조건
- semantic 색상 역할 외 용도로 혼용 금지 (e.g. success 녹색을 강조로 쓰지 않음)
- gray 계열 10단계 사용 — 임의 회색 사용 금지
- primary와 success/error/warning 동시에 사용 시 시각 경쟁 주의
### 다크모드 전략
antd 5.x dark algorithm 사용. 직접 color token 반전보다 알고리즘 위임 권장
### 대비 요구사항
WCAG AA (4.5:1) 기본
## 타이포그래피 가이드
- **폰트 성격**: 중립적이고 기능적인 산세리프. 다국어(중국어 포함) 가독성 필수
- **권장 폰트 수**: 최대 1개
- **타입 스케일**: Ant Design 공식 스케일 (12/14/16/20/24/30/38px)
### 타이포그래피 제약
- 기본 14px, line-height 1.5714 준수 — Ant Design 비율
- heading은 h1(38px)~h5(16px) 공식 스케일 사용
- letter-spacing 0 기본값 유지
## 하면 안 되는 것 (안티패턴)
- 컴포넌트 변형 없이 직접 색 덮어쓰기 금지 — theme token으로만 커스터마이징
- 버튼/폼 크기를 임의 변경 금지 — small/default/large 3단계만
## 반드시 포함해야 하는 것
- 상태 피드백 (loading, disabled, success, error) 모든 인터랙션에 적용
- 폼 유효성 검사 메시지 — error/warning 색상 및 메시지 텍스트 병행
- 반응형 그리드 (24컬럼)
## 모션 가이드
Ant Motion 기반. 기본 200~300ms ease-in-out. 페이지 전환은 slide/fade 중 선택. 과도한 모션은 기업 UI에 부적합.
## 사용 사례
- 중국계 테크 스타트업
- 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
## 자주 묻는 질문 (FAQ)
### Q: Ant Design이란 무엇인가요?
A: 엔터프라이즈급 UI 디자인 언어로, 중국 알리바바 그룹에서 개발했습니다. 2015년 알리바바 그룹 내부 디자인 시스템으로 시작. 현재 GitHub에서 가장 많은 스타를 보유한 디자인 시스템 중 하나.
### Q: Ant Design의 핵심 디자인 원칙은 무엇인가요?
A: Ant Design의 핵심 원칙은 자연스러움 (Natural), 확실함 (Certain), 의미있음 (Meaningful), 성장 (Growing)입니다.
### Q: Ant Design은 어떤 프로젝트에 적합한가요?
A: Ant Design은 중국계 테크 스타트업, B2B SaaS 대시보드, 관리자 패널, React 기반 웹앱, B2B SaaS, React 기반 관리자 페이지, 기업용 대시보드, 중국 시장 제품 등의 프로젝트에 적합합니다.
### Q: Ant Design의 장단점은 무엇인가요?
A: 장점으로는 컴포넌트 수가 매우 풍부 (60개 이상), React 생태계 최고 인기 UI 라이브러리 중 하나, 디자인 토큰 커스터마이징 용이, 국제화(i18n) 내장이 있습니다. 단점으로는 번들 사이즈가 큰 편, 디자인이 Material보다 독특함이 부족, 중국 기업 이미지로 일부 시장에서 거부감이 있습니다.
### Q: Ant Design에서 색상은 어떻게 사용하나요?
A: Ant Blue 기반 semantic token 시스템. 기능별 색상을 엄격히 구분하는 기업용 팔레트 색상 역할은 primary (Brand Blue): CTA, 링크, 활성 상태, success (Green): 성공·완료 상태, warning (Yellow/Orange): 경고 상태입니다. 주의사항: semantic 색상 역할 외 용도로 혼용 금지 (e.g. success 녹색을 강조로 쓰지 않음), gray 계열 10단계 사용 — 임의 회색 사용 금지.
### Q: Ant Design에 어울리는 폰트 스타일은 무엇인가요?
A: Ant Design에는 중립적이고 기능적인 산세리프. 다국어(중국어 포함) 가독성 필수 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 기본 14px, line-height 1.5714 준수 — Ant Design 비율, heading은 h1(38px)~h5(16px) 공식 스케일 사용.
### Q: Ant Design 디자인에서 하면 안 되는 것은 무엇인가요?
A: Ant Design에서 피해야 할 것: 컴포넌트 변형 없이 직접 색 덮어쓰기 금지 — theme token으로만 커스터마이징, 버튼/폼 크기를 임의 변경 금지 — small/default/large 3단계만.
### Q: Ant Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?
A: Ant Design을 적용한 대표적인 제품·서비스로는 Alibaba 내부 툴, Ant Financial, 다수의 중국 SaaS 제품 등이 있습니다.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=ant-design
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=ant-design&merged=true
엔터프라이즈급 UI 디자인 언어로, 중국 알리바바 그룹에서 개발했습니다. 2015년 알리바바 그룹 내부 디자인 시스템으로 시작. 현재 GitHub에서 가장 많은 스타를 보유한 디자인 시스템 중 하나.
Ant Design의 핵심 디자인 원칙은 무엇인가요?
Ant Design의 핵심 원칙은 자연스러움 (Natural), 확실함 (Certain), 의미있음 (Meaningful), 성장 (Growing)입니다.
Ant Design은 어떤 프로젝트에 적합한가요?
Ant Design은 중국계 테크 스타트업, B2B SaaS 대시보드, 관리자 패널, React 기반 웹앱, B2B SaaS, React 기반 관리자 페이지, 기업용 대시보드, 중국 시장 제품 등의 프로젝트에 적합합니다.
Ant Design의 장단점은 무엇인가요?
장점으로는 컴포넌트 수가 매우 풍부 (60개 이상), React 생태계 최고 인기 UI 라이브러리 중 하나, 디자인 토큰 커스터마이징 용이, 국제화(i18n) 내장이 있습니다. 단점으로는 번들 사이즈가 큰 편, 디자인이 Material보다 독특함이 부족, 중국 기업 이미지로 일부 시장에서 거부감이 있습니다.
Ant Design에서 색상은 어떻게 사용하나요?
Ant Blue 기반 semantic token 시스템. 기능별 색상을 엄격히 구분하는 기업용 팔레트 색상 역할은 primary (Brand Blue): CTA, 링크, 활성 상태, success (Green): 성공·완료 상태, warning (Yellow/Orange): 경고 상태입니다. 주의사항: semantic 색상 역할 외 용도로 혼용 금지 (e.g. success 녹색을 강조로 쓰지 않음), gray 계열 10단계 사용 — 임의 회색 사용 금지.
Ant Design에 어울리는 폰트 스타일은 무엇인가요?
Ant Design에는 중립적이고 기능적인 산세리프. 다국어(중국어 포함) 가독성 필수 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 기본 14px, line-height 1.5714 준수 — Ant Design 비율, heading은 h1(38px)~h5(16px) 공식 스케일 사용.
Ant Design 디자인에서 하면 안 되는 것은 무엇인가요?
Ant Design에서 피해야 할 것: 컴포넌트 변형 없이 직접 색 덮어쓰기 금지 — theme token으로만 커스터마이징, 버튼/폼 크기를 임의 변경 금지 — small/default/large 3단계만.
Ant Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Ant Design을 적용한 대표적인 제품·서비스로는 Alibaba 내부 툴, Ant Financial, 다수의 중국 SaaS 제품 등이 있습니다.