vue UI라이브러리 Vuetify vs. Quasar ( vs BootstrapVue) 사용해본 장단점 및 느낀점 비교
Vuetify 기반 개발 경험이 있어서 그런지 vuetify가 개인적으로 뭔가 더 익숙하지만 개인 프로젝트를 할 때에는 다른 UI프레임워크도 한번 써보고싶어서 ( + 그 당시에는 vuetify가 vue3을 지원을 안해서 ) 대체 라이브러리를 찾던 중에 Quasar를 사용해봤다. Vuetify보다는 좀 더 얕게 공부하고 사용한 느낌이지만 그래도 둘 다 사용해보면서 느낀점과 이와 관련해 좋은 글이 있어서 중요한부분만 참고해서 번역을 함께 공유:-)
Quasar vs. Vutify vs. Bootstrap Vue: Choosing the Right Vue.js UI Library
Insight to determine the best UI library for your Vue project
blog.bitsrc.io
Vuetify
개발자가 더 나은 UX를 제공할 수 있도록 재사용이 가능한 컴포넌트 집합이다. 거의 모든 브라우저를 지원하며, 다양한 종류의 앱(웹앱, 모바일 앱, 데스크톱 앱)을 위한 템플릿도 제공한다. 또한 동적 레이아웃과 사용자의 커스터마이징을 위한 SASS변수도 제공한다.
장점
- 재사용 가능한 컴포넌트
- 미적감각이 없는 개발자도 예쁜 앱 만들게 해줌
- 다양한 컴포넌트
- 브라우저 호환성
- Material 디자인
- 대규모 커뮤니티및 문서
- 지속적인 업데이트
단점
- Material 디자인 표준이 엄격하다고 느껴질 수 있음
- 까다로운 커스터마이징
Quasar
Vue를 위한 UI라이브러리, 프레임워크를 위한 오픈소스인 퀘이사는 빠르게 SPA, PWA, SSR 사이트를 개발할 수 있도록 도와준다. 그 외에도, 모바일이나 데스크탑을 위한 사이트도 물론 만들 수 있다. 또한 CLI 및 UI 구성 요소를 제공하면서 모든 웹, 모바일 및 데스크탑 솔루션을 위한 싱글 코드 기반임을 강조하고 있다. 그리고 코딩 표준방식을 따르는 프레임워크로도 잘 알려져있는데, 즉 디폴트코드를 제공하기 때문에 별도의 설정을 해줄 필요가 없다.
장점
- 고성능 및 반응형을 갖춘 웹 구성 요소
- 통합 모범 사례
- 대규모 커뮤니티 및 문서
- Material 2.0 디자인
- RTL 지원
- 높은 보안
- 기존 프로젝트의 마이그레이션 용이
단점
- Quasar는 한명이 개발했기때문에 향후 유지보수에 문제가 있을 수도 있음. (라고 원문에서 하는데, 사이트에 들어가보면 팀원 소개가 있다)
Bootstrap Vue
부트스트랩은 가장 유명한 프론트엔드 프레임워크인데, Vue용으로 bootstrap이 개발되었다. 85개 이상의 컴포넌트, 45개 이상의 플러그인, 디렉티브, 테마, 1100개가 넘는 아이콘이 있다. Bootstrpa Vue에는 bootstrap4 구성요소 및 그리드 시스템 구현이 포함되어 있다. 또한 일반 부트스트랩 요소를 Vue 구성요소로 사용할 수도 있다.
장점
- 모바일 우선 반응형 레이아웃
- 빠르고 쉬운 스타일링
- 특정 컴포넌트, 그룹, 디렉티브만 import할 수 있다.
- 자동 WAI-ARIA 접근성 마크업
- bootstrap의 최신기능 업데이트
- SCSS 변수와 전역옵션으로 테마 생성
- 대규모 커뮤니티 및 문서
단점
- 더 까다로운 커스터마이징
라이브러리 비교
우선 npm 트렌드 통계를 보면 다음과 같다.
위의 그래프는 지난 1년동안 npm 각 다운로드 수이다. 확실히 Quasar에 비해 Vuetify와 BootstrapVue가 월등히 많이 다운로드 되었고, 1~2위는 계속 바뀌고 있다.
하지만 Github의 star와 관련해서는 다른 결과를 보인다. Vuetify는 여전히 높은 결과를 보여주지만, BootstrapVue는 1~2위를 다투던 다운로드 수와는 달리 star에서는 많이 모자란 수치이다.
그리고 Vuetify의 1위 굳히기(?)로,
vuetify 사이트에서 이렇게 어필을 하고 있다. 해당 표를 보면, 확실히 지원되는 것이 다른 사이트보다는 많아보인다. 대규모 프로젝트와 관련해서 고려해야할 고급기능들을 지원하고 있는 것 같다.
위에 언급한것 외에 비교할 수 있는 장점을 개인적으로 추가하자면,
vuetify가 사이트가 더 예쁘고 컴포넌트들을 따로 커스터마이징 없이 사용할 거라면 각 컴포넌트들의 디폴트 디자인들이 더 맘에 들었다. 그리고 각 컴포넌트에서 제공하는 API가 좀 더 다양한 느낌이었다.
quasar는 , API 정리가 잘 되어있어서 필요한 props만 빠르게 찾아서 적용할 수 있었다. 그리고 vuetify의 컴포넌트들보다 quasar의 컴포넌트가 더 다양했다. (quasar에 없는 컴포넌트가 vuetify에는 있는 것도 있겠지만!)
bootstrapVue는 직접 써보진 않았지만 기존 bootstrap을 사용해본 적이 있다면 익숙하게 사용할 수 있을 것 같다.