Vue UI Framework 비교

Vue.js 생태계 UI 프레임워크가 열댓가지가 되는데, 지금까지 내가 쓰던 것은 iview(버전이 4.x로 올라가면서 이름을 vue-design으로 변경했다) 하나 뿐이다. Material UI를 구현한 vuetify가 많이 쓰이지만, ant design쪽 보다 지원하는 컴포넌트가 적다. 쓸 마음이 없다. 그래서 이번 프로젝트에도 ant design 구현체 중에 하나를 쓰기로 했는데, 아래 3개 중에 뭘 쓸까 하다가 이번에 정리했다. 

구분	Ant Design Vue	vue-design(iview)	Element
Web Site	https://www.antdv.com/	https://www.iviewui.com/	https://element.eleme.io/
GitHub	https://github.com/vueComponent/ant-design-vue	https://github.com/view-design/ViewUI	https://github.com/view-design/ViewUI
License	MIT	MIT	MIT
Language	44	31	52
Tag Style	<a-*>	TitleCase (ex: <Button>,  <DatePicker>)	<el-*>
Icon	약 331	약 450(white/black 하나로 계산)주1)	약 280
Theme Language	LESS	LESS	SCSS
Theme CLI	No	Yes	Yes
Components	57	57	57
IntelliJ Plugin	No	No	Yes
종합

주1) ionicons v3.0 아이콘

 

1. SCSS보다는 LESS가 설치할 때 안전하다. 문법은 SCSS스타일을 좋아하지만 개빡친 경험이 있어서 가능한 SCSS는 안 쓰려고 한다.

 

2. vue-design은 태그 스타일이 <Button>처럼 TitleCase인데, 이게 HTML 표준태그와 같을 때 대소문자와 속성 때문에 PyCharm에서 오류로 표시한다. Element는 플러그인이 있는데, 아쉽게도 vue-design이나 Ant Design Vue는 플러그인이 없다.

 

3. 다국어 지원의 경우 Element가 무려 52개를 지원하는데, vue-design만으로도 왠만한 언어는 처리할 수 있다. 삼성전자 갤럭시 S나 Note같은 플래그쉽 모델 언어의 매뉴얼도 약 40여가지를 지원한다. 최근 몇 년간 미얀마어 같은 언어를 지원하면서 더 늘었을 수는 있지만... Ant Design Vue는 왜 locale 파일을 컴포넌트별로 쪼개놨는지 알 수가 없다. DatePicker에 대한 다국어 파일 따로, Pagination 컴포넌트에 대한 다국어 파일 따로, 이런 식이다. vue-design은 언어당 js 파일이 하나 뿐이라 확인하기 쉽다.

 

4. 아이콘은 vue-design이 압도적으로 많다. ionicons를 사용하기 때문이다. Ant Design Vue은 3가지 아이콘 테마를 지원하는데 Two Tone은 이쁘지가 않다. 그리고 Outline과 Filled테마는 사실 한 쌍으로 있어야 UI 효과 만들 때 편리하다. 이런 점에서 역시 vue-design이 낫다.