스타일 · Ant Design

Ant Design

기업용 화면에 강한, 완성도 높은 React UI 컴포넌트 라이브러리입니다. 표·폼·날짜선택 같은 업무 화면 부품이 풍부하고, 설치해서 바로 가져다 씁니다.

한 줄로

Ant Design? 은 이미 만들어진 컴포넌트? 묶음을 npm 으로 설치하고 import 해서 쓰는 설치형 라이브러리입니다. 버튼·표·폼처럼 자주 쓰는 부품이 잘 갖춰져 있어 업무 화면을 빠르게 만들 수 있어요.

Ant Design은 "조립 완성된 가구 세트"입니다. 책상·의자(컴포넌트)를 사 와서 방에 놓기만 하면 됩니다. 대신 색·손잡이를 마음대로 바꾸려면 정해진 옵션(테마) 안에서만 가능해요.
왜 / 어디에 쓰나
  • 업무용 화면 — 표(Table)·폼(Form)·날짜선택 등 관리자 화면 부품이 풍부
  • 빠른 개발 — 설치 후 import 만 하면 바로 동작
  • 일관된 디자인 — 정해진 디자인 시스템으로 통일감 있는 화면
  • 한계 — 세밀한 디자인 변경은 제한적(테마 옵션 범위 안에서)

React 컴포넌트로 사용 예

설치 후 필요한 컴포넌트를 import 해서 JSX? 안에 그대로 씁니다. 값은 props? 로 넘겨요.

import { Button, Table } from "antd"

function UserList({ rows }) {
  const columns = [
    { title: "이름", dataIndex: "name" },
    { title: "이메일", dataIndex: "email" },
  ]
  return (
    <>
      <Button type="primary">추가</Button>
      <Table columns={columns} dataSource={rows} rowKey="id" />
    </>
  )
}

Shadcn UI와 비교

같은 "UI 컴포넌트 모음"이지만 쓰는 방식이 정반대입니다.

구분Ant Design (설치형)Shadcn UI (복사형)
가져오는 법npm install 후 import컴포넌트 코드를 내 프로젝트로 복사
코드 소유라이브러리 안에 숨어 있음내 코드라 자유롭게 수정
커스터마이즈테마 옵션 범위 안에서코드를 직접 고쳐 무엇이든
스타일 방식자체 스타일 시스템Tailwind 기반
부품 수매우 풍부(표·폼 강력)필요한 것만 골라 추가
이 프로젝트와의 관계

이 프로젝트의 프론트엔드는 Ant Design이 아니라 복사형인 Shadcn UI(+ Tailwind)를 사용합니다. Ant Design은 "설치형은 이런 느낌"이라는 비교 대상으로 알아 두면 좋아요.

다음 단계