UI library 비교 #3

hyoseok0 · 2021-05-28T02:31:46Z

특징
- HTML 만 편집하여 유지 관리 가능한 인터페이스를 구축 용이
- breadcrumb, navigation, card,pagination 등 다양한 UI 구성요소 제공
- 무료 템플릿 제공
- HTML 및 JavaScript 구성 요소 포함
장점
- 강력한 반응 형 디자인
  - 부트 스트랩은 그리드 시스템을 사용하여 반응 형 디자인을 강화
  - 사용하기 쉽고 모든 브라우저에서 잘 작동하는 반응 형 그리드를 빠르게 만들 수 있다.
- 기본 제공 리소스 라이브러리
  - 웹 사이트 레이아웃, 웹 사이트 템플릿, Bootstrap 테마, 관리자 패널 및 방대한 UI 구성 요소 컬렉션과 같은 프런트 엔드 개발자를위한 대규모 라이브러리를 제공
- 신속한 프로토 타입 제작
  - 즉시 사용 가능한 구성 요소를 사용 가능
- 변수 및 믹스 인, 반응 형 그리드 시스템, 풍부한 구성 요소 및 기타 여러 강력한 도구를 사용하여 쉽게 프로토 타입을 만들 수 있다.
단점
- 재정의하기 어려움
  - 매우 구체적인 디자인과 모양을 제공하므로 다른 스타일을 사용하려는 경우 재정의하기가 어렵다
- 남용
  - 너무 과도하게 사용되어 모든 부트 스트랩 웹 사이트가 똑같이 보인다
- 포함 할 내용이 많음
  - 다른 프레임 워크만큼 가볍거나 모듈 식은 아니다

특징
- 미리 만들어진 구성 요소 나 특정 디자인 언어가 함께 제공되지 않음
- 유틸리티 클래스를 사용하여 처음부터 모든 것을 구축 필요
- 처음 인 경우 학습 곡선이 더 높다. 그러나 대형 스타일 시트에서 흔히 볼 수있는 재정의 문제를 방지 가능
- 템플릿 예시 : https://tailwindcomponents.com/component/dashboard-template
장점
- 용이한 사용자 정의
- 고유한 아이덴티티로 맞춤형 디자인을 구현 가능
- 유틸리티 클래스
- 미리 스타일이 지정된 UI 구성 요소 대신 Tailwind는 사용자 지정 웹 사이트에 대한 진정한 감각을 구축 할 수있는 유틸리티 클래스에 중점
단점
- 가파른 학습 곡선
- 미리 만들어진 구성 요소를 제공하지 않으므로 프런트 엔드 기술의 작동 방식을 완전히 이해해야한다.
참고
- built-in component 는 없지만, https://www.tailwind-kit.com/ 이나 https://tailblocks.cc/ 에서 컴포넌트 지원
성능개선 관련글
- tailwindcss/utilities 관련 속도 이슈
  - Slow compile when using @apply tailwindlabs/tailwindcss#443
- tailwindcss 빌드 성능개선
  - Tailwind 2.0 poor performance as part of a webpack PostCSS build system tailwindlabs/tailwindcss#2820
  - https://nystudio107.com/blog/speeding-up-tailwind-css-builds

특징
- 알리바바 그룹에서 개발한 UI 프레임워크
- React Componet 기반으로 하는 UI 구성요소 (angular, Vue 지원)
장점
- 깔끔하고 예쁜 디자인
  - 디자인 가이드라인과 리소스, 스케치 툴박스까지 제공한다.
- A부터 Z까지
  - 대략 60개의 component 제공
  - 기본적인 form, button, table 뿐만 아니라 transfer, rate, cascader, skeleton 등 다른 라이브러리에서 쉽게 볼 수 없는 컴포넌트들을 제공한다.
- 컴포넌트 자체도 많지만 하나의 컴포넌트마다 이를 변형하는 다양한 예제를 제공하기 때문에 UX적으로 선택의 폭도 넓어진다.
- 또한 레이아웃을 제공하기 때문에 디자인이 없더라도 손쉽게 개발을 시작할 수 있고 자세한 API가 제공되기 때문에 초보자들도 쉽고 빠르게 사용이 가능
단점
- 언어의 장벽
  - 사이트나 공식 문서 등은 영어도 지원을 하지만 github issue에서는 중국어가 자주 등장하여 어려움 (문서와 예제는 자세히 되어 있어 적용에는 문제없어 보임)
사용자 정의
- 기본 색상, 테두리 색상/반경 등 브랜드 요구사항에 맞게 UI 수정 가능

Provide feedback