[Vue.js] Ant Design Vue(antd) 활용하기

• 1. Antd란?

• 2. Antd 의 장단점

• 장점

• 단점

• 3. 예제

• 설치

• 설정

• 예제 컴포넌트

• 4. 다양한 태그

• 5. 마무리

오늘은 Vue 를 개발할 때 유용한 UI 프레임워크인 "Ant Design Vue(antd)" 에 대해 소개하려고 합니다. 실무에서 자주 쓰이는 antd의 특징과 사용법, 주요 태그를 알아보겠습니다.

---

1. Antd란?

Ant Design Vue는 Ant Design(React 기반)의 Vue 버전으로, 엔터프라이즈급 웹 애플리케이션을 빠르게 구축할 수 있게 해주는 UI 프레임워크입니다. UI 프레임워크는 스타일링과 컴포넌트를 미리 제공해 개발 속도를 높이고, 일관된 디자인을 유지하게 도와줍니다. antd는 특히 관리자 대시보드나 복잡한 UI를 다룰 때 강력합니다.

---

2. Antd 의 장단점

장점

• 풍부한 컴포넌트 : 버튼, 테이블, 폼 등 50개 이상의 고품질 컴포넌트 제공
• TypeScript 지원 : Vue 와 TS 에 최적화되어 타입 안정성 보장
• 커스터마이징 쉬움 : Less 기반으로 테마 변경 가능, 스타일 오버라이드도 간편
• 국제화 : 다국어(i18n) 지원 내장
• 커뮤니티와 문서 : 활발한 커뮤니티와 상세한 공식 문서

단점

• 번들 크기 : 모든 컴포넌트를 가져오면 번들이 커질 수 있음(필요시 Tree Shaking 필요)
• 학습 곡선 : 처음 사용할 때 다양한 옵션과 설정에 적응 필요
• CSS 충돌 가능성 : 외부 스타일과 겹칠 경우 :deep() 같은 조정 필요

---

3. 예제

설치

npm install ant-design-vue

• 먼저 프로젝트에 antd를 설치합니다.

 

설정

// src/main.ts
import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css'; // CSS 리셋 포함 (4.x 기준)
import App from './App.vue';

const app = createApp(App);
app.use(Antd);
app.mount('#app');

• main.ts 에서 antd를 전역으로 등록하거나, 필요한 컴포넌트만 불러옵니다.

 

예제 컴포넌트

<!-- src/components/HelloAntd.vue -->
<template>
  <div>
    <a-button type="primary" @click="showModal">모달 열기</a-button>
    <a-modal v-model:open="visible" title="안녕하세요!" @ok="handleOk">
      <p>Vue 3와 antd로 만든 모달입니다.</p>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const visible = ref(false);

const showModal = () => {
  visible.value = true;
};

const handleOk = () => {
  visible.value = false;
};
</script>

<style scoped>
/* 필요 시 스타일 추가 */
</style>

• <a-button> 으로 버튼을 만들고, 클릭 시 <a-model> 을 띄웁니다. v-model:open 으로 상태를 제어하며, TS로 타입 안정성을 유지합니다.

---

4. 다양한 태그

antd는 다양한 컴포넌트를 제공합니다. 주요 태그 몇 가지를 소개하겠습니다.

• 레이아웃
  • <a-layout>, <a-row>, <a-col> : 그리드 시스템
• 입력
  • <a-input> : 텍스트 입력
  • <a-form> : 폼 관리
  • <a-select> : 드랍다운 선택
• 네비게이션
  • <a-menu> : 사이드바 메뉴
  • <a-breadcrumb> : 경로 표시
• 데이터 표시
  • <a-table> : 테이블
  • <a-card> : 카드 UI
• 피드백
  • <a-modal> : 모달 참
  • <a-notification> : 알림
• 기타
  • <a-button> : 버튼
  • <a-tag> : 태그 표시

더 많은 컴포넌트는 공식 문서에서 확인할 수 있습니다.

---

5. 마무리

Ant Design Vue 는 Vue + TS 환경에서 생산성과 디자인 품질을 높여주는 훌륭한 도구입니다. 익숙해진다면 빠르게 UI를 구축할 수 있습니다.

감사합니다.