안녕하세요. 일루넥스 개발팀 퍼블리셔 이수현입니다.
리액트 UI 라이브러리라 하면 주로 Bootstrap, Material-UI, Semantic UI를 많이 사용합니다.
하지만 일루넥스에서는 주로 antd라는 라이브러리를 사용합니다.
디자인 자체가 Ant Design을 기반으로 작업되었기 때문에 자연스레 라이브러리 또한 antd 라이브러리를 사용하게 되었습니다.
1년 반동안 4개의 프로젝트에서 사용한 경험을 바탕으로 이제는 저희 회사에서 빼놓을 수 없는 antd를 소개해보려고 합니다.
1. Antd의 장점
1.1 깔끔하고 예쁜 디자인
일루넥스가 antd를 포기하지 못하는, 못했던 이유는 디자인이었습니다.
antd는 구글의 Material Design과 같이 antd만의 디자인 매뉴얼이 있습니다.
antd의 디자인 매뉴얼인 Ant Design은 디자인 가이드라인과 리소스, 스케치 툴박스까지 제공합니다.
Ant Design은 투박하지 않게 깔끔하고 세련된 디자인이면서 웹과 모바일을 동시에 충족시키는 디자인입니다.
저는 특히 Ant Design의 컬러 구성을 좋아합니다.
자연스럽고 오래 봐도 질리지 않는 컬러 모델을 제공하기 때문에 antd를 사용하지 않더라도 컬러 구성을 사용할 때가 종종 있습니다.
1.2. A부터 Z까지
antd에는 대략 60개의 component가 있습니다.
기본적인 form, button, table 뿐만 아니라 transfer, rate, cascader, skeleton 등 다른 라이브러리에서 쉽게 볼 수 없는 컴포넌트들을 제공합니다.
컴포넌트 자체도 많지만 하나의 컴포넌트마다 이를 변형하는 다양한 예제를 제공하기 때문에 UX적으로 선택의 폭도 넓어집니다.
또한 레이아웃을 제공하기 때문에 디자인이 없더라도 손쉽게 개발을 시작할 수 있고 자세한 API가 제공되기 때문에 퍼블리셔나 초보자들도 쉽고 빠르게 사용이 가능합니다.
2. Antd의 단점
2.1 언어의 장벽
antd는 Ant Financial이 제공하는 라이브러리입니다.
Ant Financial은 알리바바 그룹의 자회사로 핀테크 기술을 개발하는 곳입니다. 그렇기 때문에 antd의 기본 언어는 중국어입니다.
사이트나 공식 문서 등은 영어도 지원을 하지만 github issue에서는 중국어가 자주 등장하여 어려움이 있습니다.
2.2 정보의 부족
한국에서는 아직 antd를 쓰는 곳이 얼마 없는지 검색하면 한국어로 적힌 정보가 거의 전무합니다.
영어로 검색하더라도 많이 쓰이는 다른 라이브러리와 비교했을 때 결과가 많이 차이 납니다.
이러한 단점이 antd를 벗어나 다른 라이브러리를 쓰게 된 가장 큰 이유였습니다.
결론
확실히 디자인에 많은 투자를 하지 않고 완성도 높은 관리자 페이지를 개발하고 싶다면 antd만큼 좋은 선택은 없다고 생각이 듭니다.
웹과 모바일의 컴포넌트를 전부 지원하고 레이아웃과 다양한 컴포넌트, 이미 완벽하게 잡혀있는 디자인적 원칙들과 UX까지 제공하기 때문입니다.
하지만 이미 디자인이 있고 컴포넌트의 변형과 css의 custom이 많아진다면 antd를 선택하기엔 신중한 고민이 필요할 것입니다.
