[개발 표준 수립] UI 라이브러리 선정

AS-IS

24년 신규 프로젝트 : Material UI

 

 

요구사항

향후 신규 개발 또는 개편될 사내 시스템 및 대외 시스템에 공통으로 적용할 UI 라이브러리 선정.

대용량 데이터(ex. AMS: 자산 관리 시스템)를 노출시켜야 할 경우가 있기 때문에 이에 적합한지 퍼포먼스 확인 필요.

24년 신규 프로젝트건에 대하여, 기존에 없던 테이블 Drag Sort 기능이 추가됨. 해당 UI 지원 가능 여부 확인 필요.

 

 

React UI 라이브러리 비교

🔗 npm trends

 

	디자인 템플릿	디자인 자유도	사용 편의성
Bootstrap	△	△	△
Tailwind	△	○	△
Material UI	○	○	△
Ant Design	○	△	○

❗️ Bootstrap, tailwindCSS는 CSS 프레임워크로, 컴포넌트를 직접 디자인 해야하기 때문에 백오피스 개발에 적합하지 않다고 판단하여 후보에서 제외

 

 

UI 라이브러리 최종 후보

• Material UI (MUI)
  • https://mui.com/
• Ant Design (Ant D)
  • https://ant.design/

 

 

MUI

• 구글 Material Design 베이스
• React 기반 UI 라이브러리 중 가장 큰 커뮤니티 (npm trends)
• Drag Sort 사용시 Pro 라이센스 필요 (라이센스)

Pro 라이센스는 개발자당 1개 필요

• Transfer, Cascader 등의 컴포넌트는 별도의 써드파티 라이브러리를 사용해야함
• React와 높은 호환성
• styled-components와 호환이 좋음
• 컴포넌트가 무거운(복잡한)편
  • Material Design Guide를 준수하기 위해 컴포넌트가 무겁고 복잡하게 구성되어있음.
    • ex) TextBox 하나를 표현할 경우, 최소 3~5개의 HTML element 사용, 여러 개의 CSS 요소와 애니메이션, JavaScript 이벤트가 실행됨
  • 소규모 웹 어플리케이션에는 적합하나, 한 화면에 수백건의 데이터를 관리해야할 경우 적합하지 않음

공식 문서 Basic Table 소스 코드 (MUI)

• 공식 문서상의 가장 기본 Table 컴포넌트를 뜯어보면, 설정할 수 있는 옵션이 많기 때문에 row 하나에도 상당히 많은 내용이 담겨있는걸 확인할 수 있다.

 

 

Ant Design

• 알리바바 그룹에서 개발한 UI 프레임워크 (중국)
• React와 TypeScript 기반
• 기본 라이센스에서 Transfer, Cascader, Rate 등 다양한 컴포넌트 지원
• Less 기반. styled-components와 호환이 좋지 않음
  • 신규서비스에서 styled-components 사용하지 않을 예정이나 타 프로젝트에서의 사용 여부 판단 필요
  • 백오피스에서 styled-components를 사용할 정도로 디자인을 복잡하게 구현할 가능성이 있는가?

• MUI보다 상대적으로 가볍기 때문에 중대규모 웹 어플리케이션에 적합

공식 문서 Basic Table 소스 코드 (Ant Design)

• Mui와 마찬가지로 기본 Table 컴포넌트를 뜯어보았다. row의 내용을 보면 보통 우리가 생각하는 방식의 직관적인 내용으로 작성되어있으며, 상대적으로 가벼운 것을 확인할 수 있다.