표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
Ant Design
엔터프라이즈급 UI 디자인 언어로, 중국 알리바바 그룹에서 개발했습니다.
- YEAR
- 2015
- BY
- Ant Group
- MOOD
- 미니멀 · 신뢰감
- PRIMARY#1890FF
- SECONDARY#52C41A
- ACCENT#FAAD14
- BG#FFFFFF
- SURFACE#FAFAFA
취급 표시
- 살짝 둥근 모서리
- 가는 테두리
- 가는 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 2단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 2단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 3단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 4단계
- 미니멀
- 신뢰감
어디에 쓰나
실제로 쓰는 곳
- Alibaba 내부 툴
- Ant Financial
- 다수의 중국 SaaS 제품
사용 사례
- 중국계 테크 스타트업
- B2B SaaS 대시보드
- 관리자 패널
- React 기반 웹앱
이런 프로젝트에 맞습니다
- B2B SaaS
- React 기반 관리자 페이지
- 기업용 대시보드
- 중국 시장 제품
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
역사와 배경
2015년 알리바바 그룹 내부 디자인 시스템으로 시작. 현재 GitHub에서 가장 많은 스타를 보유한 디자인 시스템 중 하나.
핵심 원칙
- 자연스러움 (Natural)
- 확실함 (Certain)
- 의미있음 (Meaningful)
- 성장 (Growing)
주요 특징
- 풍부한 컴포넌트 라이브러리
- 일관된 디자인 토큰
- 국제화 지원
- 명확한 시각적 계층
- 효율적인 작업 흐름
장점과 한계
장점
- 컴포넌트 수가 매우 풍부 (60개 이상)
- React 생태계 최고 인기 UI 라이브러리 중 하나
- 디자인 토큰 커스터마이징 용이
- 국제화(i18n) 내장
한계
- 번들 사이즈가 큰 편
- 디자인이 Material보다 독특함이 부족
- 중국 기업 이미지로 일부 시장에서 거부감
컬러 시스템
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 기본값 유지
설계 제약
반드시 포함
- 상태 피드백 (loading, disabled, success, error) 모든 인터랙션에 적용
- 폼 유효성 검사 메시지 — error/warning 색상 및 메시지 텍스트 병행
- 반응형 그리드 (24컬럼)
하지 말 것
- 컴포넌트 변형 없이 직접 색 덮어쓰기 금지 — theme token으로만 커스터마이징
- 버튼/폼 크기를 임의 변경 금지 — small/default/large 3단계만
모션 — Ant Motion 기반. 기본 200~300ms ease-in-out. 페이지 전환은 slide/fade 중 선택. 과도한 모션은 기업 UI에 부적합.
접근성
기본 접근성 지원. aria 레이블 제공. WCAG AA 부분 준수.
자주 묻는 질문
Ant Design이란 무엇인가요?
엔터프라이즈급 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 제품 등이 있습니다.