왜 Google material design을 놔두고 Ant Design을 쓸까?

React UI 라이브러리는 정말 다양하다. UI 라이브러리를 접한 개발자들은 Bootstrap, Material-UI, semantic UI를 들어봤을 것이다. 위의 라이브러리에 대한 정보는 많지만 Ant Financial의 Antd는 흔치 않을 것으로 생각한다. 보통 커뮤니티가 큰 Material-UI를 쓰는 것이 일반적이겠지만 아래의 장점 때문에 이번 작업을 하면서 antd를 쓰게 되었다.

장점

• 처음 배운다면 Antd가 Material-UI보다 빠르게 배울 수 있다.
• Material-UI처럼 디자인 메뉴얼이 있고 이 틀만 잘 따라온다면 실패 없는 작업물이 나온다.
• Transfer, rate, cascade 등 다른 라이브러리에서 쉽게 볼 수 없는 컴포넌트를 지원한다.
• 디자인 자체가 직선으로 이루어져서 깔끔한 웹, 모바일을 만드는 데 적합하다.
• 컬러 구성이 모던하고 하나의 컴포넌트마다 변형시킬 수 있는 다양한 예제가 많아서 UX 폭도 넓어진다.
• 레이아웃을 제공하기 때문에 완성도 있는 작업이 가능하다.

주저리주저리 적었지만 한 문장으로 요약하자면 ‘쉽게 배우고 전문가인 척 만들기엔 딱 좋다!’ 로 할 수 있다.

단점

하지만 Antd는 이에 못지않은 단점도 있다.

• Ant Financial은 알리바바 그룹의 자회사다. 그 말은 곧 기본 언어는 중국어이다. 물론 영어로 바꿀 수 있지만
  번역의 도움이 필요한 곳은 파파고가 없으면 안 된다..
• 한국어로 된 자료가 부족하다. 하나의 라이브러리가 커지기 위해선 커뮤니티 성장이 필수인데 계속해서 정체되어 있다. 이 점은 큰 단점으로 보인다. 정보를 찾고 싶어도 찾을 수가 없으니….
• 많은 것을 제공하는 만큼 용량이 크다.
• Less 기반이라 styled-compoents와 호환이 별로다. Styled-components로 일일이 오버라이딩하는데 이렇게 작업하면 더 비효율적인 것 같다. 같은 일을 여러 번 한다. Styled-components는 호환이 좋다고 소문난 Material-UI를 쓰는 것이 낫다고 한다. 하지만 난 이번 작업엔 Styled-components를 쓰지 않아서 패스.
• 이벤트 외의 이벤트를 사용하기 위해 div를 사용하여 감싸주는데 이것도 비효율적인 것 같다.

설치 방법

$ yarn add antd

or

npm install antd --save

불어오는 방법은 다음과 같다.

import 'and/dis/antd.css';

자세한 건 공식 페이지에서!
Ant Design