# Ant Design

> 엔터프라이즈급 UI 디자인 언어로, 중국 알리바바 그룹에서 개발했습니다.

- 층: 레퍼런스 (디자인 언어)
- ID: ant-design
- 연도: 2015
- 제작자: Ant Group
- 무드 태그: 미니멀, 신뢰감
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/ant-design

## 정의

엔터프라이즈급 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에 부적합.

## 무드 프로파일

4축 각각 −2 ~ +2 정수. 취향 테스트(/fit)와 비교 페이지가 같은 좌표를 쓴다.

- 밀도: -1 (여백 −2 ↔ +2 빽빽)
- 온도감: -1 (차가움 −2 ↔ +2 따뜻함)
- 시대감: 0 (레트로 −2 ↔ +2 미래적)
- 격식: +1 (자유분방 −2 ↔ +2 격식)

## 사용 사례

- 중국계 테크 스타트업
- B2B SaaS 대시보드
- 관리자 패널
- React 기반 웹앱

## 추천 프로젝트 유형

- B2B SaaS
- React 기반 관리자 페이지
- 기업용 대시보드
- 중국 시장 제품

## 장단점

### 장점

- 컴포넌트 수가 매우 풍부 (60개 이상)
- React 생태계 최고 인기 UI 라이브러리 중 하나
- 디자인 토큰 커스터마이징 용이
- 국제화(i18n) 내장

### 단점·한계

- 번들 사이즈가 큰 편
- 디자인이 Material보다 독특함이 부족
- 중국 기업 이미지로 일부 시장에서 거부감

## 실제 사용 제품·서비스

- Alibaba 내부 툴
- Ant Financial
- 다수의 중국 SaaS 제품

## 접근성

기본 접근성 지원. aria 레이블 제공. WCAG AA 부분 준수.

## 자주 묻는 질문

### Q1. Ant Design이란 무엇인가요?

엔터프라이즈급 UI 디자인 언어로, 중국 알리바바 그룹에서 개발했습니다. 2015년 알리바바 그룹 내부 디자인 시스템으로 시작. 현재 GitHub에서 가장 많은 스타를 보유한 디자인 시스템 중 하나.

### Q2. Ant Design의 핵심 디자인 원칙은 무엇인가요?

Ant Design의 핵심 원칙은 자연스러움 (Natural), 확실함 (Certain), 의미있음 (Meaningful), 성장 (Growing)입니다.

### Q3. Ant Design은 어떤 프로젝트에 적합한가요?

Ant Design은 중국계 테크 스타트업, B2B SaaS 대시보드, 관리자 패널, React 기반 웹앱, B2B SaaS, React 기반 관리자 페이지, 기업용 대시보드, 중국 시장 제품 등의 프로젝트에 적합합니다.

### Q4. Ant Design의 장단점은 무엇인가요?

장점으로는 컴포넌트 수가 매우 풍부 (60개 이상), React 생태계 최고 인기 UI 라이브러리 중 하나, 디자인 토큰 커스터마이징 용이, 국제화(i18n) 내장이 있습니다. 단점으로는 번들 사이즈가 큰 편, 디자인이 Material보다 독특함이 부족, 중국 기업 이미지로 일부 시장에서 거부감이 있습니다.

### Q5. Ant Design에서 색상은 어떻게 사용하나요?

Ant Blue 기반 semantic token 시스템. 기능별 색상을 엄격히 구분하는 기업용 팔레트 색상 역할은 primary (Brand Blue): CTA, 링크, 활성 상태, success (Green): 성공·완료 상태, warning (Yellow/Orange): 경고 상태입니다. 주의사항: semantic 색상 역할 외 용도로 혼용 금지 (e.g. success 녹색을 강조로 쓰지 않음), gray 계열 10단계 사용 — 임의 회색 사용 금지.

### Q6. Ant Design에 어울리는 폰트 스타일은 무엇인가요?

Ant Design에는 중립적이고 기능적인 산세리프. 다국어(중국어 포함) 가독성 필수 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 기본 14px, line-height 1.5714 준수 — Ant Design 비율, heading은 h1(38px)~h5(16px) 공식 스케일 사용.

### Q7. Ant Design 디자인에서 하면 안 되는 것은 무엇인가요?

Ant Design에서 피해야 할 것: 컴포넌트 변형 없이 직접 색 덮어쓰기 금지 — theme token으로만 커스터마이징, 버튼/폼 크기를 임의 변경 금지 — small/default/large 3단계만.

### Q8. Ant Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?

Ant Design을 적용한 대표적인 제품·서비스로는 Alibaba 내부 툴, Ant Financial, 다수의 중국 SaaS 제품 등이 있습니다.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

- primary: #1890FF
- secondary: #52C41A
- accent: #FAAD14
- background: #FFFFFF
- surface: #FAFAFA
- text: #000000
- textSecondary: #595959
- border: #D9D9D9

### 타이포그래피

- fontFamily: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0em

### 간격·반경·그림자·테두리

- spacing: unit 8px × scale 1
- borderRadius: sm 2px / md 4px / lg 8px / full 9999px
- shadow sm: 0 2px 8px rgba(0, 0, 0, 0.15)
- shadow md: 0 4px 12px rgba(0, 0, 0, 0.15)
- shadow lg: 0 9px 28px rgba(0, 0, 0, 0.15)
- border: 1px solid #D9D9D9

### 컴포넌트 형태

- button: rounded / hover lift / text none
- card: elevated / hover lift
- input: outlined / focus border
- badge: rounded / solid
- icon: tabler / stroke 1.5 / size 20px
- layout: boxed / section normal
- animation: 300ms cubic-bezier(0.645, 0.045, 0.355, 1)

## 관련 링크

### 관련 스타일

- [Material Design](https://ui.buildersgate.com/styles/material-design)
- [Carbon Design System](https://ui.buildersgate.com/styles/carbon-design)
- [Atlassian Design System](https://ui.buildersgate.com/styles/atlassian-design)

### 데모 (같은 화면, 이 스타일로)

- [브랜드 랜딩 데모](https://ui.buildersgate.com/demo/brand/ant-design)
- [SaaS 대시보드 데모](https://ui.buildersgate.com/demo/saas/ant-design)
- [커머스 데모](https://ui.buildersgate.com/demo/commerce/ant-design)

### 비교

- [Ant Design vs Atlassian Design System](https://ui.buildersgate.com/compare/ant-design-vs-atlassian-design)
- [Ant Design vs Carbon Design System](https://ui.buildersgate.com/compare/ant-design-vs-carbon-design)
- [Ant Design vs Material Design](https://ui.buildersgate.com/compare/ant-design-vs-material-design)
- [Ant Design vs Wanted Design System (Montage)](https://ui.buildersgate.com/compare/ant-design-vs-wanted-montage)

### 쓰임새별 추천

- [SaaS 대시보드](https://ui.buildersgate.com/for/saas-dashboard)
- [이커머스·쇼핑몰](https://ui.buildersgate.com/for/ecommerce)

---

HTML 버전: https://ui.buildersgate.com/styles/ant-design

이 문서는 https://ui.buildersgate.com/styles/ant-design.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.