[5.7.2 버전]

Antd Design (antd)

중국에서 만든 react 베이스 UI 라이브러리이다. 효율적이고 재미있게 UI를 꾸며준다. Ant Design은 사용자 인터페이스를 개발하는 데 도움이 되는 다양한 UI 컴포넌트와 디자인 패턴을 제공하여 개발자들이 보다 쉽고 빠르게 웹 애플리케이션을 구축할 수 있도록 지원한다. 또한 여타 대부분의 다른 UI 라이브러리는 예시를 제시할 때 js 형태 하나만 제시하지만 antd는 typescript 형태도 지원해준다.

개요

각각의 UI라이브러리들은 그들의 디자인에 대한 철학이 담겨있다. 색상들의 톤, 레이아웃의 규격, 폰트 등 다양한 패턴들이 있다. 개발자들은 UI 라이브러리를 적용하기 전, 이들의 디자인 철학을 잘 살피고 자신의 프로젝트와 어떤 라이브러리가 어울릴지 잘 고려해야한다.

libaray간 상호작용하는 library들이 있다. 또한 Antd Design은 원래는 moment를 사용했었다. 하지만 트렌드에 맞춰 dayjs, date-fns 를 지원하고, 이들을 권장한다. typescript에서 이 라이브러리들의 type을 사용할 수 있다.

설치

1. npm 설치
   npm i antd 를 진행한다.

2. App.css 파일 내에 공식 css파일을 import 해주어야 했지만, 5버전 부터는 필요하지 않다.

사용하고 싶은 UI 컴포넌트를 입력하면 대부분 자동완성으로 import 할 수 있다. 이를 이용해 빠른 개발을 진행한다.

특징

• 일관성
  antd 컴포넌트들은 일관된 디자인 패턴을 따르므로, 개발자들은 일관된 UI를 빠르게 습득하고 이를 응용할 수 있다. 또한 이러한 컴포넌트들은 재사용성이 높아 개발 시간을 단축할 수 있다.

• 커스터마이징
  antd는 커스터마이징 가능한 테마 시스템을 제공한다. 이를 통해 개발자는 자유롭게 색상, 글꼴, 레이아웃 등을 조정하여 애플리케이션을 디자인할 수 있다.

• 기능과 디자인의 융합
  antd는 기능적으로 유용한 컴포넌트와 동시에 시각적으로 매력적인 디자인을 제공한다. 뛰어난 기능성과 사용자 경험을 제공하면서도 현대적인 디자인을 갖추고 있다.

• 반응형 디자인
  모바일부터 데스크톱까지 다양한 화면 크기와 장치에 맞게 자동으로 반응한다. 이를 통해 사용자 경험이 일관되게 유지된다.

• 다국어 지원
  다국어 지원을 위한 메커니즘이 내장되어 있어서, 글로벌한 애플리케이션을 개발할 때 유용하다.