Ant Design 테마 커스터마이징 완전정복 – 토큰 시스템으로 나만의 스타일 만들기

 

 

Ant Design v5부터는 기존 Less 기반 커스터마이징 방식에서 CSS-in-JS 기반의 Token 시스템으로 바뀌었습니다.
이제는 JavaScript 코드 안에서 직접 테마를 설정하고, 전역 스타일을 간편하게 커스터마이징할 수 있습니다.

이번 포스팅에서는 색상, 폰트, 라운딩 등 핵심 스타일을 어떻게 내 맘대로 바꾸는지 정리해볼게요!

---

 

✅ 테마 커스터마이징 기본 구조

npm install antd

import { ConfigProvider, theme } from 'antd';

const customTheme = {
  token: {
    colorPrimary: '#FF6F61',
    borderRadius: 8,
    fontFamily: 'Pretendard, sans-serif',
  },
};

function App() {
  return (
    <ConfigProvider theme={customTheme}>
      <MyComponent />
    </ConfigProvider>
  );
}

 

---

 

🎯 주요 Token 목록

Token 이름	설명	예시 값
colorPrimary	주요 색상	#1976d2
borderRadius	기본 라운딩 값	8
fontFamily	전체 폰트 설정	'Pretendard, sans-serif'
colorBgContainer	배경색	#f9f9f9

 

더 많은 토큰은 공식 문서에서 확인 가능:
https://ant.design/theme-editor

---

 

💡 특정 컴포넌트 스타일만 커스터마이징하기

const theme = {
  components: {
    Button: {
      colorPrimary: '#4ECDC4',
      borderRadius: 12,
    },
    Input: {
      borderRadius: 6,
    },
  },
};

 

---

 

📌 다크모드 설정도 간단하게

import { theme } from 'antd';

<ConfigProvider theme={{ algorithm: theme.darkAlgorithm }}>
  <App />
</ConfigProvider>

💡 theme.darkAlgorithm 또는 theme.defaultAlgorithm 중 선택 가능!

 

---

 

🧠 실무 팁

• ConfigProvider는 앱 루트에 한 번만 적용
• 디자인 시스템처럼 토큰 기반으로 관리하면 브랜드 UI 유지에 매우 효과적
• MUI와 달리 CSS-in-JS와 함께 Less 기반도 병행 가능함 (단, v5부터는 토큰 추천)